docs: replace h3 with h2 headings (#1452)

docs/src/components/ComponentApi.svelte

@@ -46,7 +46,7 @@
   </OutboundLink>
 </p>
 
-<h3 id="props">Props</h3>
+<h2 id="props">Props</h2>
 
 {#if component.props.length > 0}
   <div class="overflow">
@@ -128,7 +128,7 @@
   <p class="my-layout-01-03">No props.</p>
 {/if}
 
-<h3 id="typedefs">Typedefs</h3>
+<h2 id="typedefs">Typedefs</h2>
 
 {#if component.typedefs.length > 0}
   <CodeSnippet
@@ -141,7 +141,7 @@
   <p class="my-layout-01-03">No typedefs.</p>
 {/if}
 
-<h3 id="slots">Slots</h3>
+<h2 id="slots">Slots</h2>
 {#if component.slots.length > 0}
   <UnorderedList class="my-layout-01-03">
     {#each component.slots as slot (slot.name)}
@@ -152,7 +152,7 @@
   <p class="my-layout-01-03">No slots.</p>
 {/if}
 
-<h3 id="forwarded-events">Forwarded events</h3>
+<h2 id="forwarded-events">Forwarded events</h2>
 {#if forwarded_events.length > 0}
   <UnorderedList class="my-layout-01-03">
     {#each forwarded_events as event (event.name)}
@@ -163,7 +163,7 @@
   <p class="my-layout-01-03">No forwarded events.</p>
 {/if}
 
-<h3 id="dispatched-events">Dispatched events</h3>
+<h2 id="dispatched-events">Dispatched events</h2>
 
 {#if dispatched_events.length > 0}
   <UnorderedList class="my-layout-01-03">
@@ -175,7 +175,7 @@
   <p class="my-layout-01-03">No dispatched events.</p>
 {/if}
 
-<h3 id="rest-props">$$restProps</h3>
+<h2 id="rest-props">$$restProps</h2>
 
 <div class="my-layout-01-03">
   {#if component.rest_props}

docs/src/global.css

@@ -223,16 +223,8 @@ html[theme="g90"] .code-override {
   padding: 0 var(--cds-spacing-02);
 }
 
-.bx--col > h2 {
-  font-size: var(--cds-expressive-heading-05-font-size);
-  font-weight: var(--cds-expressive-heading-05-font-weight);
-  letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
-  line-height: var(--cds-expressive-heading-05-line-height);
-  padding-top: var(--cds-layout-03);
-  margin-bottom: var(--cds-layout-01);
-}
-
-.bx--col > h3 {
+[class*="bx--col"] > h2,
+.bx--tab-content > h2 {
   font-size: var(--cds-expressive-heading-04-font-size);
   font-weight: var(--cds-expressive-heading-04-font-weight);
   letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
@@ -251,6 +243,7 @@ html[theme="g90"] .code-override {
 }
 
 .bx--col > h2,
+.bx--tab-content > h2,
 .bx--col > h3,
 .bx--col > h4 {
   scroll-margin-top: 3rem;

docs/src/layouts/ComponentLayout.svelte

@@ -104,7 +104,7 @@
           <slot name="aside" />
         </div>
         <slot />
-        <h3 id="component-api">Component API</h3>
+        <h2 id="component-api">Component API</h2>
         <p>
           API documentation is
           <Link

docs/src/pages/components/Accordion.svx

@@ -10,7 +10,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <Accordion>
   <AccordionItem title="Natural Language Classifier">
@@ -25,7 +25,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   </AccordionItem>
 </Accordion>
 
-### Left-aligned chevron
+## Left-aligned chevron
 
 <Accordion align="start">
   <AccordionItem title="Natural Language Classifier">
@@ -40,7 +40,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   </AccordionItem>
 </Accordion>
 
-### Custom title slot
+## Custom title slot
 
 <Accordion>
   <AccordionItem>
@@ -67,7 +67,7 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   </AccordionItem>
 </Accordion>
 
-### First item open
+## First item open
 
 <Accordion>
   <AccordionItem open title="Natural Language Classifier">
@@ -82,13 +82,13 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   </AccordionItem>
 </Accordion>
 
-### Programmatic example
+## Programmatic example
 
 This example demonstrates how a list of items can be programmatically expanded and collapsed.
 
 <FileSource src="/framed/Accordion/ExpandableAccordion" />
 
-### Extra-large size
+## Extra-large size
 
 <Accordion size="xl">
   <AccordionItem title="Natural Language Classifier">
@@ -103,7 +103,7 @@ This example demonstrates how a list of items can be programmatically expanded a
   </AccordionItem>
 </Accordion>
 
-### Small size
+## Small size
 
 <Accordion size="sm">
   <AccordionItem title="Natural Language Classifier">
@@ -118,7 +118,7 @@ This example demonstrates how a list of items can be programmatically expanded a
   </AccordionItem>
 </Accordion>
 
-### Disabled
+## Disabled
 
 <Accordion disabled>
   <AccordionItem title="Natural Language Classifier">
@@ -133,7 +133,7 @@ This example demonstrates how a list of items can be programmatically expanded a
   </AccordionItem>
 </Accordion>
 
-### Disabled (item)
+## Disabled (item)
 
 <Accordion>
   <AccordionItem disabled title="Natural Language Classifier">
@@ -148,27 +148,27 @@ This example demonstrates how a list of items can be programmatically expanded a
   </AccordionItem>
 </Accordion>
 
-### Skeleton
+## Skeleton
 
 <Accordion skeleton />
 
-### Skeleton (left-aligned chevron)
+## Skeleton (left-aligned chevron)
 
 <Accordion skeleton align="start" />
 
-### Skeleton (custom count)
+## Skeleton (custom count)
 
 <Accordion skeleton count={3} />
 
-### Skeleton (closed)
+## Skeleton (closed)
 
 <Accordion skeleton open={false} />
 
-### Skeleton (extra-large)
+## Skeleton (extra-large)
 
 <Accordion skeleton size="xl" />
 
-### Skeleton (small)
+## Skeleton (small)
 
 <Accordion skeleton size="sm" />
 

docs/src/pages/components/AspectRatio.svx

@@ -7,61 +7,61 @@ The `AspectRatio` component is useful for constraining fluid content within an a
 
 Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
 
-### Default (2x1)
+## Default (2x1)
 
 <AspectRatio>
   2x1
 </AspectRatio>
 
-### Ratio 2x3
+## Ratio 2x3
 
 <AspectRatio ratio="2x3">
   2x3
 </AspectRatio>
 
-### Ratio 16x9
+## Ratio 16x9
 
 <AspectRatio ratio="16x9">
   16x9
 </AspectRatio>
 
-### Ratio 4x3
+## Ratio 4x3
 
 <AspectRatio ratio="4x3">
   4x3
 </AspectRatio>
 
-### Ratio 1x1
+## Ratio 1x1
 
 <AspectRatio ratio="1x1">
   1x1
 </AspectRatio>
 
-### Ratio 3x4
+## Ratio 3x4
 
 <AspectRatio ratio="3x4">
   3x4
 </AspectRatio>
 
-### Ratio 3x2
+## Ratio 3x2
 
 <AspectRatio ratio="3x2">
   3x2
 </AspectRatio>
 
-### Ratio 9x16
+## Ratio 9x16
 
 <AspectRatio ratio="9x16">
   9x16
 </AspectRatio>
 
-### Ratio 1x2
+## Ratio 1x2
 
 <AspectRatio ratio="1x2">
   1x2
 </AspectRatio>
 
-### Tile (16x9)
+## Tile (16x9)
 
 <AspectRatio ratio="16x9">
   <Tile style="height: 100%">Content</Tile>

docs/src/pages/components/Breadcrumb.svx

@@ -12,7 +12,7 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <Breadcrumb>
   <BreadcrumbItem href="/">Dashboard</BreadcrumbItem>
@@ -20,14 +20,14 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   <BreadcrumbItem href="/reports/2019" isCurrentPage>2019</BreadcrumbItem>
 </Breadcrumb>
 
-### No trailing slash
+## No trailing slash
 
 <Breadcrumb noTrailingSlash>
   <BreadcrumbItem href="/">Home</BreadcrumbItem>
   <BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
 </Breadcrumb>
 
-### Overflow menu
+## Overflow menu
 
 <Breadcrumb>
   <BreadcrumbItem href="/">Home</BreadcrumbItem>
@@ -41,10 +41,10 @@ components: ["Breadcrumb", "BreadcrumbItem"]
   <BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
 </Breadcrumb>
 
-### Breadcrumb trail
+## Breadcrumb trail
 
 <FileSource src="/framed/Breadcrumbs/Breadcrumbs" />
 
-### Skeleton
+## Skeleton
 
 <Breadcrumb noTrailingSlash skeleton count={3} />

docs/src/pages/components/Breakpoint.svx

@@ -18,7 +18,7 @@ The [Carbon Design System grid implementation](https://carbondesignsystem.com/gu
 
 This utility component uses the [Window.matchMedia API](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) to declaratively determine the current Carbon breakpoint size.
 
-### Default
+## Default
 
 Bind to the `size` prop to determine the current breakpoint size. Possible values include: `"sm" | "md" | "lg" | "xlg" | "max"`.
 
@@ -26,7 +26,7 @@ The `"on:change"` event will fire when the size is initially determined and when
 
 <FileSource src="/framed/Breakpoint/Breakpoint" />
 
-### Store and Breakpoint Values
+## Store and Breakpoint Values
 
 As an alternative to the component, `breakpointObserver` can be used to get the current size as a Svelte store. The store has two additional functions which create derived stores that return a `boolean` indicating whether the size is smaller/larger than a certain breakpoint.
 

docs/src/pages/components/Button.svx

@@ -8,31 +8,31 @@
   let index = 1;
 </script>
 
-### Primary button
+## Primary button
 
 <Button>Primary button</Button>
 
-### Secondary button
+## Secondary button
 
 <Button kind="secondary">Secondary button</Button>
 
-### Tertiary button
+## Tertiary button
 
 <Button kind="tertiary">Tertiary button</Button>
 
-### Ghost button
+## Ghost button
 
 <Button kind="ghost">Ghost button</Button>
 
-### Danger button
+## Danger button
 
 <Button kind="danger">Danger button</Button>
 
-### Danger tertiary button
+## Danger tertiary button
 
 <Button kind="danger-tertiary">Danger tertiary button</Button>
 
-### Danger tertiary, icon-only button
+## Danger tertiary, icon-only button
 
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
@@ -42,15 +42,15 @@
 
 <Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
 
-### Danger ghost button
+## Danger ghost button
 
 <Button kind="danger-ghost">Danger ghost button</Button>
 
-### Button with icon
+## Button with icon
 
 <Button icon={Add}>With icon</Button>
 
-### Icon-only button
+## Icon-only button
 
 <InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
   <div class="body-short-01">
@@ -60,35 +60,35 @@
 
 <Button iconDescription="Tooltip text" icon={Add} />
 
-### Icon-only, link button
+## Icon-only, link button
 
 <Button iconDescription="Login" icon={Login} href="#" />
 
-### Icon-only button (custom tooltip position)
+## Icon-only button (custom tooltip position)
 
 The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
 
 <Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />
 
-### Selected icon-only, ghost button
+## Selected icon-only, ghost button
 
 Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
 
 <FileSource src="/framed/Button/SelectedIconOnlyButton" />
 
-### Link button
+## Link button
 
 If an `href` value is specified, the component will render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) instead of a `button` element.
 
 <Button href="#">Link button</Button>
 
-### Custom element
+## Custom element
 
 <Button as let:props>
   <p {...props}>Custom element</p>
 </Button>
 
-### Field size
+## Field size
 
 <Button size="field">Primary</Button>
 <Button size="field" kind="secondary">Secondary</Button>
@@ -96,7 +96,7 @@ If an `href` value is specified, the component will render an [anchor element](h
 <Button size="field" kind="ghost">Ghost</Button>
 <Button size="field" kind="danger">Danger</Button>
 
-### Small size
+## Small size
 
 <Button size="small">Primary</Button>
 <Button size="small" kind="secondary">Secondary</Button>
@@ -104,7 +104,7 @@ If an `href` value is specified, the component will render an [anchor element](h
 <Button size="small" kind="ghost">Ghost</Button>
 <Button size="small" kind="danger">Danger</Button>
 
-### Large size
+## Large size
 
 <Button size="lg">Primary</Button>
 <Button size="lg" kind="secondary">Secondary</Button>
@@ -112,7 +112,7 @@ If an `href` value is specified, the component will render an [anchor element](h
 <Button size="lg" kind="ghost">Ghost</Button>
 <Button size="lg" kind="danger">Danger</Button>
 
-### Extra-large size
+## Extra-large size
 
 <Button size="xl">Primary</Button>
 <Button size="xl" kind="secondary">Secondary</Button>
@@ -120,11 +120,11 @@ If an `href` value is specified, the component will render an [anchor element](h
 <Button size="xl" kind="ghost">Ghost</Button>
 <Button size="xl" kind="danger">Danger</Button>
 
-### Disabled button
+## Disabled button
 
 <Button disabled>Disabled button</Button>
 
-### Expressive styles
+## Expressive styles
 
 Set `expressive` to `true` to use Carbon's expressive typesetting.
 
@@ -152,7 +152,7 @@ Set `expressive` to `true` to use Carbon's expressive typesetting.
 <Button expressive kind="ghost">Ghost</Button>
 <Button expressive kind="danger">Danger</Button>
 
-### Skeleton
+## Skeleton
 
 <Button size="xl" skeleton />
 <Button size="lg" skeleton />

docs/src/pages/components/ButtonSet.svx

@@ -8,7 +8,7 @@ source: Button/ButtonSet.svelte
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 Buttons in a button set are juxtaposed by default.
 
@@ -17,7 +17,7 @@ Buttons in a button set are juxtaposed by default.
   <Button>Submit</Button>
 </ButtonSet>
 
-### Stacked
+## Stacked
 
 Set `stacked` to `true` to use the stacked variant.
 

docs/src/pages/components/Checkbox.svx

@@ -3,33 +3,33 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default (unchecked)
+## Default (unchecked)
 
 <Checkbox labelText="Label text" />
 
-### Checked
+## Checked
 
 <Checkbox labelText="Label text" checked />
 
-### Indeterminate
+## Indeterminate
 
 <Checkbox labelText="Label text" indeterminate />
 
-### Hidden label
+## Hidden label
 
 <Checkbox labelText="Label text" hideLabel />
 
-### Disabled
+## Disabled
 
 <Checkbox labelText="Label text" disabled />
 
-### Reactive example (bind:checked)
+## Reactive example (bind:checked)
 
 The `checked` prop supports two-way binding.
 
 <FileSource src="/framed/Checkbox/CheckboxReactive" />
 
-### Reactive example (bind:group)
+## Reactive example (bind:group)
 
 An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs](https://svelte.dev/tutorial/group-inputs).
 
@@ -41,6 +41,6 @@ An alternative to `checked` is binding an array of values using `group`. This AP
 
 <FileSource src="/framed/Checkbox/MultipleCheckboxes" />
 
-### Skeleton
+## Skeleton
 
 <Checkbox skeleton />

docs/src/pages/components/ClickableTile.svx

@@ -7,13 +7,13 @@ source: Tile/ClickableTile.svelte
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <ClickableTile href="https://www.carbondesignsystem.com/">
 Carbon Design System
 </ClickableTile>
 
-### Prevent default behavior
+## Prevent default behavior
 
 Use the forwarded `click` event and invoke `e.preventDefault()` to prevent the native link behavior.
 
@@ -27,13 +27,13 @@ Use the forwarded `click` event and invoke `e.preventDefault()` to prevent the n
   Carbon Design System
 </ClickableTile>
 
-### Light variant
+## Light variant
 
 <ClickableTile light href="https://www.carbondesignsystem.com/">
 Carbon Design System
 </ClickableTile>
 
-### Disabled state
+## Disabled state
 
 <ClickableTile disabled href="https://www.carbondesignsystem.com/">
 Carbon Design System

docs/src/pages/components/CodeSnippet.svx

@@ -34,11 +34,11 @@ Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Sa
 You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
 
 
-### Default (single-line)
+## Default (single-line)
 
 <CodeSnippet code="yarn add -D carbon-components-svelte" />
 
-### Overriding copy functionality
+## Overriding copy functionality
 
 To override the default copy behavior, pass a custom function to the `copy` prop.
 
@@ -46,45 +46,45 @@ In this example, we use the open source module [clipboard-copy](https://github.c
 
 <FileSource src="/framed/CodeSnippet/CodeSnippetOverride" />
 
-### Preventing copy functionality
+## Preventing copy functionality
 
 To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
 
 <CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />
 
-### Inline
+## Inline
 
 <CodeSnippet type="inline" code="rm -rf node_modules/" />
 
-### Multi-line
+## Multi-line
 
 <CodeSnippet type="multi" {code} />
 
-### Expanded by default
+## Expanded by default
 
 Use the `expanded` prop to control whether the multi-line code snippet is expanded or not.
 
 <CodeSnippet type="multi" {code} expanded />
 
-### Reactive example
+## Reactive example
 
 The multi-line code snippet also dispatches "expand" and "collapse" events.
 
 <FileSource src="/framed/CodeSnippet/CodeSnippetReactive" />
 
-### Custom copy feedback text
+## Custom copy feedback text
 
 Use the `feedback` prop to override the default copy button feedback text.
 
 <CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
 
-### Hidden copy button
+## Hidden copy button
 
 Set `hideCopyButton` to `true` to hide the copy button.
 
 <CodeSnippet type="multi" {code} hideCopyButton />
 
-### Disabled
+## Disabled
 
 The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
 
@@ -92,19 +92,19 @@ The `disabled` prop applies only to the `"single"` and `"multi"` code snippet ty
 <br />
 <CodeSnippet disabled type="multi" code="{comment}" />
 
-### Wrapped text
+## Wrapped text
 
 `wrapText` only applies to the `"multi"` type.
 
 <CodeSnippet wrapText type="multi" code="{comment}" />
 
-### Dynamic multi-line code
+## Dynamic multi-line code
 
 For dynamically updated code, you must use the `code` prop instead of the default slot.
 
 <FileSource src="/framed/CodeSnippet/DynamicCodeSnippet" />
 
-### Hidden multi-line code
+## Hidden multi-line code
 
 There may be cases where your code snippet is hidden in the DOM. The logic to render the "Show more" button relies on the element's computed height. For hidden content, the button will not appear because the computed height is `0`.
 
@@ -112,12 +112,12 @@ The recommended workaround is to re-render the component. See the example below.
 
 <FileSource src="/framed/CodeSnippet/HiddenCodeSnippet" />
 
-### Skeleton
+## Skeleton
 
 The default skeleton type is `"single"`.
 
 <CodeSnippet skeleton />
 
-### Skeleton (multi-line)
+## Skeleton (multi-line)
 
 <CodeSnippet type="multi" skeleton />

docs/src/pages/components/ComboBox.svx

@@ -9,7 +9,7 @@
   <div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
 </InlineNotification>
 
-### Default
+## Default
 
 <ComboBox titleText="Contact" placeholder="Select contact method"
 items={[
@@ -18,13 +18,13 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Custom slot
+## Custom slot
 
 Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
 
 <FileSource src="/framed/ComboBox/ComboBoxSlot" />
 
-### Initial selected id
+## Initial selected id
 
 <ComboBox titleText="Contact" placeholder="Select contact method"
 selectedId="1"
@@ -34,11 +34,11 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Reactive example
+## Reactive example
 
 <FileSource src="/framed/ComboBox/ReactiveComboBox" />
 
-### Clear selection
+## Clear selection
 
 To programmatically clear the selection, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `ComboBox.clear()` accessor.
 
@@ -46,21 +46,21 @@ Specify `focus: false` in the method options to avoid re-focusing the input.
 
 <FileSource src="/framed/ComboBox/ComboBoxClear" />
 
-### Multiple combo boxes
+## Multiple combo boxes
 
 <FileSource src="/framed/ComboBox/MultipleComboBox" />
 
-### Filterable
+## Filterable
 
 <FileSource src="/framed/ComboBox/FilterableComboBox" />
 
-### Filterable with custom label
+## Filterable with custom label
 
 Combine a custom label `itemToString` with the filterable option (e.g., internationalization).
 
 <FileSource src="/framed/ComboBox/FilterableComboBoxCustomLabel" />
 
-### Top direction
+## Top direction
 
 Set `direction` to `"top"` for the combobox dropdown menu to appear above the input.
 
@@ -71,7 +71,7 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Light variant
+## Light variant
 
 <ComboBox light titleText="Contact" placeholder="Select contact method"
 items={[
@@ -80,7 +80,7 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Extra-large size
+## Extra-large size
 
 <ComboBox titleText="Contact" placeholder="Select contact method"
 size="xl"
@@ -90,7 +90,7 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Small size
+## Small size
 
 <ComboBox titleText="Contact" placeholder="Select contact method"
 size="sm"
@@ -100,7 +100,7 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Invalid state
+## Invalid state
 
 <ComboBox invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" placeholder="Select contact method"
 items={[
@@ -109,7 +109,7 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Warning state
+## Warning state
 
 <ComboBox warn warnText="This contact method is not associated with your account" titleText="Contact" placeholder="Select contact method"
 items={[
@@ -118,7 +118,7 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Disabled state
+## Disabled state
 
 <ComboBox disabled titleText="Contact" placeholder="Select contact method"
 items={[
@@ -127,7 +127,7 @@ items={[
   {id: "2", text: "Fax"}
   ]}  />
 
-### Disabled items
+## Disabled items
 
 Use the `disabled` property in the `items` prop to disable specific items.
 

docs/src/pages/components/ComposedModal.svx

@@ -6,11 +6,11 @@ components: ["ComposedModal", "ModalHeader", "ModalBody", "ModalFooter"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Composed modal
+## Composed modal
 
 <FileSource src="/framed/Modal/ComposedModal" />
 
-### Multiple secondary buttons
+## Multiple secondary buttons
 
 Use the `secondaryButtons` prop in `ModalFooter` to render two secondary buttons for a "3-button modal". The prop is a 2-tuple type that supersedes `secondaryButtonText`.
 

docs/src/pages/components/ContentSwitcher.svx

@@ -9,14 +9,14 @@ components: ["ContentSwitcher", "Switch"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <ContentSwitcher>
   <Switch text="Latest news" />
   <Switch text="Trending" />
 </ContentSwitcher>
 
-### Initial selected index
+## Initial selected index
 
 <ContentSwitcher selectedIndex={1}>
   <Switch text="Latest news" />
@@ -24,11 +24,11 @@ components: ["ContentSwitcher", "Switch"]
   <Switch text="Recommended" />
 </ContentSwitcher>
 
-### Reactive example
+## Reactive example
 
 <FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
 
-### Custom switch slot
+## Custom switch slot
 
 <ContentSwitcher>
   <Switch>
@@ -43,21 +43,21 @@ components: ["ContentSwitcher", "Switch"]
   </Switch>
 </ContentSwitcher>
 
-### Extra-large size
+## Extra-large size
 
 <ContentSwitcher size="xl">
   <Switch text="All" />
   <Switch text="Archived" />
 </ContentSwitcher>
 
-### Small size
+## Small size
 
 <ContentSwitcher size="sm">
   <Switch text="All" />
   <Switch text="Archived" />
 </ContentSwitcher>
 
-### Disabled
+## Disabled
 
 <ContentSwitcher>
   <Switch disabled text="All" />

docs/src/pages/components/ContextMenu.svx

@@ -8,24 +8,24 @@ components: ["ContextMenu", "ContextMenuGroup", "ContextMenuRadioGroup", "Contex
 
 In the examples, right click anywhere within the iframe.
   
-### Default
+## Default
 
 By default, the context menu will trigger when right clicking anywhere in the `window`.
   
 <FileSource src="/framed/ContextMenu/ContextMenu" />
 
-### Custom target
+## Custom target
 
 Specify a custom `HTMLElement` using the `target` prop.
 
 <FileSource src="/framed/ContextMenu/ContextMenuTarget" />
 
-### Multiple targets
+## Multiple targets
 
 The `target` prop also accepts an array of elements.
 
 <FileSource src="/framed/ContextMenu/ContextMenuTargets" />
 
-### Radio groups
+## Radio groups
   
 <FileSource src="/framed/ContextMenu/ContextMenuGroups" />

docs/src/pages/components/CopyButton.svx

@@ -9,15 +9,15 @@ Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Sa
 
 You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
 
-### Default
+## Default
 
 <CopyButton text="Carbon svelte" />
 
-### Custom feedback text
+## Custom feedback text
 
 <CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
 
-### Overriding copy functionality
+## Overriding copy functionality
 
 To override the default copy behavior, pass a custom function to the `copy` prop.
 
@@ -25,7 +25,7 @@ In this example, we use the open source module [clipboard-copy](https://github.c
 
 <FileSource src="/framed/CopyButton/CopyButtonOverride" />
 
-### Preventing copy functionality
+## Preventing copy functionality
 
 To prevent text from being copied entirely, pass a no-op function to the `copy` prop.
 

docs/src/pages/components/DataTable.svx

@@ -20,7 +20,7 @@ components: ["DataTable", "Pagination","Toolbar", "ToolbarContent", "ToolbarSear
   <div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
 </InlineNotification>
 
-### Default
+## Default
 
 The key value in `headers` corresponds to the key value defined in `rows`.
 
@@ -79,7 +79,7 @@ For example, the header key `"name"` will use the value of `rows[index].name`.
   ]}"
 />
 
-### Slotted cells
+## Slotted cells
 
 Use the `"cell"` slot to control the display value per table cell. Individual row and cell data are provided through the `let:row` and `let:cell` directives.
 
@@ -153,7 +153,7 @@ The slot name for the table header cells is `"cell-header"`.
   </svelte:fragment>
 </DataTable>
 
-### With title, description
+## With title, description
 
 <DataTable title="Load balancers" description="Your organization's active load balancers."
   headers="{[
@@ -208,7 +208,7 @@ The slot name for the table header cells is `"cell-header"`.
   ]}"
 />
 
-### Slottable title, description
+## Slottable title, description
 
 The `title` and `description` props are slottable.
 
@@ -270,7 +270,7 @@ The `title` and `description` props are slottable.
     </span>
 </DataTable>
 
-### Static width
+## Static width
 
 Set `useStaticWidth` to `true` to render the table with a width of "auto" instead of "100%".
 
@@ -328,7 +328,7 @@ title="Load balancers" description="Your organization's active load balancers."
   ]}"
 />
 
-### Custom column widths
+## Custom column widths
 
 Specify a `width` or `minWidth` property in the `headers` object to customize the width of each column.
 
@@ -340,7 +340,7 @@ A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-l
 
 <FileSource src="/framed/DataTable/DataTableHeaderWidth" />
 
-### Sticky header
+## Sticky header
 
 Set `stickyHeader` to `true` for the header to be fixed in place.
 
@@ -363,7 +363,7 @@ A maximum height will applied to the datatable to force a scrollbar.
   }))}
 />
 
-### With toolbar
+## With toolbar
 
 <DataTable title="Load balancers" description="Your organization's active load balancers."
   headers="{[
@@ -432,7 +432,7 @@ A maximum height will applied to the datatable to force a scrollbar.
   </Toolbar>
 </DataTable>
 
-### With toolbar (small size)
+## With toolbar (small size)
 
 <DataTable size="short" title="Load balancers" description="Your organization's active load balancers."
   headers="{[
@@ -499,7 +499,7 @@ A maximum height will applied to the datatable to force a scrollbar.
   </Toolbar>
 </DataTable>
 
-### Filterable
+## Filterable
 
 By default, `ToolbarSearch` will not filter `DataTable` rows.
 
@@ -509,13 +509,13 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
 
 <FileSource src="/framed/DataTable/DataTableFilterable" />
 
-### Filterable (custom)
+## Filterable (custom)
 
 `shouldFilterRows` also accepts a function and passes it the current row and value. It expects the function to return a boolean.
 
 <FileSource src="/framed/DataTable/DataTableFilterCustom" />
 
-### Zebra stripes
+## Zebra stripes
 
 <DataTable zebra
   headers="{[
@@ -570,7 +570,7 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
   ]}"
 />
 
-### Tall rows
+## Tall rows
 
 <DataTable size="tall"
   headers="{[
@@ -625,7 +625,7 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
   ]}"
 />
 
-### Medium rows
+## Medium rows
 
 <DataTable size="medium"
   headers="{[
@@ -680,7 +680,7 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
   ]}"
 />
 
-### Short rows
+## Short rows
 
 <DataTable size="short"
   headers="{[
@@ -735,7 +735,7 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
   ]}"
 />
 
-### Compact rows
+## Compact rows
 
 <DataTable size="compact"
   headers="{[
@@ -790,7 +790,7 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
   ]}"
 />
 
-### Sortable
+## Sortable
 
 Set `sortable` to `true` to enable table column sorting.
 
@@ -851,7 +851,7 @@ In the example below, the "Protocol" column is not sortable.
   ]}"
 />
 
-### Sortable with pagination
+## Sortable with pagination
 
 If you want `DataTable` to sort the whole dataset but still display paginated content, you need to pass the whole dataset in the `rows` prop, 
 and then limit displayed content by using `pageSize` and `page` props, which are corresponding to the same props in the `Pagination` component.
@@ -929,7 +929,7 @@ and then limit displayed content by using `pageSize` and `page` props, which are
   pageSizeInputDisabled
 />
 
-### Sortable with custom display and sort methods
+## Sortable with custom display and sort methods
 
 <DataTable sortable title="Load balancers" description="Your organization's active load balancers."
   headers="{[
@@ -996,7 +996,7 @@ and then limit displayed content by using `pageSize` and `page` props, which are
   ]}"
 />
 
-### Sortable with nested object values
+## Sortable with nested object values
 
 <DataTable sortable title="Load balancers" description="Your organization's active load balancers."
            headers="{[
@@ -1075,7 +1075,7 @@ and then limit displayed content by using `pageSize` and `page` props, which are
   ]}"
 />
 
-### Programmatic sorting
+## Programmatic sorting
 
 Use the reactive `sortKey` and `sortDirection` props for programmatic sorting.
 
@@ -1087,7 +1087,7 @@ Setting `sortKey` to `null` and `sortDirection` to `"none"` should reset the tab
 
 <FileSource src="/framed/DataTable/DataTableProgrammaticSorting" />
 
-### Empty column with overflow menu
+## Empty column with overflow menu
 
 Some use cases require an empty column in the table body without a corresponding table header.
 
@@ -1097,27 +1097,27 @@ In the following example, each row in the sortable data table has an overflow me
 
 <FileSource src="/framed/DataTable/DataTableAppendColumns" />
 
-### Selectable rows (checkbox)
+## Selectable rows (checkbox)
 
 Set `selectable` to `true` for rows to be multi-selectable.
 
 <FileSource src="/framed/DataTable/SelectableDataTable" />
 
-### Batch selection
+## Batch selection
 
 <FileSource src="/framed/DataTable/DataTableBatchSelection" />
 
-### Batch selection with initial selected rows
+## Batch selection with initial selected rows
 
 Use the `selectedRowIds` prop to specify which rows should be selected.
 
 <FileSource src="/framed/DataTable/DataTableBatchSelectionInitial" />
 
-### Batch selection with batch actions toolbar
+## Batch selection with batch actions toolbar
 
 <FileSource src="/framed/DataTable/DataTableBatchSelectionToolbar" />
 
-### Batch selection with controlled toolbar
+## Batch selection with controlled toolbar
 
 By default, `ToolbarBatchActions` is activated if one or more rows is selected. Clicking "Cancel" will deactivate it.
 
@@ -1127,19 +1127,19 @@ You can also prevent the default "Cancel" behavior in the dispatched `on:cancel`
 
 <FileSource src="/framed/DataTable/DataTableBatchSelectionToolbarControlled" />
 
-### Selectable rows (radio)
+## Selectable rows (radio)
 
 Set `radio` to `true` for only one row to be selected at a time.
 
 <FileSource src="/framed/DataTable/RadioSelectableDataTable" />
 
-### Non-selectable rows
+## Non-selectable rows
 
 Use `nonSelectableRowIds` to specify the ids for rows that should not be selectable.
 
 <FileSource src="/framed/DataTable/DataTableNonSelectableRows" />
 
-### Expandable rows
+## Expandable rows
 
 Set `expandable` to `true` for rows to be expandable.
 
@@ -1200,17 +1200,17 @@ Set `expandable` to `true` for rows to be expandable.
   </svelte:fragment>
 </DataTable>
 
-### Non-expandable rows
+## Non-expandable rows
 
 Use `nonExpandableRowIds` to specify the ids for rows that should not be expandable.
 
 <FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
 
-### Expandable (zebra styles)
+## Expandable (zebra styles)
 
 <FileSource src="/framed/DataTable/DataTableExpandableZebra" />
 
-### Expandable (compact size)
+## Expandable (compact size)
 
 <DataTable size="compact" expandable
   headers="{[
@@ -1269,7 +1269,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
   </svelte:fragment>
 </DataTable>
 
-### Expandable (short size)
+## Expandable (short size)
 
 <DataTable size="short" expandable
   headers="{[
@@ -1328,7 +1328,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
   </svelte:fragment>
 </DataTable>
 
-### Expandable (tall size)
+## Expandable (tall size)
 
 <DataTable size="tall" expandable
   headers="{[
@@ -1387,7 +1387,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
   </svelte:fragment>
 </DataTable>
 
-### Batch expansion
+## Batch expansion
 
 Set `batchExpansion` to `true` for the ability to expand and collapse all rows at once.
 
@@ -1448,44 +1448,44 @@ Set `batchExpansion` to `true` for the ability to expand and collapse all rows a
   </svelte:fragment>
 </DataTable>
 
-### Expandable and selectable rows
+## Expandable and selectable rows
 
 The `batchExpansion` and `batchSelection` props can be used together.
 
 <FileSource src="/framed/DataTable/DataTableExpandableSelectable" />
 
-### Skeleton
+## Skeleton
 
 <DataTableSkeleton />
 
-### Skeleton with headers, row count
+## Skeleton with headers, row count
 
 <DataTableSkeleton headers={["Name", "Protocol", "Port", "Rule"]} rows={10} />
 
-### Skeleton with object headers
+## Skeleton with object headers
 
 `headers` can also be an array of objects. The type is the same as the `headers` prop type used in `DataTable`.
 
 <DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}]} rows={10} />
 
-### Skeleton with empty header
+## Skeleton with empty header
 
 Pass an object with `"empty"` set to `true` to render an empty table header column.
 
 <DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}, { empty: true }]} rows={10} />
 
