feat(heading): add Heading and Section components (#1961)

src/Heading/Heading.svelte

@@ -0,0 +1,18 @@
+<script>
+  // @ts-check
+
+  /**
+   * @typedef {1 | 2 | 3 | 4 | 5 | 6} SectionLevel
+   */
+
+  import { getContext } from "svelte";
+
+  /** @type {undefined | SectionLevel} */
+  const sectionLevel = getContext("Section");
+
+  $: tag = `h${sectionLevel ?? 1}`;
+</script>
+
+<svelte:element this="{tag}">
+  <slot />
+</svelte:element>

src/Heading/Section.svelte

@@ -0,0 +1,42 @@
+<script>
+  // @ts-check
+
+  /**
+   * @typedef {1 | 2 | 3 | 4 | 5 | 6} SectionLevel
+   */
+
+  /**
+   * Specify the level the section should start at.
+   * @type {SectionLevel}
+   */
+  export let level = 1;
+
+  /**
+   * Specify the tag name
+   * @type {keyof HTMLElementTagNameMap}
+   */
+  export let tag = "section";
+
+  import { getContext, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  /** @type {undefined | SectionLevel} */
+  const parentLevel = getContext("Section");
+
+  /** @type {import ("svelte/store").Writable<SectionLevel>} */
+  const internalLevel = writable(level);
+
+  if (typeof parentLevel === "number") {
+    // @ts-expect-error
+    internalLevel.set(Math.min(parentLevel + 1, 6));
+  }
+
+  // Custom level should override the inferred parent level.
+  if (level !== 1) {
+    internalLevel.set(level);
+  }
+
+  setContext("Section", $internalLevel);
+</script>
+
+<svelte:element this="{tag}"><slot /></svelte:element>

src/Heading/index.js

@@ -0,0 +1,2 @@
+export { default as Heading } from "./Heading.svelte";
+export { default as Section } from "./Section.svelte";

src/index.js

@@ -56,6 +56,7 @@ export { FormGroup } from "./FormGroup";
 export { FormItem } from "./FormItem";
 export { FormLabel } from "./FormLabel";
 export { Grid, Row, Column } from "./Grid";
+export { Heading, Section } from "./Heading";
 export { ImageLoader } from "./ImageLoader";
 export { InlineLoading } from "./InlineLoading";
 export { Layer } from "./Layer";