diff --git a/docs/.vitepress/components/BreakpointPage.vue b/docs/.vitepress/components/BreakpointPage.vue
index 35d6e741..fcd310a9 100644
--- a/docs/.vitepress/components/BreakpointPage.vue
+++ b/docs/.vitepress/components/BreakpointPage.vue
@@ -131,7 +131,7 @@ const stickySidebarTokens = [
           (1440px) for development.
         </p>
 
-        <div class="br-screen-size-diagram-wrap sgds:w-full" aria-label="Screen size breakpoint diagram" tabindex="0">
+        <div class="br-screen-size-diagram-wrap sgds:w-full" tabindex="0">
           <div class="br-screen-size-diagram sgds:relative sgds:h-[18.5rem] sgds:w-full">
             <svg
               viewBox="0 0 1672 480"
diff --git a/docs/.vitepress/components/ColourPalettePage.vue b/docs/.vitepress/components/ColourPalettePage.vue
index ad7e64da..3df5d352 100644
--- a/docs/.vitepress/components/ColourPalettePage.vue
+++ b/docs/.vitepress/components/ColourPalettePage.vue
@@ -1782,7 +1782,7 @@ const openContrastInfo = () => {
         <strong>APCA (Accessible Perceptual Contrast Algorithm)</strong> is a newer model that's more accurate for real reading. As a rough guide, body text needs an absolute value around <span class="sgds:font-semibold">60</span> or higher.
       </p>
     </div>
-    <sgds-button slot="footer" variant="primary" @click="contrastInfoOpen = false">Got it</sgds-button>
+    <sgds-button slot="footer" variant="primary" ariaLabel="Got it" @click="contrastInfoOpen = false">Got it</sgds-button>
   </sgds-modal>
 </template>
 
diff --git a/docs/.vitepress/components/SpacingPage.vue b/docs/.vitepress/components/SpacingPage.vue
index ce718829..f6d07e96 100644
--- a/docs/.vitepress/components/SpacingPage.vue
+++ b/docs/.vitepress/components/SpacingPage.vue
@@ -140,8 +140,8 @@ const progressionCurvePath = "M 16 144 C 84 142 152 136 226 128 C 292 120 348 10
 
           <div class="typography-page-template__demo-pane">
             <div class="typography-page-template__card spacing-page__demo-card spacing-page__progression-card sgds:min-h-[20rem] sgds:max-md:min-h-[14rem]">
-              <div class="spacing-page__chart" aria-label="Spacing progression from 2 px to 128 px" tabindex="0">
-                <svg class="spacing-page__chart-line" :viewBox="`0 0 ${chartWidth} ${chartHeight}`" aria-hidden="true">
+              <div class="spacing-page__chart" tabindex="0">
+                <svg class="spacing-page__chart-line" :viewBox="`0 0 ${chartWidth} ${chartHeight}`" role="img" aria-label="Spacing progression from 2 px to 128 px">
                   <path :d="progressionCurvePath" />
                 </svg>
 
diff --git a/docs/.vitepress/components/StoriesOverviewPage.vue b/docs/.vitepress/components/StoriesOverviewPage.vue
index 6bd45e11..492579a7 100644
--- a/docs/.vitepress/components/StoriesOverviewPage.vue
+++ b/docs/.vitepress/components/StoriesOverviewPage.vue
@@ -72,6 +72,7 @@
               variant="primary"
               tone="neutral"
               size="md"
+              ariaLabel="Read post"
               >Read post</sgds-button
             >
           </div>
diff --git a/docs/.vitepress/components/ai/AiMcpServerPage.vue b/docs/.vitepress/components/ai/AiMcpServerPage.vue
index c16ba5cf..39ac8244 100644
--- a/docs/.vitepress/components/ai/AiMcpServerPage.vue
+++ b/docs/.vitepress/components/ai/AiMcpServerPage.vue
@@ -47,7 +47,7 @@ const openFigmaToCodeTab = (event: Event) => {
           Use Figma MCP when you need AI to work with real Figma context, selected frames, or live UI captures. Use Figma Make when you want to explore interface ideas from prompts before refining them with SGDS guidance.
         </p>
 
-        <div class="sgds-grid sgds:gap-layout-md" aria-label="Figma workflow options">
+        <div class="sgds-grid sgds:gap-layout-md">
         <a
           v-for="card in figmaWorkflowCards"
           :key="card.title"
diff --git a/docs/.vitepress/components/ai/AiUseWithSgdsPage.vue b/docs/.vitepress/components/ai/AiUseWithSgdsPage.vue
index bfd35d9a..d351d45a 100644
--- a/docs/.vitepress/components/ai/AiUseWithSgdsPage.vue
+++ b/docs/.vitepress/components/ai/AiUseWithSgdsPage.vue
@@ -43,7 +43,7 @@ const developmentWorkflowCards = [
         <p class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:m-0 sgds:text-subtle">
           Use this page when you are building or improving SGDS code with an AI coding tool. Start with a new SGDS project, or use an existing codebase that needs to adopt SGDS components, utilities, and layout guidance.
         </p>
-        <div class="sgds-grid sgds:gap-layout-md" aria-label="Development workflow paths">
+        <div class="sgds-grid sgds:gap-layout-md">
           <a
             v-for="card in developmentWorkflowCards"
             :key="card.title"
diff --git a/docs/.vitepress/components/ai/UserJourneyMap.vue b/docs/.vitepress/components/ai/UserJourneyMap.vue
index 0ce6bbf2..259e823d 100644
--- a/docs/.vitepress/components/ai/UserJourneyMap.vue
+++ b/docs/.vitepress/components/ai/UserJourneyMap.vue
@@ -701,6 +701,7 @@ function setScenario(id: ScenarioFilter) {
             size="sm"
             :variant="activePersona === f.id ? 'primary' : 'outline'"
             :tone="activePersona === f.id ? undefined : 'neutral'"
+            :ariaLabel="f.label"
             :aria-pressed="activePersona === f.id"
             @click="setPersona(f.id)"
           >{{ f.label }}</sgds-button>
@@ -712,6 +713,7 @@ function setScenario(id: ScenarioFilter) {
             size="sm"
             :variant="activeScenario === f.id ? 'primary' : 'outline'"
             :tone="activeScenario === f.id ? undefined : 'neutral'"
+            :ariaLabel="f.label"
             :aria-pressed="activeScenario === f.id"
             @click="setScenario(f.id)"
           >{{ f.label }}</sgds-button>
diff --git a/docs/.vitepress/components/components/BlockRaw.vue b/docs/.vitepress/components/components/BlockRaw.vue
deleted file mode 100644
index aff8d734..00000000
--- a/docs/.vitepress/components/components/BlockRaw.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { getPatternDoc } from "../../data/pattern-docs";
-
-const props = defineProps<{ blockKey: string }>();
-
-// Render every variant of the requested block category, stacked vertically
-// inside the iframe. The toolbar in the parent preview shell exposes the same
-// switcher dropdown the page templates use, so users land on the canonical
-// "block kit" view by default.
-const variants = computed(() => {
-  const doc = getPatternDoc(props.blockKey);
-  return doc?.demos ?? [];
-});
-
-const isSingleVariant = computed(() => variants.value.length === 1);
-</script>
-
-<template>
-  <div v-if="isSingleVariant" class="block-raw-single" v-html="variants[0]?.markup"></div>
-  <div v-else class="block-raw-root">
-    <section
-      v-for="(variant, idx) in variants"
-      :key="idx"
-      class="block-raw-variant"
-    >
-      <header class="block-raw-variant-header">
-        <span class="block-raw-variant-label">{{ idx + 1 }} of {{ variants.length }}</span>
-        <h2 class="block-raw-variant-title">{{ variant.title }}</h2>
-        <p v-if="variant.description" class="block-raw-variant-description">{{ variant.description }}</p>
-      </header>
-      <div class="block-raw-variant-body" v-html="variant.markup"></div>
-    </section>
-  </div>
-</template>
-
-<style>
-.block-raw-root {
-  display: flex;
-  flex-direction: column;
-  /* Each variant gets a clear visual divider against the surrounding stage so
-     the iframe reads as a stacked "kit" of options, not a single page. */
-  background: var(--sgds-surface-raised);
-}
-
-.block-raw-variant {
-  background: var(--sgds-surface-default);
-  margin-bottom: var(--sgds-spacing-layout-md);
-}
-
-.block-raw-variant:last-child {
-  margin-bottom: 0;
-}
-
-.block-raw-variant-header {
-  padding: var(--sgds-spacing-component-md) var(--sgds-spacing-layout-md);
-  border-bottom: 1px solid var(--sgds-border-color-muted);
-  background: var(--sgds-surface-raised);
-}
-
-.block-raw-variant-label {
-  display: inline-block;
-  font-size: var(--sgds-font-size-1);
-  font-weight: var(--sgds-font-weight-semibold);
-  letter-spacing: var(--sgds-letter-spacing-wide);
-  color: var(--sgds-body-color-subtle);
-  text-transform: uppercase;
-  margin-bottom: var(--sgds-spacing-2-xs);
-}
-
-.block-raw-variant-title {
-  font-size: var(--sgds-font-size-4);
-  font-weight: var(--sgds-font-weight-semibold);
-  color: var(--sgds-heading-color-default);
-  margin: 0 0 var(--sgds-spacing-2-xs) 0;
-}
-
-.block-raw-variant-description {
-  font-size: var(--sgds-font-size-2);
-  color: var(--sgds-body-color-subtle);
-  margin: 0;
-}
-
-.block-raw-variant-body {
-  /* Each variant renders as the storybook content does — full-width inside
-     this wrapper. Container utilities inside the markup constrain horizontal
-     bleed, so no extra padding is needed here. */
-}
-
-.block-raw-single {
-  background: var(--sgds-surface-default);
-}
-
-/* Theme treatment for the stock SGDS placeholder image inside v-html previews.
-   The source image remains the original light asset; dark mode mutes it into a
-   near-black placeholder so the preview keeps the same composition. */
-.sgds-night-theme .block-raw-root img[src*="placeholder-sgds.png"],
-.sgds-night-theme .block-raw-single img[src*="placeholder-sgds.png"] {
-  filter: invert(1) brightness(0.9) contrast(1.05);
-}
-
-.sgds-night-theme .block-raw-root [style*="placeholder-sgds.png"],
-.sgds-night-theme .block-raw-single [style*="placeholder-sgds.png"] {
-  background-color: var(--sgds-bg-fixed-dark);
-  background-blend-mode: multiply;
-}
-</style>
diff --git a/docs/.vitepress/components/components/TemplatePreview.vue b/docs/.vitepress/components/components/TemplatePreview.vue
index 8cd0a482..c10f9b1d 100644
--- a/docs/.vitepress/components/components/TemplatePreview.vue
+++ b/docs/.vitepress/components/components/TemplatePreview.vue
@@ -120,6 +120,7 @@ onMounted(() => {
           variant="ghost"
           tone="neutral"
           size="sm"
+          :ariaLabel="kind === 'block' ? 'Back to blocks' : 'Back to templates'"
           :title="kind === 'block' ? 'Back to blocks' : 'Back to templates'"
           @click="navigateToOverview"
         >
diff --git a/docs/.vitepress/components/components/TemplatePreviewToolbar.vue b/docs/.vitepress/components/components/TemplatePreviewToolbar.vue
index 8034422d..4224064a 100644
--- a/docs/.vitepress/components/components/TemplatePreviewToolbar.vue
+++ b/docs/.vitepress/components/components/TemplatePreviewToolbar.vue
@@ -128,7 +128,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="template-preview-toolbar" aria-label="Live preview toolbar">
+  <div class="template-preview-toolbar">
     <button
       v-if="promptOpen"
       type="button"
@@ -149,6 +149,7 @@ onBeforeUnmount(() => {
           tone="fixed-light"
           size="sm"
           class="template-preview-template-button"
+          ariaLabel="Select template"
         >
           <span class="template-preview-toolbar-label">{{ selectedTitle }}</span>
           <sgds-icon name="chevron-down" slot="rightIcon"></sgds-icon>
@@ -176,6 +177,7 @@ onBeforeUnmount(() => {
           tone="fixed-light"
           size="sm"
           class="template-preview-template-button"
+          ariaLabel="Select block"
         >
           <span class="template-preview-toolbar-label">{{ selectedTitle }}</span>
           <sgds-icon name="chevron-down" slot="rightIcon"></sgds-icon>
diff --git a/docs/.vitepress/components/components/TemplateRaw.vue b/docs/.vitepress/components/components/TemplateRaw.vue
deleted file mode 100644
index 65e4acef..00000000
--- a/docs/.vitepress/components/components/TemplateRaw.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from "vue";
-import { pageTemplateMarkupByKey } from "../../data/template-markup";
-
-const props = defineProps<{ templateKey: string }>();
-
-const markup = computed(() => pageTemplateMarkupByKey[props.templateKey] ?? "");
-const rootRef = ref<HTMLElement | null>(null);
-
-const executeTemplateScripts = async () => {
-  await nextTick();
-  const root = rootRef.value;
-  if (!root) return;
-
-  root.querySelectorAll("script").forEach((oldScript) => {
-    const script = document.createElement("script");
-    Array.from(oldScript.attributes).forEach((attribute) => {
-      script.setAttribute(attribute.name, attribute.value);
-    });
-    script.textContent = oldScript.textContent;
-    oldScript.replaceWith(script);
-  });
-};
-
-onMounted(executeTemplateScripts);
-watch(() => props.templateKey, executeTemplateScripts);
-</script>
-
-<template>
-  <div ref="rootRef" class="template-raw-root" v-html="markup"></div>
-</template>
-
-<style>
-/* Theme treatment for the stock SGDS placeholder image inside v-html previews.
-   The source image remains the original light asset; dark mode mutes it into a
-   near-black placeholder so the preview keeps the same composition. */
-.sgds-night-theme .template-raw-root img[src*="placeholder-sgds.png"] {
-  filter: invert(1) brightness(0.9) contrast(1.05);
-}
-</style>
diff --git a/docs/.vitepress/components/components/TemplatesOverviewPage.vue b/docs/.vitepress/components/components/TemplatesOverviewPage.vue
index e8768252..5ae53a81 100644
--- a/docs/.vitepress/components/components/TemplatesOverviewPage.vue
+++ b/docs/.vitepress/components/components/TemplatesOverviewPage.vue
@@ -251,6 +251,7 @@ const getThumbnailSrc = (key: string) => {
                   variant="outline"
                   tone="neutral"
                   class="sgds:flex-none"
+                  ariaLabel="Filters"
                   :aria-expanded="mobileFiltersOpen ? 'true' : 'false'"
                   aria-controls="template-overview-filter-drawer"
                   @click="mobileFiltersOpen = !mobileFiltersOpen"
@@ -303,8 +304,8 @@ const getThumbnailSrc = (key: string) => {
                   </sgds-checkbox-group>
                 </div>
                 <div slot="footer" class="sgds:flex sgds:justify-between sgds:gap-component-sm">
-                  <sgds-button variant="ghost" tone="neutral" @click="clearFilters">Clear all</sgds-button>
-                  <sgds-button @click="mobileFiltersOpen = false">Done</sgds-button>
+                  <sgds-button variant="ghost" tone="neutral" ariaLabel="Clear all" @click="clearFilters">Clear all</sgds-button>
+                  <sgds-button ariaLabel="Done" @click="mobileFiltersOpen = false">Done</sgds-button>
                 </div>
               </sgds-drawer>
               <h2 class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-5 sgds:m-0 sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default">
@@ -365,7 +366,7 @@ const getThumbnailSrc = (key: string) => {
             >
               <h3 class="sgds:m-0 sgds:text-subtitle-md sgds:font-semibold sgds:text-heading-default">No {{ itemNoun }}s found</h3>
               <p class="sgds:m-0 sgds:text-body-md sgds:text-body-subtle">Try clearing the filters.</p>
-              <sgds-button variant="outline" tone="neutral" @click="clearFilters">Clear filters</sgds-button>
+              <sgds-button variant="outline" tone="neutral" ariaLabel="Clear filters" @click="clearFilters">Clear filters</sgds-button>
             </div>
 
             <div class="sgds:mt-layout-sm sgds:flex sgds:justify-end">
diff --git a/docs/.vitepress/components/get-started/GetStartedPage.vue b/docs/.vitepress/components/get-started/GetStartedPage.vue
index 4bc8bd4f..67f29ab4 100644
--- a/docs/.vitepress/components/get-started/GetStartedPage.vue
+++ b/docs/.vitepress/components/get-started/GetStartedPage.vue
@@ -86,6 +86,7 @@ watch(currentPath, () => {
         <sgds-button
           variant="outline"
           tone="neutral"
+          ariaLabel="Browse Get started"
           @click="mobileSideNavOpen = true"
         >
           <sgds-icon slot="leftIcon" name="menu"></sgds-icon>
diff --git a/docs/.vitepress/components/landing/Hero.vue b/docs/.vitepress/components/landing/Hero.vue
index f05fea51..a8fc6987 100644
--- a/docs/.vitepress/components/landing/Hero.vue
+++ b/docs/.vitepress/components/landing/Hero.vue
@@ -165,6 +165,7 @@ onBeforeUnmount(() => {
           :variant="button.variant"
           :tone="button.tone"
           :href="button.link"
+          :ariaLabel="button.label"
         >
           {{ button.label }}
         </sgds-button>
diff --git a/docs/.vitepress/components/ui/CodeBlock.vue b/docs/.vitepress/components/ui/CodeBlock.vue
index 5cf573b2..dd77f33b 100644
--- a/docs/.vitepress/components/ui/CodeBlock.vue
+++ b/docs/.vitepress/components/ui/CodeBlock.vue
@@ -440,7 +440,7 @@ const langLabel = computed(() => {
         size="xs"
         variant="ghost"
         tone="neutral"
-        :aria-label="copied ? 'Copied!' : (prompt ? 'Copy prompt' : 'Copy code')"
+        :ariaLabel="copied ? 'Copied!' : (prompt ? 'Copy prompt' : 'Copy code')"
         @click="copy"
       >
         <sgds-icon :name="copied ? 'check' : 'files'" size="sm" slot="leftIcon"></sgds-icon>
@@ -449,7 +449,7 @@ const langLabel = computed(() => {
     </div>
 
     <!-- Prompt area -->
-    <div v-if="prompt" class="cb-prompt-text sgds:text-default sgds:text-body-sm sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:m-0 sgds:min-w-0 sgds:w-full sgds:max-w-full sgds:whitespace-pre-wrap sgds:break-words sgds:[overflow-wrap:anywhere] sgds:py-[1rem] sgds:px-[1rem]" aria-label="Example prompt" tabindex="0">
+    <div v-if="prompt" class="cb-prompt-text sgds:text-default sgds:text-body-sm sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:m-0 sgds:min-w-0 sgds:w-full sgds:max-w-full sgds:whitespace-pre-wrap sgds:break-words sgds:[overflow-wrap:anywhere] sgds:py-[1rem] sgds:px-[1rem]" tabindex="0">
       <slot v-if="hasSlotContent" />
       <template v-else>{{ code }}</template>
     </div>
diff --git a/docs/.vitepress/data/block-markup.ts b/docs/.vitepress/data/block-markup.ts
deleted file mode 100644
index b36251dc..00000000
--- a/docs/.vitepress/data/block-markup.ts
+++ /dev/null
@@ -1,3322 +0,0 @@
-// Block markup pulled from
-// https://github.com/GovTechSG/sgds-web-component/tree/master/stories/blocks
-//
-// Each export is the HTML body of one .stories.js file with the lit html
-// wrapper, ${} interpolations, and any inline lit binding stripped. Block
-// doc pages reference these constants via the demos[] array.
-
-// ============================================================
-// cards
-// ============================================================
-
-export const cardsCards3Markup = `<!-- Cards Block — 3 columns × 3 rows
-       Background : bg-default
-       Spacing    : py-layout-md, gap-layout-md
-  -->
-  <section class="sgds:bg-default sgds:py-layout-md">
-    <div class="sgds-container">
-      <!-- Section header -->
-      <div class="sgds:mb-layout-md" class="sgds:max-w-text">
-        <div
-          class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-        >
-          Programmes
-        </div>
-        <h2 class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default">
-          Featured Programmes
-        </h2>
-        <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0">
-          Explore our curated selection of programmes designed to strengthen digital capabilities across the public
-          sector.
-        </p>
-      </div>
-
-      <!-- Card grid: 3 per row -->
-      <div class="sgds-grid sgds:items-stretch">
-        <!-- Row 1 -->
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Keynote</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Digital Infrastructure for the Next Decade</span>
-            <span slot="description"
-              >An overview of Singapore's plans for resilient and future-ready digital infrastructure.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Digital Infrastructure for the Next Decade">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Panel Discussion</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">AI Governance in the Public Sector</span>
-            <span slot="description"
-              >Panellists explore responsible AI adoption frameworks and inter-agency collaboration.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about AI Governance in the Public Sector">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Presentation</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Zero-Trust Architecture for Government Systems</span>
-            <span slot="description"
-              >A deep dive into implementing zero-trust principles across legacy and modern systems.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Zero-Trust Architecture for Government Systems">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <!-- Row 2 -->
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Keynote</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Securing the Cloud: Lessons from the Field</span>
-            <span slot="description"
-              >Key takeaways from real-world cloud migration projects across the Singapore government.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Securing the Cloud: Lessons from the Field">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Presentation</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Incident Response Playbooks for CISOs</span>
-            <span slot="description"
-              >Practical frameworks for building effective incident response and recovery strategies.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Incident Response Playbooks for CISOs">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Panel Discussion</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Workforce Upskilling for Cyber Resilience</span>
-            <span slot="description"
-              >How agencies are building cyber talent pipelines and fostering a security-aware culture.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Workforce Upskilling for Cyber Resilience">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <!-- Row 3 -->
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Opening Address</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Building a Resilient Digital Government</span>
-            <span slot="description"
-              >An opening address on Singapore's whole-of-government approach to digital resilience.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Building a Resilient Digital Government">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Keynote</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">The Future of GovTech: People, Process and Platform</span>
-            <span slot="description"
-              >How people-centred design and agile delivery are shaping the next wave of government technology.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about The Future of GovTech: People, Process and Platform">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Presentation</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Automating Compliance Monitoring with AI</span>
-            <span slot="description"
-              >Using machine learning to continuously monitor systems for policy and regulatory compliance.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Automating Compliance Monitoring with AI">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const cardsCards4Markup = `<!-- Cards Block — 4 columns × 3 rows
-       Background : bg-default
-       Spacing    : py-layout-md, gap-layout-md
-  -->
-  <section class="sgds:bg-default sgds:py-layout-md">
-    <div class="sgds-container">
-      <!-- Section header -->
-      <div class="sgds:mb-layout-md" class="sgds:max-w-text">
-        <div
-          class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-        >
-          Programmes
-        </div>
-        <h2 class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default">
-          Featured Programmes
-        </h2>
-        <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0">
-          Explore our curated selection of programmes designed to strengthen digital capabilities across the public
-          sector.
-        </p>
-      </div>
-
-      <!-- Card grid: 4 per row -->
-      <div class="sgds-grid sgds:items-stretch">
-        <!-- Row 1 -->
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Keynote</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Digital Infrastructure for the Next Decade</span>
-            <span slot="description"
-              >An overview of Singapore's plans for resilient and future-ready digital infrastructure.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Digital Infrastructure for the Next Decade">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Panel Discussion</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">AI Governance in the Public Sector</span>
-            <span slot="description"
-              >Panellists explore responsible AI adoption frameworks and inter-agency collaboration.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about AI Governance in the Public Sector">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Presentation</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Zero-Trust Architecture for Government Systems</span>
-            <span slot="description"
-              >A deep dive into implementing zero-trust principles across legacy and modern systems.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Zero-Trust Architecture for Government Systems">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Keynote</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Securing the Cloud: Lessons from the Field</span>
-            <span slot="description"
-              >Key takeaways from real-world cloud migration projects across the Singapore government.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Securing the Cloud: Lessons from the Field">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <!-- Row 2 -->
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Presentation</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Incident Response Playbooks for CISOs</span>
-            <span slot="description"
-              >Practical frameworks for building effective incident response and recovery strategies.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Incident Response Playbooks for CISOs">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Panel Discussion</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Workforce Upskilling for Cyber Resilience</span>
-            <span slot="description"
-              >How agencies are building cyber talent pipelines and fostering a security-aware culture.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Workforce Upskilling for Cyber Resilience">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Opening Address</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Building a Resilient Digital Government</span>
-            <span slot="description"
-              >An opening address on Singapore's whole-of-government approach to digital resilience.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Building a Resilient Digital Government">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Keynote</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">The Future of GovTech: People, Process and Platform</span>
-            <span slot="description"
-              >How people-centred design and agile delivery are shaping the next wave of government technology.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about The Future of GovTech: People, Process and Platform">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <!-- Row 3 -->
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Presentation</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Automating Compliance Monitoring with AI</span>
-            <span slot="description"
-              >Using machine learning to continuously monitor systems for policy and regulatory compliance.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Automating Compliance Monitoring with AI">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Keynote</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Cybersecurity as a National Imperative</span>
-            <span slot="description"
-              >Why cybersecurity investment is central to Singapore's long-term digital sovereignty strategy.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Cybersecurity as a National Imperative">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Panel Discussion</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Data Sharing Across Agencies: Challenges and Solutions</span>
-            <span slot="description"
-              >Governance models and technical standards enabling safe cross-agency data sharing.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Data Sharing Across Agencies: Challenges and Solutions">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 sgds-col-xl-3 sgds:flex sgds:flex-col">
-          <sgds-card stretchedLink class="sgds:h-full">
-            <sgds-badge slot="upper" outlined>Presentation</sgds-badge>
-            <span slot="title" class="sgds:line-clamp-2">Identity and Access Management at Scale</span>
-            <span slot="description"
-              >Strategies for managing digital identities across thousands of government users securely.</span
-            >
-            <sgds-link slot="footer"
-              ><a href="#" aria-label="View details about Identity and Access Management at Scale">View details <sgds-icon name="arrow-right"></sgds-icon></a
-            ></sgds-link>
-          </sgds-card>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-// ============================================================
-// cta
-// ============================================================
-
-export const ctaContainedPrimaryCenterMarkup = `<section class="sgds:py-layout-lg">
-      <div class="sgds-container">
-        <div class="sgds:bg-primary-default sgds:rounded-2-xl sgds:p-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:items-center sgds:text-center sgds:max-w-text">
-            <div class="sgds:mb-xl">
-              <div
-                class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-fixed-light sgds:mb-xs"
-              >
-                Overline
-              </div>
-              <h2
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-fixed-light"
-              >
-                Headline
-              </h2>
-              <h5
-                class="sgds:text-subtitle-sm sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-fixed-light"
-              >
-                Description
-              </h5>
-            </div>
-            <sgds-button variant="primary" tone="fixed-light" size="md">Button Label</sgds-button>
-          </div>
-        </div>
-      </div>
-    </section>`;
-
-export const ctaContainedPrimaryMarkup = `<section class="sgds:py-layout-lg">
-      <div class="sgds-container">
-        <div class="sgds:bg-primary-default sgds:rounded-2-xl sgds:p-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:max-w-text">
-            <div class="sgds:mb-xl">
-              <div
-                class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-fixed-light sgds:mb-xs"
-              >
-                Overline
-              </div>
-              <h2
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-fixed-light"
-              >
-                Headline
-              </h2>
-              <h5
-                class="sgds:text-subtitle-sm sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-fixed-light"
-              >
-                Description
-              </h5>
-            </div>
-            <sgds-button variant="primary" tone="fixed-light" size="md">Button Label</sgds-button>
-          </div>
-        </div>
-      </div>
-    </section>`;
-
-export const ctaContainedRaisedCenterMarkup = `<section class="sgds:py-layout-lg">
-      <div class="sgds-container">
-        <div class="sgds:bg-surface-raised sgds:rounded-2-xl sgds:p-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:items-center sgds:text-center sgds:max-w-text">
-            <div class="sgds:mb-xl">
-              <div
-                class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-              >
-                Overline
-              </div>
-              <h2
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-              >
-                Headline
-              </h2>
-              <h5
-                class="sgds:text-subtitle-sm sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-              >
-                Description
-              </h5>
-            </div>
-            <sgds-button variant="primary" tone="brand" size="md">Button Label</sgds-button>
-          </div>
-        </div>
-      </div>
-    </section>`;
-
-export const ctaContainedRaisedMarkup = `<section class="sgds:py-layout-lg">
-      <div class="sgds-container">
-        <div class="sgds:bg-surface-raised sgds:rounded-2-xl sgds:p-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:max-w-text">
-            <div class="sgds:mb-xl">
-              <div
-                class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-              >
-                Overline
-              </div>
-              <h2
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-              >
-                Headline
-              </h2>
-              <h5
-                class="sgds:text-subtitle-sm sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-              >
-                Description
-              </h5>
-            </div>
-            <sgds-button variant="primary" tone="brand" size="md">Button Label</sgds-button>
-          </div>
-        </div>
-      </div>
-    </section>`;
-
-export const ctaFullbleedAlternateCenterMarkup = `<section class="sgds:bg-alternate sgds:py-layout-lg">
-      <div class="sgds-container">
-        <div class="sgds:flex sgds:flex-col sgds:items-center sgds:text-center sgds:max-w-text">
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline
-            </div>
-            <h2
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Headline
-            </h2>
-            <h5
-              class="sgds:text-subtitle-sm sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Description
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="brand" size="md">Button Label</sgds-button>
-        </div>
-      </div>
-    </section>`;
-
-export const ctaFullbleedAlternateMarkup = `<section class="sgds:bg-alternate sgds:py-layout-lg">
-      <div class="sgds-container">
-        <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:max-w-text">
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline
-            </div>
-            <h2
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Headline
-            </h2>
-            <h5
-              class="sgds:text-subtitle-sm sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Description
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="brand" size="md">Button Label</sgds-button>
-        </div>
-      </div>
-    </section>`;
-
-export const ctaFullbleedPrimaryCenterMarkup = `<section class="sgds:bg-primary-default sgds:py-layout-lg">
-      <div class="sgds-container">
-        <div class="sgds:flex sgds:flex-col sgds:items-center sgds:text-center sgds:max-w-text">
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-fixed-light sgds:mb-xs"
-            >
-              Overline
-            </div>
-            <h2
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-fixed-light"
-            >
-              Headline
-            </h2>
-            <h5
-              class="sgds:text-subtitle-sm sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-fixed-light"
-            >
-              Description
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="fixed-light" size="md">Button Label</sgds-button>
-        </div>
-      </div>
-    </section>`;
-
-export const ctaFullbleedPrimaryMarkup = `<section class="sgds:bg-primary-default sgds:py-layout-lg">
-      <div class="sgds-container">
-        <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:max-w-text">
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-fixed-light sgds:mb-xs"
-            >
-              Overline
-            </div>
-            <h2
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-fixed-light"
-            >
-              Headline
-            </h2>
-            <h5
-              class="sgds:text-subtitle-sm sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-fixed-light"
-            >
-              Description
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="fixed-light" size="md">Button Label</sgds-button>
-        </div>
-      </div>
-    </section>`;
-
-// ============================================================
-// feature
-// ============================================================
-
-export const featureFeature48ImgLeftMarkup = `<style>
-    @media (max-width: 1023px) {
-      .feature-img {
-        padding-bottom: var(--sgds-spacing-layout-md);
-      }
-    }
-    @media (min-width: 1024px) {
-      .feature-content {
-        padding-left: var(--sgds-spacing-layout-md);
-      }
-    }
-  </style>
-
-  <!-- Feature Block — image left 4 cols / content right 8 cols
-       Background : bg-surface-default
-       Spacing    : py-layout-lg, gap-layout-md
-       Content    : padding-right layout-md (outer edge, image on left)
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds-grid sgds:items-center sgds:gap-layout-md">
-        <!-- Image — 4 cols -->
-        <div class="feature-img sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-          <img
-            src="https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png"
-            alt=""
-            style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--sgds-border-radius-xl);"
-          />
-        </div>
-
-        <!-- Content — 8 cols, padding-right layout-md (image on left) -->
-        <div
-          class="feature-content sgds-col-4 sgds-col-sm-8 sgds-col-lg-8 sgds:flex sgds:flex-col sgds:items-start sgds:text-left"
-        >
-          <!-- Typography group -->
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline Label
-            </div>
-            <h2
-              class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Feature Heading Goes Here
-            </h2>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Supporting subtitle text that provides context and detail for the feature being described.
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const featureFeature48ImgRightMarkup = `<style>
-    @media (max-width: 1023px) {
-      .feature-img {
-        order: -1;
-        padding-bottom: var(--sgds-spacing-layout-md);
-      }
-    }
-    @media (min-width: 1024px) {
-      .feature-content {
-        padding-right: var(--sgds-spacing-layout-md);
-      }
-    }
-  </style>
-
-  <!-- Feature Block — content left 8 cols / image right 4 cols
-       Background : bg-surface-default
-       Spacing    : py-layout-lg, gap-layout-md
-       Content    : padding-left layout-md (outer edge, image on right)
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds-grid sgds:items-center sgds:gap-layout-md">
-        <!-- Content — 8 cols, padding-left layout-md (image on right) -->
-        <div
-          class="feature-content sgds-col-4 sgds-col-sm-8 sgds-col-lg-8 sgds:flex sgds:flex-col sgds:items-start sgds:text-left"
-        >
-          <!-- Typography group -->
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline Label
-            </div>
-            <h2
-              class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Feature Heading Goes Here
-            </h2>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Supporting subtitle text that provides context and detail for the feature being described.
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-
-        <!-- Image — 4 cols -->
-        <div class="feature-img sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-          <img
-            src="https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png"
-            alt=""
-            style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--sgds-border-radius-xl);"
-          />
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const featureFeature66ComponentLeftMarkup = `<!-- Feature Block — component left 6 cols / content right 6 cols
-       Background : bg-surface-default
-       Spacing    : py-layout-lg, gap-layout-md
-       Alignment  : items-start (top-aligned)
-       Component  : replace <sgds-accordion> with any component
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds-grid sgds:items-start" class="sgds:gap-layout-md">
-        <!-- Component — 6 cols (replace with any component) -->
-        <div class="feature-component sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
-          <sgds-accordion>
-            <sgds-accordion-item open ariaLabel="Why choose us">
-              <div slot="header">Why choose us</div>
-              <div slot="content">
-                We deliver fast, reliable, and accessible digital services built to government standards.
-              </div>
-            </sgds-accordion-item>
-            <sgds-accordion-item ariaLabel="How it works">
-              <div slot="header">How it works</div>
-              <div slot="content">
-                Sign up, verify your identity, and access all your services from a single dashboard.
-              </div>
-            </sgds-accordion-item>
-            <sgds-accordion-item ariaLabel="Who can use this">
-              <div slot="header">Who can use this</div>
-              <div slot="content">
-                Any Singapore resident or business with a valid Singpass account can get started.
-              </div>
-            </sgds-accordion-item>
-          </sgds-accordion>
-        </div>
-
-        <!-- Content — 6 cols, padding-left layout-md (component on left) -->
-        <div
-          class="feature-content sgds-col-4 sgds-col-sm-8 sgds-col-lg-6 sgds:flex sgds:flex-col sgds:items-start sgds:text-left"
-        >
-          <!-- Typography group -->
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline Label
-            </div>
-            <h2
-              class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Feature Heading Goes Here
-            </h2>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Supporting subtitle text that provides context and detail for the feature being described.
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const featureFeature66ComponentRightMarkup = `<!-- Feature Block — content left 6 cols / component right 6 cols
-       Background : bg-surface-default
-       Spacing    : py-layout-lg, gap-layout-md
-       Alignment  : items-start (top-aligned)
-       Component  : replace <sgds-accordion> with any component
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds-grid sgds:items-start" class="sgds:gap-layout-md">
-        <!-- Content — 6 cols, padding-right layout-md (component on right) -->
-        <div
-          class="feature-content sgds-col-4 sgds-col-sm-8 sgds-col-lg-6 sgds:flex sgds:flex-col sgds:items-start sgds:text-left"
-        >
-          <!-- Typography group -->
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline Label
-            </div>
-            <h2
-              class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Feature Heading Goes Here
-            </h2>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Supporting subtitle text that provides context and detail for the feature being described.
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-
-        <!-- Component — 6 cols (replace with any component) -->
-        <div class="feature-component sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
-          <sgds-accordion>
-            <sgds-accordion-item open ariaLabel="Why choose us">
-              <div slot="header">Why choose us</div>
-              <div slot="content">
-                We deliver fast, reliable, and accessible digital services built to government standards.
-              </div>
-            </sgds-accordion-item>
-            <sgds-accordion-item ariaLabel="How it works">
-              <div slot="header">How it works</div>
-              <div slot="content">
-                Sign up, verify your identity, and access all your services from a single dashboard.
-              </div>
-            </sgds-accordion-item>
-            <sgds-accordion-item ariaLabel="Who can use this">
-              <div slot="header">Who can use this</div>
-              <div slot="content">
-                Any Singapore resident or business with a valid Singpass account can get started.
-              </div>
-            </sgds-accordion-item>
-          </sgds-accordion>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const featureFeature66ImgLeftMarkup = `<style>
-    @media (max-width: 1023px) {
-      .feature-img {
-        padding-bottom: var(--sgds-spacing-layout-md);
-      }
-    }
-    @media (min-width: 1024px) {
-      .feature-content {
-        padding-left: var(--sgds-spacing-layout-md);
-      }
-    }
-  </style>
-
-  <!-- Feature Block — image left 6 cols / content right 6 cols
-       Background : bg-surface-default
-       Spacing    : py-layout-lg, gap-layout-md
-       Content    : padding-right layout-md (outer edge, image on left)
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds-grid sgds:items-center sgds:gap-layout-md">
-        <!-- Image — 6 cols -->
-        <div class="feature-img sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
-          <img
-            src="https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png"
-            alt=""
-            style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--sgds-border-radius-xl);"
-          />
-        </div>
-
-        <!-- Content — 6 cols, padding-right layout-md (image on left) -->
-        <div
-          class="feature-content sgds-col-4 sgds-col-sm-8 sgds-col-lg-6 sgds:flex sgds:flex-col sgds:items-start sgds:text-left"
-        >
-          <!-- Typography group -->
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline Label
-            </div>
-            <h2
-              class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Feature Heading Goes Here
-            </h2>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Supporting subtitle text that provides context and detail for the feature being described.
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const featureFeature66ImgRightMarkup = `<style>
-    @media (max-width: 1023px) {
-      .feature-img {
-        order: -1;
-        padding-bottom: var(--sgds-spacing-layout-md);
-      }
-    }
-    @media (min-width: 1024px) {
-      .feature-content {
-        padding-right: var(--sgds-spacing-layout-md);
-      }
-    }
-  </style>
-
-  <!-- Feature Block — content left 6 cols / image right 6 cols
-       Background : bg-surface-default
-       Spacing    : py-layout-lg, gap-layout-md
-       Content    : padding-left layout-md (outer edge, image on right)
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds-grid sgds:items-center sgds:gap-layout-md">
-        <!-- Content — 6 cols, padding-left layout-md (image on right) -->
-        <div
-          class="feature-content sgds-col-4 sgds-col-sm-8 sgds-col-lg-6 sgds:flex sgds:flex-col sgds:items-start sgds:text-left"
-        >
-          <!-- Typography group -->
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline Label
-            </div>
-            <h2
-              class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Feature Heading Goes Here
-            </h2>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Supporting subtitle text that provides context and detail for the feature being described.
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-
-        <!-- Image — 6 cols -->
-        <div class="feature-img sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
-          <img
-            src="https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png"
-            alt=""
-            style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--sgds-border-radius-xl);"
-          />
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const featureFeature84ImgLeftMarkup = `<style>
-    @media (max-width: 1023px) {
-      .feature-img {
-        padding-bottom: var(--sgds-spacing-layout-md);
-      }
-    }
-    @media (min-width: 1024px) {
-      .feature-content {
-        padding-left: var(--sgds-spacing-layout-md);
-      }
-    }
-  </style>
-
-  <!-- Feature Block — image left 8 cols / content right 4 cols
-       Background : bg-surface-default
-       Spacing    : py-layout-lg, gap-layout-md
-       Content    : padding-right layout-md (outer edge, image on left)
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds-grid sgds:items-center sgds:gap-layout-md">
-        <!-- Image — 8 cols -->
-        <div class="feature-img sgds-col-4 sgds-col-sm-8 sgds-col-lg-8">
-          <img
-            src="https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png"
-            alt=""
-            style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--sgds-border-radius-xl);"
-          />
-        </div>
-
-        <!-- Content — 4 cols, padding-right layout-md (image on left) -->
-        <div
-          class="feature-content sgds-col-4 sgds-col-sm-8 sgds-col-lg-4 sgds:flex sgds:flex-col sgds:items-start sgds:text-left"
-        >
-          <!-- Typography group -->
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline Label
-            </div>
-            <h2
-              class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Feature Heading Goes Here
-            </h2>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Supporting subtitle text that provides context and detail for the feature being described.
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const featureFeature84ImgRightMarkup = `<style>
-    @media (max-width: 1023px) {
-      .feature-img {
-        order: -1;
-        padding-bottom: var(--sgds-spacing-layout-md);
-      }
-    }
-    @media (min-width: 1024px) {
-      .feature-content {
-        padding-right: var(--sgds-spacing-layout-md);
-      }
-    }
-  </style>
-
-  <!-- Feature Block — content left 4 cols / image right 8 cols
-       Background : bg-surface-default
-       Spacing    : py-layout-lg, gap-layout-md
-       Content    : padding-left layout-md (outer edge, image on right)
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds-grid sgds:items-center sgds:gap-layout-md">
-        <!-- Content — 4 cols, padding-left layout-md (image on right) -->
-        <div
-          class="feature-content sgds-col-4 sgds-col-sm-8 sgds-col-lg-4 sgds:flex sgds:flex-col sgds:items-start sgds:text-left"
-        >
-          <!-- Typography group -->
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline Label
-            </div>
-            <h2
-              class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Feature Heading Goes Here
-            </h2>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Supporting subtitle text that provides context and detail for the feature being described.
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-
-        <!-- Image — 8 cols -->
-        <div class="feature-img sgds-col-4 sgds-col-sm-8 sgds-col-lg-8">
-          <img
-            src="https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png"
-            alt=""
-            style="width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: var(--sgds-border-radius-xl);"
-          />
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const featureFeatureCardsBelowMarkup = `<!-- Feature Block — content top / 3 tinted cards below
-       Background : bg-surface-raised
-       Spacing    : py-layout-lg, gap-layout-md
-       Cards      : tinted, hideBorder, stretchedLink
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds:flex sgds:flex-col" class="sgds:gap-layout-md">
-        <!-- Content -->
-        <div
-          class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left"
-          style="padding-bottom: var(--sgds-spacing-layout-md);"
-        >
-          <div class="sgds:mb-xl">
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Overline Label
-            </div>
-            <h2
-              class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              Feature Heading Goes Here
-            </h2>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-            >
-              Supporting subtitle text that provides context and detail for the feature being described.
-            </h5>
-          </div>
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-
-        <!-- 3 tinted cards in a row (replace with any component) -->
-        <div class="sgds-grid" class="sgds:gap-layout-md">
-          <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-            <sgds-card tinted hideBorder stretchedLink>
-              <span slot="subtitle">FEATURE</span>
-              <span slot="title">Card Title One</span>
-              <span slot="description"
-                >Supporting description text that explains what this feature offers to the user.</span
-              >
-              <sgds-link slot="footer">
-                <a href="#" aria-label="Learn more about Card Title One">Learn more <sgds-icon name="arrow-right"></sgds-icon></a>
-              </sgds-link>
-            </sgds-card>
-          </div>
-
-          <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-            <sgds-card tinted hideBorder stretchedLink>
-              <span slot="subtitle">FEATURE</span>
-              <span slot="title">Card Title Two</span>
-              <span slot="description"
-                >Supporting description text that explains what this feature offers to the user.</span
-              >
-              <sgds-link slot="footer">
-                <a href="#" aria-label="Learn more about Card Title Two">Learn more <sgds-icon name="arrow-right"></sgds-icon></a>
-              </sgds-link>
-            </sgds-card>
-          </div>
-
-          <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-            <sgds-card tinted hideBorder stretchedLink>
-              <span slot="subtitle">FEATURE</span>
-              <span slot="title">Card Title Three</span>
-              <span slot="description"
-                >Supporting description text that explains what this feature offers to the user.</span
-              >
-              <sgds-link slot="footer">
-                <a href="#" aria-label="Learn more about Card Title Three">Learn more <sgds-icon name="arrow-right"></sgds-icon></a>
-              </sgds-link>
-            </sgds-card>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const featureFeatureNoImgCenterMarkup = `<!-- Feature Block — no image, center-aligned
-       Background : bg-surface-default
-       Spacing    : py-layout-lg
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds:flex sgds:flex-col sgds:items-center sgds:text-center sgds:mx-auto sgds:max-w-text">
-        <!-- Typography group -->
-        <div class="sgds:mb-xl">
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            Overline Label
-          </div>
-          <h2
-            class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-          >
-            Feature Heading Goes Here
-          </h2>
-          <h5
-            class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-          >
-            Supporting subtitle text that provides context and detail for the feature being described.
-          </h5>
-        </div>
-        <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-      </div>
-    </div>
-  </section>`;
-
-export const featureFeatureNoImgLeftMarkup = `<!-- Feature Block — no image, left-aligned
-       Background : bg-surface-default
-       Spacing    : py-layout-lg
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left">
-        <!-- Typography group -->
-        <div class="sgds:mb-xl">
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            Overline Label
-          </div>
-          <h2
-            class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default"
-          >
-            Feature Heading Goes Here
-          </h2>
-          <h5
-            class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-subtle"
-          >
-            Supporting subtitle text that provides context and detail for the feature being described.
-          </h5>
-        </div>
-        <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-      </div>
-    </div>
-  </section>`;
-
-// ============================================================
-// filter
-// ============================================================
-
-export const filterFilterMarkup = `<div class="sgds:bg-surface-default sgds:min-h-screen">
-    <div class="sgds:w-container sgds:mx-auto sgds:py-layout-md">
-      <!-- Filter sidebar -->
-      <aside class="sgds:w-64 sgds:flex sgds:flex-col sgds:gap-2-xl">
-        <!-- Filter header -->
-        <div class="sgds:flex sgds:gap-4 sgds:items-center">
-          <span
-            class="sgds:text-heading-sm sgds:font-semibold sgds:leading-sm sgds:tracking-tight sgds:text-heading-default"
-            >Filter by</span
-          >
-          <sgds-link><a href="#">Clear all</a></sgds-link>
-        </div>
-
-        <!-- Programme type -->
-        <div class="sgds:flex sgds:flex-col sgds:gap-xs">
-          <div
-            class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-          >
-            Programme type
-          </div>
-          <sgds-checkbox-group>
-            <sgds-checkbox value="opening-address">Opening Address (1)</sgds-checkbox>
-            <sgds-checkbox value="keynote">Keynote (4)</sgds-checkbox>
-            <sgds-checkbox value="panel-discussion">Panel Discussion (6)</sgds-checkbox>
-            <sgds-checkbox value="presentation">Presentation (12)</sgds-checkbox>
-          </sgds-checkbox-group>
-        </div>
-
-        <!-- Sessions -->
-        <div class="sgds:flex sgds:flex-col sgds:gap-xs">
-          <div
-            class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-          >
-            Sessions
-          </div>
-          <sgds-checkbox-group>
-            <sgds-checkbox value="morning">Morning (12)</sgds-checkbox>
-            <sgds-checkbox value="afternoon">Afternoon (16)</sgds-checkbox>
-          </sgds-checkbox-group>
-        </div>
-
-        <!-- Track -->
-        <div class="sgds:flex sgds:flex-col sgds:gap-xs">
-          <div
-            class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-          >
-            Track
-          </div>
-          <sgds-checkbox-group>
-            <sgds-checkbox value="ai-cybersecurity">AI x Cybersecurity (4)</sgds-checkbox>
-            <sgds-checkbox value="resilient-cloud">Resilient and Secure Cloud (6)</sgds-checkbox>
-            <sgds-checkbox value="cisos-future">CISOs of the Future (8)</sgds-checkbox>
-          </sgds-checkbox-group>
-        </div>
-
-        <!-- Event hall -->
-        <div class="sgds:flex sgds:flex-col sgds:gap-xs">
-          <div
-            class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-          >
-            Event hall
-          </div>
-          <sgds-checkbox-group>
-            <sgds-checkbox value="hall-a">Hall A</sgds-checkbox>
-            <sgds-checkbox value="hall-b">Hall B</sgds-checkbox>
-            <sgds-checkbox value="hall-c">Hall C</sgds-checkbox>
-          </sgds-checkbox-group>
-        </div>
-      </aside>
-    </div>
-  </div>`;
-
-// ============================================================
-// form
-// ============================================================
-
-export const formAllTypesMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form
-        class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-center-8 sgds-col-xl-center-8 sgds-col-2-xl-center-8"
-      >
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Basic Info
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Name" name="name" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Email" name="email" type="email" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-select
-                  placeholder="Select an option"
-                  label="Country"
-                  name="country"
-                  placeholder="Select country"
-                  required
-                  hasFeedback="both"
-                >
-                  <sgds-select-option value="sg">Singapore</sgds-select-option>
-                  <sgds-select-option value="my">Malaysia</sgds-select-option>
-                </sgds-select>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-datepicker label="Date of birth" name="dob" required hasFeedback="both"></sgds-datepicker>
-              </div>
-            </div>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-quantity-toggle
-                  label="Tickets"
-                  name="tickets"
-                  value="1"
-                  min="1"
-                  max="10"
-                  required
-                  hasFeedback="both"
-                ></sgds-quantity-toggle>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-combo-box
-                  placeholder="Search or select..."
-                  label="Event"
-                  name="event"
-                  required
-                  hasFeedback="both"
-                >
-                  <sgds-combo-box-option value="event-1">Event 1</sgds-combo-box-option>
-                  <sgds-combo-box-option value="event-2">Event 2</sgds-combo-box-option>
-                </sgds-combo-box>
-              </div>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Preferences
-            </h5>
-            <div>
-              <sgds-textarea
-                label="Special requests"
-                name="requests"
-                placeholder="Any special requests?..."
-                hasFeedback="both"
-              ></sgds-textarea>
-            </div>
-            <div>
-              <sgds-radio-group label="Delivery method" name="delivery" required hasFeedback="both">
-                <sgds-radio value="pickup">Pickup</sgds-radio>
-                <sgds-radio value="delivery">Delivery</sgds-radio>
-                <sgds-radio value="courier">Courier</sgds-radio>
-              </sgds-radio-group>
-            </div>
-            <div>
-              <sgds-checkbox-group label="Services" name="services" required hasFeedback="both">
-                <sgds-checkbox value="service-1">Service 1</sgds-checkbox>
-                <sgds-checkbox value="service-2">Service 2</sgds-checkbox>
-                <sgds-checkbox value="service-3">Service 3</sgds-checkbox>
-              </sgds-checkbox-group>
-            </div>
-            <div>
-              <sgds-combo-box
-                placeholder="Search or select..."
-                label="Interests"
-                name="interests"
-                multiSelect="true"
-                placeholder="Select interests..."
-                hasFeedback="both"
-              >
-                <sgds-combo-box-option value="tech">Technology</sgds-combo-box-option>
-                <sgds-combo-box-option value="design">Design</sgds-combo-box-option>
-                <sgds-combo-box-option value="business">Business</sgds-combo-box-option>
-              </sgds-combo-box>
-            </div>
-            <div>
-              <sgds-file-upload label="Attachment" name="attachment" hasFeedback="both">Choose files</sgds-file-upload>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Reset</sgds-button>
-            <sgds-button type="submit">Submit</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formBasicCenterMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form
-        class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-center-8 sgds-col-xl-center-8 sgds-col-2-xl-center-8"
-      >
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Personal Information
-            </h5>
-            <div>
-              <sgds-input label="First name" name="firstName" type="text" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-input label="Last name" name="lastName" type="text" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-input label="Email address" name="email" type="email" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-input label="Phone number" name="phone" type="tel" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-textarea
-                label="Additional comments"
-                name="comments"
-                placeholder="Enter any additional information..."
-                hasFeedback="both"
-              ></sgds-textarea>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Preferences
-            </h5>
-            <div>
-              <sgds-radio-group
-                label="Communication preference"
-                name="communicationPreference"
-                required
-                hasFeedback="both"
-              >
-                <sgds-radio value="email">Email</sgds-radio>
-                <sgds-radio value="sms">SMS</sgds-radio>
-                <sgds-radio value="phone">Phone</sgds-radio>
-              </sgds-radio-group>
-            </div>
-            <div>
-              <sgds-checkbox-group label="Interests" name="interests" required hasFeedback="both">
-                <sgds-checkbox value="technology">Technology</sgds-checkbox>
-                <sgds-checkbox value="business">Business</sgds-checkbox>
-                <sgds-checkbox value="design">Design</sgds-checkbox>
-                <sgds-checkbox value="marketing">Marketing</sgds-checkbox>
-              </sgds-checkbox-group>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Cancel</sgds-button>
-            <sgds-button type="submit">Submit</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formBasicLeftMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-8 sgds-col-xl-8 sgds-col-2-xl-8">
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Contact Information
-            </h5>
-            <div>
-              <sgds-input label="First name" name="firstName" type="text" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-input label="Last name" name="lastName" type="text" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-input label="Email" name="email" type="email" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-input label="Phone" name="phone" type="tel" required hasFeedback="both"></sgds-input>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Cancel</sgds-button>
-            <sgds-button type="submit">Submit</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formBasicRightMarkup = `<style>
-    @media (min-width: 1024px) {
-      form.form-right {
-        grid-column: 5 / span 8;
-      }
-    }
-  </style>
-  <div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form class="form-right sgds-col-4 sgds-col-sm-8 sgds-col-md-8">
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Personal Information
-            </h5>
-            <div>
-              <sgds-input label="First name" name="firstName" type="text" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-input label="Last name" name="lastName" type="text" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-input label="Email address" name="email" type="email" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-input label="Phone number" name="phone" type="tel" required hasFeedback="both"></sgds-input>
-            </div>
-            <div>
-              <sgds-textarea
-                label="Additional comments"
-                name="comments"
-                placeholder="Enter any additional information..."
-                hasFeedback="both"
-              ></sgds-textarea>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Preferences
-            </h5>
-            <div>
-              <sgds-radio-group
-                label="Communication preference"
-                name="communicationPreference"
-                required
-                hasFeedback="both"
-              >
-                <sgds-radio value="email">Email</sgds-radio>
-                <sgds-radio value="sms">SMS</sgds-radio>
-                <sgds-radio value="phone">Phone</sgds-radio>
-              </sgds-radio-group>
-            </div>
-            <div>
-              <sgds-checkbox-group label="Interests" name="interests" required hasFeedback="both">
-                <sgds-checkbox value="technology">Technology</sgds-checkbox>
-                <sgds-checkbox value="business">Business</sgds-checkbox>
-                <sgds-checkbox value="design">Design</sgds-checkbox>
-                <sgds-checkbox value="marketing">Marketing</sgds-checkbox>
-              </sgds-checkbox-group>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Cancel</sgds-button>
-            <sgds-button type="submit">Submit</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formFormFieldsCheckboxMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form
-        class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-center-8 sgds-col-xl-center-8 sgds-col-2-xl-center-8"
-      >
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Preferences
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="First name" name="firstName" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Last name" name="lastName" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div>
-              <sgds-checkbox-group label="Interests" name="interests" required hasFeedback="both">
-                <sgds-checkbox value="technology">Technology</sgds-checkbox>
-                <sgds-checkbox value="business">Business</sgds-checkbox>
-                <sgds-checkbox value="design">Design</sgds-checkbox>
-                <sgds-checkbox value="marketing">Marketing</sgds-checkbox>
-              </sgds-checkbox-group>
-            </div>
-            <div>
-              <sgds-checkbox-group label="Communication Methods" name="communication" hasFeedback="both">
-                <sgds-checkbox value="email">Email</sgds-checkbox>
-                <sgds-checkbox value="sms">SMS</sgds-checkbox>
-                <sgds-checkbox value="phone">Phone</sgds-checkbox>
-                <sgds-checkbox value="push">Push Notifications</sgds-checkbox>
-              </sgds-checkbox-group>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Reset</sgds-button>
-            <sgds-button type="submit">Save Preferences</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formFormFieldsDatesQuantitiesMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form
-        class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-center-8 sgds-col-xl-center-8 sgds-col-2-xl-center-8"
-      >
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Event Booking
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Name" name="name" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Email" name="email" type="email" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-datepicker label="Start date" name="startDate" required hasFeedback="both"></sgds-datepicker>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-datepicker label="End date" name="endDate" required hasFeedback="both"></sgds-datepicker>
-              </div>
-            </div>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-quantity-toggle
-                  label="Number of guests"
-                  name="guests"
-                  value="1"
-                  min="1"
-                  max="20"
-                  required
-                  hasFeedback="both"
-                ></sgds-quantity-toggle>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-quantity-toggle
-                  label="Quantity ordered"
-                  name="quantity"
-                  value="1"
-                  min="1"
-                  max="100"
-                  required
-                  hasFeedback="both"
-                ></sgds-quantity-toggle>
-              </div>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Reset</sgds-button>
-            <sgds-button type="submit">Book Event</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formFormFieldsFileUploadMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form
-        class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-center-8 sgds-col-xl-center-8 sgds-col-2-xl-center-8"
-      >
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Document Submission
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Name" name="name" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Email" name="email" type="email" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div>
-              <sgds-file-upload label="Upload ID" name="idDocument" required hasFeedback="both"
-                >Choose files</sgds-file-upload
-              >
-            </div>
-            <div>
-              <sgds-file-upload label="Upload Proof of Address" name="addressProof" required hasFeedback="both"
-                >Choose files</sgds-file-upload
-              >
-            </div>
-            <div>
-              <sgds-file-upload label="Additional Documents" name="additionalDocs" hasFeedback="both"
-                >Choose files</sgds-file-upload
-              >
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Reset</sgds-button>
-            <sgds-button type="submit">Upload Documents</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formFormFieldsRadioMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-8 sgds-col-xl-8 sgds-col-2-xl-8">
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Survey
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Name" name="name" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Email" name="email" type="email" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div>
-              <sgds-radio-group label="How satisfied are you?" name="satisfaction" required hasFeedback="both">
-                <sgds-radio value="very-satisfied">Very satisfied</sgds-radio>
-                <sgds-radio value="satisfied">Satisfied</sgds-radio>
-                <sgds-radio value="neutral">Neutral</sgds-radio>
-                <sgds-radio value="dissatisfied">Dissatisfied</sgds-radio>
-              </sgds-radio-group>
-            </div>
-            <div>
-              <sgds-radio-group label="How likely to recommend?" name="likelihood" required hasFeedback="both">
-                <sgds-radio value="very-likely">Very likely</sgds-radio>
-                <sgds-radio value="likely">Likely</sgds-radio>
-                <sgds-radio value="unlikely">Unlikely</sgds-radio>
-              </sgds-radio-group>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Reset</sgds-button>
-            <sgds-button type="submit">Submit Survey</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formFormFieldsSelectsMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-8 sgds-col-xl-8 sgds-col-2-xl-8">
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Product Selection
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-select
-                  placeholder="Select an option"
-                  label="Category"
-                  name="category"
-                  placeholder="Select a category"
-                  required
-                  hasFeedback="both"
-                >
-                  <sgds-select-option value="electronics">Electronics</sgds-select-option>
-                  <sgds-select-option value="furniture">Furniture</sgds-select-option>
-                  <sgds-select-option value="clothing">Clothing</sgds-select-option>
-                </sgds-select>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-select
-                  placeholder="Select an option"
-                  label="Brand"
-                  name="brand"
-                  placeholder="Select a brand"
-                  required
-                  hasFeedback="both"
-                >
-                  <sgds-select-option value="brand-a">Brand A</sgds-select-option>
-                  <sgds-select-option value="brand-b">Brand B</sgds-select-option>
-                  <sgds-select-option value="brand-c">Brand C</sgds-select-option>
-                </sgds-select>
-              </div>
-            </div>
-            <div>
-              <sgds-combo-box
-                placeholder="Search or select..."
-                label="Supplier"
-                name="supplier"
-                placeholder="Search suppliers..."
-                hasFeedback="both"
-              >
-                <sgds-combo-box-option value="supplier-1">Supplier 1</sgds-combo-box-option>
-                <sgds-combo-box-option value="supplier-2">Supplier 2</sgds-combo-box-option>
-                <sgds-combo-box-option value="supplier-3">Supplier 3</sgds-combo-box-option>
-              </sgds-combo-box>
-            </div>
-            <div>
-              <sgds-combo-box
-                placeholder="Search or select..."
-                label="Features"
-                name="features"
-                multiSelect="true"
-                placeholder="Select features..."
-                hasFeedback="both"
-              >
-                <sgds-combo-box-option value="feature-1">Feature 1</sgds-combo-box-option>
-                <sgds-combo-box-option value="feature-2">Feature 2</sgds-combo-box-option>
-                <sgds-combo-box-option value="feature-3">Feature 3</sgds-combo-box-option>
-                <sgds-combo-box-option value="feature-4">Feature 4</sgds-combo-box-option>
-              </sgds-combo-box>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Reset</sgds-button>
-            <sgds-button type="submit">Search</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formFormFieldsTextareaMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form
-        class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-center-8 sgds-col-xl-center-8 sgds-col-2-xl-center-8"
-      >
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Contact Us
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Your name" name="name" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Your email" name="email" type="email" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div>
-              <sgds-textarea
-                label="Message"
-                name="message"
-                placeholder="Please enter your message..."
-                required
-                hasFeedback="both"
-              ></sgds-textarea>
-            </div>
-            <div>
-              <sgds-textarea
-                label="Additional details"
-                name="details"
-                placeholder="Any additional information..."
-              ></sgds-textarea>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Clear</sgds-button>
-            <sgds-button type="submit">Send Message</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formFormMultistepStepperMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-8 sgds-col-xl-8 sgds-col-2-xl-8">
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <!-- Stepper -->
-          <sgds-stepper id="stepper"></sgds-stepper>
-
-          <!-- Step 1: Personal Information -->
-          <div id="step-1" class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5 class="sgds:text-subtitle-lg sgds:font-semibold sgds:text-heading-default sgds:mb-0">
-              Personal Information
-            </h5>
-
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input
-                  label="First name"
-                  name="firstName"
-                  type="text"
-                  required
-                  hasFeedback="both"
-                  invalidFeedback="First name is required"
-                ></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input
-                  label="Last name"
-                  name="lastName"
-                  type="text"
-                  required
-                  hasFeedback="both"
-                  invalidFeedback="Last name is required"
-                ></sgds-input>
-              </div>
-            </div>
-
-            <div>
-              <sgds-input
-                label="Email"
-                name="email"
-                type="email"
-                required
-                hasFeedback="both"
-                invalidFeedback="Valid email required"
-              ></sgds-input>
-            </div>
-
-            <div>
-              <sgds-datepicker
-                label="Date of birth"
-                name="birthDate"
-                required
-                hasFeedback="both"
-                invalidFeedback="Birth date required"
-              ></sgds-datepicker>
-            </div>
-          </div>
-
-          <!-- Step 2: Contact Details -->
-          <div id="step-2" class="sgds:flex sgds:flex-col sgds:gap-layout-md" style="display: none;">
-            <h5 class="sgds:text-subtitle-lg sgds:font-semibold sgds:text-heading-default sgds:mb-0">
-              Contact Details
-            </h5>
-
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Phone" name="phone" type="tel" hasFeedback="text" hintText="Optional"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input
-                  label="Mobile"
-                  name="mobile"
-                  type="tel"
-                  required
-                  hasFeedback="both"
-                  invalidFeedback="Mobile required"
-                ></sgds-input>
-              </div>
-            </div>
-
-            <div>
-              <sgds-textarea
-                label="Street address"
-                name="address"
-                required
-                hasFeedback="both"
-                invalidFeedback="Address required"
-              ></sgds-textarea>
-            </div>
-
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input
-                  label="City"
-                  name="city"
-                  type="text"
-                  required
-                  hasFeedback="both"
-                  invalidFeedback="City required"
-                ></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input
-                  label="Postal code"
-                  name="postal"
-                  type="text"
-                  required
-                  hasFeedback="both"
-                  invalidFeedback="Postal code required"
-                ></sgds-input>
-              </div>
-            </div>
-
-            <div>
-              <sgds-select
-                label="Country"
-                name="country"
-                placeholder="Select a country"
-                required
-                hasFeedback="both"
-                invalidFeedback="Country required"
-              >
-                <sgds-select-option value="sg">Singapore</sgds-select-option>
-                <sgds-select-option value="my">Malaysia</sgds-select-option>
-                <sgds-select-option value="th">Thailand</sgds-select-option>
-              </sgds-select>
-            </div>
-          </div>
-
-          <!-- Step 3: Preferences -->
-          <div id="step-3" class="sgds:flex sgds:flex-col sgds:gap-layout-md" style="display: none;">
-            <h5 class="sgds:text-subtitle-lg sgds:font-semibold sgds:text-heading-default sgds:mb-0">
-              Preferences & Consent
-            </h5>
-
-            <div>
-              <sgds-radio-group
-                label="Delivery method"
-                name="delivery"
-                required
-                hasFeedback="both"
-                invalidFeedback="Select a method"
-              >
-                <sgds-radio value="pickup">Pickup</sgds-radio>
-                <sgds-radio value="standard">Standard delivery</sgds-radio>
-                <sgds-radio value="express">Express delivery</sgds-radio>
-              </sgds-radio-group>
-            </div>
-
-            <div>
-              <sgds-checkbox-group label="Communication preferences" name="communication">
-                <sgds-checkbox value="email">Email updates</sgds-checkbox>
-                <sgds-checkbox value="sms">SMS notifications</sgds-checkbox>
-                <sgds-checkbox value="phone">Phone calls</sgds-checkbox>
-              </sgds-checkbox-group>
-            </div>
-
-            <div>
-              <sgds-checkbox
-                name="terms"
-                value="agree"
-                required
-                hasFeedback="both"
-                invalidFeedback="You must agree to proceed"
-              >
-                I agree to the terms and conditions
-              </sgds-checkbox>
-            </div>
-
-            <div>
-              <sgds-checkbox name="newsletter" value="subscribe">Subscribe to our newsletter</sgds-checkbox>
-            </div>
-          </div>
-
-          <!-- Form actions -->
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center">
-            <sgds-button type="button" id="prevBtn" variant="ghost" style="display: none;">Previous</sgds-button>
-            <div class="sgds:flex sgds:gap-layout-sm" style="margin-left: auto;">
-              <sgds-button type="reset" variant="ghost">Cancel</sgds-button>
-              <sgds-button type="button" id="nextBtn">Next</sgds-button>
-              <sgds-button type="submit" id="submitBtn" style="display: none;">Submit</sgds-button>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formFullwidthOnlyMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-8 sgds-col-xl-8 sgds-col-2-xl-8">
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              All Full-Width
-            </h5>
-            <div>
-              <sgds-textarea
-                label="Description"
-                name="description"
-                placeholder="Enter description..."
-                required
-                hasFeedback="both"
-              ></sgds-textarea>
-            </div>
-            <div>
-              <sgds-radio-group label="Category" name="category" required hasFeedback="both">
-                <sgds-radio value="category-a">Category A</sgds-radio>
-                <sgds-radio value="category-b">Category B</sgds-radio>
-                <sgds-radio value="category-c">Category C</sgds-radio>
-              </sgds-radio-group>
-            </div>
-            <div>
-              <sgds-checkbox-group label="Options" name="options" required hasFeedback="both">
-                <sgds-checkbox value="option-1">Option 1</sgds-checkbox>
-                <sgds-checkbox value="option-2">Option 2</sgds-checkbox>
-                <sgds-checkbox value="option-3">Option 3</sgds-checkbox>
-              </sgds-checkbox-group>
-            </div>
-            <div>
-              <sgds-textarea
-                label="Additional comments"
-                name="comments"
-                placeholder="Any additional comments..."
-              ></sgds-textarea>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Reset</sgds-button>
-            <sgds-button type="submit">Submit</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formPairedOnlyMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-8 sgds-col-xl-8 sgds-col-2-xl-8">
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              All Paired Fields
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="First name" name="firstName" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Last name" name="lastName" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Email" name="email" type="email" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Phone" name="phone" type="tel" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Username" name="username" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Password" name="password" type="password" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Company" name="company" type="text" hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Position" name="position" type="text" hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Reset</sgds-button>
-            <sgds-button type="submit">Submit</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formSectionsSingleMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-8 sgds-col-xl-8 sgds-col-2-xl-8">
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Quick Form
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Name" name="name" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Email" name="email" type="email" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div>
-              <sgds-textarea
-                label="Message"
-                name="message"
-                placeholder="Enter your message..."
-                required
-                hasFeedback="both"
-              ></sgds-textarea>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Cancel</sgds-button>
-            <sgds-button type="submit">Send</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formSectionsThreeMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-8 sgds-col-xl-8 sgds-col-2-xl-8">
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Personal Information
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="First name" name="firstName" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Last name" name="lastName" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Email" name="email" type="email" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-datepicker label="Date of birth" name="dob" required hasFeedback="both"></sgds-datepicker>
-              </div>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Address
-            </h5>
-            <div>
-              <sgds-textarea
-                label="Full address"
-                name="address"
-                placeholder="Street, City, Country..."
-                required
-                hasFeedback="both"
-              ></sgds-textarea>
-            </div>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Postal code" name="postalCode" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-select
-                  placeholder="Select an option"
-                  label="Country"
-                  name="country"
-                  placeholder="Select country"
-                  required
-                  hasFeedback="both"
-                >
-                  <sgds-select-option value="sg">Singapore</sgds-select-option>
-                  <sgds-select-option value="my">Malaysia</sgds-select-option>
-                </sgds-select>
-              </div>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Preferences
-            </h5>
-            <div>
-              <sgds-checkbox-group label="Interests" name="interests" hasFeedback="both">
-                <sgds-checkbox value="tech">Technology</sgds-checkbox>
-                <sgds-checkbox value="design">Design</sgds-checkbox>
-                <sgds-checkbox value="business">Business</sgds-checkbox>
-              </sgds-checkbox-group>
-            </div>
-            <div>
-              <sgds-radio-group label="Notification preference" name="notificationPref" required hasFeedback="both">
-                <sgds-radio value="email">Email</sgds-radio>
-                <sgds-radio value="push">Push</sgds-radio>
-              </sgds-radio-group>
-            </div>
-            <div>
-              <sgds-select
-                placeholder="Select an option"
-                label="Communication frequency"
-                name="frequency"
-                placeholder="Select frequency"
-                hasFeedback="both"
-              >
-                <sgds-select-option value="daily">Daily</sgds-select-option>
-                <sgds-select-option value="weekly">Weekly</sgds-select-option>
-                <sgds-select-option value="monthly">Monthly</sgds-select-option>
-              </sgds-select>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Reset</sgds-button>
-            <sgds-button type="submit">Complete Registration</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-export const formSectionsTwoMarkup = `<div class="sgds-container sgds:py-layout-md">
-    <div class="sgds-grid sgds:gap-layout-md">
-      <form
-        class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-center-8 sgds-col-xl-center-8 sgds-col-2-xl-center-8"
-      >
-        <div class="sgds:flex sgds:flex-col sgds:gap-layout-lg">
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Personal Details
-            </h5>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="First name" name="firstName" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Last name" name="lastName" type="text" required hasFeedback="both"></sgds-input>
-              </div>
-            </div>
-            <div>
-              <sgds-textarea label="Bio" name="bio" placeholder="Tell us about yourself..."></sgds-textarea>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-            <h5
-              class="sgds:text-subtitle-lg sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0"
-            >
-              Contact Preferences
-            </h5>
-            <div>
-              <sgds-radio-group label="Preferred method" name="preference" required hasFeedback="both">
-                <sgds-radio value="email">Email</sgds-radio>
-                <sgds-radio value="phone">Phone</sgds-radio>
-                <sgds-radio value="sms">SMS</sgds-radio>
-              </sgds-radio-group>
-            </div>
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-input label="Phone" name="phone" type="tel" required hasFeedback="both"></sgds-input>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6 sgds-col-xl-6 sgds-col-2-xl-6">
-                <sgds-datepicker label="Preferred date" name="prefDate" hasFeedback="both"></sgds-datepicker>
-              </div>
-            </div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-sm sgds:items-center sgds:justify-end">
-            <sgds-button type="reset" variant="ghost">Reset</sgds-button>
-            <sgds-button type="submit">Save</sgds-button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>`;
-
-// ============================================================
-// header
-// ============================================================
-
-export const headerPageHeaderBreadcrumbMarkup = `<!-- Page Header Block (with breadcrumb)
-       Layout : breadcrumb on top, then overline + h1 + body description
-       Typography : h1 pattern (overline, heading-xl bold, body-lg)
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:gap-layout-md" class="sgds:max-w-text">
-        <!-- Breadcrumb -->
-        <sgds-breadcrumb>
-          <sgds-breadcrumb-item><a href="#">Home</a></sgds-breadcrumb-item>
-          <sgds-breadcrumb-item><a href="#">Section</a></sgds-breadcrumb-item>
-          <sgds-breadcrumb-item active><a href="#">Current Page</a></sgds-breadcrumb-item>
-        </sgds-breadcrumb>
-
-        <!-- Heading group -->
-        <div>
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            Overline Label
-          </div>
-
-          <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
-            Page Heading Goes Here
-          </h1>
-
-          <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
-            Supporting body text that provides context and detail for the page or section above.
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const headerPageHeaderMarkup = `<!-- Page Header Block (no breadcrumb)
-       Layout : overline + h1 + body description
-       Typography : h1 pattern (overline, heading-xl bold, body-lg)
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left" class="sgds:max-w-text">
-        <div
-          class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-        >
-          Overline Label
-        </div>
-
-        <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
-          Page Heading Goes Here
-        </h1>
-
-        <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
-          Supporting body text that provides context and detail for the page or section above.
-        </p>
-      </div>
-    </div>
-  </section>`;
-
-// ============================================================
-// hero
-// ============================================================
-
-export const heroHeroBgImageLightMarkup = `<!-- Hero Block (background image — light overlay)
-       Sizing      : min-height calc(100vh - 108px)
-       Background  : full-cover image with light translucent overlay
-       Text        : fixed-dark (always dark regardless of theme)
-       Layout      : left-aligned content, no container, no outer padding
-  -->
-  <section
-    class="sgds:flex sgds:items-center sgds:min-h-[640px]"
-    style="
-      position: relative;
-      background-image: url('https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png');
-      background-size: cover;
-      background-position: center;
-    "
-  >
-    <!-- Light overlay -->
-    <div class="sgds:bg-translucent-fixed-light" style="position: absolute; inset: 0;"></div>
-
-    <!-- Container — keeps content within grid at all zoom levels -->
-    <div class="sgds-container" style="position: relative; z-index: 1;">
-      <div class="sgds-grid">
-        <div
-          class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6 sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:py-layout-lg"
-        >
-          <!-- Typography group — mb-xl separates group from button -->
-          <div class="sgds:mb-xl">
-            <!-- Overline — overline-md semibold, fixed-dark -->
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-fixed-dark sgds:mb-xs"
-            >
-              Singapore Government Digital Services
-            </div>
-
-            <!-- Headline — display-lg bold, fixed-dark -->
-            <h1
-              class="sgds:text-display-lg sgds:font-bold sgds:leading-3-xl sgds:tracking-tighter sgds:text-fixed-dark"
-            >
-              One Platform. Simpler Living.
-            </h1>
-
-            <!-- Description — heading-sm light, h4, fixed-dark -->
-            <h4 class="sgds:text-heading-sm sgds:font-light sgds:leading-sm sgds:tracking-tight sgds:text-fixed-dark">
-              Access government services anytime, anywhere. Built for residents, designed for ease.
-            </h4>
-          </div>
-          <!-- end typography group -->
-
-          <!-- Button slot — size md -->
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-        <!-- end content col -->
-      </div>
-      <!-- end grid -->
-    </div>
-    <!-- end container -->
-  </section>`;
-
-export const heroHeroBgImageMarkup = `<!-- Hero Block (background image)
-       Sizing   : min-height 640px
-       Background : full-cover image with dark overlay
-       Layout   : left-aligned content, no container, no outer padding
-  -->
-  <section
-    class="sgds:flex sgds:items-center sgds:min-h-[640px]"
-    style="
-      position: relative;
-      background-image: url('https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png');
-      background-size: cover;
-      background-position: center;
-    "
-  >
-    <!-- Overlay -->
-    <div class="sgds:bg-overlay" style="position: absolute; inset: 0;"></div>
-
-    <!-- Container — keeps content within grid at all zoom levels -->
-    <div class="sgds-container" style="position: relative; z-index: 1;">
-      <div class="sgds-grid">
-        <div
-          class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6 sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:py-layout-lg"
-        >
-          <!-- Typography group — mb-xl separates group from button -->
-          <div class="sgds:mb-xl">
-            <!-- Overline — overline-md semibold, on-inverted -->
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-fixed-light sgds:mb-xs"
-            >
-              Singapore Government Digital Services
-            </div>
-
-            <!-- Headline — display-lg bold, on-inverted -->
-            <h1
-              class="sgds:text-display-lg sgds:font-bold sgds:leading-3-xl sgds:tracking-tighter sgds:text-fixed-light"
-            >
-              One Platform. Simpler Living.
-            </h1>
-
-            <!-- Description — heading-sm light, h4, on-inverted -->
-            <h4 class="sgds:text-heading-sm sgds:font-light sgds:leading-sm sgds:tracking-tight sgds:text-fixed-light">
-              Access government services anytime, anywhere. Built for residents, designed for ease.
-            </h4>
-          </div>
-          <!-- end typography group -->
-
-          <!-- Button slot — size md -->
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-        <!-- end content col -->
-      </div>
-      <!-- end grid -->
-    </div>
-    <!-- end container -->
-  </section>`;
-
-export const heroHeroCenterMarkup = `<!-- Hero Block (center)
-       Sizing   : min-height calc(100vh - 108px)
-       Color    : bg-surface-default
-       Spacing  : py-layout-lg (top + bottom)
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg sgds:min-h-[640px]">
-    <!-- Container — constrains width and centers block on page -->
-    <div class="sgds-container">
-      <!-- Slot
-         Spacing : padding-top layout-xs only (CSS var — no compiled pt-layout-xs utility)
-         Layout  : stack, center-aligned
-         Width   : max-w-text
-    -->
-      <div
-        class="sgds:flex sgds:flex-col sgds:items-center sgds:text-center sgds:max-w-text sgds:mx-auto"
-        class="sgds:pt-layout-xs"
-      >
-        <!-- Typography group — mb-xl separates group from button -->
-        <div class="sgds:mb-xl">
-          <!-- Overline — overline-md semibold, label color default, mb-xs -->
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            Singapore Government Digital Services
-          </div>
-
-          <!-- Headline — display-lg bold, display color default -->
-          <h1
-            class="sgds:text-display-lg sgds:font-bold sgds:leading-3-xl sgds:tracking-tighter sgds:text-display-default"
-          >
-            One Platform. Simpler Living.
-          </h1>
-
-          <!-- Description — heading-sm light, h4 -->
-          <h4 class="sgds:text-heading-sm sgds:font-light sgds:leading-sm sgds:tracking-tight sgds:text-heading-subtle">
-            Access government services anytime, anywhere. Built for residents, designed for ease.
-          </h4>
-        </div>
-        <!-- end typography group -->
-
-        <!-- Button slot — size md -->
-        <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-      </div>
-    </div>
-    <!-- end container -->
-  </section>`;
-
-export const heroHeroFullbleedMarkup = `<!-- Hero Block (full-bleed image right)
-       Sizing   : min-height 640px
-       Color    : bg-surface-default
-       Layout   : content left in grid, image right full-bleed (absolute)
-  -->
-  <section
-    class="sgds:bg-default sgds:flex sgds:items-center sgds:min-h-[640px]"
-    style="position: relative; overflow: hidden;"
-  >
-    <!-- Right: image — absolute, covers right half, full height -->
-    <div style="position: absolute; right: 0; top: 0; bottom: 0; width: 50%;">
-      <img
-        src="https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png"
-        alt="Government digital services"
-        style="width: 100%; height: 100%; object-fit: cover; display: block;"
-      />
-    </div>
-
-    <!-- Container — keeps content within grid at all zoom levels -->
-    <div class="sgds-container" style="position: relative; z-index: 1;">
-      <div class="sgds-grid">
-        <div
-          class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6 sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:py-layout-lg"
-        >
-          <!-- Typography group — mb-xl separates group from button -->
-          <div class="sgds:mb-xl">
-            <!-- Overline — overline-md semibold, label color default, mb-xs -->
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Singapore Government Digital Services
-            </div>
-
-            <!-- Headline — display-lg bold, display color default -->
-            <h1
-              class="sgds:text-display-lg sgds:font-bold sgds:leading-3-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              One Platform. Simpler Living.
-            </h1>
-
-            <!-- Description — heading-sm light, h4 -->
-            <h4
-              class="sgds:text-heading-sm sgds:font-light sgds:leading-sm sgds:tracking-tight sgds:text-heading-subtle"
-            >
-              Access government services anytime, anywhere. Built for residents, designed for ease.
-            </h4>
-          </div>
-          <!-- end typography group -->
-
-          <!-- Button slot — size md -->
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-        <!-- end content col -->
-      </div>
-      <!-- end grid -->
-    </div>
-    <!-- end container -->
-  </section>`;
-
-export const heroHeroImageMarkup = `<!-- Hero Block (image right)
-       Sizing   : min-height calc(100vh - 108px)
-       Color    : bg-surface-default
-       Spacing  : py-layout-lg (top + bottom)
-       Layout   : 50/50 split, gap-layout-md
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg sgds:min-h-[640px]">
-    <!-- Container — constrains width and centers block on page -->
-    <div class="sgds-container">
-      <!-- Two-column row: left content + right image, gap-layout-md -->
-      <div class="sgds:flex sgds:items-center sgds:gap-layout-md">
-        <!-- Left: content slot (50%), padding-right layout-md -->
-        <div
-          class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:max-w-text"
-          style="width: 50%; padding-top: var(--sgds-spacing-layout-xs); padding-right: var(--sgds-spacing-layout-md);"
-        >
-          <!-- Typography group — mb-xl separates group from button -->
-          <div class="sgds:mb-xl">
-            <!-- Overline — overline-md semibold, label color default, mb-xs -->
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Singapore Government Digital Services
-            </div>
-
-            <!-- Headline — display-lg bold, display color default -->
-            <h1
-              class="sgds:text-display-lg sgds:font-bold sgds:leading-3-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              One Platform. Simpler Living.
-            </h1>
-
-            <!-- Description — heading-sm light, h4 -->
-            <h4
-              class="sgds:text-heading-sm sgds:font-light sgds:leading-sm sgds:tracking-tight sgds:text-heading-subtle"
-            >
-              Access government services anytime, anywhere. Built for residents, designed for ease.
-            </h4>
-          </div>
-          <!-- end typography group -->
-
-          <!-- Button slot — size md -->
-          <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-        </div>
-        <!-- end left content -->
-
-        <!-- Right: image (50%), 1:1 ratio -->
-        <div style="width: 50%;">
-          <img
-            src="https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png"
-            alt="Government digital services"
-            style="width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: var(--sgds-border-radius-xl);"
-          />
-        </div>
-        <!-- end right image -->
-      </div>
-      <!-- end two-column row -->
-    </div>
-    <!-- end container -->
-  </section>`;
-
-export const heroHeroMarkup = `<!-- Hero Block
-       Sizing   : min-height calc(100vh - 108px)
-       Color    : bg-surface-default
-       Spacing  : py-layout-lg (top + bottom)
-  -->
-  <section class="sgds:bg-default sgds:py-layout-lg sgds:min-h-[640px]">
-    <!-- Container — constrains width and centers block on page -->
-    <div class="sgds-container">
-      <!-- Slot
-         Spacing : padding-top layout-xs only (CSS var — no compiled pt-layout-xs utility)
-         Layout  : stack, left-aligned
-         Gap     : gap-text-lg (spacer-5 = 1rem = 16px)
-         Width   : max-w-text
-    -->
-      <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:max-w-text" class="sgds:pt-layout-xs">
-        <!-- Typography group — mb-xl separates group from button -->
-        <div class="sgds:mb-xl">
-          <!-- Overline — overline-md semibold, label color default, mb-xs -->
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            Singapore Government Digital Services
-          </div>
-
-          <!-- Headline — display-lg bold, display color default -->
-          <h1
-            class="sgds:text-display-lg sgds:font-bold sgds:leading-3-xl sgds:tracking-tighter sgds:text-display-default"
-          >
-            One Platform. Simpler Living.
-          </h1>
-
-          <!-- Description — heading-sm light, h4 -->
-          <h4 class="sgds:text-heading-sm sgds:font-light sgds:leading-sm sgds:tracking-tight sgds:text-heading-subtle">
-            Access government services anytime, anywhere. Built for residents, designed for ease.
-          </h4>
-        </div>
-        <!-- end typography group -->
-
-        <!-- Button slot — size md -->
-        <sgds-button variant="primary" tone="neutral" size="md">Get Started</sgds-button>
-      </div>
-    </div>
-    <!-- end container -->
-  </section>`;
-
-// ============================================================
-// stats
-// ============================================================
-
-export const statsStats3Markup = `<style>
-    @media (width >= 768px) {
-      .stats-row {
-        flex-wrap: nowrap !important;
-      }
-      .stats-row > * {
-        width: auto;
-        flex: 1;
-      }
-    }
-  </style>
-
-  <!-- Stats Block — section header + 3 stats
-       Background : bg-surface-default
-       Spacing    : py-layout-md, gap-layout-md
-  -->
-  <section class="sgds:bg-default sgds:py-layout-md">
-    <div class="sgds-container">
-      <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-        <!-- Section header -->
-        <div class="sgds:max-w-text">
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            By the Numbers
-          </div>
-          <h2
-            class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-          >
-            Impact at a Glance
-          </h2>
-          <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0">
-            Key metrics measured over the past 12 months across all participating agencies.
-          </p>
-        </div>
-
-        <!-- 3 stats -->
-        <div class="stats-row sgds:flex sgds:flex-wrap sgds:gap-layout-md">
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              2.4M
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Active Users
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Residents actively using the platform each month to access government services.
-            </p>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              400+
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Government Services
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Integrated services from agencies across the public sector available in one place.
-            </p>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              99.9%
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Platform Uptime
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Consistently high availability ensuring residents can access services anytime.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const statsStats4Markup = `<style>
-    @media (width >= 1024px) {
-      .stats-row {
-        flex-wrap: nowrap !important;
-      }
-      .stats-row > * {
-        width: auto;
-        flex: 1;
-      }
-    }
-  </style>
-
-  <!-- Stats Block — section header + 4 stats
-       Background : bg-surface-default
-       Spacing    : py-layout-md, gap-layout-md
-  -->
-  <section class="sgds:bg-default sgds:py-layout-md">
-    <div class="sgds-container">
-      <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-        <!-- Section header -->
-        <div class="sgds:max-w-text">
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            By the Numbers
-          </div>
-          <h2
-            class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-          >
-            Impact at a Glance
-          </h2>
-          <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0">
-            Key metrics measured over the past 12 months across all participating agencies.
-          </p>
-        </div>
-
-        <!-- 4 stats -->
-        <div class="stats-row sgds:flex sgds:flex-wrap sgds:gap-layout-md">
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              2.4M
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Active Users
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Residents actively using the platform to access government services each month.
-            </p>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              400+
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Government Services
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Integrated services from agencies across the public sector in one place.
-            </p>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              99.9%
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Platform Uptime
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Consistently high availability so residents can access services anytime.
-            </p>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              16
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Partner Agencies
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Public agencies contributing services and data to the shared platform.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const statsStats5Markup = `<style>
-    @media (width >= 1024px) {
-      .stats-row {
-        flex-wrap: nowrap !important;
-      }
-      .stats-row > * {
-        width: auto;
-        flex: 1;
-      }
-    }
-  </style>
-
-  <!-- Stats Block — section header + 5 stats
-       Background : bg-surface-default
-       Spacing    : py-layout-md, gap-layout-md
-  -->
-  <section class="sgds:bg-default sgds:py-layout-md">
-    <div class="sgds-container">
-      <div class="sgds:flex sgds:flex-col sgds:gap-layout-md">
-        <!-- Section header -->
-        <div class="sgds:max-w-text">
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            By the Numbers
-          </div>
-          <h2
-            class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-          >
-            Impact at a Glance
-          </h2>
-          <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0">
-            Key metrics measured over the past 12 months across all participating agencies.
-          </p>
-        </div>
-
-        <!-- 5 stats -->
-        <div class="stats-row sgds:flex sgds:flex-wrap sgds:gap-layout-md">
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              2.4M
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Active Users
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Residents using the platform to access services each month.
-            </p>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              400+
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Government Services
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Integrated services from agencies across the public sector.
-            </p>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              99.9%
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Platform Uptime
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              High availability so residents can access services anytime.
-            </p>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              16
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Partner Agencies
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Public agencies contributing services and data to the platform.
-            </p>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:items-start sgds:w-full sgds:pr-layout-xs">
-            <div
-              class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-            >
-              4.8
-            </div>
-            <h5
-              class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-            >
-              Satisfaction Score
-            </h5>
-            <p
-              class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-            >
-              Average rating out of 5 from post-task surveys collected in-app.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const statsStatsRight6Markup = `<style>
-    .stats-inner {
-      display: flex;
-      flex-direction: column;
-      gap: var(--sgds-gap-layout-md);
-    }
-    @media (width >= 1024px) {
-      .stats-heading {
-        padding-right: var(--sgds-spacing-layout-md);
-      }
-    }
-  </style>
-
-  <!-- Stats Block — heading left 6 cols + 4 stats right 6 cols (2×2 grid)
-       Background : bg-surface-default
-       Spacing    : py-layout-md
-       Split      : lg:6/6
-  -->
-  <section class="sgds:bg-default sgds:py-layout-md">
-    <div class="sgds-container">
-      <div class="sgds-grid" style="gap: var(--sgds-gap-layout-md); align-items: start;">
-        <!-- Heading — left 6 cols -->
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6 stats-heading">
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            By the Numbers
-          </div>
-          <h2
-            class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-          >
-            Impact at a Glance
-          </h2>
-          <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0">
-            Key metrics measured over the past 12 months across all participating agencies.
-          </p>
-        </div>
-
-        <!-- 4 stats — right 6 cols in 2×2 grid -->
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
-          <div class="stats-inner sgds:grid sgds-grid" style="grid-template-columns: repeat(2, 1fr);">
-            <div class="sgds:flex sgds:flex-col sgds:items-start md:sgds:pr-layout-xs">
-              <div
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-              >
-                2.4M
-              </div>
-              <h5
-                class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-              >
-                Active Users
-              </h5>
-              <p
-                class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-              >
-                Residents using the platform each month.
-              </p>
-            </div>
-
-            <div class="sgds:flex sgds:flex-col sgds:items-start md:sgds:pr-layout-xs">
-              <div
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-              >
-                400+
-              </div>
-              <h5
-                class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-              >
-                Government Services
-              </h5>
-              <p
-                class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-              >
-                Integrated services across the public sector.
-              </p>
-            </div>
-
-            <div class="sgds:flex sgds:flex-col sgds:items-start md:sgds:pr-layout-xs">
-              <div
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-              >
-                99.9%
-              </div>
-              <h5
-                class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-              >
-                Platform Uptime
-              </h5>
-              <p
-                class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-              >
-                High availability ensuring residents can access services anytime.
-              </p>
-            </div>
-
-            <div class="sgds:flex sgds:flex-col sgds:items-start md:sgds:pr-layout-xs">
-              <div
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-              >
-                16
-              </div>
-              <h5
-                class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-              >
-                Partner Agencies
-              </h5>
-              <p
-                class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-              >
-                Public agencies contributing services and data.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>`;
-
-export const statsStatsRight8Markup = `<style>
-    .stats-inner {
-      display: flex;
-      flex-direction: column;
-      gap: var(--sgds-gap-layout-md);
-    }
-    @media (width >= 1024px) {
-      .stats-heading {
-        padding-right: var(--sgds-spacing-layout-md);
-      }
-    }
-  </style>
-
-  <!-- Stats Block — heading left 4 cols + 4 stats right 8 cols (flex row)
-       Background : bg-surface-default
-       Spacing    : py-layout-md
-       Split      : lg:4/8
-  -->
-  <section class="sgds:bg-default sgds:py-layout-md">
-    <div class="sgds-container">
-      <div class="sgds-grid" style="gap: var(--sgds-gap-layout-md); align-items: start;">
-        <!-- Heading — left 4 cols -->
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-4 stats-heading">
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            By the Numbers
-          </div>
-          <h2
-            class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-          >
-            Impact at a Glance
-          </h2>
-          <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0">
-            Key metrics measured over the past 12 months across all participating agencies.
-          </p>
-        </div>
-
-        <!-- 4 stats — right 8 cols in flex row -->
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-md-4 sgds-col-lg-8">
-          <div class="stats-inner sgds:flex sgds:flex-wrap sgds:gap-layout-md">
-            <div class="sgds:flex sgds:flex-col sgds:items-start sgds:flex-1 md:sgds:pr-layout-xs">
-              <div
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-              >
-                2.4M
-              </div>
-              <h5
-                class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-              >
-                Active Users
-              </h5>
-              <p
-                class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-              >
-                Residents actively using the platform to access government services each month.
-              </p>
-            </div>
-
-            <div class="sgds:flex sgds:flex-col sgds:items-start sgds:flex-1 md:sgds:pr-layout-xs">
-              <div
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-              >
-                400+
-              </div>
-              <h5
-                class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-              >
-                Government Services
-              </h5>
-              <p
-                class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-              >
-                Integrated services from agencies across the public sector.
-              </p>
-            </div>
-
-            <div class="sgds:flex sgds:flex-col sgds:items-start sgds:flex-1 md:sgds:pr-layout-xs">
-              <div
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-              >
-                99.9%
-              </div>
-              <h5
-                class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-              >
-                Platform Uptime
-              </h5>
-              <p
-                class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-              >
-                Consistently high availability so residents can access services anytime.
-              </p>
-            </div>
-
-            <div class="sgds:flex sgds:flex-col sgds:items-start sgds:flex-1 md:sgds:pr-layout-xs">
-              <div
-                class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default"
-              >
-                16
-              </div>
-              <h5
-                class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default"
-              >
-                Partner Agencies
-              </h5>
-              <p
-                class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0"
-              >
-                Public agencies contributing services and data to the shared platform.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>`;
diff --git a/docs/.vitepress/data/pattern-docs.ts b/docs/.vitepress/data/pattern-docs.ts
index 33134bf6..6ef6bd90 100644
--- a/docs/.vitepress/data/pattern-docs.ts
+++ b/docs/.vitepress/data/pattern-docs.ts
@@ -1,66 +1,4 @@
 import type { ResolvedComponentDoc } from "./component-docs";
-import {
-  aboutUsMarkup,
-  applicationManagementMarkup,
-  blogMarkup,
-  catalogueMarkup,
-  formPageMarkup,
-  landingMarkup,
-  multiStepFormPageMarkup,
-} from "./template-markup";
-import {
-  cardsCards3Markup,
-  cardsCards4Markup,
-  ctaContainedPrimaryMarkup,
-  ctaContainedPrimaryCenterMarkup,
-  ctaContainedRaisedMarkup,
-  ctaContainedRaisedCenterMarkup,
-  ctaFullbleedPrimaryMarkup,
-  ctaFullbleedPrimaryCenterMarkup,
-  ctaFullbleedAlternateMarkup,
-  ctaFullbleedAlternateCenterMarkup,
-  featureFeature48ImgLeftMarkup,
-  featureFeature48ImgRightMarkup,
-  featureFeature66ComponentLeftMarkup,
-  featureFeature66ComponentRightMarkup,
-  featureFeature66ImgLeftMarkup,
-  featureFeature66ImgRightMarkup,
-  featureFeature84ImgLeftMarkup,
-  featureFeature84ImgRightMarkup,
-  featureFeatureCardsBelowMarkup,
-  featureFeatureNoImgCenterMarkup,
-  featureFeatureNoImgLeftMarkup,
-  filterFilterMarkup,
-  formAllTypesMarkup,
-  formBasicCenterMarkup,
-  formBasicLeftMarkup,
-  formBasicRightMarkup,
-  formFormFieldsCheckboxMarkup,
-  formFormFieldsDatesQuantitiesMarkup,
-  formFormFieldsFileUploadMarkup,
-  formFormFieldsRadioMarkup,
-  formFormFieldsSelectsMarkup,
-  formFormFieldsTextareaMarkup,
-  formFormMultistepStepperMarkup,
-  formFullwidthOnlyMarkup,
-  formPairedOnlyMarkup,
-  formSectionsSingleMarkup,
-  formSectionsThreeMarkup,
-  formSectionsTwoMarkup,
-  headerPageHeaderMarkup,
-  headerPageHeaderBreadcrumbMarkup,
-  heroHeroMarkup,
-  heroHeroCenterMarkup,
-  heroHeroFullbleedMarkup,
-  heroHeroImageMarkup,
-  heroHeroBgImageMarkup,
-  heroHeroBgImageLightMarkup,
-  statsStats3Markup,
-  statsStats4Markup,
-  statsStats5Markup,
-  statsStatsRight6Markup,
-  statsStatsRight8Markup,
-} from "./block-markup";
 
 export type PatternGroup = "page templates" | "block templates";
 
@@ -73,7 +11,6 @@ export type TemplateOverviewItem = {
   group: PatternGroup;
   groupLabel: string;
   demoCount: number;
-  usedComponents: string[];
 };
 
 export type TemplateOverviewGroup = {
@@ -86,7 +23,6 @@ export type TemplateOverviewGroup = {
 export type PatternDemo = {
   title: string;
   description: string;
-  markup: string;
 };
 
 type UsageGuidance = {
@@ -98,7 +34,6 @@ type UsageGuidance = {
 type PatternDoc = {
   title: string;
   group: PatternGroup;
-  usedComponents: string[];
   whenToUse: string[];
   whenNotToUse?: string[];
   demos: PatternDemo[];
@@ -110,8 +45,6 @@ type PatternDoc = {
 type BlockVariantDocInput = {
   title: string;
   categoryLabel: string;
-  markup: string;
-  usedComponents: string[];
   description: string;
   whenToUse: string;
   whenNotToUse?: string;
@@ -120,8 +53,6 @@ type BlockVariantDocInput = {
 const createBlockVariantDoc = ({
   title,
   categoryLabel,
-  markup,
-  usedComponents,
   description,
   whenToUse,
   whenNotToUse,
@@ -129,26 +60,11 @@ const createBlockVariantDoc = ({
   title,
   group: "block templates",
   categoryLabel,
-  usedComponents,
   whenToUse: [whenToUse],
   whenNotToUse: whenNotToUse ? [whenNotToUse] : undefined,
-  demos: [{ title, description, markup }],
+  demos: [{ title, description }],
 });
 
-const formBlockComponents = [
-  "sgds-input",
-  "sgds-textarea",
-  "sgds-select",
-  "sgds-checkbox",
-  "sgds-checkbox-group",
-  "sgds-radio",
-  "sgds-radio-group",
-  "sgds-datepicker",
-  "sgds-quantity-toggle",
-  "sgds-file-upload",
-  "sgds-stepper",
-  "sgds-button",
-];
 
 export const blockTemplateCategoryOrder: string[] = [
   "Cards",
@@ -237,434 +153,341 @@ const formBlockVariantDocs: Record<string, PatternDoc> = {
     title: "All types",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When you need a complete reference form that shows the available SGDS field types together."],
     whenNotToUse: ["When a page needs a focused form with only the fields required for the task."],
-    demos: [{ title: "All types", description: "Demonstration form showing every supported field type in one layout.", markup: formAllTypesMarkup }],
+    demos: [{ title: "All types", description: "Demonstration form showing every supported field type in one layout." }],
   },
   "form-basic-center": {
     title: "Basic center",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["For short, single-section forms that should sit prominently in the centre of the page."],
     whenNotToUse: ["For long forms or forms that need supporting content beside the fields."],
-    demos: [{ title: "Basic center", description: "Single-section form centered on the page.", markup: formBasicCenterMarkup }],
+    demos: [{ title: "Basic center", description: "Single-section form centered on the page." }],
   },
   "form-basic-left": {
     title: "Basic left",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["For simple forms that should align with the page container and reading flow."],
     whenNotToUse: ["When the form needs strong standalone emphasis in the centre of the page."],
-    demos: [{ title: "Basic left", description: "Single-section form, content left-aligned within the page container.", markup: formBasicLeftMarkup }],
+    demos: [{ title: "Basic left", description: "Single-section form, content left-aligned within the page container." }],
   },
   "form-basic-right": {
     title: "Basic right",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["For layouts where the form sits beside explanatory content or supporting media."],
     whenNotToUse: ["When the form is the only major content on the page."],
-    demos: [{ title: "Basic right", description: "Single-section form right-aligned.", markup: formBasicRightMarkup }],
+    demos: [{ title: "Basic right", description: "Single-section form right-aligned." }],
   },
   "form-fields-checkbox": {
     title: "Form fields checkbox",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When users can select one or more options from a visible set."],
     whenNotToUse: ["When the user must choose exactly one option — use radio fields instead."],
-    demos: [{ title: "Form fields checkbox", description: "Checkbox and checkbox-group examples, including grouped options.", markup: formFormFieldsCheckboxMarkup }],
+    demos: [{ title: "Form fields checkbox", description: "Checkbox and checkbox-group examples, including grouped options." }],
   },
   "form-fields-dates-quantities": {
     title: "Form fields dates quantities",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When a form needs date or quantity controls with SGDS field styling."],
     whenNotToUse: ["When plain text entry would be clearer than a specialised control."],
-    demos: [{ title: "Form fields dates quantities", description: "Datepicker and quantity-toggle field examples.", markup: formFormFieldsDatesQuantitiesMarkup }],
+    demos: [{ title: "Form fields dates quantities", description: "Datepicker and quantity-toggle field examples." }],
   },
   "form-fields-file-upload": {
     title: "Form fields file upload",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When users need to attach files or supporting documents to a form."],
     whenNotToUse: ["When uploaded files are not required to complete the user task."],
-    demos: [{ title: "Form fields file upload", description: "File upload field examples with drop zone and validation.", markup: formFormFieldsFileUploadMarkup }],
+    demos: [{ title: "Form fields file upload", description: "File upload field examples with drop zone and validation." }],
   },
   "form-fields-radio": {
     title: "Form fields radio",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When users must choose exactly one option from a visible set."],
     whenNotToUse: ["When users can choose multiple options — use checkboxes instead."],
-    demos: [{ title: "Form fields radio", description: "Radio and radio-group examples.", markup: formFormFieldsRadioMarkup }],
+    demos: [{ title: "Form fields radio", description: "Radio and radio-group examples." }],
   },
   "form-fields-selects": {
     title: "Form fields selects",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When users choose from a longer list of predefined options."],
     whenNotToUse: ["When there are only a few options that should stay visible — use radio fields instead."],
-    demos: [{ title: "Form fields selects", description: "Select examples for single-value list inputs.", markup: formFormFieldsSelectsMarkup }],
+    demos: [{ title: "Form fields selects", description: "Select examples for single-value list inputs." }],
   },
   "form-fields-textarea": {
     title: "Form fields textarea",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When users need to enter longer free-text responses."],
     whenNotToUse: ["When the response should be short and structured — use an input instead."],
-    demos: [{ title: "Form fields textarea", description: "Textarea examples with hint and validation.", markup: formFormFieldsTextareaMarkup }],
+    demos: [{ title: "Form fields textarea", description: "Textarea examples with hint and validation." }],
   },
   "form-multi-step": {
     title: "Form multi-step",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["For transactional forms that are easier to complete as a step-by-step flow."],
     whenNotToUse: ["For short forms that fit comfortably on one page."],
-    demos: [{ title: "Form multi-step", description: "Stepper-driven form for transactional flows.", markup: formFormMultistepStepperMarkup }],
+    demos: [{ title: "Form multi-step", description: "Stepper-driven form for transactional flows." }],
   },
   "form-full-width-only": {
     title: "Full-width only",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When every field needs the full form width for readability."],
     whenNotToUse: ["When related short fields can be paired to reduce scanning distance."],
-    demos: [{ title: "Full-width only", description: "Layout where every field spans the form's full width.", markup: formFullwidthOnlyMarkup }],
+    demos: [{ title: "Full-width only", description: "Layout where every field spans the form's full width." }],
   },
   "form-paired-only": {
     title: "Paired only",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When related short fields work better side-by-side on wider viewports."],
     whenNotToUse: ["When fields need long labels, hints, or validation messages."],
-    demos: [{ title: "Paired only", description: "Layout pairing fields side-by-side on wider viewports.", markup: formPairedOnlyMarkup }],
+    demos: [{ title: "Paired only", description: "Layout pairing fields side-by-side on wider viewports." }],
   },
   "form-sections-single": {
     title: "Sections single",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When a form has one clear group of related fields."],
     whenNotToUse: ["When fields belong to multiple topics that need separate headings."],
-    demos: [{ title: "Sections single", description: "One labelled section grouping related fields.", markup: formSectionsSingleMarkup }],
+    demos: [{ title: "Sections single", description: "One labelled section grouping related fields." }],
   },
   "form-sections-three": {
     title: "Sections three",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["For longer forms that need three labelled sections to make scanning easier."],
     whenNotToUse: ["When one or two sections are enough to describe the task."],
-    demos: [{ title: "Sections three", description: "Three labelled sections — use for longer forms.", markup: formSectionsThreeMarkup }],
+    demos: [{ title: "Sections three", description: "Three labelled sections — use for longer forms." }],
   },
   "form-sections-two": {
     title: "Sections two",
     group: "block templates",
     categoryLabel: "Form",
-    usedComponents: formBlockComponents,
     whenToUse: ["When a form has two clear groups of related fields."],
     whenNotToUse: ["When every field belongs to the same topic."],
-    demos: [{ title: "Sections two", description: "Two labelled sections separated by spacing.", markup: formSectionsTwoMarkup }],
+    demos: [{ title: "Sections two", description: "Two labelled sections separated by spacing." }],
   },
 };
 
-const cardsBlockComponents = ["sgds-card", "sgds-badge", "sgds-link", "sgds-icon"];
-const ctaBlockComponents = ["sgds-button"];
-const featureBlockComponents = ["sgds-button", "sgds-card", "sgds-icon"];
-const filterBlockComponents = ["sgds-checkbox", "sgds-checkbox-group", "sgds-link"];
-const headerBlockComponents = ["sgds-breadcrumb", "sgds-button", "sgds-icon"];
-const heroBlockComponents = ["sgds-button", "sgds-icon"];
-const statsBlockComponents = ["sgds-icon"];
 
 const blockVariantDocs: Record<string, PatternDoc> = {
   "cards-3-per-column": createBlockVariantDoc({
     title: "3 per column",
     categoryLabel: "Cards",
-    markup: cardsCards3Markup,
-    usedComponents: cardsBlockComponents,
     description: "3-column card grid with section header and linked cards.",
     whenToUse: "When users need to scan a medium-sized set of cards in rows of three.",
   }),
   "cards-4-per-column": createBlockVariantDoc({
     title: "4 per column",
     categoryLabel: "Cards",
-    markup: cardsCards4Markup,
-    usedComponents: cardsBlockComponents,
     description: "4-column card grid for denser browsing layouts on wider viewports.",
     whenToUse: "When users need to scan a larger set of cards with less vertical scrolling.",
   }),
   "cta-contained-primary-center": createBlockVariantDoc({
     title: "Contained primary center",
     categoryLabel: "Call to action",
-    markup: ctaContainedPrimaryCenterMarkup,
-    usedComponents: ctaBlockComponents,
     description: "Contained CTA on a primary surface with centered content.",
     whenToUse: "When a primary action needs strong emphasis inside the page container.",
   }),
   "cta-contained-primary": createBlockVariantDoc({
     title: "Contained primary",
     categoryLabel: "Call to action",
-    markup: ctaContainedPrimaryMarkup,
-    usedComponents: ctaBlockComponents,
     description: "Contained CTA on a primary surface with left-aligned content.",
     whenToUse: "When a primary action should sit within the normal page reading flow.",
   }),
   "cta-contained-raised-center": createBlockVariantDoc({
     title: "Contained raised center",
     categoryLabel: "Call to action",
-    markup: ctaContainedRaisedCenterMarkup,
-    usedComponents: ctaBlockComponents,
     description: "Contained CTA on a raised surface with centered content.",
     whenToUse: "When a CTA needs moderate emphasis without using the primary surface.",
   }),
   "cta-contained-raised": createBlockVariantDoc({
     title: "Contained raised",
     categoryLabel: "Call to action",
-    markup: ctaContainedRaisedMarkup,
-    usedComponents: ctaBlockComponents,
     description: "Contained CTA on a raised surface with left-aligned content.",
     whenToUse: "When a CTA should support a content section without dominating it.",
   }),
   "cta-full-bleed-alternate-center": createBlockVariantDoc({
     title: "Full bleed alternate center",
     categoryLabel: "Call to action",
-    markup: ctaFullbleedAlternateCenterMarkup,
-    usedComponents: ctaBlockComponents,
     description: "Full-bleed alternate CTA with centered content.",
     whenToUse: "When a lower-emphasis CTA should span the full viewport width.",
   }),
   "cta-full-bleed-alternate": createBlockVariantDoc({
     title: "Full bleed alternate",
     categoryLabel: "Call to action",
-    markup: ctaFullbleedAlternateMarkup,
-    usedComponents: ctaBlockComponents,
     description: "Full-bleed alternate CTA with left-aligned content.",
     whenToUse: "When a full-width CTA should read as a continuation of the page content.",
   }),
   "cta-full-bleed-primary-center": createBlockVariantDoc({
     title: "Full bleed primary center",
     categoryLabel: "Call to action",
-    markup: ctaFullbleedPrimaryCenterMarkup,
-    usedComponents: ctaBlockComponents,
     description: "Full-bleed primary CTA with centered content.",
     whenToUse: "When the primary action should become a major page moment.",
   }),
   "cta-full-bleed-primary": createBlockVariantDoc({
     title: "Full bleed primary",
     categoryLabel: "Call to action",
-    markup: ctaFullbleedPrimaryMarkup,
-    usedComponents: ctaBlockComponents,
     description: "Full-bleed primary CTA with left-aligned content.",
     whenToUse: "When the primary action should span the full viewport while following the page reading flow.",
   }),
   "feature-image-left-4-8": createBlockVariantDoc({
     title: "Image left 4:8",
     categoryLabel: "Feature",
-    markup: featureFeature48ImgLeftMarkup,
-    usedComponents: featureBlockComponents,
     description: "Feature section with image in 4 columns and content in 8 columns.",
     whenToUse: "When supporting imagery should introduce a wider content area.",
   }),
   "feature-image-right-4-8": createBlockVariantDoc({
     title: "Image right 4:8",
     categoryLabel: "Feature",
-    markup: featureFeature48ImgRightMarkup,
-    usedComponents: featureBlockComponents,
     description: "Feature section with content in 8 columns and image in 4 columns.",
     whenToUse: "When content should lead and supporting imagery should sit to the right.",
   }),
   "feature-component-left-6-6": createBlockVariantDoc({
     title: "Component left 6:6",
     categoryLabel: "Feature",
-    markup: featureFeature66ComponentLeftMarkup,
-    usedComponents: featureBlockComponents,
     description: "Balanced feature section with an SGDS component on the left.",
     whenToUse: "When a live component example should sit beside explanatory content.",
   }),
   "feature-component-right-6-6": createBlockVariantDoc({
     title: "Component right 6:6",
     categoryLabel: "Feature",
-    markup: featureFeature66ComponentRightMarkup,
-    usedComponents: featureBlockComponents,
     description: "Balanced feature section with an SGDS component on the right.",
     whenToUse: "When explanatory content should lead into a component example.",
   }),
   "feature-image-left-6-6": createBlockVariantDoc({
     title: "Image left 6:6",
     categoryLabel: "Feature",
-    markup: featureFeature66ImgLeftMarkup,
-    usedComponents: featureBlockComponents,
     description: "Balanced feature section with image on the left.",
     whenToUse: "When image and content need equal visual weight.",
   }),
   "feature-image-right-6-6": createBlockVariantDoc({
     title: "Image right 6:6",
     categoryLabel: "Feature",
-    markup: featureFeature66ImgRightMarkup,
-    usedComponents: featureBlockComponents,
     description: "Balanced feature section with image on the right.",
     whenToUse: "When content and image need equal visual weight with content first.",
   }),
   "feature-image-left-8-4": createBlockVariantDoc({
     title: "Image left 8:4",
     categoryLabel: "Feature",
-    markup: featureFeature84ImgLeftMarkup,
-    usedComponents: featureBlockComponents,
     description: "Feature section with dominant image on the left.",
     whenToUse: "When imagery should carry most of the visual weight.",
   }),
   "feature-image-right-8-4": createBlockVariantDoc({
     title: "Image right 8:4",
     categoryLabel: "Feature",
-    markup: featureFeature84ImgRightMarkup,
-    usedComponents: featureBlockComponents,
     description: "Feature section with dominant image on the right.",
     whenToUse: "When content should introduce a visually dominant image.",
   }),
   "feature-cards-below": createBlockVariantDoc({
     title: "Cards below",
     categoryLabel: "Feature",
-    markup: featureFeatureCardsBelowMarkup,
-    usedComponents: featureBlockComponents,
     description: "Feature section with supporting cards below the heading content.",
     whenToUse: "When a feature needs supporting points or benefits beneath the main message.",
   }),
   "feature-no-image-center": createBlockVariantDoc({
     title: "No image center",
     categoryLabel: "Feature",
-    markup: featureFeatureNoImgCenterMarkup,
-    usedComponents: featureBlockComponents,
     description: "Centered feature section without imagery.",
     whenToUse: "When the message should stand alone without a visual asset.",
   }),
   "feature-no-image-left": createBlockVariantDoc({
     title: "No image left",
     categoryLabel: "Feature",
-    markup: featureFeatureNoImgLeftMarkup,
-    usedComponents: featureBlockComponents,
     description: "Left-aligned feature section without imagery.",
     whenToUse: "When the message should stay aligned with the surrounding content flow.",
   }),
   "filter-checkboxes": createBlockVariantDoc({
     title: "Filter checkboxes",
     categoryLabel: "Filter",
-    markup: filterFilterMarkup,
-    usedComponents: filterBlockComponents,
     description: "Faceted filter panel with grouped checkbox controls.",
     whenToUse: "When users need to narrow search, catalogue, or list results with multiple facets.",
   }),
   "header-page-header-with-breadcrumb": createBlockVariantDoc({
     title: "Page header with breadcrumb",
     categoryLabel: "Header",
-    markup: headerPageHeaderBreadcrumbMarkup,
-    usedComponents: headerBlockComponents,
     description: "Page header with breadcrumb, title, description, and action.",
     whenToUse: "When a page needs hierarchical context above the title.",
   }),
   "header-page-header": createBlockVariantDoc({
     title: "Page header",
     categoryLabel: "Header",
-    markup: headerPageHeaderMarkup,
-    usedComponents: headerBlockComponents,
     description: "Page header with title, description, and action.",
     whenToUse: "When a page needs a clear title area and primary action.",
   }),
   "hero-background-image-light": createBlockVariantDoc({
     title: "Hero background image light",
     categoryLabel: "Hero",
-    markup: heroHeroBgImageLightMarkup,
-    usedComponents: heroBlockComponents,
     description: "Hero with background image and light overlay treatment.",
     whenToUse: "When a hero needs photographic context while keeping a light visual tone.",
   }),
   "hero-background-image": createBlockVariantDoc({
     title: "Hero background image",
     categoryLabel: "Hero",
-    markup: heroHeroBgImageMarkup,
-    usedComponents: heroBlockComponents,
     description: "Hero with background image and dark overlay treatment.",
     whenToUse: "When a hero needs a strong image-led first impression.",
   }),
   "hero-center": createBlockVariantDoc({
     title: "Hero center",
     categoryLabel: "Hero",
-    markup: heroHeroCenterMarkup,
-    usedComponents: heroBlockComponents,
     description: "Centered hero with title, supporting text, and action.",
     whenToUse: "When a landing section should feel formal and balanced.",
   }),
   "hero-fullbleed": createBlockVariantDoc({
     title: "Hero fullbleed",
     categoryLabel: "Hero",
-    markup: heroHeroFullbleedMarkup,
-    usedComponents: heroBlockComponents,
     description: "Hero with content and a full-bleed image treatment.",
     whenToUse: "When imagery should extend beyond the content container.",
   }),
   "hero-image": createBlockVariantDoc({
     title: "Hero image",
     categoryLabel: "Hero",
-    markup: heroHeroImageMarkup,
-    usedComponents: heroBlockComponents,
     description: "Hero with content beside a right-aligned image.",
     whenToUse: "When the hero needs a clear visual companion without full bleed.",
   }),
   "hero-basic": createBlockVariantDoc({
     title: "Basic hero",
     categoryLabel: "Hero",
-    markup: heroHeroMarkup,
-    usedComponents: heroBlockComponents,
     description: "Basic left-aligned hero with title, text, and action.",
     whenToUse: "When a page needs a simple introduction and primary action.",
   }),
   "stats-3-statistics": createBlockVariantDoc({
     title: "3 statistics",
     categoryLabel: "Stats",
-    markup: statsStats3Markup,
-    usedComponents: statsBlockComponents,
     description: "Three side-by-side statistics centred on the page.",
     whenToUse: "When three metrics are enough to support the page narrative.",
   }),
   "stats-4-statistics": createBlockVariantDoc({
     title: "4 statistics",
     categoryLabel: "Stats",
-    markup: statsStats4Markup,
-    usedComponents: statsBlockComponents,
     description: "Four side-by-side statistics for denser numeric summaries.",
     whenToUse: "When four metrics need equal emphasis.",
   }),
   "stats-5-statistics": createBlockVariantDoc({
     title: "5 statistics",
     categoryLabel: "Stats",
-    markup: statsStats5Markup,
-    usedComponents: statsBlockComponents,
     description: "Five-column statistics for wider viewports.",
     whenToUse: "When a larger metric set needs to stay in one row on desktop.",
   }),
   "stats-right-6-column": createBlockVariantDoc({
     title: "Statistic right 6 column",
     categoryLabel: "Stats",
-    markup: statsStatsRight6Markup,
-    usedComponents: statsBlockComponents,
     description: "Right-aligned six-column statistics grouping.",
     whenToUse: "When metrics should sit as a compact panel alongside content.",
   }),
   "stats-right-8-columns": createBlockVariantDoc({
     title: "Statistic right 8 columns",
     categoryLabel: "Stats",
-    markup: statsStatsRight8Markup,
-    usedComponents: statsBlockComponents,
     description: "Right-aligned eight-column statistics grouping.",
     whenToUse: "When a dense metric group needs more horizontal space.",
   }),
@@ -676,7 +499,6 @@ const patternDocs: Record<string, PatternDoc> = {
     group: "block templates",
     categoryLabel: "Hero",
     hideFromOverview: true,
-    usedComponents: ["sgds-button", "sgds-icon"],
     whenToUse: [
       "At the top of a landing page to communicate the primary value proposition",
       "When you need a strong visual anchor before the main page content",
@@ -686,12 +508,12 @@ const patternDocs: Record<string, PatternDoc> = {
       "Inside dashboards or data-heavy interfaces",
     ],
     demos: [
-      { title: "Default", description: "Left-aligned headline + description + CTA, surface-default background.", markup: heroHeroMarkup },
-      { title: "Center", description: "Same hero, content centered horizontally for a more formal feel.", markup: heroHeroCenterMarkup },
-      { title: "Image right", description: "50/50 split — content on the left, image on the right.", markup: heroHeroImageMarkup },
-      { title: "Full-bleed image right", description: "Content in 6 cols, image absolutely positioned full-bleed on the right.", markup: heroHeroFullbleedMarkup },
-      { title: "Background image", description: "Full-cover background image with dark overlay and inverted text.", markup: heroHeroBgImageMarkup },
-      { title: "Background image (light)", description: "Light translucent overlay over a background image, with fixed-dark text.", markup: heroHeroBgImageLightMarkup },
+      { title: "Default", description: "Left-aligned headline + description + CTA, surface-default background." },
+      { title: "Center", description: "Same hero, content centered horizontally for a more formal feel." },
+      { title: "Image right", description: "50/50 split — content on the left, image on the right." },
+      { title: "Full-bleed image right", description: "Content in 6 cols, image absolutely positioned full-bleed on the right." },
+      { title: "Background image", description: "Full-cover background image with dark overlay and inverted text." },
+      { title: "Background image (light)", description: "Light translucent overlay over a background image, with fixed-dark text." },
     ],
   },
   cards: {
@@ -699,7 +521,6 @@ const patternDocs: Record<string, PatternDoc> = {
     group: "block templates",
     categoryLabel: "Cards",
     hideFromOverview: true,
-    usedComponents: ["sgds-card", "sgds-badge", "sgds-link", "sgds-icon"],
     whenToUse: [
       "To display a collection of items of equal importance",
       "When users need to scan and compare multiple entries",
@@ -710,8 +531,8 @@ const patternDocs: Record<string, PatternDoc> = {
       "When there are fewer than three items to show",
     ],
     demos: [
-      { title: "3 columns", description: "3-column grid (3 per row) with overline + section title and clamped card titles.", markup: cardsCards3Markup },
-      { title: "4 columns", description: "4-column grid for denser browsing layouts on wider viewports.", markup: cardsCards4Markup },
+      { title: "3 columns", description: "3-column grid (3 per row) with overline + section title and clamped card titles."},
+      { title: "4 columns", description: "4-column grid for denser browsing layouts on wider viewports."},
     ],
   },
   cta: {
@@ -719,7 +540,6 @@ const patternDocs: Record<string, PatternDoc> = {
     group: "block templates",
     categoryLabel: "Call to action",
     hideFromOverview: true,
-    usedComponents: ["sgds-button"],
     whenToUse: [
       "To convert visitors at the end of a marketing page",
       "To anchor a primary action in the middle of long-form content",
@@ -730,14 +550,14 @@ const patternDocs: Record<string, PatternDoc> = {
       "When the user is mid-task and shouldn't be redirected",
     ],
     demos: [
-      { title: "Contained · primary", description: "Constrained-width CTA on a primary surface, left-aligned.", markup: ctaContainedPrimaryMarkup },
-      { title: "Contained · primary · center", description: "Same CTA, content centered.", markup: ctaContainedPrimaryCenterMarkup },
-      { title: "Contained · raised", description: "Constrained-width CTA on a raised surface for soft emphasis.", markup: ctaContainedRaisedMarkup },
-      { title: "Contained · raised · center", description: "Raised surface, content centered.", markup: ctaContainedRaisedCenterMarkup },
-      { title: "Full-bleed · primary", description: "Edge-to-edge primary-coloured CTA section for maximum impact.", markup: ctaFullbleedPrimaryMarkup },
-      { title: "Full-bleed · primary · center", description: "Edge-to-edge primary CTA, content centered.", markup: ctaFullbleedPrimaryCenterMarkup },
-      { title: "Full-bleed · alternate", description: "Edge-to-edge alternate-surface CTA, lower visual weight.", markup: ctaFullbleedAlternateMarkup },
-      { title: "Full-bleed · alternate · center", description: "Edge-to-edge alternate CTA, content centered.", markup: ctaFullbleedAlternateCenterMarkup },
+      { title: "Contained · primary", description: "Constrained-width CTA on a primary surface, left-aligned." },
+      { title: "Contained · primary · center", description: "Same CTA, content centered." },
+      { title: "Contained · raised", description: "Constrained-width CTA on a raised surface for soft emphasis." },
+      { title: "Contained · raised · center", description: "Raised surface, content centered." },
+      { title: "Full-bleed · primary", description: "Edge-to-edge primary-coloured CTA section for maximum impact." },
+      { title: "Full-bleed · primary · center", description: "Edge-to-edge primary CTA, content centered." },
+      { title: "Full-bleed · alternate", description: "Edge-to-edge alternate-surface CTA, lower visual weight." },
+      { title: "Full-bleed · alternate · center", description: "Edge-to-edge alternate CTA, content centered." },
     ],
   },
   feature: {
@@ -745,7 +565,6 @@ const patternDocs: Record<string, PatternDoc> = {
     group: "block templates",
     categoryLabel: "Feature",
     hideFromOverview: true,
-    usedComponents: ["sgds-button", "sgds-card", "sgds-icon"],
     whenToUse: [
       "To showcase a product capability or service benefit",
       "To pair an image or component with descriptive copy in a marketing page",
@@ -756,17 +575,17 @@ const patternDocs: Record<string, PatternDoc> = {
       "When you need consistent uniform tiles — use the cards block",
     ],
     demos: [
-      { title: "4 + 8 · image left", description: "Image in 4 cols, content in 8 cols, image first.", markup: featureFeature48ImgLeftMarkup },
-      { title: "4 + 8 · image right", description: "Image in 4 cols, content in 8 cols, image second.", markup: featureFeature48ImgRightMarkup },
-      { title: "6 + 6 · image left", description: "Balanced 50/50 split, image first.", markup: featureFeature66ImgLeftMarkup },
-      { title: "6 + 6 · image right", description: "Balanced 50/50 split, image second.", markup: featureFeature66ImgRightMarkup },
-      { title: "6 + 6 · component left", description: "50/50 split with an SGDS component (not an image) on the left.", markup: featureFeature66ComponentLeftMarkup },
-      { title: "6 + 6 · component right", description: "50/50 split with an SGDS component on the right.", markup: featureFeature66ComponentRightMarkup },
-      { title: "8 + 4 · image left", description: "Image in 8 cols (dominant), content in 4 cols, image first.", markup: featureFeature84ImgLeftMarkup },
-      { title: "8 + 4 · image right", description: "Image in 8 cols (dominant), content in 4 cols, image second.", markup: featureFeature84ImgRightMarkup },
-      { title: "Cards below", description: "Section header with feature cards arranged in a row below.", markup: featureFeatureCardsBelowMarkup },
-      { title: "No image · center", description: "Headline + description + actions, no image, centered.", markup: featureFeatureNoImgCenterMarkup },
-      { title: "No image · left", description: "Headline + description + actions, no image, left-aligned.", markup: featureFeatureNoImgLeftMarkup },
+      { title: "4 + 8 · image left", description: "Image in 4 cols, content in 8 cols, image first."},
+      { title: "4 + 8 · image right", description: "Image in 4 cols, content in 8 cols, image second."},
+      { title: "6 + 6 · image left", description: "Balanced 50/50 split, image first."},
+      { title: "6 + 6 · image right", description: "Balanced 50/50 split, image second."},
+      { title: "6 + 6 · component left", description: "50/50 split with an SGDS component (not an image) on the left."},
+      { title: "6 + 6 · component right", description: "50/50 split with an SGDS component on the right."},
+      { title: "8 + 4 · image left", description: "Image in 8 cols (dominant), content in 4 cols, image first."},
+      { title: "8 + 4 · image right", description: "Image in 8 cols (dominant), content in 4 cols, image second."},
+      { title: "Cards below", description: "Section header with feature cards arranged in a row below." },
+      { title: "No image · center", description: "Headline + description + actions, no image, centered." },
+      { title: "No image · left", description: "Headline + description + actions, no image, left-aligned." },
     ],
   },
   filter: {
@@ -774,7 +593,6 @@ const patternDocs: Record<string, PatternDoc> = {
     group: "block templates",
     categoryLabel: "Filter",
     hideFromOverview: true,
-    usedComponents: ["sgds-checkbox", "sgds-checkbox-group", "sgds-link"],
     whenToUse: [
       "On catalogue, search, or admin list pages where users narrow down results",
       "When you have multiple facet groups (status, type, date) that combine independently",
@@ -785,13 +603,12 @@ const patternDocs: Record<string, PatternDoc> = {
       "When filters need to be applied across multi-step flows — use a wizard instead",
     ],
     demos: [
-      { title: "Sidebar filter", description: "Faceted filter panel with header, clear-all link, and grouped checkbox controls.", markup: filterFilterMarkup },
+      { title: "Sidebar filter", description: "Faceted filter panel with header, clear-all link, and grouped checkbox controls." },
     ],
   },
   form: {
     title: "Form",
     group: "block templates",
-    usedComponents: formBlockComponents,
     hideFromOverview: true,
     whenToUse: [
       "Whenever a page needs to collect structured input from users",
@@ -803,22 +620,22 @@ const patternDocs: Record<string, PatternDoc> = {
       "For decisions that should be a confirmation dialog — use a modal",
     ],
     demos: [
-      { title: "All field types", description: "Demonstration form showing every supported field type in one layout.", markup: formAllTypesMarkup },
-      { title: "Basic · left", description: "Single-section form, content left-aligned within the page container.", markup: formBasicLeftMarkup },
-      { title: "Basic · center", description: "Single-section form centered on the page.", markup: formBasicCenterMarkup },
-      { title: "Basic · right", description: "Single-section form right-aligned.", markup: formBasicRightMarkup },
-      { title: "Sections · single", description: "One labelled section grouping related fields.", markup: formSectionsSingleMarkup },
-      { title: "Sections · two", description: "Two labelled sections separated by spacing.", markup: formSectionsTwoMarkup },
-      { title: "Sections · three", description: "Three labelled sections — use for longer forms.", markup: formSectionsThreeMarkup },
-      { title: "Multi-step · stepper", description: "Stepper-driven form for transactional flows.", markup: formFormMultistepStepperMarkup },
-      { title: "Field types · checkbox", description: "Checkbox + checkbox-group examples, including grouped options.", markup: formFormFieldsCheckboxMarkup },
-      { title: "Field types · radio", description: "Radio + radio-group examples.", markup: formFormFieldsRadioMarkup },
-      { title: "Field types · select", description: "Select examples for single-value list inputs.", markup: formFormFieldsSelectsMarkup },
-      { title: "Field types · textarea", description: "Textarea examples with hint and validation.", markup: formFormFieldsTextareaMarkup },
-      { title: "Field types · dates & quantities", description: "Datepicker and quantity-toggle field examples.", markup: formFormFieldsDatesQuantitiesMarkup },
-      { title: "Field types · file upload", description: "File upload field examples with drop zone and validation.", markup: formFormFieldsFileUploadMarkup },
-      { title: "Full-width fields", description: "Layout where every field spans the form's full width.", markup: formFullwidthOnlyMarkup },
-      { title: "Paired fields", description: "Layout pairing fields side-by-side on wider viewports.", markup: formPairedOnlyMarkup },
+      { title: "All field types", description: "Demonstration form showing every supported field type in one layout." },
+      { title: "Basic · left", description: "Single-section form, content left-aligned within the page container." },
+      { title: "Basic · center", description: "Single-section form centered on the page." },
+      { title: "Basic · right", description: "Single-section form right-aligned." },
+      { title: "Sections · single", description: "One labelled section grouping related fields." },
+      { title: "Sections · two", description: "Two labelled sections separated by spacing." },
+      { title: "Sections · three", description: "Three labelled sections — use for longer forms." },
+      { title: "Multi-step · stepper", description: "Stepper-driven form for transactional flows." },
+      { title: "Field types · checkbox", description: "Checkbox + checkbox-group examples, including grouped options." },
+      { title: "Field types · radio", description: "Radio + radio-group examples." },
+      { title: "Field types · select", description: "Select examples for single-value list inputs." },
+      { title: "Field types · textarea", description: "Textarea examples with hint and validation." },
+      { title: "Field types · dates & quantities", description: "Datepicker and quantity-toggle field examples." },
+      { title: "Field types · file upload", description: "File upload field examples with drop zone and validation." },
+      { title: "Full-width fields", description: "Layout where every field spans the form's full width." },
+      { title: "Paired fields", description: "Layout pairing fields side-by-side on wider viewports." },
     ],
   },
   ...formBlockVariantDocs,
@@ -828,7 +645,6 @@ const patternDocs: Record<string, PatternDoc> = {
     group: "block templates",
     categoryLabel: "Header",
     hideFromOverview: true,
-    usedComponents: ["sgds-breadcrumb", "sgds-button", "sgds-icon"],
     whenToUse: [
       "At the top of internal-tool pages and content pages alike",
       "To anchor a page with title, description, and primary actions",
@@ -839,8 +655,8 @@ const patternDocs: Record<string, PatternDoc> = {
       "Inside modal dialogs — use the modal's own title slot",
     ],
     demos: [
-      { title: "Default", description: "Page header with title, description, and right-aligned action.", markup: headerPageHeaderMarkup },
-      { title: "With breadcrumb", description: "Page header with a breadcrumb above the title for hierarchical context.", markup: headerPageHeaderBreadcrumbMarkup },
+      { title: "Default", description: "Page header with title, description, and right-aligned action." },
+      { title: "With breadcrumb", description: "Page header with a breadcrumb above the title for hierarchical context." },
     ],
   },
   stats: {
@@ -848,7 +664,6 @@ const patternDocs: Record<string, PatternDoc> = {
     group: "block templates",
     categoryLabel: "Stats",
     hideFromOverview: true,
-    usedComponents: ["sgds-icon"],
     whenToUse: [
       "On about pages and reports to highlight quantitative outcomes",
       "On dashboards as a quick at-a-glance KPI summary",
@@ -859,18 +674,17 @@ const patternDocs: Record<string, PatternDoc> = {
       "When the trend matters more than the snapshot — use a chart",
     ],
     demos: [
-      { title: "3 columns", description: "Three side-by-side stats centred on the page.", markup: statsStats3Markup },
-      { title: "4 columns", description: "Four side-by-side stats for denser numeric summaries.", markup: statsStats4Markup },
-      { title: "5 columns", description: "Five-column stats — use sparingly on wider viewports.", markup: statsStats5Markup },
-      { title: "6 columns · right-aligned", description: "Six-column right-aligned stats grouping for a compact panel.", markup: statsStatsRight6Markup },
-      { title: "8 columns · right-aligned", description: "Eight-column right-aligned stats for the densest summaries.", markup: statsStatsRight8Markup },
+      { title: "3 columns", description: "Three side-by-side stats centred on the page."},
+      { title: "4 columns", description: "Four side-by-side stats for denser numeric summaries."},
+      { title: "5 columns", description: "Five-column stats — use sparingly on wider viewports."},
+      { title: "6 columns · right-aligned", description: "Six-column right-aligned stats grouping for a compact panel."},
+      { title: "8 columns · right-aligned", description: "Eight-column right-aligned stats for the densest summaries."},
     ],
   },
   "form-page": {
     title: "Form page",
     group: "page templates",
     categoryLabel: "Forms",
-    usedComponents: ["sgds-input", "sgds-select", "sgds-button", "sgds-breadcrumb"],
     whenToUse: [
       "For single-topic forms where all fields can be shown on one screen",
       "When the form is short enough not to need a stepper (under 8 fields)",
@@ -883,7 +697,6 @@ const patternDocs: Record<string, PatternDoc> = {
       {
         title: "Default",
         description: "A simple form page with a heading, description, fields, and submission actions.",
-        markup: formPageMarkup,
       },
     ],
   },
@@ -891,7 +704,6 @@ const patternDocs: Record<string, PatternDoc> = {
     title: "Multi-step form",
     group: "page templates",
     categoryLabel: "Forms",
-    usedComponents: ["sgds-stepper", "sgds-input", "sgds-button", "sgds-breadcrumb"],
     whenToUse: [
       "When a form has more than 8 fields and benefits from being broken into logical steps",
       "When different sections of the form require different levels of user attention",
@@ -904,7 +716,6 @@ const patternDocs: Record<string, PatternDoc> = {
       {
         title: "Default",
         description: "A multi-step form with a stepper indicator, step content, and navigation buttons.",
-        markup: multiStepFormPageMarkup,
       },
     ],
   },
@@ -912,17 +723,6 @@ const patternDocs: Record<string, PatternDoc> = {
     title: "Application management",
     group: "page templates",
     categoryLabel: "Browse and manage",
-    usedComponents: [
-      "sgds-masthead",
-      "sgds-mainnav",
-      "sgds-breadcrumb",
-      "sgds-checkbox-group",
-      "sgds-input",
-      "sgds-table",
-      "sgds-pagination",
-      "sgds-button",
-      "sgds-footer",
-    ],
     whenToUse: [
       "For admin dashboards and management portals that list registered applications or records",
       "When users need sidebar filters together with a searchable, paginated data table",
@@ -936,7 +736,6 @@ const patternDocs: Record<string, PatternDoc> = {
       {
         title: "Application list",
         description: "Sidebar filters, search bar, results count, and a paginated table of records.",
-        markup: applicationManagementMarkup,
       },
     ],
   },
@@ -944,16 +743,6 @@ const patternDocs: Record<string, PatternDoc> = {
     title: "Catalogue",
     group: "page templates",
     categoryLabel: "Browse and manage",
-    usedComponents: [
-      "sgds-masthead",
-      "sgds-mainnav",
-      "sgds-input",
-      "sgds-checkbox-group",
-      "sgds-select",
-      "sgds-card",
-      "sgds-pagination",
-      "sgds-footer",
-    ],
     whenToUse: [
       "For public catalogues of programmes, events, services, or content",
       "When users need search, sidebar filters, sort, and a card-based results grid",
@@ -967,7 +756,6 @@ const patternDocs: Record<string, PatternDoc> = {
       {
         title: "Search and filter",
         description: "Page header with search, sidebar filters, sort dropdown, and a responsive grid of result cards.",
-        markup: catalogueMarkup,
       },
     ],
   },
@@ -975,13 +763,6 @@ const patternDocs: Record<string, PatternDoc> = {
     title: "About us",
     group: "page templates",
     categoryLabel: "Content pages",
-    usedComponents: [
-      "sgds-masthead",
-      "sgds-mainnav",
-      "sgds-thumbnail-card",
-      "sgds-link",
-      "sgds-footer",
-    ],
     whenToUse: [
       "For agency or product about pages that introduce the team, mission, and impact",
       "When the page combines a headline, supporting imagery, partner logos, and stats",
@@ -995,7 +776,6 @@ const patternDocs: Record<string, PatternDoc> = {
       {
         title: "Default",
         description: "Two-column headline, image grid, animated logo strip, and an achievements stats panel.",
-        markup: aboutUsMarkup,
       },
     ],
   },
@@ -1003,14 +783,6 @@ const patternDocs: Record<string, PatternDoc> = {
     title: "Landing page",
     group: "page templates",
     categoryLabel: "Landing pages",
-    usedComponents: [
-      "sgds-masthead",
-      "sgds-mainnav",
-      "sgds-button",
-      "sgds-card",
-      "sgds-link",
-      "sgds-footer",
-    ],
     whenToUse: [
       "For product or service launch pages with a clear primary call to action",
       "When you need a hero section followed by features, stats, and a closing CTA",
@@ -1024,7 +796,6 @@ const patternDocs: Record<string, PatternDoc> = {
       {
         title: "Default",
         description: "Hero with headline and CTAs, life-moments feature cards, stats row, and a closing call to action.",
-        markup: landingMarkup,
       },
     ],
   },
@@ -1032,13 +803,6 @@ const patternDocs: Record<string, PatternDoc> = {
     title: "Blog",
     group: "page templates",
     categoryLabel: "Content pages",
-    usedComponents: [
-      "sgds-masthead",
-      "sgds-mainnav",
-      "sgds-breadcrumb",
-      "sgds-button",
-      "sgds-footer",
-    ],
     whenToUse: [
       "For long-form content like blog posts, news articles, success stories, or case studies",
       "When the page needs a clear hierarchy of headline, body sections, and supporting stats",
@@ -1052,7 +816,6 @@ const patternDocs: Record<string, PatternDoc> = {
       {
         title: "Success story",
         description: "Breadcrumb, article header, body sections with sub-headings, results stats, and a closing CTA.",
-        markup: blogMarkup,
       },
     ],
   },
@@ -1101,7 +864,6 @@ export const templateOverviewGroups: TemplateOverviewGroup[] = ([
       group: doc.group,
       groupLabel: doc.categoryLabel ?? templateGroupLabel[doc.group],
       demoCount: doc.demos.length,
-      usedComponents: doc.usedComponents,
     })),
 }));
 
@@ -1126,12 +888,7 @@ const buildPatternPurposeCards = (doc: PatternDoc) => [
   },
 ];
 
-const buildPatternAnatomyParts = (doc: PatternDoc) =>
-  (doc.usedComponents.length ? doc.usedComponents : ["sgds-container"]).map((component, index) => ({
-    number: index + 1,
-    title: component,
-    note: "(used)",
-  }));
+const buildPatternAnatomyParts = (_doc: PatternDoc) => [] as { number: number; title: string; note: string }[];
 
 const buildPatternGuidance = (doc: PatternDoc) => {
   const guidance = [
@@ -1158,12 +915,9 @@ const buildPatternBestPractices = (doc: PatternDoc) =>
     title: practice.title,
     tone: practice.tone,
     description: practice.items.join(" "),
-    markup: doc.demos[0]?.markup || `<div></div>`,
   }));
 
 const buildPatternAccessibilitySections = (doc: PatternDoc) => {
-  const previewMarkup = doc.demos[0]?.markup || `<div></div>`;
-
   return [
     {
       title: "Keyboard support",
@@ -1172,7 +926,6 @@ const buildPatternAccessibilitySections = (doc: PatternDoc) => {
         "Check focus order and action placement in the surrounding page context, especially when the pattern groups multiple interactive elements together.",
       ],
       items: [],
-      markup: previewMarkup,
     },
     {
       title: "Tab order",
@@ -1183,7 +936,6 @@ const buildPatternAccessibilitySections = (doc: PatternDoc) => {
         "Confirm any revealed or supporting content remains reachable.",
         "Continue to the next interactive element on the page.",
       ],
-      markup: previewMarkup,
     },
   ];
 };
@@ -1240,14 +992,15 @@ export function getPatternDoc(key: string): ResolvedComponentDoc | null {
       `${doc.title} is an SGDS pattern for building structured interfaces.`,
     tag: "div",
     group: "layout",
-    demos: doc.demos,
+    demos: doc.demos.map((d) => ({ ...d, markup: "" })),
     purposeCards: buildPatternPurposeCards(doc),
-    anatomyMarkup: doc.demos[0]?.markup,
+    anatomyMarkup: undefined,
     resolvedAnatomyParts: buildPatternAnatomyParts(doc),
     usage: {
       guidance: buildPatternGuidance(doc),
       behaviours: doc.demos.map((demo) => ({
         ...demo,
+        markup: "",
         surface: "default",
       })),
       bestPractices: buildPatternBestPractices(doc),
diff --git a/docs/.vitepress/data/template-markup.ts b/docs/.vitepress/data/template-markup.ts
deleted file mode 100644
index d1d767ce..00000000
--- a/docs/.vitepress/data/template-markup.ts
+++ /dev/null
@@ -1,1484 +0,0 @@
-// Storybook page-template markup, extracted from
-// https://github.com/GovTechSG/sgds-web-component/tree/master/stories/templates
-//
-// Each export corresponds to one .stories.js file. Lit-specific syntax has
-// been stripped where needed. Template scripts are preserved when they drive
-// Storybook interactivity, and TemplateRaw executes them inside the preview.
-
-export const applicationManagementMarkup = `<div class="sgds:bg-surface-subtle">
-  <div>
-    <sgds-masthead></sgds-masthead>
-    <sgds-mainnav fluid>
-      <strong slot="brand">Logo</strong>
-      <sgds-mainnav-item href="#">Home</sgds-mainnav-item>
-      <sgds-mainnav-item href="#" active>Applications</sgds-mainnav-item>
-      <sgds-mainnav-item href="#">Reports</sgds-mainnav-item>
-    </sgds-mainnav>
-  </div>
-
-  <div class="sgds:flex sgds:flex-col sgds:w-full">
-    <div class="sgds-container sgds:py-2-xl sgds:flex sgds:flex-col sgds:gap-2-xl">
-      <div class="sgds:flex sgds:flex-col sgds:gap-layout-sm">
-        <sgds-breadcrumb>
-          <sgds-breadcrumb-item><a href="#">Home</a></sgds-breadcrumb-item>
-          <sgds-breadcrumb-item><a href="#">Applications</a></sgds-breadcrumb-item>
-        </sgds-breadcrumb>
-
-        <div class="sgds:flex sgds:items-start sgds:justify-between">
-          <div class="sgds:flex sgds:flex-col sgds:gap-component-sm sgds:flex-1">
-            <div class="sgds:flex sgds:items-center sgds:gap-text-sm">
-              <div class="sgds:inline-flex sgds:items-center sgds:justify-center sgds:w-10 sgds:h-10 sgds:shrink-0 sgds:p-2 sgds:rounded-md sgds:bg-accent-surface-muted">
-                <sgds-icon name="grid-fill" size="24"></sgds-icon>
-              </div>
-              <h1 class="sgds:text-heading-lg sgds:font-bold sgds:leading-lg sgds:tracking-tight sgds:text-heading-default sgds:mb-0">Applications</h1>
-            </div>
-            <div class="sgds:text-label-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:text-label-default">
-              Browse and manage all registered applications in your organisation.
-            </div>
-          </div>
-
-          <sgds-button variant="primary">
-            <sgds-icon name="plus" slot="leftIcon"></sgds-icon>
-            Create application
-          </sgds-button>
-        </div>
-      </div>
-
-      <div class="sgds:flex sgds:gap-layout-md sgds:items-start">
-        <aside class="sgds:shrink-0 sgds:w-64 sgds:flex sgds:flex-col sgds:gap-2-xl">
-          <div class="sgds:flex sgds:gap-4 sgds:items-center">
-            <span class="sgds:text-subtitle-md sgds:font-semibold sgds:text-heading-default">Filter by</span>
-            <sgds-link><a href="#">Clear all</a></sgds-link>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:gap-text-xs">
-            <div class="sgds:text-label-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-label-default">Status</div>
-            <sgds-checkbox-group>
-              <sgds-checkbox value="active">Active (8)</sgds-checkbox>
-              <sgds-checkbox value="pending">Pending (3)</sgds-checkbox>
-              <sgds-checkbox value="rejected">Rejected (2)</sgds-checkbox>
-              <sgds-checkbox value="suspended">Suspended (1)</sgds-checkbox>
-            </sgds-checkbox-group>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:gap-text-xs">
-            <div class="sgds:text-label-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-label-default">Environment</div>
-            <sgds-checkbox-group>
-              <sgds-checkbox value="production">Production (6)</sgds-checkbox>
-              <sgds-checkbox value="staging">Staging (5)</sgds-checkbox>
-              <sgds-checkbox value="development">Development (3)</sgds-checkbox>
-            </sgds-checkbox-group>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:gap-text-xs">
-            <div class="sgds:text-label-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-label-default">API type</div>
-            <sgds-checkbox-group>
-              <sgds-checkbox value="rest">REST (10)</sgds-checkbox>
-              <sgds-checkbox value="graphql">GraphQL (2)</sgds-checkbox>
-              <sgds-checkbox value="soap">SOAP (2)</sgds-checkbox>
-            </sgds-checkbox-group>
-          </div>
-        </aside>
-
-        <div class="sgds:flex-1 sgds:bg-surface-default sgds:border sgds:border-muted sgds:rounded-lg sgds:p-layout-xs sgds:flex sgds:flex-col sgds:gap-5">
-          <div class="sgds:flex sgds:items-center sgds:gap-text-md">
-            <div class="sgds:inline-flex sgds:items-center sgds:justify-center sgds:w-10 sgds:h-10 sgds:shrink-0 sgds:p-2 sgds:rounded-md sgds:bg-accent-surface-muted">
-              <sgds-icon name="grid-fill" size="24"></sgds-icon>
-            </div>
-            <h5 class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0">All applications</h5>
-          </div>
-
-          <div class="sgds:flex sgds:items-center sgds:gap-layout-sm">
-            <div class="sgds:flex-1">
-              <sgds-input type="search" placeholder="Search applications" name="search"></sgds-input>
-            </div>
-            <sgds-button variant="outline" tone="neutral">
-              <sgds-icon name="sliders" slot="leftIcon"></sgds-icon>
-              Filter
-            </sgds-button>
-          </div>
-
-          <div class="sgds:text-label-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-label-default">Showing 6/14 result(s)</div>
-
-          <sgds-table>
-            <sgds-table-row>
-              <sgds-table-head>Application name</sgds-table-head>
-              <sgds-table-head>Organisation</sgds-table-head>
-              <sgds-table-head>Environment</sgds-table-head>
-              <sgds-table-head>Status</sgds-table-head>
-              <sgds-table-head>Actions</sgds-table-head>
-            </sgds-table-row>
-            <sgds-table-row>
-              <sgds-table-cell><sgds-link><a href="#">APEX Gateway v2.1.0</a></sgds-link></sgds-table-cell>
-              <sgds-table-cell>[GVT] APEX</sgds-table-cell>
-              <sgds-table-cell>Production</sgds-table-cell>
-              <sgds-table-cell><sgds-badge variant="success">Active</sgds-badge></sgds-table-cell>
-              <sgds-table-cell><sgds-button variant="ghost" size="sm">View</sgds-button></sgds-table-cell>
-            </sgds-table-row>
-            <sgds-table-row>
-              <sgds-table-cell><sgds-link><a href="#">MyInfo Bridge v1.4.0</a></sgds-link></sgds-table-cell>
-              <sgds-table-cell>[GVT] NDI</sgds-table-cell>
-              <sgds-table-cell>Staging</sgds-table-cell>
-              <sgds-table-cell><sgds-badge variant="warning">Pending</sgds-badge></sgds-table-cell>
-              <sgds-table-cell><sgds-button variant="ghost" size="sm">View</sgds-button></sgds-table-cell>
-            </sgds-table-row>
-            <sgds-table-row>
-              <sgds-table-cell><sgds-link><a href="#">FormSG Webhook v3.0.0</a></sgds-link></sgds-table-cell>
-              <sgds-table-cell>[GVT] OGP</sgds-table-cell>
-              <sgds-table-cell>Production</sgds-table-cell>
-              <sgds-table-cell><sgds-badge variant="success">Active</sgds-badge></sgds-table-cell>
-              <sgds-table-cell><sgds-button variant="ghost" size="sm">View</sgds-button></sgds-table-cell>
-            </sgds-table-row>
-            <sgds-table-row>
-              <sgds-table-cell><sgds-link><a href="#">SingPass Auth v1.2.0</a></sgds-link></sgds-table-cell>
-              <sgds-table-cell>[GVT] GDS</sgds-table-cell>
-              <sgds-table-cell>Production</sgds-table-cell>
-              <sgds-table-cell><sgds-badge variant="danger">Rejected</sgds-badge></sgds-table-cell>
-              <sgds-table-cell><sgds-button variant="ghost" size="sm">View</sgds-button></sgds-table-cell>
-            </sgds-table-row>
-            <sgds-table-row>
-              <sgds-table-cell><sgds-link><a href="#">Data.gov Sync v2.0.0</a></sgds-link></sgds-table-cell>
-              <sgds-table-cell>[GVT] SNDGO</sgds-table-cell>
-              <sgds-table-cell>Development</sgds-table-cell>
-              <sgds-table-cell><sgds-badge variant="neutral">Suspended</sgds-badge></sgds-table-cell>
-              <sgds-table-cell><sgds-button variant="ghost" size="sm">View</sgds-button></sgds-table-cell>
-            </sgds-table-row>
-            <sgds-table-row>
-              <sgds-table-cell><sgds-link><a href="#">CorpPass Verify v1.0.0</a></sgds-link></sgds-table-cell>
-              <sgds-table-cell>[GVT] ACRA</sgds-table-cell>
-              <sgds-table-cell>Staging</sgds-table-cell>
-              <sgds-table-cell><sgds-badge variant="success">Active</sgds-badge></sgds-table-cell>
-              <sgds-table-cell><sgds-button variant="ghost" size="sm">View</sgds-button></sgds-table-cell>
-            </sgds-table-row>
-          </sgds-table>
-
-          <sgds-pagination total-items="14" items-per-page="6" page="1" class="sgds:me-auto"></sgds-pagination>
-        </div>
-      </div>
-    </div>
-    <sgds-footer></sgds-footer>
-  </div>
-</div>`;
-
-export const catalogueMarkup = `<style>
-  .catalogue-empty-state { display: none; }
-  .catalogue-empty-state.active { display: flex; }
-  .catalogue-title-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-</style>
-
-<sgds-masthead></sgds-masthead>
-<sgds-mainnav>
-  <strong slot="brand">Logo</strong>
-</sgds-mainnav>
-
-<section class="sgds:bg-default sgds:py-layout-lg">
-  <div class="sgds-container">
-    <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left" style="max-width: var(--sgds-text-max-width);">
-      <div class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">Programmes</div>
-      <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">Browse Programmes</h1>
-      <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle sgds:mb-layout-sm">
-        Explore available government programmes and services.
-      </p>
-      <sgds-input type="search" label="Search" placeholder="Search by name or keyword..." clearable style="width: 100%; max-width: 640px;">
-        <sgds-icon slot="prefix" name="search"></sgds-icon>
-      </sgds-input>
-    </div>
-  </div>
-</section>
-
-<section class="sgds:bg-default sgds:py-layout-md">
-  <div class="sgds-container">
-    <div class="sgds-grid sgds:items-start">
-      <aside class="sgds-col-12 sgds-col-lg-3 sgds:mr-layout-md">
-        <div class="sgds:flex sgds:flex-col sgds:gap-2-xl sgds:pt-sm">
-          <div class="sgds:flex sgds:items-center sgds:justify-between">
-            <span class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default">Filters</span>
-            <sgds-link><a href="#">Clear all</a></sgds-link>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:gap-xs">
-            <div class="sgds:text-subtitle-sm sgds:font-semibold sgds:leading-2-xs sgds:tracking-normal sgds:text-heading-default">Programme type</div>
-            <sgds-checkbox-group>
-              <sgds-checkbox value="opening-address">Opening Address (1)</sgds-checkbox>
-              <sgds-checkbox value="keynote">Keynote (4)</sgds-checkbox>
-              <sgds-checkbox value="panel-discussion">Panel Discussion (6)</sgds-checkbox>
-              <sgds-checkbox value="presentation">Presentation (12)</sgds-checkbox>
-            </sgds-checkbox-group>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:gap-xs">
-            <div class="sgds:text-subtitle-sm sgds:font-semibold sgds:leading-2-xs sgds:tracking-normal sgds:text-heading-default">Sessions</div>
-            <sgds-checkbox-group>
-              <sgds-checkbox value="morning" checked>Morning (12)</sgds-checkbox>
-              <sgds-checkbox value="afternoon">Afternoon (16)</sgds-checkbox>
-            </sgds-checkbox-group>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:gap-xs">
-            <div class="sgds:text-subtitle-sm sgds:font-semibold sgds:leading-2-xs sgds:tracking-normal sgds:text-heading-default">Track</div>
-            <sgds-checkbox-group>
-              <sgds-checkbox value="ai-cybersecurity" checked>AI x Cybersecurity (4)</sgds-checkbox>
-              <sgds-checkbox value="resilient-cloud">Resilient and Secure Cloud (6)</sgds-checkbox>
-              <sgds-checkbox value="cisos-future">CISOs of the Future (8)</sgds-checkbox>
-            </sgds-checkbox-group>
-          </div>
-
-          <div class="sgds:flex sgds:flex-col sgds:gap-xs">
-            <div class="sgds:text-subtitle-sm sgds:font-semibold sgds:leading-2-xs sgds:tracking-normal sgds:text-heading-default">Event hall</div>
-            <sgds-checkbox-group>
-              <sgds-checkbox value="hall-a">Hall A</sgds-checkbox>
-              <sgds-checkbox value="hall-b">Hall B</sgds-checkbox>
-              <sgds-checkbox value="hall-c">Hall C</sgds-checkbox>
-            </sgds-checkbox-group>
-          </div>
-        </div>
-      </aside>
-
-      <div class="sgds-col-12 sgds-col-lg-9">
-        <div class="sgds:flex sgds:items-center sgds:justify-between sgds:mb-xl">
-          <h5 class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0">Showing 12 results</h5>
-          <sgds-select label="" placeholder="Sort by" style="min-width: 200px;">
-            <sgds-select-option value="relevance">Most relevant</sgds-select-option>
-            <sgds-select-option value="date-asc">Date: Earliest first</sgds-select-option>
-            <sgds-select-option value="date-desc">Date: Latest first</sgds-select-option>
-            <sgds-select-option value="name-asc">Name: A–Z</sgds-select-option>
-            <sgds-select-option value="name-desc">Name: Z–A</sgds-select-option>
-          </sgds-select>
-        </div>
-
-        <div class="sgds-grid sgds:items-stretch">
-          <div class="sgds-col-12 sgds-col-md-6 sgds-col-lg-4 sgds:flex sgds:flex-col">
-            <sgds-card stretchedLink style="height: 100%;">
-              <sgds-badge slot="upper" outlined>Keynote</sgds-badge>
-              <span slot="title" class="catalogue-title-clamp">Digital Infrastructure for the Next Decade</span>
-              <span slot="description">An overview of Singapore's plans for resilient and future-ready digital infrastructure.</span>
-              <sgds-link slot="footer"><a href="#" aria-label="View details about Digital Infrastructure for the Next Decade">View details <sgds-icon name="arrow-right"></sgds-icon></a></sgds-link>
-            </sgds-card>
-          </div>
-          <div class="sgds-col-12 sgds-col-md-6 sgds-col-lg-4 sgds:flex sgds:flex-col">
-            <sgds-card stretchedLink style="height: 100%;">
-              <sgds-badge slot="upper" outlined>Panel Discussion</sgds-badge>
-              <span slot="title" class="catalogue-title-clamp">AI Governance in the Public Sector</span>
-              <span slot="description">Panellists explore responsible AI adoption frameworks and inter-agency collaboration.</span>
-              <sgds-link slot="footer"><a href="#" aria-label="View details about AI Governance in the Public Sector">View details <sgds-icon name="arrow-right"></sgds-icon></a></sgds-link>
-            </sgds-card>
-          </div>
-          <div class="sgds-col-12 sgds-col-md-6 sgds-col-lg-4 sgds:flex sgds:flex-col">
-            <sgds-card stretchedLink style="height: 100%;">
-              <sgds-badge slot="upper" outlined>Presentation</sgds-badge>
-              <span slot="title" class="catalogue-title-clamp">Zero-Trust Architecture for Government Systems</span>
-              <span slot="description">A deep dive into implementing zero-trust principles across legacy and modern systems.</span>
-              <sgds-link slot="footer"><a href="#" aria-label="View details about Zero-Trust Architecture for Government Systems">View details <sgds-icon name="arrow-right"></sgds-icon></a></sgds-link>
-            </sgds-card>
-          </div>
-          <div class="sgds-col-12 sgds-col-md-6 sgds-col-lg-4 sgds:flex sgds:flex-col">
-            <sgds-card stretchedLink style="height: 100%;">
-              <sgds-badge slot="upper" outlined>Keynote</sgds-badge>
-              <span slot="title" class="catalogue-title-clamp">Securing the Cloud: Lessons from the Field</span>
-              <span slot="description">Key takeaways from real-world cloud migration projects across the Singapore government.</span>
-              <sgds-link slot="footer"><a href="#" aria-label="View details about Securing the Cloud: Lessons from the Field">View details <sgds-icon name="arrow-right"></sgds-icon></a></sgds-link>
-            </sgds-card>
-          </div>
-          <div class="sgds-col-12 sgds-col-md-6 sgds-col-lg-4 sgds:flex sgds:flex-col">
-            <sgds-card stretchedLink style="height: 100%;">
-              <sgds-badge slot="upper" outlined>Presentation</sgds-badge>
-              <span slot="title" class="catalogue-title-clamp">Incident Response Playbooks for CISOs</span>
-              <span slot="description">Practical frameworks for building effective incident response and recovery strategies.</span>
-              <sgds-link slot="footer"><a href="#" aria-label="View details about Incident Response Playbooks for CISOs">View details <sgds-icon name="arrow-right"></sgds-icon></a></sgds-link>
-            </sgds-card>
-          </div>
-          <div class="sgds-col-12 sgds-col-md-6 sgds-col-lg-4 sgds:flex sgds:flex-col">
-            <sgds-card stretchedLink style="height: 100%;">
-              <sgds-badge slot="upper" outlined>Panel Discussion</sgds-badge>
-              <span slot="title" class="catalogue-title-clamp">Workforce Upskilling for Cyber Resilience</span>
-              <span slot="description">How agencies are building cyber talent pipelines and fostering a security-aware culture.</span>
-              <sgds-link slot="footer"><a href="#" aria-label="View details about Workforce Upskilling for Cyber Resilience">View details <sgds-icon name="arrow-right"></sgds-icon></a></sgds-link>
-            </sgds-card>
-          </div>
-        </div>
-
-        <div class="sgds:mt-layout-sm sgds:flex sgds:justify-end">
-          <sgds-pagination length="5" currentPage="1" limit="6" size="sm"></sgds-pagination>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>`;
-
-export const aboutUsMarkup = `<style>
-  @keyframes sgds-marquee {
-    from { transform: translateX(0); }
-    to { transform: translateX(-50%); }
-  }
-  .sgds-about-logo-track { animation: sgds-marquee 30s linear infinite; }
-  @media (prefers-reduced-motion: reduce) { .sgds-about-logo-track { animation: none; } }
-</style>
-
-<sgds-masthead></sgds-masthead>
-
-<sgds-mainnav>
-  <strong slot="brand">Logo</strong>
-</sgds-mainnav>
-
-<div class="sgds:bg-surface-default">
-  <div class="sgds-container sgds:py-layout-xl">
-    <div class="sgds-grid sgds:mb-layout-lg">
-      <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
-        <h1 class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-default">
-          Building digital services that matter for Singapore
-        </h1>
-      </div>
-      <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6 sgds:flex sgds:items-end">
-        <p class="sgds:text-body-lg sgds:font-regular sgds:leading-md sgds:text-body-subtle">
-          We are a team of designers, engineers, and product thinkers committed to delivering citizen-centric digital experiences across government.
-        </p>
-      </div>
-    </div>
-
-    <div class="sgds-grid sgds:mb-layout-lg" style="--sgds-grid-row-gap: var(--sgds-layout-gap-md)">
-      <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8 sgds:flex">
-        <img
-          src="https://images.unsplash.com/photo-1565350897149-38dfafa81d83?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0"
-          alt="Team collaborating on a project"
-          class="sgds:w-full sgds:object-cover sgds:rounded-lg"
-        />
-      </div>
-
-      <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4 sgds:flex sgds:flex-col sgds:gap-layout-md">
-        <sgds-thumbnail-card class="sgds:flex-1">
-          <div slot="thumbnail" class="sgds:w-32 sgds:h-32 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:rounded-lg">
-            Logo
-          </div>
-          <span slot="description">
-            Trusted by agencies across the whole-of-government ecosystem to deliver accessible, compliant, and consistent digital interfaces.
-          </span>
-          <sgds-link slot="footer">
-            <a href="/about">Learn more <sgds-icon name="arrow-right"></sgds-icon></a>
-          </sgds-link>
-        </sgds-thumbnail-card>
-
-        <img
-          src="https://images.unsplash.com/photo-1606857521015-7f9fcf423740?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0"
-          alt="Office environment"
-          class="sgds:w-full sgds:object-cover sgds:rounded-lg"
-        />
-      </div>
-    </div>
-
-    <div class="sgds:mb-layout-lg sgds:overflow-hidden">
-      <div class="sgds:text-center sgds:mb-layout-sm">
-        <p class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-body-subtle">
-          Trusted by agencies
-        </p>
-      </div>
-
-      <div class="sgds:overflow-hidden sgds:relative" style="mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);">
-        <div class="sgds-about-logo-track sgds:flex sgds:gap-layout-xl sgds:w-max">
-          <div class="sgds:flex sgds:gap-layout-xl sgds:items-center sgds:shrink-0">
-            <div class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60">Agency A</div>
-            <div class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60">Agency B</div>
-            <div class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60">Agency C</div>
-            <div class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60">Agency D</div>
-            <div class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60">Agency E</div>
-          </div>
-          <div class="sgds:flex sgds:gap-layout-xl sgds:items-center sgds:shrink-0" aria-hidden="true">
-            <div class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60">Agency A</div>
-            <div class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60">Agency B</div>
-            <div class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60">Agency C</div>
-            <div class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60">Agency D</div>
-            <div class="sgds:w-30 sgds:h-10 sgds:bg-surface-raised sgds:text-default sgds:flex sgds:items-center sgds:justify-center sgds:opacity-60">Agency E</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="sgds:bg-surface-raised sgds:rounded-lg sgds:p-layout-lg">
-      <div class="sgds-grid sgds:mb-layout-md">
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
-          <h2 class="sgds:text-heading-lg sgds:font-bold sgds:leading-lg sgds:tracking-tight sgds:text-default">
-            Delivering impact at scale
-          </h2>
-        </div>
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6">
-          <p class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:text-body-subtle">
-            Our platform powers services used by millions of residents and thousands of officers across the Singapore government.
-          </p>
-        </div>
-      </div>
-
-      <div class="sgds-grid">
-        <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-3">
-          <p class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-default">12,000+</p>
-          <p class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:text-body-subtle sgds:mt-1">Active users</p>
-        </div>
-        <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-3">
-          <p class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-default">98%</p>
-          <p class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:text-body-subtle sgds:mt-1">Platform uptime</p>
-        </div>
-        <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-3">
-          <p class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-default">50+</p>
-          <p class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:text-body-subtle sgds:mt-1">Government agencies</p>
-        </div>
-        <div class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-3">
-          <p class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-default">5 years</p>
-          <p class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:text-body-subtle sgds:mt-1">In production</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<sgds-footer></sgds-footer>`;
-
-export const formPageMarkup = `<sgds-masthead></sgds-masthead>
-
-  <sgds-mainnav>
-    <strong slot="brand">Logo</strong>
-  </sgds-mainnav>
-
-  <!-- Page header -->
-  <section class="sgds:bg-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div
-        class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left"
-        style="max-width: var(--sgds-text-max-width);"
-      >
-        <div
-          class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-        >
-          Profile Settings
-        </div>
-        <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
-          Edit profile
-        </h1>
-        <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
-          Update your personal details and preferences.
-        </p>
-      </div>
-    </div>
-  </section>
-
-  <section class="sgds:bg-surface-default sgds:min-h-screen">
-    <div class="sgds-container">
-      <form id="profile-form" method="post" novalidate>
-        <!-- Section 1: Personal information -->
-        <div class="sgds:border-t sgds:border-muted sgds:py-layout-md">
-          <div class="sgds-grid sgds:gap-layout-md">
-            <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-              <h3
-                class="sgds:text-heading-md sgds:font-semibold sgds:leading-md sgds:tracking-tight sgds:text-heading-default"
-              >
-                Personal information
-              </h3>
-              <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle">
-                Your name and contact details. Only your agency administrator can see this information.
-              </p>
-            </div>
-
-            <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8 sgds:flex sgds:flex-col sgds:gap-component-sm">
-              <div class="sgds-grid sgds:gap-component-sm">
-                <sgds-input
-                  class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6"
-                  label="First name"
-                  name="firstName"
-                  required
-                  hasFeedback
-                ></sgds-input>
-                <sgds-input
-                  class="sgds-col-4 sgds-col-sm-4 sgds-col-lg-6"
-                  label="Last name"
-                  name="lastName"
-                  required
-                  hasFeedback
-                ></sgds-input>
-              </div>
-              <sgds-input
-                label="Email address"
-                type="email"
-                name="email"
-                hint="Must be a gov.sg email address."
-                required
-                hasFeedback
-              ></sgds-input>
-              <sgds-input
-                label="Phone number"
-                type="tel"
-                name="phone"
-                hint="Singapore number including country code, e.g. +65 9123 4567"
-                hasFeedback
-              ></sgds-input>
-            </div>
-          </div>
-        </div>
-
-        <!-- Section 2: Role & access -->
-        <div class="sgds:border-t sgds:border-muted sgds:py-layout-md">
-          <div class="sgds-grid sgds:gap-layout-md">
-            <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-              <h3
-                class="sgds:text-heading-md sgds:font-semibold sgds:leading-md sgds:tracking-tight sgds:text-heading-default"
-              >
-                Role &amp; access
-              </h3>
-              <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle">
-                Your position and assigned permissions within the system.
-              </p>
-            </div>
-
-            <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8 sgds:flex sgds:flex-col sgds:gap-component-sm">
-              <sgds-input label="Job title" name="jobTitle" hasFeedback></sgds-input>
-              <sgds-select label="Department" name="department" placeholder="Select department" hasFeedback>
-                <sgds-select-option value="policy">Policy</sgds-select-option>
-                <sgds-select-option value="operations">Operations</sgds-select-option>
-                <sgds-select-option value="ict">ICT</sgds-select-option>
-              </sgds-select>
-              <sgds-select label="Access level" name="accessLevel" hasFeedback>
-                <sgds-select-option value="viewer">Viewer</sgds-select-option>
-                <sgds-select-option value="editor">Editor</sgds-select-option>
-                <sgds-select-option value="admin">Admin</sgds-select-option>
-              </sgds-select>
-            </div>
-          </div>
-        </div>
-
-        <!-- Section 3: Notes -->
-        <div class="sgds:border-t sgds:border-muted sgds:py-layout-md">
-          <div class="sgds-grid sgds:gap-layout-md">
-            <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-              <h3
-                class="sgds:text-heading-md sgds:font-semibold sgds:leading-md sgds:tracking-tight sgds:text-heading-default"
-              >
-                Notes
-              </h3>
-              <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle">
-                Optional additional context visible to your team.
-              </p>
-            </div>
-
-            <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8">
-              <sgds-textarea
-                label="Internal notes"
-                name="notes"
-                rows="4"
-                maxlength="500"
-                characterCount
-                hint="Max 500 characters."
-              ></sgds-textarea>
-            </div>
-          </div>
-        </div>
-
-        <!-- Form footer -->
-        <div
-          class="sgds:border-t sgds:border-muted sgds:pt-layout-sm sgds:flex sgds:justify-end sgds:gap-component-sm sgds:mb-layout-lg "
-        >
-          <sgds-button variant="outline" type="button">Cancel</sgds-button>
-          <sgds-button variant="primary" type="submit">Save changes</sgds-button>
-        </div>
-      </form>
-    </div>
-  </section>
-
-  <sgds-footer></sgds-footer>`;
-
-export const multiStepFormPageMarkup = `<style>
-    .step-section {
-      display: none;
-    }
-    .step-section.active {
-      display: block;
-    }
-  </style>
-
-  <sgds-masthead></sgds-masthead>
-
-  <sgds-mainnav>
-    <strong slot="brand">Logo</strong>
-    <sgds-mainnav-item slot="end">
-      <a href="#" class="sgds:text-sm sgds:text-body-subtle">Save draft</a>
-    </sgds-mainnav-item>
-  </sgds-mainnav>
-
-  <!-- ── Page header ──────────────────────────────────────── -->
-  <section id="page-header" class="sgds:bg-surface-default sgds:py-layout-lg">
-    <div class="sgds-container">
-      <div
-        class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:gap-layout-md"
-        style="max-width: var(--sgds-text-max-width);"
-      >
-        <sgds-breadcrumb>
-          <sgds-breadcrumb-item><a href="#">Home</a></sgds-breadcrumb-item>
-          <sgds-breadcrumb-item><a href="#">Grants</a></sgds-breadcrumb-item>
-          <sgds-breadcrumb-item active><a href="#">Sustainability Grant Application</a></sgds-breadcrumb-item>
-        </sgds-breadcrumb>
-
-        <div>
-          <div
-            class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-          >
-            Grant Programme
-          </div>
-          <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
-            Enterprise Sustainability Grant
-          </h1>
-          <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
-            Apply for funding to implement sustainability initiatives in your business. Grant quantum: up to 70% of
-            qualifying costs, capped at S$30,000 per project.
-          </p>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <section class="sgds:bg-surface-default sgds:min-h-screen">
-    <div class="sgds-container sgds:py-2-xl">
-      <!-- ── Info alert ─────────────────────────────────────── -->
-      <sgds-alert variant="info" class="sgds:mb-layout-md" dismissible>
-        <strong>Before you begin:</strong> Ensure you have your company UEN, latest financial statements, and project
-        quotations ready. Applications typically take 20-30 minutes to complete.
-      </sgds-alert>
-
-      <!-- ── Stepper ───────────────────────────────────────── -->
-      <sgds-stepper id="grant-stepper" class="sgds:mb-layout-md"></sgds-stepper>
-
-      <!-- ═══════════════════════════════════════════════════
-           STEP 1 Eligibility Check
-      ════════════════════════════════════════════════════ -->
-      <section id="step-eligibility" class="step-section active">
-        <form id="form-eligibility" novalidate>
-          <div class="sgds:border-t sgds:border-muted sgds:py-layout-md">
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-                <h2
-                  class="sgds:text-heading-md sgds:font-semibold sgds:leading-md sgds:tracking-tight sgds:text-heading-default"
-                >
-                  Company Information
-                </h2>
-                <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle">
-                  Basic details about your registered business entity.
-                </p>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8 sgds:flex sgds:flex-col sgds:gap-layout-md">
-                <div class="sgds-grid sgds:gap-component-sm">
-                  <sgds-input
-                    class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6"
-                    id="uen"
-                    label="Unique Entity Number (UEN)"
-                    name="uen"
-                    placeholder="e.g. 201234567A"
-                    required
-                    hasFeedback="both"
-                    invalidFeedback="Enter a valid 9- or 10-character UEN"
-                  ></sgds-input>
-                  <sgds-input
-                    class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6"
-                    id="companyName"
-                    label="Registered Company Name"
-                    name="companyName"
-                    placeholder="e.g. Green Solutions Pte. Ltd."
-                    required
-                    hasFeedback="both"
-                  ></sgds-input>
-                </div>
-
-                <sgds-select
-                  id="businessStructure"
-                  label="Business Structure"
-                  name="businessStructure"
-                  placeholder="Select a business structure"
-                  required
-                  hasFeedback
-                  invalidFeedback="Select a business structure"
-                >
-                  <sgds-select-option value="sole-proprietorship">Sole Proprietorship</sgds-select-option>
-                  <sgds-select-option value="partnership"
-                    >Partnership / Limited Liability Partnership</sgds-select-option
-                  >
-                  <sgds-select-option value="private-limited">Private Limited Company (Pte. Ltd.)</sgds-select-option>
-                  <sgds-select-option value="public-limited">Public Limited Company (Ltd.)</sgds-select-option>
-                  <sgds-select-option value="cooperative">Co-operative</sgds-select-option>
-                </sgds-select>
-
-                <div class="sgds-grid sgds:gap-component-sm">
-                  <sgds-select
-                    class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6"
-                    id="employeeCount"
-                    label="Number of Employees"
-                    name="employeeCount"
-                    placeholder="Select a range"
-                    required
-                    hasFeedback
-                    invalidFeedback="Select an employee count"
-                    hintText="As at last financial year end"
-                  >
-                    <sgds-select-option value="1-10">1 - 10</sgds-select-option>
-                    <sgds-select-option value="11-50">11 - 50</sgds-select-option>
-                    <sgds-select-option value="51-200">51 - 200</sgds-select-option>
-                    <sgds-select-option value="201+">More than 200 (not eligible)</sgds-select-option>
-                  </sgds-select>
-                  <sgds-select
-                    class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6"
-                    id="annualTurnover"
-                    label="Annual Turnover"
-                    name="annualTurnover"
-                    placeholder="Select a range"
-                    required
-                    hasFeedback
-                    invalidFeedback="Select an annual turnover range"
-                    hintText="As at last financial year end"
-                  >
-                    <sgds-select-option value="lt-1m">Less than S$1 million</sgds-select-option>
-                    <sgds-select-option value="1m-10m">S$1 million - S$10 million</sgds-select-option>
-                    <sgds-select-option value="10m-50m">S$10 million - S$50 million</sgds-select-option>
-                    <sgds-select-option value="50m-100m">S$50 million - S$100 million</sgds-select-option>
-                    <sgds-select-option value="gt-100m">More than S$100 million (not eligible)</sgds-select-option>
-                  </sgds-select>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="sgds:border-t sgds:border-muted sgds:py-layout-md">
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-                <h2
-                  class="sgds:text-heading-md sgds:font-semibold sgds:leading-md sgds:tracking-tight sgds:text-heading-default"
-                >
-                  Industry & History
-                </h2>
-                <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle">
-                  Your primary sector and prior engagement with government grants.
-                </p>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8 sgds:flex sgds:flex-col sgds:gap-layout-md">
-                <div class="sgds-grid sgds:gap-component-sm">
-                  <sgds-select
-                    class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6"
-                    id="industrySector"
-                    label="Primary Industry Sector"
-                    name="industrySector"
-                    placeholder="Select a sector"
-                    required
-                    hasFeedback
-                  >
-                    <sgds-select-option value="food-beverage">Food & Beverage</sgds-select-option>
-                    <sgds-select-option value="retail">Retail</sgds-select-option>
-                    <sgds-select-option value="manufacturing">Manufacturing</sgds-select-option>
-                    <sgds-select-option value="construction">Construction</sgds-select-option>
-                    <sgds-select-option value="logistics">Logistics & Transportation</sgds-select-option>
-                    <sgds-select-option value="hospitality">Hospitality & Tourism</sgds-select-option>
-                    <sgds-select-option value="professional-services">Professional Services</sgds-select-option>
-                    <sgds-select-option value="healthcare">Healthcare</sgds-select-option>
-                    <sgds-select-option value="ict">ICT & Digital Services</sgds-select-option>
-                    <sgds-select-option value="other">Other</sgds-select-option>
-                  </sgds-select>
-                  <sgds-select
-                    class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-6"
-                    id="yearsInOperation"
-                    label="Years in Operation"
-                    name="yearsInOperation"
-                    placeholder="Select a range"
-                    required
-                    hasFeedback
-                  >
-                    <sgds-select-option value="lt-1">Less than 1 year (not eligible)</sgds-select-option>
-                    <sgds-select-option value="1-3">1 - 3 years</sgds-select-option>
-                    <sgds-select-option value="3-5">3 - 5 years</sgds-select-option>
-                    <sgds-select-option value="gt-5">More than 5 years</sgds-select-option>
-                  </sgds-select>
-                </div>
-
-                <sgds-radio-group
-                  id="priorGrant"
-                  label="Have you previously received this grant?"
-                  name="priorGrant"
-                  required
-                  hasFeedback
-                >
-                  <sgds-radio value="no">No, this is my first application</sgds-radio>
-                  <sgds-radio value="yes-different">Yes, for a different project</sgds-radio>
-                  <sgds-radio value="yes-same">Yes, for a similar project (may affect eligibility)</sgds-radio>
-                </sgds-radio-group>
-              </div>
-            </div>
-          </div>
-
-          <div
-            class="sgds:border-t sgds:border-muted sgds:pt-layout-sm sgds:flex sgds:justify-end sgds:gap-component-sm"
-          >
-            <sgds-button id="btn-next-1" variant="primary" type="button">
-              Next: Project Details
-              <sgds-icon name="arrow-right" slot="rightIcon"></sgds-icon>
-            </sgds-button>
-          </div>
-        </form>
-      </section>
-
-      <!-- ═══════════════════════════════════════════════════
-           STEP 2 Project Details
-      ════════════════════════════════════════════════════ -->
-      <section id="step-project" class="step-section">
-        <form id="form-project" novalidate>
-          <div class="sgds:border-t sgds:border-muted sgds:py-layout-md">
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-                <h2
-                  class="sgds:text-heading-md sgds:font-semibold sgds:leading-md sgds:tracking-tight sgds:text-heading-default"
-                >
-                  Project Overview
-                </h2>
-                <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle">
-                  Describe the sustainability initiative you are seeking funding for.
-                </p>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8 sgds:flex sgds:flex-col sgds:gap-layout-md">
-                <sgds-input
-                  id="projectTitle"
-                  label="Project Title"
-                  name="projectTitle"
-                  placeholder="e.g. Solar Panel Installation at Ang Mo Kio Factory"
-                  required
-                  hasFeedback="both"
-                  invalidFeedback="Provide a project title"
-                ></sgds-input>
-
-                <sgds-select
-                  id="projectCategory"
-                  label="Project Category"
-                  name="projectCategory"
-                  placeholder="Select a category"
-                  required
-                  hasFeedback
-                >
-                  <sgds-select-option value="renewable-energy"
-                    >Renewable Energy (Solar, Wind, Biogas)</sgds-select-option
-                  >
-                  <sgds-select-option value="energy-efficiency">Energy Efficiency & Management</sgds-select-option>
-                  <sgds-select-option value="water-conservation">Water Conservation & Recycling</sgds-select-option>
-                  <sgds-select-option value="waste-management">Waste Reduction & Circular Economy</sgds-select-option>
-                  <sgds-select-option value="green-transport">Green Transport & Logistics</sgds-select-option>
-                  <sgds-select-option value="sustainable-procurement"
-                    >Sustainable Procurement & Supply Chain</sgds-select-option
-                  >
-                  <sgds-select-option value="green-building">Green Building Retrofit</sgds-select-option>
-                  <sgds-select-option value="carbon-management">Carbon Measurement & Management</sgds-select-option>
-                </sgds-select>
-
-                <sgds-textarea
-                  id="projectDescription"
-                  label="Project Description"
-                  name="projectDescription"
-                  placeholder="e.g. We plan to install rooftop solar panels across our warehouse facility to reduce grid electricity dependency and lower carbon emissions..."
-                  rows="5"
-                  minlength="100"
-                  maxlength="2000"
-                  characterCount
-                  required
-                  hasFeedback="both"
-                  invalidFeedback="Provide a description of at least 100 characters"
-                  hintText="Describe what you plan to implement and how it will improve your sustainability performance (min. 100 characters)"
-                ></sgds-textarea>
-              </div>
-            </div>
-          </div>
-
-          <div
-            class="sgds:border-t sgds:border-muted sgds:pt-layout-sm sgds:flex sgds:justify-between sgds:gap-component-sm"
-          >
-            <sgds-button id="btn-prev-2" variant="outline" type="button">
-              <sgds-icon name="arrow-left" slot="leftIcon"></sgds-icon>
-              Back
-            </sgds-button>
-            <sgds-button id="btn-next-2" variant="primary" type="button">
-              Next: Review
-              <sgds-icon name="arrow-right" slot="rightIcon"></sgds-icon>
-            </sgds-button>
-          </div>
-        </form>
-      </section>
-
-      <!-- ═══════════════════════════════════════════════════
-           STEP 3 Review & Declare
-      ════════════════════════════════════════════════════ -->
-      <section id="step-review" class="step-section">
-        <form id="form-review" novalidate>
-          <div class="sgds:border-t sgds:border-muted sgds:py-layout-md">
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-                <h2
-                  class="sgds:text-heading-md sgds:font-semibold sgds:leading-md sgds:tracking-tight sgds:text-heading-default"
-                >
-                  Application Summary
-                </h2>
-                <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle">
-                  Review all details before submitting. Use the Back button to correct any information.
-                </p>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8">
-                <div class="sgds:flex sgds:flex-col sgds:gap-layout-sm">
-                  <sgds-description-list-group bordered>
-                    <span slot="title">Company Information</span>
-                    <sgds-description-list>UEN<span slot="data" id="rv-uen">-</span></sgds-description-list>
-                    <sgds-description-list
-                      >Company Name<span slot="data" id="rv-companyName">-</span></sgds-description-list
-                    >
-                    <sgds-description-list
-                      >Business Structure<span slot="data" id="rv-businessStructure">-</span></sgds-description-list
-                    >
-                  </sgds-description-list-group>
-
-                  <sgds-description-list-group bordered>
-                    <span slot="title">Project Details</span>
-                    <sgds-description-list
-                      >Project Title<span slot="data" id="rv-projectTitle">-</span></sgds-description-list
-                    >
-                    <sgds-description-list
-                      >Category<span slot="data" id="rv-projectCategory">-</span></sgds-description-list
-                    >
-                  </sgds-description-list-group>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="sgds:border-t sgds:border-muted sgds:py-layout-md">
-            <div class="sgds-grid sgds:gap-layout-md">
-              <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-                <h2
-                  class="sgds:text-heading-md sgds:font-semibold sgds:leading-md sgds:tracking-tight sgds:text-heading-default"
-                >
-                  Declarations
-                </h2>
-                <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle">
-                  All declarations must be acknowledged before submission.
-                </p>
-              </div>
-              <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8 sgds:flex sgds:flex-col sgds:gap-layout-md">
-                <sgds-checkbox
-                  id="decl-accurate"
-                  name="declAccurate"
-                  value="yes"
-                  required
-                  hasFeedback="both"
-                  invalidFeedback="You must confirm this declaration"
-                >
-                  I declare that all information provided in this application is true, complete, and accurate to the
-                  best of my knowledge.
-                </sgds-checkbox>
-
-                <sgds-checkbox
-                  id="decl-tnc"
-                  name="declTnc"
-                  value="yes"
-                  required
-                  hasFeedback="both"
-                  invalidFeedback="You must agree to the Terms and Conditions"
-                >
-                  I have read and agree to the
-                  <a href="#" class="sgds:text-info-default sgds:underline">Terms and Conditions</a>.
-                </sgds-checkbox>
-              </div>
-            </div>
-          </div>
-
-          <div
-            class="sgds:border-t sgds:border-muted sgds:pt-layout-sm sgds:flex sgds:justify-between sgds:gap-component-sm"
-          >
-            <sgds-button id="btn-prev-3" variant="outline" type="button">
-              <sgds-icon name="arrow-left" slot="leftIcon"></sgds-icon>
-              Back
-            </sgds-button>
-            <sgds-button id="btn-submit" variant="primary" type="submit">
-              Submit Application
-              <sgds-icon name="send" slot="rightIcon"></sgds-icon>
-            </sgds-button>
-          </div>
-        </form>
-      </section>
-
-      <!-- ═══════════════════════════════════════════════════
-           SUCCESS STATE
-      ════════════════════════════════════════════════════ -->
-      <section id="step-success" class="step-section">
-        <div class="sgds:flex sgds:flex-col sgds:items-center sgds:text-center sgds:py-layout-xl sgds:gap-layout-md">
-          <sgds-icon name="check-circle-fill" size="3-xl" class="sgds:text-success-default"></sgds-icon>
-
-          <div>
-            <h1
-              class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default"
-            >
-              Application Submitted
-            </h1>
-            <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
-              Thank you for applying for the Enterprise Sustainability Grant.
-            </p>
-          </div>
-
-          <div>
-            <div
-              class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs"
-            >
-              Reference Number
-            </div>
-            <h4
-              id="ref-number"
-              class="sgds:text-heading-sm sgds:font-light sgds:leading-sm sgds:tracking-tight sgds:text-heading-default"
-            >
-              ESG-2026-12345
-            </h4>
-          </div>
-        </div>
-      </section>
-    </div>
-  </section>
-
-  <sgds-footer></sgds-footer>
-
-  <!-- ── Script ──────────────────────────────────────────────── -->
-  <script>
-    const stepper = document.getElementById("grant-stepper");
-
-    const STEPS = [
-      { stepHeader: "Eligibility", component: "eligibility" },
-      { stepHeader: "Project Details", component: "project" },
-      { stepHeader: "Review & Declare", component: "review" }
-    ];
-
-    const SECTIONS = {
-      eligibility: document.getElementById("step-eligibility"),
-      project: document.getElementById("step-project"),
-      review: document.getElementById("step-review"),
-      success: document.getElementById("step-success")
-    };
-
-    const FORMS = {
-      eligibility: document.getElementById("form-eligibility"),
-      project: document.getElementById("form-project"),
-      review: document.getElementById("form-review")
-    };
-
-    stepper.steps = STEPS;
-    stepper.activeStep = 0;
-
-    function showSection(key) {
-      Object.values(SECTIONS).forEach(s => s.classList.remove("active"));
-      SECTIONS[key].classList.add("active");
-    }
-
-    function validateStep(formId) {
-      const form = FORMS[formId];
-      if (!form) return true;
-      return form.reportValidity();
-    }
-
-    stepper.addEventListener("sgds-arrived", () => {
-      const key = STEPS[stepper.activeStep].component;
-      showSection(key);
-      window.scrollTo({ top: 0, behavior: "smooth" });
-    });
-
-    document.getElementById("btn-next-1").addEventListener("click", () => {
-      if (!validateStep("eligibility")) return;
-      stepper.nextStep();
-    });
-
-    document.getElementById("btn-prev-2").addEventListener("click", () => stepper.previousStep());
-
-    document.getElementById("btn-next-2").addEventListener("click", () => {
-      if (!validateStep("project")) return;
-      populateReview();
-      stepper.nextStep();
-    });
-
-    document.getElementById("btn-prev-3").addEventListener("click", () => stepper.previousStep());
-
-    const LABELS = {
-      businessStructure: {
-        "sole-proprietorship": "Sole Proprietorship",
-        partnership: "Partnership / LLP",
-        "private-limited": "Private Limited (Pte. Ltd.)",
-        "public-limited": "Public Limited (Ltd.)",
-        cooperative: "Co-operative"
-      },
-      projectCategory: {
-        "renewable-energy": "Renewable Energy",
-        "energy-efficiency": "Energy Efficiency",
-        "water-conservation": "Water Conservation",
-        "waste-management": "Waste Management",
-        "green-transport": "Green Transport",
-        "sustainable-procurement": "Sustainable Procurement",
-        "green-building": "Green Building Retrofit",
-        "carbon-management": "Carbon Management"
-      }
-    };
-
-    function resolveLabel(field, value) {
-      const map = LABELS[field];
-      return map && map[value] ? map[value] : value || "-";
-    }
-
-    function populateReview() {
-      const fields = ["uen", "companyName", "businessStructure", "projectTitle", "projectCategory"];
-
-      fields.forEach(id => {
-        const el = document.getElementById(id);
-        const rvEl = document.getElementById("rv-" + id);
-        if (!el || !rvEl) return;
-        const raw = el.value || "";
-        rvEl.textContent = resolveLabel(id, raw) || "-";
-      });
-    }
-
-    document.getElementById("form-review").addEventListener("submit", e => {
-      e.preventDefault();
-      if (!e.target.reportValidity()) return;
-
-      const refNum = "ESG-2026-" + String(Math.floor(10000 + Math.random() * 90000)).padStart(5, "0");
-      document.getElementById("ref-number").textContent = refNum;
-
-      stepper.style.display = "none";
-      document.getElementById("page-header").style.display = "none";
-      Object.values(SECTIONS).forEach(s => s.classList.remove("active"));
-      SECTIONS.success.classList.add("active");
-      window.scrollTo({ top: 0, behavior: "smooth" });
-    });
-  </script>`;
-
-export const reportIssueMarkup = `<sgds-masthead></sgds-masthead>
-<sgds-mainnav>
-  <strong slot="brand">Logo</strong>
-</sgds-mainnav>
-
-<section class="sgds:bg-default sgds:py-layout-lg">
-  <div class="sgds-container">
-    <div class="sgds-grid">
-      <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-8">
-        <div>
-          <div class="sgds:mb-layout-md">
-            <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
-              Report an Issue
-            </h1>
-            <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle">
-              Help us improve by reporting problems in your area. We aim to respond within 3 working days.
-            </p>
-          </div>
-
-          <form class="sgds:flex sgds:flex-col sgds:gap-form-2-xl">
-            <sgds-input
-              type="text"
-              label="Location"
-              name="location"
-              placeholder="e.g. Blk 123 Ang Mo Kio Ave 6, near bus stop"
-              hintText="Enter a street address or describe the location"
-              required
-              hasFeedback="both"
-              invalidFeedback="Please enter the location of the issue"
-            ></sgds-input>
-
-            <sgds-textarea
-              label="Description"
-              name="description"
-              placeholder="Describe the issue in detail - what it is, how long it has been there, and any safety concerns"
-              hintText="Minimum 20 characters"
-              rows="5"
-              minlength="20"
-              maxlength="500"
-              required
-              hasFeedback="both"
-              invalidFeedback="Please describe the issue (at least 20 characters)"
-            ></sgds-textarea>
-
-            <sgds-file-upload
-              label="Photos (optional)"
-              name="photos"
-              accept="image/*"
-              multiple
-              hintText="Upload up to 3 photos. JPEG or PNG, max 5MB each."
-            >
-              Upload Photos
-            </sgds-file-upload>
-
-            <sgds-button type="submit" variant="primary" size="md" class="sgds:self-end">
-              Submit Report
-            </sgds-button>
-          </form>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<sgds-footer></sgds-footer>`;
-
-export const blogMarkup = `<style>
-  .blog-stats-row { display: flex; flex-wrap: wrap; gap: var(--sgds-gap-layout-md); }
-  .blog-stats-row > * { width: 100%; }
-  @media (width >= 768px) {
-    .blog-stats-row { flex-wrap: nowrap; }
-    .blog-stats-row > * { flex: 1; width: auto; }
-  }
-</style>
-
-<sgds-masthead></sgds-masthead>
-<sgds-mainnav>
-  <strong slot="brand">Logo</strong>
-</sgds-mainnav>
-
-<section class="sgds:bg-alternate sgds:py-layout-md">
-  <div class="sgds-container">
-    <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left sgds:gap-layout-md" style="max-width: var(--sgds-text-max-width);">
-      <sgds-breadcrumb>
-        <sgds-breadcrumb-item><a href="#">Home</a></sgds-breadcrumb-item>
-        <sgds-breadcrumb-item><a href="#">Stories</a></sgds-breadcrumb-item>
-        <sgds-breadcrumb-item active><a href="#">LifeSG Parenting Journey</a></sgds-breadcrumb-item>
-      </sgds-breadcrumb>
-
-      <div>
-        <div class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">Success Story</div>
-        <h1 class="sgds:text-heading-xl sgds:font-bold sgds:leading-xl sgds:tracking-tight sgds:text-heading-default">
-          How LifeSG Helped 180,000 New Parents Navigate Government Services
-        </h1>
-        <p class="sgds:text-body-lg sgds:leading-md sgds:tracking-normal sgds:text-body-subtle sgds:mb-0">
-          A look at how the Parenting Journey feature reduced time-to-access for critical family services by 60% in its first year.
-        </p>
-      </div>
-    </div>
-  </div>
-</section>
-
-<section class="sgds:bg-default sgds:py-layout-md">
-  <div class="sgds-container">
-    <div style="max-width: var(--sgds-text-max-width);">
-      <p class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:text-body-default">
-        When a child is born in Singapore, parents suddenly find themselves navigating a maze of government agencies - the Immigration and Checkpoints Authority for the birth certificate, HDB for housing grants, Baby Bonus from MSF, and CPF contributions. Each carries its own eligibility rules, deadlines, and application portals.
-      </p>
-      <p class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:text-body-default sgds:mb-0">
-        The LifeSG Parenting Journey was built to change this. By aggregating services across agencies into a single, guided flow, it removed the burden of discovery from parents during one of the most demanding periods of their lives.
-      </p>
-    </div>
-  </div>
-</section>
-
-<section class="sgds:bg-default sgds:py-layout-md">
-  <div class="sgds-container">
-    <div style="max-width: var(--sgds-text-max-width);">
-      <h2 class="sgds:text-heading-lg sgds:font-bold sgds:leading-lg sgds:tracking-tight sgds:text-heading-default">The Challenge</h2>
-      <p class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:text-body-default">
-        User research conducted in 2022 revealed three persistent pain points that parents faced when trying to access post-birth government services.
-      </p>
-      <ol style="padding-left: var(--sgds-spacing-lg); margin: 0;">
-        <li class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:text-body-default"><strong>Fragmented entry points.</strong> Parents had to know which agency offered each benefit before they could begin. Many missed out on grants simply because they were unaware of them.</li>
-        <li class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:text-body-default"><strong>Repeated data entry.</strong> The same personal and household details were required across six separate agency forms, leading to fatigue and errors.</li>
-        <li class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:text-body-default"><strong>No status visibility.</strong> Once applications were submitted, parents had no unified view of their status across agencies - each required a separate login to check progress.</li>
-      </ol>
-    </div>
-  </div>
-</section>
-
-<section class="sgds:bg-alternate sgds:py-layout-md">
-  <div class="sgds-container">
-    <div style="max-width: var(--sgds-text-max-width);">
-      <div class="sgds:mb-layout-md">
-        <h2 class="sgds:text-heading-lg sgds:font-bold sgds:leading-lg sgds:tracking-tight sgds:text-heading-default">Results After 12 Months</h2>
-        <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0">
-          Measured against a baseline cohort from the year prior to launch.
-        </p>
-      </div>
-
-      <div class="blog-stats-row">
-        <div class="sgds:flex sgds:flex-col sgds:items-start" style="padding-right: var(--sgds-spacing-layout-xs);">
-          <div class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default">60%</div>
-          <h5 class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default">Reduction in time-to-access</h5>
-          <p class="sgds:text-label-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-label-subtle sgds:mb-0">Average time from birth registration to first benefit received fell from 14 days to 5.5 days.</p>
-        </div>
-        <div class="sgds:flex sgds:flex-col sgds:items-start" style="padding-right: var(--sgds-spacing-layout-xs);">
-          <div class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default">180K</div>
-          <h5 class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default">Parents onboarded</h5>
-          <p class="sgds:text-label-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-label-subtle sgds:mb-0">Representing 94% of all new births registered in Singapore during the period.</p>
-        </div>
-        <div class="sgds:flex sgds:flex-col sgds:items-start" style="padding-right: var(--sgds-spacing-layout-xs);">
-          <div class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default">4.7</div>
-          <h5 class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default">Satisfaction score (out of 5)</h5>
-          <p class="sgds:text-label-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-label-subtle sgds:mb-0">Based on 12,400 post-task survey responses collected in-app.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<section class="sgds:bg-default sgds:py-layout-md">
-  <div class="sgds-container">
-    <div style="max-width: var(--sgds-text-max-width);">
-      <h2 class="sgds:text-heading-lg sgds:font-bold sgds:leading-lg sgds:tracking-tight sgds:text-heading-default">What's Next</h2>
-      <p class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:text-body-default">
-        Building on the success of the Parenting Journey, the team is now expanding the life-moments model to cover eldercare transitions, housing upgrades, and retirement planning - applying the same cross-agency integration approach to new resident cohorts.
-      </p>
-      <h6 class="sgds:text-subtitle-sm sgds:font-semibold sgds:leading-2-xs sgds:tracking-normal sgds:text-heading-default">Published April 2026</h6>
-      <p class="sgds:text-body-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-body-default">
-        Government Digital Services, Smart Nation and Digital Government Office
-      </p>
-      <sgds-button variant="primary" size="md">Read More Stories</sgds-button>
-    </div>
-  </div>
-</section>
-
-<sgds-footer></sgds-footer>`;
-
-export const landingMarkup = `<style>
-  .landing-hero-row { display: flex; flex-direction: column; gap: var(--sgds-gap-layout-md); }
-  .landing-hero-row > * { width: 100%; }
-  @media (width >= 768px) {
-    .landing-hero-row { flex-direction: row; align-items: center; }
-    .landing-hero-row > :first-child { width: 50%; padding-top: var(--sgds-spacing-layout-xs); padding-right: var(--sgds-spacing-layout-md); }
-    .landing-hero-row > :last-child { width: 50%; }
-  }
-  .landing-stats-row { display: flex; flex-wrap: wrap; gap: var(--sgds-gap-layout-md); }
-  .landing-stats-row > * { width: 100%; }
-  @media (width >= 1024px) {
-    .landing-stats-row { flex-wrap: nowrap; }
-    .landing-stats-row > * { flex: 1; width: auto; }
-  }
-</style>
-
-<sgds-masthead></sgds-masthead>
-<sgds-mainnav>
-  <strong slot="brand">Logo</strong>
-</sgds-mainnav>
-
-<section class="sgds:bg-default sgds:py-layout-md sgds:min-h-[600px]">
-  <div class="sgds-container">
-    <div class="landing-hero-row">
-      <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left">
-        <div class="sgds:mb-xl">
-          <div class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">
-            Singapore Government Digital Services
-          </div>
-          <h1 class="sgds:text-display-lg sgds:font-bold sgds:leading-3-xl sgds:tracking-tighter sgds:text-display-default">
-            One Platform.<br />Simpler Living.
-          </h1>
-          <h4 class="sgds:text-heading-sm sgds:font-light sgds:leading-sm sgds:tracking-tight sgds:text-heading-default">
-            Access government services anytime, anywhere. Built for residents, designed for ease.
-          </h4>
-        </div>
-        <div class="sgds:flex sgds:gap-component-md">
-          <sgds-button variant="primary" size="md">Get Started</sgds-button>
-          <sgds-button variant="outline" size="md">Learn More</sgds-button>
-        </div>
-      </div>
-
-      <div>
-        <img
-          src="https://webcomponent.designsystem.tech.gov.sg/placeholder-sgds.png"
-          alt=""
-          class="sgds:block sgds:aspect-square sgds:w-full sgds:rounded-xl sgds:object-cover"
-        />
-      </div>
-    </div>
-  </div>
-</section>
-
-<section class="sgds:bg-default sgds:py-layout-md">
-  <div class="sgds-container">
-    <div style="display: flex; flex-direction: column; gap: var(--sgds-gap-layout-md);">
-      <div class="sgds:flex sgds:flex-col sgds:items-start sgds:text-left" style="padding-bottom: var(--sgds-spacing-layout-md);">
-        <div class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">Life Moments</div>
-        <h2 class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default">
-          Built for Every Stage of Life
-        </h2>
-        <h5 class="sgds:text-subtitle-md sgds:font-light sgds:leading-xs sgds:tracking-normal sgds:text-heading-default sgds:mb-0">
-          Services grouped around your life moments - not government structures.
-        </h5>
-      </div>
-
-      <div class="sgds-grid" style="gap: var(--sgds-gap-layout-md);">
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-          <sgds-card tinted hideBorder stretchedLink>
-            <span slot="subtitle">FAMILY</span>
-            <span slot="title">Family and Relationships</span>
-            <span slot="description">Register births, apply for child development grants, and access parenting resources all in one place.</span>
-            <sgds-link slot="footer"><a href="#" aria-label="Learn more about Family and Relationships">Learn more <sgds-icon name="arrow-right"></sgds-icon></a></sgds-link>
-          </sgds-card>
-        </div>
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-          <sgds-card tinted hideBorder stretchedLink>
-            <span slot="subtitle">HOUSING</span>
-            <span slot="title">Home and Housing</span>
-            <span slot="description">Check eligibility, apply for flats, and manage your property-related transactions with HDB and other agencies.</span>
-            <sgds-link slot="footer"><a href="#" aria-label="Learn more about Home and Housing">Learn more <sgds-icon name="arrow-right"></sgds-icon></a></sgds-link>
-          </sgds-card>
-        </div>
-        <div class="sgds-col-4 sgds-col-sm-8 sgds-col-lg-4">
-          <sgds-card tinted hideBorder stretchedLink>
-            <span slot="subtitle">EMPLOYMENT</span>
-            <span slot="title">Work and Employment</span>
-            <span slot="description">Search for jobs, upskill through SkillsFuture, and access employment support schemes tailored to your needs.</span>
-            <sgds-link slot="footer"><a href="#" aria-label="Learn more about Work and Employment">Learn more <sgds-icon name="arrow-right"></sgds-icon></a></sgds-link>
-          </sgds-card>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<section class="sgds:bg-default sgds:py-layout-md">
-  <div class="sgds-container">
-    <div style="display: flex; flex-direction: column; gap: var(--sgds-gap-layout-md);">
-      <div style="max-width: var(--sgds-text-max-width);">
-        <div class="sgds:text-overline-md sgds:font-semibold sgds:leading-2-xs sgds:tracking-wide sgds:uppercase sgds:text-label-default sgds:mb-xs">By the Numbers</div>
-        <h2 class="sgds:text-heading-lg sgds:font-bold sgds:leading-lg sgds:tracking-tight sgds:text-heading-default">Impact at a Glance</h2>
-        <p class="sgds:text-body-md sgds:leading-xs sgds:tracking-normal sgds:text-body-subtle sgds:mb-0">
-          Key metrics measured over the past 12 months across all participating agencies.
-        </p>
-      </div>
-
-      <div class="landing-stats-row">
-        <div class="sgds:flex sgds:flex-col sgds:items-start" style="padding-right: var(--sgds-spacing-layout-xs);">
-          <div class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default">2.4M</div>
-          <h5 class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default">Active Users</h5>
-          <p class="sgds:text-label-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-label-subtle sgds:mb-0">Residents actively using the platform to access government services each month.</p>
-        </div>
-        <div class="sgds:flex sgds:flex-col sgds:items-start" style="padding-right: var(--sgds-spacing-layout-xs);">
-          <div class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default">400+</div>
-          <h5 class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default">Government Services</h5>
-          <p class="sgds:text-label-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-label-subtle sgds:mb-0">Integrated services from agencies across the public sector in one place.</p>
-        </div>
-        <div class="sgds:flex sgds:flex-col sgds:items-start" style="padding-right: var(--sgds-spacing-layout-xs);">
-          <div class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default">99.9%</div>
-          <h5 class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default">Platform Uptime</h5>
-          <p class="sgds:text-label-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-label-subtle sgds:mb-0">Consistently high availability so residents can access services anytime.</p>
-        </div>
-        <div class="sgds:flex sgds:flex-col sgds:items-start" style="padding-right: var(--sgds-spacing-layout-xs);">
-          <div class="sgds:text-display-sm sgds:font-bold sgds:leading-xl sgds:tracking-tighter sgds:text-display-default">16</div>
-          <h5 class="sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default">Partner Agencies</h5>
-          <p class="sgds:text-label-sm sgds:font-regular sgds:leading-2-xs sgds:tracking-normal sgds:text-label-subtle sgds:mb-0">Public agencies contributing services and data to the shared platform.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<section class="sgds:bg-alternate sgds:py-layout-md">
-  <div class="sgds-container">
-    <div class="sgds:flex sgds:flex-col sgds:items-center sgds:text-center sgds:mx-auto" style="max-width: var(--sgds-text-max-width);">
-      <h2 class="sgds:text-display-md sgds:font-bold sgds:leading-2-xl sgds:tracking-tighter sgds:text-display-default">
-        Ready to simplify your government experience?
-      </h2>
-      <p class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:text-body-default">
-        Join millions of residents already using LifeSG to access the services that matter most to them.
-      </p>
-      <sgds-button variant="primary" size="md">Get Started with Singpass</sgds-button>
-    </div>
-  </div>
-</section>
-
-<sgds-footer></sgds-footer>`;
-
-export const pageTemplateMarkupByKey: Record<string, string> = {
-  "about-us": aboutUsMarkup,
-  "application-management": applicationManagementMarkup,
-  blog: blogMarkup,
-  catalogue: catalogueMarkup,
-  "form-page": formPageMarkup,
-  landing: landingMarkup,
-  "multi-step-form": multiStepFormPageMarkup,
-};
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index 12417dec..06fc6ad7 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -17,11 +17,11 @@ const { frontmatter } = useData()
   <template v-else>
     <div class="sgds:flex sgds:flex-col sgds:gap-layout-xl sgds:mb-layout-xl">
       <Mainnav />
-      <div class="sgds-container">
+      <main class="sgds-container">
         <DefaultLayout v-if="frontmatter.layout === 'default'" />
         <DocsLayout v-if="frontmatter.layout === 'docs'" />
         <PageLayout v-if="frontmatter.layout === 'page'" />
-      </div>
+      </main>
     </div>
     <Footer />
   </template>
diff --git a/docs/.vitepress/theme/layouts/BareLayout.vue b/docs/.vitepress/theme/layouts/BareLayout.vue
index 43d5d19c..20b00d3e 100644
--- a/docs/.vitepress/theme/layouts/BareLayout.vue
+++ b/docs/.vitepress/theme/layouts/BareLayout.vue
@@ -3,7 +3,9 @@ import { Content } from "vitepress";
 </script>
 
 <template>
-  <Content />
+  <main>
+    <Content />
+  </main>
 </template>
 
 <style>
diff --git a/docs/.vitepress/theme/layouts/DocsLayout.vue b/docs/.vitepress/theme/layouts/DocsLayout.vue
index e54ddb7e..a210fa5f 100644
--- a/docs/.vitepress/theme/layouts/DocsLayout.vue
+++ b/docs/.vitepress/theme/layouts/DocsLayout.vue
@@ -267,6 +267,7 @@ watch(
           <sgds-button
             variant="outline"
             tone="neutral"
+            :ariaLabel="`Browse ${header}`"
             @click="mobileSideNavOpen = true"
           >
             <sgds-icon slot="leftIcon" name="menu"></sgds-icon>
diff --git a/docs/.vitepress/theme/layouts/PreviewLayout.vue b/docs/.vitepress/theme/layouts/PreviewLayout.vue
index e16efb9d..19464511 100644
--- a/docs/.vitepress/theme/layouts/PreviewLayout.vue
+++ b/docs/.vitepress/theme/layouts/PreviewLayout.vue
@@ -3,9 +3,9 @@ import { Content } from "vitepress";
 </script>
 
 <template>
-  <div class="preview-layout">
+  <main class="preview-layout">
     <Content />
-  </div>
+  </main>
 </template>
 
 <style>
diff --git a/docs/blocks/preview/raw/cards-3-per-column.md b/docs/blocks/preview/raw/cards-3-per-column.md
deleted file mode 100644
index a205d3da..00000000
--- a/docs/blocks/preview/raw/cards-3-per-column.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: 3 per column
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cards-3-per-column" />
diff --git a/docs/blocks/preview/raw/cards-4-per-column.md b/docs/blocks/preview/raw/cards-4-per-column.md
deleted file mode 100644
index d3c4f142..00000000
--- a/docs/blocks/preview/raw/cards-4-per-column.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: 4 per column
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cards-4-per-column" />
diff --git a/docs/blocks/preview/raw/cards.md b/docs/blocks/preview/raw/cards.md
deleted file mode 100644
index 8380b3ce..00000000
--- a/docs/blocks/preview/raw/cards.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Cards
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cards" />
diff --git a/docs/blocks/preview/raw/cta-contained-primary-center.md b/docs/blocks/preview/raw/cta-contained-primary-center.md
deleted file mode 100644
index 072c46d6..00000000
--- a/docs/blocks/preview/raw/cta-contained-primary-center.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Contained Primary Center
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cta-contained-primary-center" />
diff --git a/docs/blocks/preview/raw/cta-contained-primary.md b/docs/blocks/preview/raw/cta-contained-primary.md
deleted file mode 100644
index abb3e6d5..00000000
--- a/docs/blocks/preview/raw/cta-contained-primary.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Contained Primary
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cta-contained-primary" />
diff --git a/docs/blocks/preview/raw/cta-contained-raised-center.md b/docs/blocks/preview/raw/cta-contained-raised-center.md
deleted file mode 100644
index 6f19a04a..00000000
--- a/docs/blocks/preview/raw/cta-contained-raised-center.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Contained Raised Center
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cta-contained-raised-center" />
diff --git a/docs/blocks/preview/raw/cta-contained-raised.md b/docs/blocks/preview/raw/cta-contained-raised.md
deleted file mode 100644
index 6a462c7d..00000000
--- a/docs/blocks/preview/raw/cta-contained-raised.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Contained Raised
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cta-contained-raised" />
diff --git a/docs/blocks/preview/raw/cta-full-bleed-alternate-center.md b/docs/blocks/preview/raw/cta-full-bleed-alternate-center.md
deleted file mode 100644
index 8cc2a65f..00000000
--- a/docs/blocks/preview/raw/cta-full-bleed-alternate-center.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Full Bleed Alternate Center
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cta-full-bleed-alternate-center" />
diff --git a/docs/blocks/preview/raw/cta-full-bleed-alternate.md b/docs/blocks/preview/raw/cta-full-bleed-alternate.md
deleted file mode 100644
index 77d9eff8..00000000
--- a/docs/blocks/preview/raw/cta-full-bleed-alternate.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Full Bleed Alternate
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cta-full-bleed-alternate" />
diff --git a/docs/blocks/preview/raw/cta-full-bleed-primary-center.md b/docs/blocks/preview/raw/cta-full-bleed-primary-center.md
deleted file mode 100644
index 4007d226..00000000
--- a/docs/blocks/preview/raw/cta-full-bleed-primary-center.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Full Bleed Primary Center
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cta-full-bleed-primary-center" />
diff --git a/docs/blocks/preview/raw/cta-full-bleed-primary.md b/docs/blocks/preview/raw/cta-full-bleed-primary.md
deleted file mode 100644
index 04795aec..00000000
--- a/docs/blocks/preview/raw/cta-full-bleed-primary.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Full Bleed Primary
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cta-full-bleed-primary" />
diff --git a/docs/blocks/preview/raw/cta.md b/docs/blocks/preview/raw/cta.md
deleted file mode 100644
index e11766b4..00000000
--- a/docs/blocks/preview/raw/cta.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Call to action
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cta" />
diff --git a/docs/blocks/preview/raw/feature-cards-below.md b/docs/blocks/preview/raw/feature-cards-below.md
deleted file mode 100644
index bc27e22d..00000000
--- a/docs/blocks/preview/raw/feature-cards-below.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Cards below
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-cards-below" />
diff --git a/docs/blocks/preview/raw/feature-component-left-6-6.md b/docs/blocks/preview/raw/feature-component-left-6-6.md
deleted file mode 100644
index 7f9e61f5..00000000
--- a/docs/blocks/preview/raw/feature-component-left-6-6.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Component left 6:6
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-component-left-6-6" />
diff --git a/docs/blocks/preview/raw/feature-component-right-6-6.md b/docs/blocks/preview/raw/feature-component-right-6-6.md
deleted file mode 100644
index fb363b66..00000000
--- a/docs/blocks/preview/raw/feature-component-right-6-6.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Component right 6:6
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-component-right-6-6" />
diff --git a/docs/blocks/preview/raw/feature-image-left-4-8.md b/docs/blocks/preview/raw/feature-image-left-4-8.md
deleted file mode 100644
index b5bfe8a6..00000000
--- a/docs/blocks/preview/raw/feature-image-left-4-8.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Image left 4:8
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-image-left-4-8" />
diff --git a/docs/blocks/preview/raw/feature-image-left-6-6.md b/docs/blocks/preview/raw/feature-image-left-6-6.md
deleted file mode 100644
index 1e6f4193..00000000
--- a/docs/blocks/preview/raw/feature-image-left-6-6.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Image left 6:6
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-image-left-6-6" />
diff --git a/docs/blocks/preview/raw/feature-image-left-8-4.md b/docs/blocks/preview/raw/feature-image-left-8-4.md
deleted file mode 100644
index 82bca1e2..00000000
--- a/docs/blocks/preview/raw/feature-image-left-8-4.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Image left 8:4
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-image-left-8-4" />
diff --git a/docs/blocks/preview/raw/feature-image-right-4-8.md b/docs/blocks/preview/raw/feature-image-right-4-8.md
deleted file mode 100644
index 0b7afb54..00000000
--- a/docs/blocks/preview/raw/feature-image-right-4-8.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Image right 4:8
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-image-right-4-8" />
diff --git a/docs/blocks/preview/raw/feature-image-right-6-6.md b/docs/blocks/preview/raw/feature-image-right-6-6.md
deleted file mode 100644
index a820165c..00000000
--- a/docs/blocks/preview/raw/feature-image-right-6-6.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Image right 6:6
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-image-right-6-6" />
diff --git a/docs/blocks/preview/raw/feature-image-right-8-4.md b/docs/blocks/preview/raw/feature-image-right-8-4.md
deleted file mode 100644
index 4d5a383c..00000000
--- a/docs/blocks/preview/raw/feature-image-right-8-4.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Image right 8:4
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-image-right-8-4" />
diff --git a/docs/blocks/preview/raw/feature-no-image-center.md b/docs/blocks/preview/raw/feature-no-image-center.md
deleted file mode 100644
index fc9681ba..00000000
--- a/docs/blocks/preview/raw/feature-no-image-center.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: No image center
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-no-image-center" />
diff --git a/docs/blocks/preview/raw/feature-no-image-left.md b/docs/blocks/preview/raw/feature-no-image-left.md
deleted file mode 100644
index 8e4b051b..00000000
--- a/docs/blocks/preview/raw/feature-no-image-left.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: No image left
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature-no-image-left" />
diff --git a/docs/blocks/preview/raw/feature.md b/docs/blocks/preview/raw/feature.md
deleted file mode 100644
index bd5e4335..00000000
--- a/docs/blocks/preview/raw/feature.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Feature
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature" />
diff --git a/docs/blocks/preview/raw/filter-checkboxes.md b/docs/blocks/preview/raw/filter-checkboxes.md
deleted file mode 100644
index 40a35289..00000000
--- a/docs/blocks/preview/raw/filter-checkboxes.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Filter checkboxes
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="filter-checkboxes" />
diff --git a/docs/blocks/preview/raw/filter.md b/docs/blocks/preview/raw/filter.md
deleted file mode 100644
index cabf7fc2..00000000
--- a/docs/blocks/preview/raw/filter.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Filter
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="filter" />
diff --git a/docs/blocks/preview/raw/form-all-types.md b/docs/blocks/preview/raw/form-all-types.md
deleted file mode 100644
index 636c110e..00000000
--- a/docs/blocks/preview/raw/form-all-types.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: All Types
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-all-types" />
diff --git a/docs/blocks/preview/raw/form-basic-center.md b/docs/blocks/preview/raw/form-basic-center.md
deleted file mode 100644
index 33e82f11..00000000
--- a/docs/blocks/preview/raw/form-basic-center.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Basic Center
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-basic-center" />
diff --git a/docs/blocks/preview/raw/form-basic-left.md b/docs/blocks/preview/raw/form-basic-left.md
deleted file mode 100644
index 727f1fab..00000000
--- a/docs/blocks/preview/raw/form-basic-left.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Basic Left
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-basic-left" />
diff --git a/docs/blocks/preview/raw/form-basic-right.md b/docs/blocks/preview/raw/form-basic-right.md
deleted file mode 100644
index 7249805c..00000000
--- a/docs/blocks/preview/raw/form-basic-right.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Basic Right
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-basic-right" />
diff --git a/docs/blocks/preview/raw/form-fields-checkbox.md b/docs/blocks/preview/raw/form-fields-checkbox.md
deleted file mode 100644
index 61a2b776..00000000
--- a/docs/blocks/preview/raw/form-fields-checkbox.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form Fields Checkbox
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-checkbox" />
diff --git a/docs/blocks/preview/raw/form-fields-dates-quantities.md b/docs/blocks/preview/raw/form-fields-dates-quantities.md
deleted file mode 100644
index 5f24ee3f..00000000
--- a/docs/blocks/preview/raw/form-fields-dates-quantities.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form Fields Dates Quantities
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-dates-quantities" />
diff --git a/docs/blocks/preview/raw/form-fields-file-upload.md b/docs/blocks/preview/raw/form-fields-file-upload.md
deleted file mode 100644
index d9bf7080..00000000
--- a/docs/blocks/preview/raw/form-fields-file-upload.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form Fields File Upload
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-file-upload" />
diff --git a/docs/blocks/preview/raw/form-fields-radio.md b/docs/blocks/preview/raw/form-fields-radio.md
deleted file mode 100644
index f15c42e0..00000000
--- a/docs/blocks/preview/raw/form-fields-radio.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form Fields Radio
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-radio" />
diff --git a/docs/blocks/preview/raw/form-fields-selects.md b/docs/blocks/preview/raw/form-fields-selects.md
deleted file mode 100644
index b85170c8..00000000
--- a/docs/blocks/preview/raw/form-fields-selects.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form Fields Selects
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-selects" />
diff --git a/docs/blocks/preview/raw/form-fields-textarea.md b/docs/blocks/preview/raw/form-fields-textarea.md
deleted file mode 100644
index 234d6c7e..00000000
--- a/docs/blocks/preview/raw/form-fields-textarea.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form Fields Textarea
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-textarea" />
diff --git a/docs/blocks/preview/raw/form-full-width-only.md b/docs/blocks/preview/raw/form-full-width-only.md
deleted file mode 100644
index fb99c172..00000000
--- a/docs/blocks/preview/raw/form-full-width-only.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Full-width only
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-full-width-only" />
diff --git a/docs/blocks/preview/raw/form-multi-step.md b/docs/blocks/preview/raw/form-multi-step.md
deleted file mode 100644
index 9cbfd173..00000000
--- a/docs/blocks/preview/raw/form-multi-step.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form Multi-step
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-multi-step" />
diff --git a/docs/blocks/preview/raw/form-paired-only.md b/docs/blocks/preview/raw/form-paired-only.md
deleted file mode 100644
index 54a143da..00000000
--- a/docs/blocks/preview/raw/form-paired-only.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Paired Only
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-paired-only" />
diff --git a/docs/blocks/preview/raw/form-sections-single.md b/docs/blocks/preview/raw/form-sections-single.md
deleted file mode 100644
index 6d2bfe59..00000000
--- a/docs/blocks/preview/raw/form-sections-single.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Sections Single
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-sections-single" />
diff --git a/docs/blocks/preview/raw/form-sections-three.md b/docs/blocks/preview/raw/form-sections-three.md
deleted file mode 100644
index 8d458141..00000000
--- a/docs/blocks/preview/raw/form-sections-three.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Sections Three
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-sections-three" />
diff --git a/docs/blocks/preview/raw/form-sections-two.md b/docs/blocks/preview/raw/form-sections-two.md
deleted file mode 100644
index fa42412f..00000000
--- a/docs/blocks/preview/raw/form-sections-two.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Sections Two
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-sections-two" />
diff --git a/docs/blocks/preview/raw/header-page-header-with-breadcrumb.md b/docs/blocks/preview/raw/header-page-header-with-breadcrumb.md
deleted file mode 100644
index eb34eb31..00000000
--- a/docs/blocks/preview/raw/header-page-header-with-breadcrumb.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Page header with breadcrumb
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="header-page-header-with-breadcrumb" />
diff --git a/docs/blocks/preview/raw/header-page-header.md b/docs/blocks/preview/raw/header-page-header.md
deleted file mode 100644
index e5b4aa02..00000000
--- a/docs/blocks/preview/raw/header-page-header.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Page header
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="header-page-header" />
diff --git a/docs/blocks/preview/raw/header.md b/docs/blocks/preview/raw/header.md
deleted file mode 100644
index 4f0c84e5..00000000
--- a/docs/blocks/preview/raw/header.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Page header
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="header" />
diff --git a/docs/blocks/preview/raw/hero-background-image-light.md b/docs/blocks/preview/raw/hero-background-image-light.md
deleted file mode 100644
index 37a3b027..00000000
--- a/docs/blocks/preview/raw/hero-background-image-light.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Hero background image light
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="hero-background-image-light" />
diff --git a/docs/blocks/preview/raw/hero-background-image.md b/docs/blocks/preview/raw/hero-background-image.md
deleted file mode 100644
index 27f66db2..00000000
--- a/docs/blocks/preview/raw/hero-background-image.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Hero background image
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="hero-background-image" />
diff --git a/docs/blocks/preview/raw/hero-basic.md b/docs/blocks/preview/raw/hero-basic.md
deleted file mode 100644
index e7c1f4ca..00000000
--- a/docs/blocks/preview/raw/hero-basic.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Basic hero
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="hero-basic" />
diff --git a/docs/blocks/preview/raw/hero-center.md b/docs/blocks/preview/raw/hero-center.md
deleted file mode 100644
index 4498b7e5..00000000
--- a/docs/blocks/preview/raw/hero-center.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Hero center
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="hero-center" />
diff --git a/docs/blocks/preview/raw/hero-fullbleed.md b/docs/blocks/preview/raw/hero-fullbleed.md
deleted file mode 100644
index a889212e..00000000
--- a/docs/blocks/preview/raw/hero-fullbleed.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Hero fullbleed
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="hero-fullbleed" />
diff --git a/docs/blocks/preview/raw/hero-image.md b/docs/blocks/preview/raw/hero-image.md
deleted file mode 100644
index 2bb13110..00000000
--- a/docs/blocks/preview/raw/hero-image.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Hero image
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="hero-image" />
diff --git a/docs/blocks/preview/raw/hero.md b/docs/blocks/preview/raw/hero.md
deleted file mode 100644
index c148fc46..00000000
--- a/docs/blocks/preview/raw/hero.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Hero
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="hero" />
diff --git a/docs/blocks/preview/raw/stats-3-statistics.md b/docs/blocks/preview/raw/stats-3-statistics.md
deleted file mode 100644
index a3337ccb..00000000
--- a/docs/blocks/preview/raw/stats-3-statistics.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: 3 statistics
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="stats-3-statistics" />
diff --git a/docs/blocks/preview/raw/stats-4-statistics.md b/docs/blocks/preview/raw/stats-4-statistics.md
deleted file mode 100644
index 37be9b6c..00000000
--- a/docs/blocks/preview/raw/stats-4-statistics.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: 4 statistics
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="stats-4-statistics" />
diff --git a/docs/blocks/preview/raw/stats-5-statistics.md b/docs/blocks/preview/raw/stats-5-statistics.md
deleted file mode 100644
index 50ccbff1..00000000
--- a/docs/blocks/preview/raw/stats-5-statistics.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: 5 statistics
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="stats-5-statistics" />
diff --git a/docs/blocks/preview/raw/stats-right-6-column.md b/docs/blocks/preview/raw/stats-right-6-column.md
deleted file mode 100644
index e98539e9..00000000
--- a/docs/blocks/preview/raw/stats-right-6-column.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Statistic right 6 column
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="stats-right-6-column" />
diff --git a/docs/blocks/preview/raw/stats-right-8-columns.md b/docs/blocks/preview/raw/stats-right-8-columns.md
deleted file mode 100644
index 9032cd18..00000000
--- a/docs/blocks/preview/raw/stats-right-8-columns.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Statistic right 8 columns
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="stats-right-8-columns" />
diff --git a/docs/blocks/preview/raw/stats.md b/docs/blocks/preview/raw/stats.md
deleted file mode 100644
index 3b68f6f2..00000000
--- a/docs/blocks/preview/raw/stats.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Stats
----
-
-<script setup>
-import BlockRaw from "../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="stats" />
diff --git a/docs/templates/block-templates/preview/raw/cards.md b/docs/templates/block-templates/preview/raw/cards.md
deleted file mode 100644
index 3d34464b..00000000
--- a/docs/templates/block-templates/preview/raw/cards.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Cards
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cards" />
diff --git a/docs/templates/block-templates/preview/raw/cta.md b/docs/templates/block-templates/preview/raw/cta.md
deleted file mode 100644
index ff7df237..00000000
--- a/docs/templates/block-templates/preview/raw/cta.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Call to action
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="cta" />
diff --git a/docs/templates/block-templates/preview/raw/feature.md b/docs/templates/block-templates/preview/raw/feature.md
deleted file mode 100644
index d30e7144..00000000
--- a/docs/templates/block-templates/preview/raw/feature.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Feature
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="feature" />
diff --git a/docs/templates/block-templates/preview/raw/filter.md b/docs/templates/block-templates/preview/raw/filter.md
deleted file mode 100644
index c93ab207..00000000
--- a/docs/templates/block-templates/preview/raw/filter.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Filter
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="filter" />
diff --git a/docs/templates/block-templates/preview/raw/form-all-types.md b/docs/templates/block-templates/preview/raw/form-all-types.md
deleted file mode 100644
index 0cbdb908..00000000
--- a/docs/templates/block-templates/preview/raw/form-all-types.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: All types
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-all-types" />
diff --git a/docs/templates/block-templates/preview/raw/form-basic-center.md b/docs/templates/block-templates/preview/raw/form-basic-center.md
deleted file mode 100644
index e9e42df4..00000000
--- a/docs/templates/block-templates/preview/raw/form-basic-center.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Basic center
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-basic-center" />
diff --git a/docs/templates/block-templates/preview/raw/form-basic-left.md b/docs/templates/block-templates/preview/raw/form-basic-left.md
deleted file mode 100644
index e5c8af65..00000000
--- a/docs/templates/block-templates/preview/raw/form-basic-left.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Basic left
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-basic-left" />
diff --git a/docs/templates/block-templates/preview/raw/form-basic-right.md b/docs/templates/block-templates/preview/raw/form-basic-right.md
deleted file mode 100644
index adaf52f6..00000000
--- a/docs/templates/block-templates/preview/raw/form-basic-right.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Basic right
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-basic-right" />
diff --git a/docs/templates/block-templates/preview/raw/form-fields-checkbox.md b/docs/templates/block-templates/preview/raw/form-fields-checkbox.md
deleted file mode 100644
index 85f18adb..00000000
--- a/docs/templates/block-templates/preview/raw/form-fields-checkbox.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form fields checkbox
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-checkbox" />
diff --git a/docs/templates/block-templates/preview/raw/form-fields-dates-quantities.md b/docs/templates/block-templates/preview/raw/form-fields-dates-quantities.md
deleted file mode 100644
index 5aa75603..00000000
--- a/docs/templates/block-templates/preview/raw/form-fields-dates-quantities.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form fields dates quantities
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-dates-quantities" />
diff --git a/docs/templates/block-templates/preview/raw/form-fields-file-upload.md b/docs/templates/block-templates/preview/raw/form-fields-file-upload.md
deleted file mode 100644
index 625c21e9..00000000
--- a/docs/templates/block-templates/preview/raw/form-fields-file-upload.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form fields file upload
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-file-upload" />
diff --git a/docs/templates/block-templates/preview/raw/form-fields-radio.md b/docs/templates/block-templates/preview/raw/form-fields-radio.md
deleted file mode 100644
index 7857b806..00000000
--- a/docs/templates/block-templates/preview/raw/form-fields-radio.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form fields radio
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-radio" />
diff --git a/docs/templates/block-templates/preview/raw/form-fields-selects.md b/docs/templates/block-templates/preview/raw/form-fields-selects.md
deleted file mode 100644
index 8bf6dcef..00000000
--- a/docs/templates/block-templates/preview/raw/form-fields-selects.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form fields selects
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-selects" />
diff --git a/docs/templates/block-templates/preview/raw/form-fields-textarea.md b/docs/templates/block-templates/preview/raw/form-fields-textarea.md
deleted file mode 100644
index bd98fe34..00000000
--- a/docs/templates/block-templates/preview/raw/form-fields-textarea.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form fields textarea
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-fields-textarea" />
diff --git a/docs/templates/block-templates/preview/raw/form-full-width-only.md b/docs/templates/block-templates/preview/raw/form-full-width-only.md
deleted file mode 100644
index 090f1aa5..00000000
--- a/docs/templates/block-templates/preview/raw/form-full-width-only.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Full-width only
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-full-width-only" />
diff --git a/docs/templates/block-templates/preview/raw/form-multi-step.md b/docs/templates/block-templates/preview/raw/form-multi-step.md
deleted file mode 100644
index e422f40c..00000000
--- a/docs/templates/block-templates/preview/raw/form-multi-step.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form multi-step
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-multi-step" />
diff --git a/docs/templates/block-templates/preview/raw/form-paired-only.md b/docs/templates/block-templates/preview/raw/form-paired-only.md
deleted file mode 100644
index 05e7da33..00000000
--- a/docs/templates/block-templates/preview/raw/form-paired-only.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Paired only
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-paired-only" />
diff --git a/docs/templates/block-templates/preview/raw/form-sections-single.md b/docs/templates/block-templates/preview/raw/form-sections-single.md
deleted file mode 100644
index 71b10140..00000000
--- a/docs/templates/block-templates/preview/raw/form-sections-single.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Sections single
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-sections-single" />
diff --git a/docs/templates/block-templates/preview/raw/form-sections-three.md b/docs/templates/block-templates/preview/raw/form-sections-three.md
deleted file mode 100644
index 433181b2..00000000
--- a/docs/templates/block-templates/preview/raw/form-sections-three.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Sections three
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-sections-three" />
diff --git a/docs/templates/block-templates/preview/raw/form-sections-two.md b/docs/templates/block-templates/preview/raw/form-sections-two.md
deleted file mode 100644
index dd51ab18..00000000
--- a/docs/templates/block-templates/preview/raw/form-sections-two.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Sections two
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form-sections-two" />
diff --git a/docs/templates/block-templates/preview/raw/form.md b/docs/templates/block-templates/preview/raw/form.md
deleted file mode 100644
index 7baf2506..00000000
--- a/docs/templates/block-templates/preview/raw/form.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="form" />
diff --git a/docs/templates/block-templates/preview/raw/header.md b/docs/templates/block-templates/preview/raw/header.md
deleted file mode 100644
index f1b3a3de..00000000
--- a/docs/templates/block-templates/preview/raw/header.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Page header
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="header" />
diff --git a/docs/templates/block-templates/preview/raw/hero.md b/docs/templates/block-templates/preview/raw/hero.md
deleted file mode 100644
index c6fb4197..00000000
--- a/docs/templates/block-templates/preview/raw/hero.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Hero
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="hero" />
diff --git a/docs/templates/block-templates/preview/raw/stats.md b/docs/templates/block-templates/preview/raw/stats.md
deleted file mode 100644
index f4c39dbb..00000000
--- a/docs/templates/block-templates/preview/raw/stats.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Stats
----
-
-<script setup>
-import BlockRaw from "../../../../.vitepress/components/components/BlockRaw.vue";
-</script>
-
-<BlockRaw block-key="stats" />
diff --git a/docs/templates/page-templates/preview/raw/about-us.md b/docs/templates/page-templates/preview/raw/about-us.md
deleted file mode 100644
index 8155afde..00000000
--- a/docs/templates/page-templates/preview/raw/about-us.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: About us
----
-
-<script setup>
-import TemplateRaw from "../../../../.vitepress/components/components/TemplateRaw.vue";
-</script>
-
-<TemplateRaw template-key="about-us" />
diff --git a/docs/templates/page-templates/preview/raw/application-management.md b/docs/templates/page-templates/preview/raw/application-management.md
deleted file mode 100644
index d29e4034..00000000
--- a/docs/templates/page-templates/preview/raw/application-management.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Application management
----
-
-<script setup>
-import TemplateRaw from "../../../../.vitepress/components/components/TemplateRaw.vue";
-</script>
-
-<TemplateRaw template-key="application-management" />
diff --git a/docs/templates/page-templates/preview/raw/blog.md b/docs/templates/page-templates/preview/raw/blog.md
deleted file mode 100644
index a1322942..00000000
--- a/docs/templates/page-templates/preview/raw/blog.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Blog
----
-
-<script setup>
-import TemplateRaw from "../../../../.vitepress/components/components/TemplateRaw.vue";
-</script>
-
-<TemplateRaw template-key="blog" />
diff --git a/docs/templates/page-templates/preview/raw/catalogue.md b/docs/templates/page-templates/preview/raw/catalogue.md
deleted file mode 100644
index e8959fed..00000000
--- a/docs/templates/page-templates/preview/raw/catalogue.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Catalogue
----
-
-<script setup>
-import TemplateRaw from "../../../../.vitepress/components/components/TemplateRaw.vue";
-</script>
-
-<TemplateRaw template-key="catalogue" />
diff --git a/docs/templates/page-templates/preview/raw/form-page.md b/docs/templates/page-templates/preview/raw/form-page.md
deleted file mode 100644
index 782d40f9..00000000
--- a/docs/templates/page-templates/preview/raw/form-page.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Form page
----
-
-<script setup>
-import TemplateRaw from "../../../../.vitepress/components/components/TemplateRaw.vue";
-</script>
-
-<TemplateRaw template-key="form-page" />
diff --git a/docs/templates/page-templates/preview/raw/landing.md b/docs/templates/page-templates/preview/raw/landing.md
deleted file mode 100644
index c56af50b..00000000
--- a/docs/templates/page-templates/preview/raw/landing.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Landing page
----
-
-<script setup>
-import TemplateRaw from "../../../../.vitepress/components/components/TemplateRaw.vue";
-</script>
-
-<TemplateRaw template-key="landing" />
diff --git a/docs/templates/page-templates/preview/raw/multi-step-form.md b/docs/templates/page-templates/preview/raw/multi-step-form.md
deleted file mode 100644
index dfaa30bb..00000000
--- a/docs/templates/page-templates/preview/raw/multi-step-form.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-layout: bare
-title: Multi-step form
----
-
-<script setup>
-import TemplateRaw from "../../../../.vitepress/components/components/TemplateRaw.vue";
-</script>
-
-<TemplateRaw template-key="multi-step-form" />