-### Skeleton without header, toolbar
+## Skeleton without header, toolbar
 
 <DataTableSkeleton showHeader={false} showToolbar={false} />
 
-### Skeleton (tall size)
+## Skeleton (tall size)
 
 <DataTableSkeleton showHeader={false} showToolbar={false} size="tall" />
 
-### Skeleton (short size)
+## Skeleton (short size)
 
 <DataTableSkeleton showHeader={false} showToolbar={false} size="short" />
 
-### Skeleton (compact size)
+## Skeleton (compact size)
 
-<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
+<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />

docs/src/pages/components/DatePicker.svx

@@ -19,7 +19,7 @@ Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flat
   </div>
 </InlineNotification>
 
-### Single
+## Single
 
 By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal).
 
@@ -27,17 +27,17 @@ Set `flatpickrProps.static` to `false` to opt out of this behavior.
 
 <FileSource src="/framed/DatePicker/DatePickerSingle" />
 
-### Range
+## Range
 
 Set `datePickerType` to `"range"` for the range variant.
 
 <FileSource src="/framed/DatePicker/DatePickerRange" />
 
-### DatePicker in a modal
+## DatePicker in a modal
 
 <FileSource src="/framed/DatePicker/DatePickerModal" />
 
-### Simple
+## Simple
 
 By default, the "simple" date picker does not have a dropdown calendar.
 
