[CL-294] Make section-header work across clients (#9386)

libs/components/src/section/section.mdx

@@ -0,0 +1,89 @@
+import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
+
+import * as stories from "./section.stories";
+
+<Meta of={stories} />
+
+```ts
+import { SectionComponent, SectionHeaderComponent } from "@bitwarden/components";
+```
+
+# Section
+
+Sections are simple containers that apply a responsive bottom margin and utilize the semantic
+`section` HTML element.
+
+<Canvas>
+  <Story of={stories.Default} />
+</Canvas>
+
+## Section Header
+
+Sections often contain a heading. Use `bit-section-header` inside of the `bit-section`.
+
+```html
+<bit-section>
+  <bit-section-header>
+    <h1 bitTypography="h1">I'm a section header</h2>
+  </bit-section-header>
+  <div>Section content here!</div>
+</bit-section>
+```
+
+### Section Header Padding
+
+When placed inside of a section with a `bit-card` or `bit-item` as the immediate next sibling (or
+nested in the immediate next sibling), the section header will automatically apply bottom and x-axis
+padding to align the header with the border radius of the card/item.
+
+```html
+<bit-section>
+  <bit-section-header>
+    <h2 bitTypography="h6">I'm a section header</h2>
+    <button bitIconButton="bwi-star" size="small" slot="end"></button>
+  </bit-section-header>
+  <bit-card>
+    <h3 bitTypography="h3">I'm card content</h3>
+  </bit-card>
+</bit-section>
+```
+
+<Canvas>
+  <Story of={stories.HeaderWithPadding} />
+</Canvas>
+
+If placed inside of a section without a `bit-card` or `bit-item`, or with a `bit-card`/`bit-item`
+that is not a descendant of the immediate next sibling, the padding is not applied.
+
+<Canvas>
+  <Story of={stories.HeaderWithoutPadding} />
+</Canvas>
+
+### Section Header Content Slots
+
+`bit-section-header` contains the following slots to help position the content:
+
+| Slot         | Description                     |
+| ------------ | ------------------------------- |
+| default      | title text of the header        |
+| `slot="end"` | placed at the end of the header |
+
+#### Default slot
+
+Anything passed to the default slot will display as part of the title. The title should be a
+`bitTypography` element, usually an `h2` styled as an `h6`.
+
+Title suffixes (typically an icon or icon button) can be added as well. A gap is automatically
+applied between the children of the default slot.
+
+<Canvas>
+  <Story of={stories.HeaderVariants} />
+</Canvas>
+
+#### End slot
+
+The `end` slot will typically be used for text or an icon button.
+
+<Canvas>
+  <Story of={stories.HeaderEndSlotVariants} />
+</Canvas>