@@ -45,54 +45,54 @@ By default, the "simple" date picker does not have a dropdown calendar.
   <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
-### With helper text
+## With helper text
 
 <DatePicker>
   <DatePickerInput labelText="Date of birth" helperText="Example: 01/12/1990" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
-### Hidden label
+## Hidden label
 
 <DatePicker>
   <DatePickerInput hideLabel labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
-### Light variant
+## Light variant
 
 <DatePicker light>
   <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
-### Extra-large size
+## Extra-large size
 
 <DatePicker>
   <DatePickerInput size="xl" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
-### Small size
+## Small size
 
 <DatePicker>
   <DatePickerInput size="sm" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
-### Invalid state
+## Invalid state
 
 <DatePicker>
   <DatePickerInput invalid invalidText="Invalid date" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
-### Warning state
+## Warning state
 
 <DatePicker>
   <DatePickerInput warn warnText="This info will not be stored" labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
-### Disabled state
+## Disabled state
 
 <DatePicker>
   <DatePickerInput disabled labelText="Date of birth" placeholder="mm/dd/yyyy" />
 </DatePicker>
 
-### Skeleton
+## Skeleton
 
 <DatePickerSkeleton />

docs/src/pages/components/Dropdown.svx

@@ -13,25 +13,25 @@ components: ["Dropdown", "DropdownSkeleton"]
   <div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
 </InlineNotification>
 
-### Default
+## Default
 
 <Dropdown titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Custom slot
+## Custom slot
 
 Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
 
 <FileSource src="/framed/Dropdown/DropdownSlot" />
 
-### Hidden label
+## Hidden label
 
 <Dropdown hideLabel titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Format item display text
+## Format item display text
 
 Use the `itemToString` prop to format the display of individual items.
 
@@ -41,11 +41,11 @@ Use the `itemToString` prop to format the display of individual items.
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Multiple dropdowns
+## Multiple dropdowns
 
 <FileSource src="/framed/Dropdown/MultipleDropdown" />
 
-### Top direction
+## Top direction
 
 Set `direction` to `"top"` for the dropdown menu to appear above the input.
 
@@ -53,49 +53,49 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Light variant
+## Light variant
 
 <Dropdown light titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Inline variant
+## Inline variant
 
 <Dropdown type="inline" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Extra-large size
+## Extra-large size
 
 <Dropdown size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Small size
+## Small size
 
 <Dropdown size="sm" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Invalid state
+## Invalid state
 
 <Dropdown invalid invalidText="Secondary contact method must be different from the primary contact" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Warning state
+## Warning state
 
 <Dropdown warn warnText="This contact method is not associated with your account" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Disabled state
+## Disabled state
 
 <Dropdown disabled titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
   {id: "1", text: "Email"},
   {id: "2", text: "Fax"}]}" />
 
-### Disabled items
+## Disabled items
 
 Use the `disabled` property in the `items` prop to disable specific items.
 
@@ -109,6 +109,6 @@ Use the `disabled` property in the `items` prop to disable specific items.
   ]}
 />
 
-### Skeleton
+## Skeleton
 
 <DropdownSkeleton />

docs/src/pages/components/ExpandableTile.svx

@@ -7,28 +7,28 @@ source: Tile/ExpandableTile.svelte
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default (unexpanded)
+## Default (unexpanded)
 
 <ExpandableTile>
   <div slot="above" style="height: 10rem">Above the fold content here</div>
   <div slot="below" style="height: 10rem">Below the fold content here</div>
 </ExpandableTile>
 
-### Expanded
+## Expanded
 
 <ExpandableTile expanded>
   <div slot="above" style="height: 10rem">Above the fold content here</div>
   <div slot="below" style="height: 10rem">Below the fold content here</div>
 </ExpandableTile>
 
-### Light variant
+## Light variant
 
 <ExpandableTile light>
   <div slot="above" style="height: 10rem">Above the fold content here</div>
   <div slot="below" style="height: 10rem">Below the fold content here</div>
 </ExpandableTile>
 
-### With icon labels
+## With icon labels
 
 <ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
   <div slot="above" style="height: 10rem">Above the fold content here</div>

docs/src/pages/components/FileUploader.svx

@@ -7,7 +7,7 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### File uploader (button-only)
+## File uploader (button-only)
 
 By default, the file uploader only accepts one file.
 
@@ -15,7 +15,7 @@ Set `multiple` to `true` for multiple files to be uploaded.
 
 <FileUploaderButton labelText="Add files" />
 
-### File uploader
+## File uploader
 
 The `FileUploader` wraps `FileUploaderButton` and lists out uploaded files.
 
@@ -25,7 +25,7 @@ See the [item examples below](#item-uploading) for different statuses.
 
 <FileUploader multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
 
-### Clear files
+## Clear files
 
 There are two ways to clear files in `FileUploader`:
 
@@ -36,19 +36,19 @@ There are two ways to clear files in `FileUploader`:
 
 <FileSource src="/framed/FileUploader/FileUploaderClearFiles" />
 
-### File uploader (disabled state)
+## File uploader (disabled state)
 
 <FileUploader disabled multiple labelTitle="Upload files" buttonLabel="Add files" labelDescription="Only JPEG files are accepted." accept="{['.jpg', '.jpeg']}" status="complete" />
 
-### Item (uploading)
+## Item (uploading)
 
 <FileUploaderItem name="README.md" status="uploading" />
 
-### Item (complete)
+## Item (complete)
 
 <FileUploaderItem name="README.md" status="complete" />
 
-### Item (edit)
+## Item (edit)
 
 If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event.
 
@@ -58,13 +58,13 @@ The event detail contains the item `id`.
   console.log(e.detail); // "readme"
 }} />
 
-### Item (edit status, invalid state)
+## Item (edit status, invalid state)
 
 An item can also have an edit status with an invalid state.
 
 <FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />
 
-### Item (edit status, invalid state with subject, body)
+## Item (edit status, invalid state with subject, body)
 
 Use the `errorSubject` and `errorBody` props to customize the error message.
 
@@ -78,7 +78,7 @@ Use the `errorSubject` and `errorBody` props to customize the error message.
   on:delete
 />
 
-### Item sizes
+## Item sizes
 
 The default `FileUploaderItem` size is "default".
 
@@ -86,7 +86,7 @@ The default `FileUploaderItem` size is "default".
 <FileUploaderItem size="field" name="README.md" status="uploading" />
 <FileUploaderItem size="small" name="README.md" status="uploading" />
 
-### Drop container
+## Drop container
 
 The `FileUploaderDropContainer` accepts files through click and drop events.
 
@@ -105,6 +105,6 @@ The following example accepts files smaller than 1 kB.
   }}
 />
 
-### Skeleton
+## Skeleton
 
 <FileUploaderSkeleton />

docs/src/pages/components/FluidForm.svx

@@ -7,7 +7,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Fluid form
+## Fluid form
 
 Note that the `inline` input variants cannot be used within a `FluidForm`.
 
@@ -21,6 +21,6 @@ Note that the `inline` input variants cannot be used within a `FluidForm`.
   />
 </FluidForm>
 
-### Invalid state
+## Invalid state
 
 <FileSource src="/framed/FluidForm/FluidFormInvalid" />

docs/src/pages/components/Form.svx

@@ -14,7 +14,7 @@ components: ["Form", "FormGroup"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Form
+## Form
 
 <Form on:submit>
   <FormGroup legendText="Checkboxes">
@@ -61,7 +61,7 @@ components: ["Form", "FormGroup"]
   <Button type="submit">Submit</Button>
 </Form>
 
-### Prevent default behavior
+## Prevent default behavior
 
 The forwarded `submit` event is not modified. Use `e.preventDefault()` to prevent the native form submission behavior.
 

docs/src/pages/components/Grid.svx

@@ -6,34 +6,34 @@ components: ["Grid", "Row", "Column"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <FileSource src="/framed/Grid/Grid" />
 
-### Full width
+## Full width
 
 <FileSource src="/framed/Grid/FullWidthGrid" />
 
-### Narrow
+## Narrow
 
 <FileSource src="/framed/Grid/NarrowGrid" />
 
-### Condensed
+## Condensed
 
 <FileSource src="/framed/Grid/CondensedGrid" />
 
-### Responsive
+## Responsive
 
 <FileSource src="/framed/Grid/ResponsiveGrid" />
 
-### Offset columns
+## Offset columns
 
 <FileSource src="/framed/Grid/OffsetColumns" />
 
-### Aspect ratio columns
+## Aspect ratio columns
 
 <FileSource src="/framed/Grid/AspectRatioColumns" />
 
-### Padded columns
+## Padded columns
 
 <FileSource src="/framed/Grid/PaddedGrid" />

docs/src/pages/components/ImageLoader.svx

@@ -7,11 +7,11 @@
 
 This utility component uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) to programmatically load an image with slottable loading and error states.
   
-### Default
+## Default
   
 <ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
 
-### Slots
+## Slots
 
 Use the "loading" and "error" named slots to render an element when the image is loading or has an error.
 
@@ -24,7 +24,7 @@ Use the "loading" and "error" named slots to render an element when the image is
     </svelte:fragment>
 </ImageLoader>
 
-### With aspect ratio
+## With aspect ratio
 
 If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image.
 
@@ -32,14 +32,14 @@ Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"
   
 <ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
 
-### Fade in
+## Fade in
 
 Set `fadeIn` to `true` to fade in the image if successfully loaded.
 
 <Button kind="ghost" on:click="{() => { key++;}}">Reload image</Button>
 {#key key}<ImageLoader fadeIn ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />{/key}
 
-### Programmatic usage
+## Programmatic usage
 
 In this example, a component reference is obtained to programmatically trigger the `loadImage` method.
 

docs/src/pages/components/InlineLoading.svx

@@ -3,21 +3,21 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <InlineLoading />
 
-### With description
+## With description
 
 <InlineLoading description="Loading metrics..." />
 
-### Status states
+## Status states
 
 <InlineLoading status="active" description="Submitting..." />
 <InlineLoading status="inactive" description="Cancelling..." />
 <InlineLoading status="finished" description="Success" />
 <InlineLoading status="error" description="An error occurred" />
 
-### UX example
+## UX example
 
 <FileSource src="/framed/InlineLoading/InlineLoadingUx" />

docs/src/pages/components/InlineNotification.svx

@@ -8,11 +8,11 @@ source: Notification/InlineNotification.svelte
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default (error)
+## Default (error)
 
 <InlineNotification title="Error:" subtitle="An internal server error occurred." />
 
-### Prevent default close behavior
+## Prevent default close behavior
 
 `InlineNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
 
@@ -21,18 +21,18 @@ source: Notification/InlineNotification.svelte
   // custom close logic (e.g., transitions)
 }} />
 
-### Slottable title, subtitle
+## Slottable title, subtitle
 
 <InlineNotification>
   <strong slot="title">Error: </strong>
   <strong slot="subtitle">An internal server error occurred.</strong>
 </InlineNotification>
 
-### Hidden close button
+## Hidden close button
 
 <InlineNotification hideCloseButton kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
 
-### With actions
+## With actions
 
 <InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours.">
   <svelte:fragment slot="actions">
@@ -40,7 +40,7 @@ source: Notification/InlineNotification.svelte
   </svelte:fragment>
 </InlineNotification>
 
-### Notification variants
+## Notification variants
 
 <InlineNotification kind="error" title="Error:" subtitle="An internal server error occurred." />
 <InlineNotification kind="info" title="New updates:" subtitle="Restart to get the latest updates." />
@@ -49,7 +49,7 @@ source: Notification/InlineNotification.svelte
 <InlineNotification kind="warning" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
 <InlineNotification kind="warning-alt" title="Scheduled maintenance:" subtitle="Maintenance will last 2-4 hours." />
 
-### Low contrast
+## Low contrast
 
 <InlineNotification lowContrast kind="error" title="Error:" subtitle="An internal server error occurred." />
 <InlineNotification lowContrast kind="info" title="New updates:" subtitle="Restart to get the latest updates." />

docs/src/pages/components/Link.svx

@@ -8,13 +8,13 @@ components: ["Link", "OutboundLink"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <Link href="https://www.carbondesignsystem.com/">
   Carbon Design System
 </Link>
 
-### Target _blank
+## Target _blank
 
 If setting `target` to `"_blank"`, the `Link` component will automatically set `rel="noopener noreferrer"` to guard against [potential cross-origin security exploits](https://web.dev/external-anchors-use-rel-noopener/).
 
@@ -24,7 +24,7 @@ You can override the `rel` attribute with a custom value.
   Carbon Design System
 </Link>
 
-### Outbound link
+## Outbound link
 
 An alternative to manually setting `target` to `"_blank"` is to use the `OutboundLink`.
 
@@ -32,7 +32,7 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun
   Carbon Design System
 </OutboundLink>
 
-### Inline variant
+## Inline variant
 
 <div>
   Visit the
@@ -41,7 +41,7 @@ An alternative to manually setting `target` to `"_blank"` is to use the `Outboun
   </Link>.
 </div>
 
-### Link with icon
+## Link with icon
 
 Note that `inline` must be `false` when rendering a link with an icon.
 
@@ -52,19 +52,19 @@ Note that `inline` must be `false` when rendering a link with an icon.
   </Link>.
 </div>
 
-### Large size
+## Large size
 
 <Link size="lg" href="https://www.carbondesignsystem.com/">
   Carbon Design System
 </Link>
 
-### Small size
+## Small size
 
 <Link size="sm" href="https://www.carbondesignsystem.com/">
   Carbon Design System
 </Link>
 
-### Disabled
+## Disabled
 
 A `disabled` link will render a `p` tag instead of an anchor element.
 
@@ -72,7 +72,7 @@ A `disabled` link will render a `p` tag instead of an anchor element.
   Carbon Design System
 </Link>
 
-### Visited styles
+## Visited styles
 
 <Link visited href="https://www.carbondesignsystem.com/">
   Carbon Design System

docs/src/pages/components/Loading.svx

@@ -3,14 +3,14 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default (with overlay)
+## Default (with overlay)
 
 <FileSource src="/framed/Loading/Loading" />
 
-### No overlay
+## No overlay
 
 <Loading withOverlay={false} />
 
-### Small size
+## Small size
 
 <Loading withOverlay={false} small />

docs/src/pages/components/LocalStorage.svx

@@ -4,13 +4,13 @@
 
 This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level.
   
-### Reactive example
+## Reactive example
 
 In the example below, toggle the switch and reload the page. The updated theme should be persisted locally.
   
 <FileSource src="/framed/LocalStorage/LocalStorage" />
 
-### Clear item, clear all
+## Clear item, clear all
 
 Use the `bind:this` directive to access the `clearItem` and `clearAll` methods.
 

docs/src/pages/components/Modal.svx

@@ -2,11 +2,11 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default (transactional)
+## Default (transactional)
 
 <FileSource src="/framed/Modal/Modal" />
 
-### Custom focus
+## Custom focus
 
 By default, the modal close button will be focused when opened.
 
@@ -14,48 +14,48 @@ Use the `selectorPrimaryFocus` to specify the element that should be focused whe
 
 <FileSource src="/framed/Modal/ModalCustomFocus" />
 
-### Danger modal
+## Danger modal
 
 <FileSource src="/framed/Modal/DangerModal" />
 
-### Passive modal
+## Passive modal
 
 <FileSource src="/framed/Modal/PassiveModal" />
 
-### Has scrolling content
+## Has scrolling content
 
 Setting `hasScrollingContent` to `true` increases the vertical space within the modal.
 
 <FileSource src="/framed/Modal/ModalScrollingContent" />
 
-### Multiple modals
+## Multiple modals
 
 <FileSource src="/framed/Modal/ModalMultiple" />
 
-### Multiple secondary buttons
+## Multiple secondary buttons
 
 Use the `secondaryButtons` prop to render two secondary buttons. The prop is a 2-tuple type that supersedes `secondaryButtonText`.
 
 <FileSource src="/framed/Modal/3ButtonModal" />
 
-### Extra-small size
+## Extra-small size
 
 <FileSource src="/framed/Modal/ModalExtraSmall" />
 
-### Small size
+## Small size
 
 <FileSource src="/framed/Modal/ModalSmall" />
 
-### Large size
+## Large size
 
 <FileSource src="/framed/Modal/ModalLarge" />
 
-### Prevent close on outside click
+## Prevent close on outside click
 
 `preventCloseOnClickOutside` prevents the modal from being closed when clicking outside of an open modal. This prop is intended to be used for transactional modals.
 
 <FileSource src="/framed/Modal/ModalPreventOutsideClick" />
 
-### Button with icon
+## Button with icon
 
 <FileSource src="/framed/Modal/ModalButtonWithIcon" />

docs/src/pages/components/MultiSelect.svx

@@ -9,7 +9,7 @@
   <div class="body-short-01">Every <code>items</code> object must have a unique "id" property.</div>
 </InlineNotification>
 
-### Default
+## Default
 
 By default, items will be ordered alphabetically based on the `item.text` value. To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering).
 
@@ -19,13 +19,13 @@ By default, items will be ordered alphabetically based on the `item.text` value.
     {id: "2", text: "Fax"}]}"
   />
 
-### Custom slot
+## Custom slot
 
 Override the default slot to customize the display of each item. Access the item and index through the `let:` directive.
 
 <FileSource src="/framed/MultiSelect/MultiSelectSlot" />
 
-### No alphabetical ordering
+## No alphabetical ordering
 
 To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop.
 
@@ -36,7 +36,7 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
     sortItem="{() => {}}"
   />
 
-### Filterable
+## Filterable
 
 `$$restProps` are spread to the underlying input element.
 
@@ -46,7 +46,7 @@ To prevent alphabetical item ordering, pass an empty function to the `sortItem`
     {id: "2", text: "Fax"}]}"
   />
 
-### Initial selected items
+## Initial selected items
 
 To select (or bind) items, pass an array of item ids to `selectedIds`.
 
@@ -56,11 +56,11 @@ To select (or bind) items, pass an array of item ids to `selectedIds`.
     {id: "2", text: "Fax"}]}" 
   />
 
-### Multiple multi-select dropdowns
+## Multiple multi-select dropdowns
 
 <FileSource src="/framed/MultiSelect/MultipleMultiSelect" />
 
-### Format item display text
+## Format item display text
 
 Use the `itemToString` prop to format the display of individual items.
 
@@ -73,7 +73,7 @@ Use the `itemToString` prop to format the display of individual items.
     sortItem="{() => {}}"
   />
 
-### Top direction
+## Top direction
 
 Set `direction` to `"top"` for the dropdown menu to appear above the input.
 
@@ -83,7 +83,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Hidden label
+## Hidden label
 
 <MultiSelect titleText="Contact" label="Select contact methods..." hideLabel
     items="{[{id: "0", text: "Slack"},
@@ -91,7 +91,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Light variant
+## Light variant
 
 <MultiSelect light titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
@@ -99,7 +99,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Inline variant
+## Inline variant
 
 <MultiSelect type="inline" titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
@@ -107,7 +107,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Extra-large size
+## Extra-large size
 
 <MultiSelect size="xl" titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
@@ -115,7 +115,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Small size
+## Small size
 
 <MultiSelect size="sm" titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
@@ -123,7 +123,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Invalid state
+## Invalid state
 
 <MultiSelect invalid invalidText="A contact method is required" titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
@@ -131,7 +131,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Warning state
+## Warning state
 
 <MultiSelect warn warnText="One or more contact methods are not associated with your account" titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
@@ -139,7 +139,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Disabled state
+## Disabled state
 
 <MultiSelect disabled titleText="Contact" label="Select contact methods..."
     items="{[{id: "0", text: "Slack"},
@@ -147,7 +147,7 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
     {id: "2", text: "Fax"}]}"
   />
 
-### Disabled items
+## Disabled items
 
 Use the `disabled` property in the `items` prop to disable specific items.
 

docs/src/pages/components/NumberInput.svx

@@ -7,7 +7,7 @@ components: ["NumberInput", "NumberInputSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 This component requires a numerical value for `value`.
 
@@ -15,15 +15,15 @@ See [#no-value](#no-value) to allow for an empty value.
 
 <NumberInput label="Clusters" value={0} />
 
-### With helper text
+## With helper text
 
 <NumberInput label="Clusters" value={0} helperText="Clusters provisioned in your region" />
 
-### Minimum and maximum values
+## Minimum and maximum values
 
 <NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />
 
-### No value
+## No value
 
 Set `allowEmpty` to `true` to allow for no value.
 
@@ -31,46 +31,46 @@ Set `value` to `null` to denote "no value."
 
 <FileSource src="/framed/NumberInput/NumberInputEmpty" />
 
-### Hidden label
+## Hidden label
 
 <NumberInput hideLabel label="Clusters" value={0} />
 
-### Hidden steppers
+## Hidden steppers
 
 <NumberInput hideSteppers label="Clusters" value={0} />
 
-### Light variant
+## Light variant
 
 <NumberInput light label="Clusters" value={0} />
 
-### Read-only variant
+## Read-only variant
 
 <NumberInput readonly label="Clusters" value={0} />
 
-### Extra-large size
+## Extra-large size
 
 <NumberInput size="xl" label="Clusters" value={0} />
 
-### Small size
+## Small size
 
 <NumberInput size="sm" label="Clusters" value={0} />
 
-### Invalid state
+## Invalid state
 
 <NumberInput invalid invalidText="Invalid value" label="Clusters" value={0} />
 
-### Warning state
+## Warning state
 
 <NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value={25} />
 
-### Disabled state
+## Disabled state
 
 <NumberInput disabled label="Clusters" value={0} />
 
-### Skeleton
+## Skeleton
 
 <NumberInputSkeleton />
 
-### Skeleton without label
+## Skeleton without label
 
 <NumberInputSkeleton hideLabel />

docs/src/pages/components/OrderedList.svx

@@ -13,7 +13,7 @@ components: ["OrderedList", "ListItem"]
    </div>
 </InlineNotification>
 
-### Default
+## Default
 
 <OrderedList>
   <ListItem>Ordered list item</ListItem>
@@ -21,7 +21,7 @@ components: ["OrderedList", "ListItem"]
   <ListItem>Ordered list item</ListItem>
 </OrderedList>
 
-### With links
+## With links
 
 <OrderedList>
   <ListItem>
@@ -35,7 +35,7 @@ components: ["OrderedList", "ListItem"]
   </ListItem>
 </OrderedList>
 
-### Nested
+## Nested
 
 <OrderedList>
   <ListItem>
@@ -55,7 +55,7 @@ components: ["OrderedList", "ListItem"]
   <ListItem>Ordered list level 1</ListItem>
 </OrderedList>
 
-### Native list styles
+## Native list styles
 
 Use the `native` attribute to enable default browser list styles. This is useful for large lists (i.e., 1000 or more items) where the list number may overlap with the list item text.
 
@@ -77,7 +77,7 @@ Use the `native` attribute to enable default browser list styles. This is useful
   <ListItem>Ordered list level 1</ListItem>
 </OrderedList>
 
-### Expressive styles
+## Expressive styles
 
 Set `expressive` to `true` to use Carbon's expressive typesetting.
 

docs/src/pages/components/OverflowMenu.svx

@@ -8,7 +8,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <OverflowMenu>
   <OverflowMenuItem text="Manage credentials" />
@@ -16,7 +16,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
   <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>
 
-### Flipped
+## Flipped
 
 <OverflowMenu open flipped>
   <OverflowMenuItem text="Manage credentials" />
@@ -24,7 +24,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
   <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>
 
-### Menu direction top
+## Menu direction top
 
 <OverflowMenu flipped direction="top">
   <OverflowMenuItem text="Manage credentials" />
@@ -32,7 +32,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
   <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>
 
-### Light variant
+## Light variant
 
 <OverflowMenu light>
   <OverflowMenuItem text="Manage credentials" />
@@ -40,7 +40,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
   <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>
 
-### Extra-large size
+## Extra-large size
 
 <OverflowMenu size="xl">
   <OverflowMenuItem text="Manage credentials" />
@@ -48,7 +48,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
   <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>
 
-### Small size
+## Small size
 
 <OverflowMenu size="sm">
   <OverflowMenuItem text="Manage credentials" />
@@ -56,7 +56,7 @@ components: ["OverflowMenu", "OverflowMenuItem"]
   <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>
 
-### Custom primary focus
+## Custom primary focus
 
 By default, the first overflow menu item is focused when opening the dropdown.
 
@@ -66,7 +66,7 @@ By default, the first overflow menu item is focused when opening the dropdown.
   <OverflowMenuItem primaryFocus danger text="Delete service" />
 </OverflowMenu>
 
-### Custom trigger icon
+## Custom trigger icon
 
 <OverflowMenu icon={Add}>
   <OverflowMenuItem text="Manage credentials" />
@@ -74,7 +74,7 @@ By default, the first overflow menu item is focused when opening the dropdown.
   <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>
 
-### Custom trigger slot
+## Custom trigger slot
 
 <OverflowMenu style="width: auto;">
   <div slot="menu" style="padding: 1rem; color: red;">Custom trigger</div>
@@ -83,7 +83,7 @@ By default, the first overflow menu item is focused when opening the dropdown.
   <OverflowMenuItem danger text="Delete service" />
 </OverflowMenu>
 
-### Disabled items
+## Disabled items
 
 Disable menu items by setting `disabled` to `true`.
 

docs/src/pages/components/Pagination.svx

@@ -7,26 +7,26 @@ components: ["Pagination", "PaginationSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <Pagination totalItems={102} pageSizes="{[10, 15, 20]}" />
 
-### Current page
+## Current page
 
 <Pagination totalItems={102} page={4} />
 
-### Custom page sizes
+## Custom page sizes
 
 <Pagination totalItems={102} pageSizes="{[16, 36, 99]}" pageSize="{36}" />
 
-### Hidden page input
+## Hidden page input
 
 <Pagination totalItems={102} pageInputDisabled />
 
-### Hidden page size
+## Hidden page size
 
 <Pagination totalItems={102} pageSizeInputDisabled />
 
-### Skeleton
+## Skeleton
 
 <PaginationSkeleton />

docs/src/pages/components/PaginationNav.svx

@@ -3,10 +3,10 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <PaginationNav />
 
-### Loopable
+## Loopable
 
 <PaginationNav total={3} loop />

docs/src/pages/components/PasswordInput.svx

@@ -7,50 +7,50 @@ source: TextInput/PasswordInput.svelte
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <PasswordInput labelText="Password" placeholder="Enter password..." />
 
-### Custom tooltip alignment
+## Custom tooltip alignment
 
 Customize the tooltip alignment and position of the visibility toggle through the `tooltipAlignment` and `tooltipPosition` props.
 
 <PasswordInput tooltipAlignment="start" tooltipPosition="left" labelText="Password" placeholder="Enter password..." />
 
-### Password is visible
+## Password is visible
 
 Set prop `type` to `"text"` to toggle password visibility.
 
 <PasswordInput labelText="Password" type="text" placeholder="Enter password..." value="as_lta0890sdfpo__!9901" />
 
-### Hidden label
+## Hidden label
 
 <PasswordInput hideLabel labelText="Password" placeholder="Enter password..." />
 
-### Light variant
+## Light variant
 
 <PasswordInput light labelText="Password" placeholder="Enter password..." />
 
-### Inline
+## Inline
 
 <PasswordInput inline labelText="Password" placeholder="Enter password..." />
 
-### Extra-large size
+## Extra-large size
 
 <PasswordInput size="xl" labelText="Password" placeholder="Enter password..." />
 
-### Small size
+## Small size
 
 <PasswordInput size="sm" labelText="Password" placeholder="Enter password..." />
 
-### Invalid state
+## Invalid state
 
 <PasswordInput invalid invalidText="Incorrect user name or password." labelText="Password" placeholder="Enter password..." />
 
-### Warning state
+## Warning state
 
 <PasswordInput warn warnText="Password has been reset." labelText="Password" placeholder="Enter password..." />
 
-### Disabled state
+## Disabled state
 
 <PasswordInput disabled labelText="Password" placeholder="Enter password..." />

docs/src/pages/components/Popover.svx

@@ -3,7 +3,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 By default, the position of the popover component is absolute.
 
@@ -14,7 +14,7 @@ By default, the position of the popover component is absolute.
     </Popover>
 </div>
 
-### Relative position
+## Relative position
 
 Set `relative` to `true` to use a relative position.
 
@@ -25,7 +25,7 @@ Set `relative` to `true` to use a relative position.
     </Popover>
 </div>
 
-### Close on outside click
+## Close on outside click
 
 Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.
 
@@ -36,7 +36,7 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
     </Popover>
 </div>
 
-### Popover alignment
+## Popover alignment
 
 Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
 
@@ -109,7 +109,7 @@ The default `align` value is `"top"`.
     </Popover>
 </div>
 
-### With caret
+## With caret
 
 <div data-outline>
     Parent
@@ -118,7 +118,7 @@ The default `align` value is `"top"`.
     </Popover>
 </div>
 
-### Custom caret alignment
+## Custom caret alignment
 
 By default, the caret is aligned "top".
 
@@ -131,7 +131,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
     </Popover>
 </div>
 
-### Light variant
+## Light variant
 
 <div data-outline>
     Parent
@@ -140,7 +140,7 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
     </Popover>
 </div>
 
-### High contrast variant
+## High contrast variant
 
 <div data-outline>
     Parent

docs/src/pages/components/ProgressBar.svx

@@ -3,31 +3,31 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 Without a specified `value` prop, the progress bar is indeterminate.
 
 <ProgressBar helperText="Loading..." />
 
-### Small size
+## Small size
 
 Specify `size="sm"` to use the small variant.
 
 <ProgressBar size="sm" helperText="Loading..." />
 
-### Percentage
+## Percentage
 
 Specify a `value` for the progress bar to be determinate.
 
 <ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
-### Custom max value
+## Custom max value
 
 The default `max` value is `100`.
 
 <ProgressBar value={40} max={200} labelText="Upload status" helperText="40 MB of 200 MB" />
 
-### Hidden label
+## Hidden label
 
 It's recommended that you provide a `labelText` for accessibility.
 
@@ -35,17 +35,17 @@ Use `hideLabel` to visually hide the label text.
 
 <ProgressBar hideLabel value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
-### Inline variant
+## Inline variant
 
 The inline variant visually hides the `helperText`.
 
 <ProgressBar kind="inline" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
-### Indented variant
+## Indented variant
 
 <ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
-### UX example
+## UX example
 
 This example shows how to animate the progress bar from 0 to 100% with start and end states.
 

docs/src/pages/components/ProgressIndicator.svx

@@ -7,7 +7,7 @@ components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default (horizontal)
+## Default (horizontal)
 
 <ProgressIndicator currentIndex={2}>
   <ProgressStep complete
@@ -28,7 +28,7 @@ components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"]
   />
 </ProgressIndicator>
 
-### Prevent change on click
+## Prevent change on click
 
 By default, clicking any step that is complete will update the current step index.
 
@@ -53,13 +53,13 @@ Set `preventChangeOnClick` to `true` to prevent this behavior.
   />
 </ProgressIndicator>
 
-### Programmatic usage
+## Programmatic usage
 
 When programmatically updating the `currentIndex`, keep in mind that only completed steps should be selectable.
 
 <FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />
 
-### Invalid step
+## Invalid step
 
 <ProgressIndicator>
   <ProgressStep complete
@@ -76,7 +76,7 @@ When programmatically updating the `currentIndex`, keep in mind that only comple
   />
 </ProgressIndicator>
 
-### Disabled steps
+## Disabled steps
 
 <ProgressIndicator>
   <ProgressStep complete
@@ -93,7 +93,7 @@ When programmatically updating the `currentIndex`, keep in mind that only comple
   />
 </ProgressIndicator>
 
-### Spaced-equally
+## Spaced-equally
 
 <ProgressIndicator spaceEqually>
   <ProgressStep
@@ -110,7 +110,7 @@ When programmatically updating the `currentIndex`, keep in mind that only comple
   />
 </ProgressIndicator>
 
-### Vertical
+## Vertical
 
 <ProgressIndicator vertical>
   <ProgressStep
@@ -127,12 +127,12 @@ When programmatically updating the `currentIndex`, keep in mind that only comple
   />
 </ProgressIndicator>
 
-### Skeleton
+## Skeleton
 
 Use the `count` prop to specify the number of progress steps to render.
 
 <ProgressIndicatorSkeleton />
 
-### Skeleton (vertical)
+## Skeleton (vertical)
 
 <ProgressIndicatorSkeleton vertical />

docs/src/pages/components/RadioButton.svx

@@ -7,7 +7,7 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <RadioButtonGroup selected="standard">
   <RadioButton labelText="Free (1 GB)" value="free" />
@@ -15,7 +15,7 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-### With legend text
+## With legend text
 
 <RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
   <RadioButton labelText="Free (1 GB)" value="free" />
@@ -23,7 +23,7 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-### Legend text slot
+## Legend text slot
 
 Use the named "legendText" slot to customize the legend text.
 
@@ -41,7 +41,7 @@ Use the named "legendText" slot to customize the legend text.
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-### Hidden legend
+## Hidden legend
 
 It's recommended that you provide a legend for accessibility.
 
@@ -53,13 +53,13 @@ Use `hideLegend` to visually hide the legend text.
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-### Reactive example
+## Reactive example
 
 Use the `selected` prop to bind and update the selected value.
 
 <FileSource src="/framed/RadioButton/RadioButtonReactive" />
 
-### Left-aligned label text
+## Left-aligned label text
 
 <RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
   <RadioButton labelText="Free (1 GB)" value="free" />
@@ -67,7 +67,7 @@ Use the `selected` prop to bind and update the selected value.
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-### Disabled buttons
+## Disabled buttons
 
 <RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
   <RadioButton disabled labelText="Free (1 GB)" value="free" />
@@ -75,7 +75,7 @@ Use the `selected` prop to bind and update the selected value.
   <RadioButton disabled labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-### Vertical orientation
+## Vertical orientation
 
 <RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
   <RadioButton labelText="Free (1 GB)" value="free" />
@@ -83,7 +83,7 @@ Use the `selected` prop to bind and update the selected value.
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-### Skeleton
+## Skeleton
 
 <RadioButtonGroup legendText="Storage tier (disk)">
   <RadioButtonSkeleton />
@@ -91,7 +91,7 @@ Use the `selected` prop to bind and update the selected value.
   <RadioButtonSkeleton />
 </RadioButtonGroup>
 
-### Skeleton (vertical)
+## Skeleton (vertical)
 
 <RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
   <RadioButtonSkeleton />

docs/src/pages/components/RadioTile.svx

@@ -8,7 +8,7 @@ source: Tile/RadioTile.svelte
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <TileGroup legend="Service pricing tiers">
   <RadioTile value="0" checked>
@@ -22,17 +22,17 @@ source: Tile/RadioTile.svelte
   </RadioTile>
 </TileGroup>
 
-### Reactive (one-way binding)
+## Reactive (one-way binding)
 
 <FileSource src="/framed/RadioTile/RadioTileReactiveOneWay" />
 
-### Reactive (two-way binding)
+## Reactive (two-way binding)
 
 Binding to the `selected` prop is a more concise approach to managing state.
 
 <FileSource src="/framed/RadioTile/RadioTileReactive" />
 
-### Light variant
+## Light variant
 
 <TileGroup legend="Service pricing tiers">
   <RadioTile light value="0" checked>
@@ -46,7 +46,7 @@ Binding to the `selected` prop is a more concise approach to managing state.
   </RadioTile>
 </TileGroup>
 
-### Disabled state
+## Disabled state
 
 <TileGroup legend="Service pricing tiers">
   <RadioTile value="0" checked>

docs/src/pages/components/RecursiveList.svx

@@ -13,7 +13,7 @@ A child node can render text, a link, HTML content, and other children.
   </div>
 </InlineNotification>
 
-### Unordered
+## Unordered
 
 The `children` prop accepts an array of child nodes.
 
@@ -21,13 +21,13 @@ By default, the list type is unordered.
 
 <FileSource src="/framed/RecursiveList/RecursiveList" />
 
-### Ordered
+## Ordered
 
 Set `type` to `"ordered"` to use the ordered list variant.
 
 <FileSource src="/framed/RecursiveList/RecursiveListOrdered" />
 
-### Ordered (native styles)
+## Ordered (native styles)
 
 Set `type` to `"ordered-native"` to use the native styles for an ordered list.
 

docs/src/pages/components/Search.svx

@@ -4,60 +4,60 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 The `Search` component size is extra-large by default. There are [large](#large-size) and [small](#small-size) size variants.
 
 <Search />
 
-### Default value
+## Default value
 
 <Search placeholder="Search catalog..." value="Cloud functions" />
 
-### Reactive example
+## Reactive example
 
 <FileSource src="/framed/Search/SearchReactive" />
 
-### on:clear
+## on:clear
 
 The "clear" event is dispatched when clicking the "X" button or when pressing the "Escape" key.
 
 <Search value="Cloud functions" on:clear={() => console.log('clear')}/>
 
-### Expandable variant
+## Expandable variant
 
 Set `expandable` to `true` to use the expandable variant.
 
 <FileSource src="/framed/Search/SearchExpandableReactive" />
 
-### Light variant
+## Light variant
 
 <Search light />
 
-### Large size
+## Large size
 
 <Search size="lg" />
 
-### Small size
+## Small size
 
 <Search size="sm" />
 
-### Disabled state
+## Disabled state
 
 <Search disabled />
 
-### Custom search icon
+## Custom search icon
 
 <Search icon={Query} />
 
-### Skeleton
+## Skeleton
 
 <Search skeleton />
 
-### Skeleton (large)
+## Skeleton (large)
 
 <Search size="lg" skeleton />
 
-### Skeleton (small)
+## Skeleton (small)
 
 <Search size="sm" skeleton />

docs/src/pages/components/Select.svx

@@ -7,7 +7,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 If the `selected` prop is not set, the value of the first `SelectItem` will be used as the default value.
 
@@ -19,7 +19,7 @@ If the `selected` prop is not set, the value of the first `SelectItem` will be u
   <SelectItem value="g100" />
 </Select>
 
-### Custom item text
+## Custom item text
 
 Use the `text` prop on `SelectItem` to customize the display value.
 
@@ -31,7 +31,7 @@ Use the `text` prop on `SelectItem` to customize the display value.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Initial selected value
+## Initial selected value
 
 Use the `selected` prop to specify an initial value.
 
@@ -43,13 +43,13 @@ Use the `selected` prop to specify an initial value.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Reactive example
+## Reactive example
 
 The `selected` prop is reactive and supports two-way binding.
 
 <FileSource src="/framed/Select/SelectReactive" />
 
-### Helper text
+## Helper text
 
 <Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
@@ -59,7 +59,7 @@ The `selected` prop is reactive and supports two-way binding.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Hidden label
+## Hidden label
 
 <Select hideLabel labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
@@ -69,7 +69,7 @@ The `selected` prop is reactive and supports two-way binding.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Item groups
+## Item groups
 
 <Select labelText="Carbon theme" selected="0">
   <SelectItem value="0" text="Select a theme" disabled hidden />
@@ -84,7 +84,7 @@ The `selected` prop is reactive and supports two-way binding.
   </SelectItemGroup>
 </Select>
 
-### Light variant
+## Light variant
 
 <Select light labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
@@ -94,7 +94,7 @@ The `selected` prop is reactive and supports two-way binding.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Inline variant
+## Inline variant
 
 <Select inline labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
@@ -104,7 +104,7 @@ The `selected` prop is reactive and supports two-way binding.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Extra-large size
+## Extra-large size
 
 <Select size="xl" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
@@ -114,7 +114,7 @@ The `selected` prop is reactive and supports two-way binding.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Small size
+## Small size
 
 <Select size="sm" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
@@ -124,7 +124,7 @@ The `selected` prop is reactive and supports two-way binding.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Invalid state
+## Invalid state
 
 <Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
@@ -134,7 +134,7 @@ The `selected` prop is reactive and supports two-way binding.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Warning state
+## Warning state
 
 <Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
@@ -144,7 +144,7 @@ The `selected` prop is reactive and supports two-way binding.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Disabled state
+## Disabled state
 
 <Select disabled labelText="Carbon theme" selected="g10" >
   <SelectItem value="white" text="White" />
@@ -154,10 +154,10 @@ The `selected` prop is reactive and supports two-way binding.
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
-### Skeleton
+## Skeleton
 
 <SelectSkeleton />
 
-### Skeleton (hidden label)
+## Skeleton (hidden label)
 
 <SelectSkeleton hideLabel />

docs/src/pages/components/SelectableTile.svx

@@ -8,7 +8,7 @@ source: Tile/SelectableTile.svelte
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Multi-selectable tiles
+## Multi-selectable tiles
 
 <div role="group" aria-label="selectable tiles">
   <SelectableTile selected>
@@ -22,7 +22,7 @@ source: Tile/SelectableTile.svelte
   </SelectableTile>
 </div>
 
-### Light variant
+## Light variant
 
 <div role="group" aria-label="selectable tiles">
   <SelectableTile light selected>
@@ -36,7 +36,7 @@ source: Tile/SelectableTile.svelte
   </SelectableTile>
 </div>
 
-### Disabled state
+## Disabled state
 
 <div role="group" aria-label="selectable tiles">
   <SelectableTile selected>

docs/src/pages/components/SkeletonPlaceholder.svx

@@ -3,10 +3,10 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <SkeletonPlaceholder />
 
-### Custom size
+## Custom size
 
 <SkeletonPlaceholder style="height: 12rem; width: 12rem;" />

docs/src/pages/components/SkeletonText.svx

@@ -3,22 +3,22 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <SkeletonText />
 
-### Heading variant
+## Heading variant
 
 <SkeletonText heading />
 
-### Paragraph variant
+## Paragraph variant
 
 <SkeletonText paragraph />
 
-### Paragraph with custom line count
+## Paragraph with custom line count
 
 <SkeletonText paragraph lines={8} />
 
-### Paragraph with max width
+## Paragraph with max width
 
 <SkeletonText paragraph width="50%" />

docs/src/pages/components/Slider.svx

@@ -7,44 +7,44 @@ components: ["Slider", "SliderSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <Slider />
 
-### Full width
+## Full width
 
 Set `fullWidth` to `true` for the slider to span the full width of its containing element.
 
 <Slider fullWidth />
 
-### Hidden text input
+## Hidden text input
 
 <Slider hideTextInput />
 
-### Custom minimum, maximum values
+## Custom minimum, maximum values
 
 <Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} />
 
-### Custom step value
+## Custom step value
 
 <Slider labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100} step={10} />
 
-### Light variant
+## Light variant
 
 <Slider light labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100}  step={10} />
 
-### Invalid state
+## Invalid state
 
 <Slider invalid labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100}  step={10} />
 
-### Disabled state
+## Disabled state
 
 <Slider disabled labelText="Runtime memory (MB)" min={10} max={990} maxLabel="990 MB" value={100}  step={10} />
 
-### Skeleton
+## Skeleton
 
 <SliderSkeleton />
 
-### Skeleton (hidden label)
+## Skeleton (hidden label)
 
 <SliderSkeleton hideLabel />

docs/src/pages/components/StructuredList.svx

@@ -8,7 +8,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default (read-only)
+## Default (read-only)
 
 <StructuredList>
   <StructuredListHead>
@@ -52,7 +52,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
   </StructuredListBody>
 </StructuredList>
 
-### Condensed variant
+## Condensed variant
 
 <StructuredList condensed>
   <StructuredListHead>
@@ -96,7 +96,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
   </StructuredListBody>
 </StructuredList>
 
-### Flush
+## Flush
 
 <StructuredList flush>
   <StructuredListHead>
@@ -140,7 +140,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
   </StructuredListBody>
 </StructuredList>
 
-### Selectable rows
+## Selectable rows
 
 <StructuredList selection selected="row-1-value">
   <StructuredListHead>
@@ -180,6 +180,6 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
   </StructuredListBody>
 </StructuredList>
 
-### Skeleton
+## Skeleton
 
 <StructuredListSkeleton rows={3} />

docs/src/pages/components/Tabs.svx

@@ -7,7 +7,7 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <Tabs>
   <Tab label="Tab label 1" />
@@ -20,7 +20,7 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   </svelte:fragment>
 </Tabs>
 
-### Auto width
+## Auto width
 
 By default, the width of each tab is set to `10rem`.
 
@@ -37,11 +37,11 @@ Set `autoWidth` to `true` for tabs to have an automatically set width.
   </svelte:fragment>
 </Tabs>
 
-### Reactive example
+## Reactive example
 
 <FileSource src="/framed/Tabs/TabsReactive" />
 
-### Disabled tabs
+## Disabled tabs
 
 Setting `disabled` to `true` on the `Tab` component will prevent it from being clickable.
 
@@ -60,7 +60,7 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non-
   </svelte:fragment>
 </Tabs>
 
-### Container type
+## Container type
 
 <Tabs type="container">
   <Tab label="Tab label 1" />
@@ -73,10 +73,10 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non-
   </svelte:fragment>
 </Tabs>
 
-### Skeleton (default)
+## Skeleton (default)
 
 <TabsSkeleton count={3} />
 
-### Skeleton (container)
+## Skeleton (container)
 
 <TabsSkeleton type="container" count={3} />

docs/src/pages/components/Tag.svx

@@ -4,15 +4,15 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <Tag>IBM Cloud</Tag>
 
-### Small size
+## Small size
 
 <Tag size="sm">IBM Cloud</Tag>
 
-### Tag types
+## Tag types
 
 <Tag type="red">red</Tag>
 <Tag type="magenta">magenta</Tag>
@@ -27,41 +27,41 @@
 <Tag type="high-contrast">high-contrast</Tag>
 <Tag type="outline">outline</Tag>
 
-### Filterable
+## Filterable
 
 <Tag filter on:close>carbon-components</Tag>
 
-### Filterable (disabled)
+## Filterable (disabled)
 
 <Tag filter disabled on:close>carbon-components</Tag>
 
-### Filterable (small)
+## Filterable (small)
 
 <Tag size="sm" filter on:close>carbon-components</Tag>
 
-### Custom icon
+## Custom icon
 
 Note: rendering a custom icon cannnot be used with the filterable variant.
 
 <Tag icon={IbmCloud}>IBM Cloud</Tag>
 
-### Interactive variant
+## Interactive variant
 
 Set `interactive` to `true` to render a `button` element instead of a `div`.
 
 <Tag interactive>Machine learning</Tag>
 
-### Disabled
+## Disabled
 
 The filterable and interactive tag variants have a disabled state.
 
 <Tag filter disabled>Machine learning</Tag>
 <Tag interactive disabled>Machine learning</Tag>
 
-### Skeleton
+## Skeleton
 
 <Tag skeleton />
 
-### Skeleton (small)
+## Skeleton (small)
 
 <Tag size="sm" skeleton />

docs/src/pages/components/TextArea.svx

@@ -7,11 +7,11 @@ components: ["TextArea", "TextAreaSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <TextArea labelText="App description" placeholder="Enter a description..." />
 
-### Maximum character count
+## Maximum character count
 
 Specify the max character count using the `maxCount` prop. A character counter will be displayed to the right of the label.
 
@@ -19,34 +19,34 @@ You can always use the native `maxlength` attribute if you'd prefer that a count
 
 <TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} />
 
-### With helper text
+## With helper text
 
 <TextArea labelText="App description" helperText="A rich description helps us better recommend related products and services" placeholder="Enter a description..." />
 
-### Hidden label
+## Hidden label
 
 <TextArea hideLabel labelText="App description" placeholder="Enter a description..." />
 
-### Light variant
+## Light variant
 
 <TextArea light labelText="App description" placeholder="Enter a description..." />
 
-### Custom rows
+## Custom rows
 
 <TextArea rows={10} labelText="App description" placeholder="Enter a description..." />
 
-### Invalid state
+## Invalid state
 
 <TextArea invalid invalidText="Only plain text characters are allowed" labelText="App description" placeholder="Enter a description..." />
 
-### Disabled state
+## Disabled state
 
 <TextArea disabled labelText="App description" placeholder="Enter a description..." />
 
-### Skeleton
+## Skeleton
 
 <TextAreaSkeleton />
 
-### Skeleton without label
+## Skeleton without label
 
 <TextAreaSkeleton hideLabel />

docs/src/pages/components/TextInput.svx

@@ -7,54 +7,54 @@ components: ["TextInput", "TextInputSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <TextInput labelText="User name" placeholder="Enter user name..." />
 
-### With helper text
+## With helper text
 
 <TextInput labelText="User name" helperText="Your user name is associated with your email" placeholder="Enter user name..." />
 
-### Hidden label
+## Hidden label
 
 <TextInput hideLabel labelText="User name" placeholder="Enter user name..." />
 
-### Light variant
+## Light variant
 
 <TextInput light labelText="User name" placeholder="Enter user name..." />
 
-### Inline variant
+## Inline variant
 
 <TextInput inline labelText="User name" placeholder="Enter user name..." />
 
-### Read-only variant
+## Read-only variant
 
 <TextInput readonly labelText="User name" value="IBM" />
 
-### Extra-large size
+## Extra-large size
 
 <TextInput size="xl" labelText="User name" placeholder="Enter user name..." />
 
-### Small size
+## Small size
 
 <TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
 
-### Invalid state
+## Invalid state
 
 <TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
 
-### Warning state
+## Warning state
 
 <TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />
 
-### Disabled state
+## Disabled state
 
 <TextInput disabled labelText="User name" placeholder="Enter user name..." />
 
-### Skeleton
+## Skeleton
 
 <TextInputSkeleton />
 
-### Skeleton without label
+## Skeleton without label
 
 <TextInputSkeleton hideLabel />

docs/src/pages/components/Theme.svx

@@ -15,41 +15,41 @@ The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-U
   
 <CodeSnippet svx-ignore {code} />
 
-### Default
+## Default
 
 <FileSource src="/framed/Theme/Theme" />
 
-### Persist locally
+## Persist locally
 
 Set `persist` to `true` to persist the theme locally using the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
 
 <FileSource src="/framed/Theme/ThemePersist" />
 
-### Custom theme
+## Custom theme
 
 Define keys and values in the `tokens` prop that override default Carbon theme tokens. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing a theme using token values.
 
 <FileSource src="/framed/Theme/ThemeTokens" />
 
-### Theme toggle
+## Theme toggle
 
 Set `render` to `"toggle"` to render a toggle switch to control the theme.
 
 <FileSource src="/framed/Theme/ThemeToggle" />
 
-### Theme toggle (custom)
+## Theme toggle (custom)
 
 Customize the toggle using the `toggle` prop.
 
 <FileSource src="/framed/Theme/ThemeToggleCustom" />
 
-### Theme select
+## Theme select
 
 Set `render` to `"select"` to render a select dropdown to control the theme.
 
 <FileSource src="/framed/Theme/ThemeSelect" />
 
-### Theme select (custom)
+## Theme select (custom)
 
 Customize the select using the `select` prop.
 

docs/src/pages/components/Tile.svx

@@ -7,10 +7,10 @@ source: Tile/Tile.svelte
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <Tile>Content</Tile>
 
-### Light variant
+## Light variant
 
 <Tile light>Content</Tile>

docs/src/pages/components/TimePicker.svx

@@ -7,7 +7,7 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <TimePicker labelText="Cron job" placeholder="hh:mm">
   <TimePickerSelect value="pm">
@@ -20,7 +20,7 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
   </TimePickerSelect>
 </TimePicker>
 
-### Light variant
+## Light variant
 
 <TimePicker light labelText="Cron job" placeholder="hh:mm">
   <TimePickerSelect value="pm">
@@ -33,7 +33,7 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
   </TimePickerSelect>
 </TimePicker>
 
-### Extra-large size
+## Extra-large size
 
 <TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
   <TimePickerSelect value="pm">
@@ -46,7 +46,7 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
   </TimePickerSelect>
 </TimePicker>
 
-### Small size
+## Small size
 
 <TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
   <TimePickerSelect value="pm">
@@ -59,7 +59,7 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
   </TimePickerSelect>
 </TimePicker>
 
-### Invalid state
+## Invalid state
 
 <TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
   <TimePickerSelect value="pm">
@@ -73,7 +73,7 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
 </TimePicker>
 
 
-### Disabled state
+## Disabled state
 
 <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
   <TimePickerSelect value="pm" disabled>

docs/src/pages/components/ToastNotification.svx

@@ -7,11 +7,11 @@ source: Notification/ToastNotification.svelte
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default (error)
+## Default (error)
 
 <ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 
-### Prevent default close behavior
+## Prevent default close behavior
 
 `ToastNotification` is a controlled component. Prevent the default close behavior using the `e.preventDefault()` method in the dispatched `on:close` event.
 
@@ -20,13 +20,13 @@ source: Notification/ToastNotification.svelte
   // custom close logic (e.g., transitions)
 }} />
 
-### Full width
+## Full width
 
 Set `fullWidth` to `true` for the notification to span the full width of its containing element.
 
 <ToastNotification fullWidth title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 
-### Slottable title, subtitle, caption
+## Slottable title, subtitle, caption
 
 <ToastNotification>
   <strong slot="title">Error: </strong>
@@ -34,11 +34,11 @@ Set `fullWidth` to `true` for the notification to span the full width of its con
   <strong slot="caption">{new Date().toLocaleString()}</strong>
 </ToastNotification>
 
-### Hidden close button
+## Hidden close button
 
 <ToastNotification hideCloseButton kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
 
-### Notification variants
+## Notification variants
 
 <ToastNotification kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 <ToastNotification kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}"  />
@@ -47,7 +47,7 @@ Set `fullWidth` to `true` for the notification to span the full width of its con
 <ToastNotification kind="warning" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
 <ToastNotification kind="warning-alt" title="Scheduled maintenance" subtitle="Maintenance will last 2-4 hours." caption="{new Date().toLocaleString()}" />
 
-### Low contrast
+## Low contrast
 
 <ToastNotification lowContrast kind="error" title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />
 <ToastNotification lowContrast kind="info" title="New updates" subtitle="Restart to get the latest updates." caption="{new Date().toLocaleString()}" />

docs/src/pages/components/Toggle.svx

@@ -7,33 +7,33 @@ components: ["Toggle", "ToggleSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default (untoggled)
+## Default (untoggled)
 
 <Toggle labelText="Push notifications" />
 
-### Toggled
+## Toggled
 
 <Toggle labelText="Push notifications" toggled />
 
-### Reactive example
+## Reactive example
 
 <FileSource src="/framed/Toggle/ToggleReactive" />
 
-### on:toggle event
+## on:toggle event
 
 <Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />
 
-### Hidden label text
+## Hidden label text
 
 Set `hideLabel` to `true` to visually hide the label text. It's recommended to still specify `labelText` for screen reader accessibility.
 
 <Toggle labelText="Push notifications" hideLabel />
 
-### Custom labels
+## Custom labels
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
 
-### Slottable labels
+## Slottable labels
 
 An alternative to the "labelA" and "labelB" props is to use the corresponding named slots.
 
@@ -42,18 +42,18 @@ An alternative to the "labelA" and "labelB" props is to use the corresponding na
   <span slot="labelB" style="color: green">Yes</span>
 </Toggle>
 
-### Disabled
+## Disabled
 
 <Toggle labelText="Push notifications" disabled />
 
-### Small size
+## Small size
 
 <Toggle size="sm" labelText="Push notifications" />
 
-### Skeleton
+## Skeleton
 
 <ToggleSkeleton />
 
-### Skeleton (small)
+## Skeleton (small)
 
 <ToggleSkeleton size="sm" />

docs/src/pages/components/Tooltip.svx

@@ -8,7 +8,7 @@ components: ["Tooltip", "TooltipFooter"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 By default, the tooltip is triggered by an information icon.
 
@@ -18,7 +18,7 @@ By default, the tooltip is triggered by an information icon.
   </p>
 </Tooltip>
 
-### With trigger text
+## With trigger text
 
 <Tooltip triggerText="Resource list">
   <p>
@@ -26,24 +26,24 @@ By default, the tooltip is triggered by an information icon.
   </p>
 </Tooltip>
 
-### Reactive example
+## Reactive example
 
 <FileSource src="/framed/Tooltip/TooltipReactive" />
 
-### Directions
+## Directions
 
 <Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
 <Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
 <Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
 <Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>
 
-### Alignment
+## Alignment
 
 <Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
 <Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
 <Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>
 
-### Interactive
+## Interactive
 
 <Tooltip triggerText="Resource list">
   <p>
@@ -55,7 +55,7 @@ By default, the tooltip is triggered by an information icon.
 </TooltipFooter>
 </Tooltip>
 
-### Custom icon (component)
+## Custom icon (component)
 
 <Tooltip triggerText="Resource list" icon={Catalog}>
   <p>
@@ -63,7 +63,7 @@ By default, the tooltip is triggered by an information icon.
   </p>
 </Tooltip>
 
-### Custom icon (slot)
+## Custom icon (slot)
 
 <Tooltip triggerText="Resource list">
   <div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
@@ -72,7 +72,7 @@ By default, the tooltip is triggered by an information icon.
   </p>
 </Tooltip>
 
-### Hidden icon
+## Hidden icon
 
 <Tooltip hideIcon triggerText="Resource list">
   <p>

docs/src/pages/components/TooltipDefinition.svx

@@ -3,13 +3,13 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 <TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
   Armonk
 </TooltipDefinition>
 
-### Custom tooltip direction and alignment
+## Custom tooltip direction and alignment
 
 Customize the tooltip menu direction and alignment through the `direction` and `align` props.
 
@@ -19,7 +19,7 @@ By default, `direction` is `"bottom"` and `align` is `"center"`.
   Armonk
 </TooltipDefinition>
 
-### Custom tooltip slot
+## Custom tooltip slot
 
 <TooltipDefinition>
   Armonk

docs/src/pages/components/TooltipIcon.svx

@@ -5,18 +5,18 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default ("bottom" direction, "center" aligned)
+## Default ("bottom" direction, "center" aligned)
 
 <TooltipIcon tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />
 
-### Directions
+## Directions
 
 <TooltipIcon tooltipText="Top start" direction="top" align="start" icon={Filter} />
 <TooltipIcon tooltipText="Right end" direction="right" align="end" icon={Filter} />
 <TooltipIcon tooltipText="Bottom start" direction="bottom" align="start" icon={Filter} />
 <TooltipIcon tooltipText="Left start" direction="left" align="start" icon={Filter} />
 
-### Custom tooltip text
+## Custom tooltip text
 
 Use the "text" slot to customize the tooltip text.
 
@@ -24,6 +24,6 @@ Use the "text" slot to customize the tooltip text.
   <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
 </TooltipIcon>
 
-### Disabled
+## Disabled
 
 <TooltipIcon disabled tooltipText="Carbon is an open source design system by IBM." icon={Carbon} />

docs/src/pages/components/TreeView.svx

@@ -3,7 +3,7 @@
   import Preview from "../../components/Preview.svelte";
 </script>
 
-### Default
+## Default
 
 The `children` prop accepts an array of child nodes. Each node should contain `id` and `text` properties.
 
@@ -17,49 +17,49 @@ A parent node contains `children` while a leaf node does not.
 
 <FileSource src="/framed/TreeView/TreeView" />
 
-### Initial active node
+## Initial active node
 
 The active node can be set through `activeId`.
 
 <FileSource src="/framed/TreeView/TreeViewActive" />
 
-### Compact size
+## Compact size
 
 Set `size` to `"compact"` to use the compact variant.
 
 <FileSource src="/framed/TreeView/TreeViewCompact" />
 
-### With icons
+## With icons
 
 To render a node with an icon, define an `icon` property with a Carbon Svelte icon as its value.
 
 <FileSource src="/framed/TreeView/TreeViewIcons" />
 
-### Initial expanded nodes
+## Initial expanded nodes
 
 Expanded nodes can be set using `expandedIds`.
 
 <FileSource src="/framed/TreeView/TreeViewExpanded" />
 
-### Initial multiple selected nodes
+## Initial multiple selected nodes
 
 Initial multiple selected nodes can be set using `selectedIds`.
 
 <FileSource src="/framed/TreeView/TreeViewMultiselect" />
 
-### Expand all nodes
+## Expand all nodes
 
 To programmatically expand all nodes, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `TreeView.expandAll()` accessor.
 
 <FileSource src="/framed/TreeView/TreeViewExpandAll" />
 
-### Collapse all nodes
+## Collapse all nodes
 
 Similarly, invoke `TreeView.collapseAll()` to collapse all nodes.
 
 <FileSource src="/framed/TreeView/TreeViewCollapseAll" />
 
-### Expand a subset of nodes
+## Expand a subset of nodes
 
 Use the `TreeView.expandNodes` method to expand only a subset of nodes.
 
@@ -69,7 +69,7 @@ If no argument is provided, all nodes will be expanded.
 
 <FileSource src="/framed/TreeView/TreeViewExpandNodes" />
 
-### Collapse a subset of nodes
+## Collapse a subset of nodes
 
 Use the `TreeView.collapseNodes` method to collapse a subset of nodes.
 

docs/src/pages/components/Truncate.svx

@@ -6,7 +6,7 @@
 
 This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) for single-line text truncation.
 
-### Default
+## Default
 
 By default, text will be clamped at the end of the line. Text is wrapped with a paragraph (`p`) element. Use the [truncate action](#usetruncate) to truncate text in other elements.
 
@@ -14,7 +14,7 @@ By default, text will be clamped at the end of the line. Text is wrapped with a
   Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
 </Truncate>
 
-### Clamp front
+## Clamp front
 
 Set `clamp` to `"front"` to clamp the text from the front.
 
@@ -22,7 +22,7 @@ Set `clamp` to `"front"` to clamp the text from the front.
   Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
 </Truncate>
 
-### use:truncate
+## use:truncate
 
 The `truncate` action can be used on plain HTML elements.
 

docs/src/pages/components/UIShell.svx

@@ -35,23 +35,23 @@ components: ["Header",
 
 Open the following examples in a new tab to experience them in full.
 
-### Header
+## Header
 
 <FileSource src="/framed/UIShell/Header" />
 
-### Header with side navigation
+## Header with side navigation
 
 The hamburger menu will automatically be rendered if the `SideNav` component is used.
 
 <FileSource src="/framed/UIShell/HeaderNav" />
 
-### Header with side navigation (rail)
+## Header with side navigation (rail)
 
 Set `rail` to `true` on `SideNav` to use the rail variant.
 
 <FileSource src="/framed/UIShell/HeaderNavRail" />
 
-### Header with app switcher
+## Header with app switcher
 
 The `HeaderAction` component uses the [transition:slide API](https://svelte.dev/docs#slide); you can customize the transition duration, delay, and easing with the `transition` prop.
 
@@ -59,14 +59,14 @@ You can disable the `transition` by setting it to `false`.
 
 <FileSource src="/framed/UIShell/HeaderSwitcher" />
 
-### Header with global search
+## Header with global search
 
 <FileSource src="/framed/UIShell/HeaderSearch" />
 
-### Header with utilities
+## Header with utilities
 
 <FileSource src="/framed/UIShell/HeaderUtilities" />
 
-### Header with persisted hamburger menu
+## Header with persisted hamburger menu
 
 <FileSource src="/framed/UIShell/PersistedHamburgerMenu" />

docs/src/pages/components/UnorderedList.svx

@@ -13,7 +13,7 @@ components: ["UnorderedList", "ListItem"]
   </div>
 </InlineNotification>
 
-### Default
+## Default
 
 <UnorderedList>
   <ListItem>Unordered list item</ListItem>
@@ -21,7 +21,7 @@ components: ["UnorderedList", "ListItem"]
   <ListItem>Unordered list item</ListItem>
 </UnorderedList>
 
-### With links
+## With links
 
 <UnorderedList>
   <ListItem>
@@ -35,7 +35,7 @@ components: ["UnorderedList", "ListItem"]
   </ListItem>
 </UnorderedList>
 
-### Nested
+## Nested
 
 <UnorderedList>
   <ListItem>
@@ -55,7 +55,7 @@ components: ["UnorderedList", "ListItem"]
   <ListItem>Unordered list level 1</ListItem>
 </UnorderedList>
 
-### Expressive styles
+## Expressive styles
 
 Set `expressive` to `true` to use Carbon's expressive typesetting.
 

docs/src/pages/index.svelte

@@ -91,7 +91,7 @@
     </Row>
     <Row style="margin-bottom: var(--cds-layout-02)">
       <Column max="{10}" xlg="{10}">
-        <h3 style="margin-top: var(--cds-layout-02)">Installation</h3>
+        <h2 style="margin-top: var(--cds-layout-02)">Installation</h2>
         <InlineNotification
           style="max-width: calc(48rem - 1rem);"
           kind="info"
@@ -123,7 +123,7 @@
     </Row>
     <Row style="margin-bottom: var(--cds-layout-04)">
       <Column>
-        <h3>Styling</h3>
+        <h2>Styling</h2>
         <p>
           Before importing components, you will need to first apply Carbon
           component styles. The Carbon Design System supports five themes (2
@@ -222,7 +222,7 @@
 
     <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
-        <h3>Dynamic theming</h3>
+        <h2>Dynamic theming</h2>
         <p>Use the "all.css" StyleSheet for dynamic, client-side theming.</p>
         <Row padding noGutter>
           <Column>
@@ -254,7 +254,7 @@
 
     <Row style="margin-bottom: var(--cds-layout-02)">
       <Column>
-        <h3>Portfolio</h3>
+        <h2>Portfolio</h2>
         <p>
           The Carbon Svelte portfolio includes packages for icons, pictograms,
           and data visualization.

docs/svelte.config.js

@@ -170,7 +170,7 @@ module.exports = {
         walk(parse(content), {
           enter(node) {
             if (node.type === "Element") {
-              if (node.name === "h3") {
+              if (node.name === "h2") {
                 const id = node.attributes.find(
                   (attribute) => attribute.name === "id"
                 );