srcdev-nuxt-components 9.4.11 → 9.5.0

package/.vscode/srcdev-component-input-radio.code-snippets

@@ -0,0 +1,58 @@
+{
+  "SRCDEV MultipleRadiobuttons Basic": {
+    "description": "MultipleRadiobuttons single-choice group (v-model + v-model:field-data)",
+    "scope": "vue,html",
+    "body": [
+      "<MultipleRadiobuttons",
+      "  v-model=\"${1:state.choice}\"",
+      "  v-model:field-data=\"${2:choiceOptions}\"",
+      "  name=\"${3:choice}\"",
+      "  legend=\"${4:Legend}\"",
+      "  :required=\"${5:true}\"",
+      "  :error-message=\"${6:errors.choice ?? ''}\"",
+      "  :field-has-error=\"${7:Boolean(errors.choice)}\"",
+      "  options-layout=\"${8|equal-widths,inline,block|}\"",
+      ">",
+      "  <template #descriptionText>${9:Help text}</template>",
+      "</MultipleRadiobuttons>$0"
+    ]
+  },
+  "SRCDEV MultipleRadiobuttons Buttons": {
+    "description": "MultipleRadiobuttons rendered as button/pill options",
+    "scope": "vue,html",
+    "body": [
+      "<MultipleRadiobuttons",
+      "  v-model=\"${1:state.choice}\"",
+      "  v-model:field-data=\"${2:choiceOptions}\"",
+      "  name=\"${3:choice}\"",
+      "  legend=\"${4:Legend}\"",
+      "  :error-message=\"${5:''}\"",
+      "  :is-button=\"true\"",
+      "  :is-pill=\"${6|true,false|}\"",
+      "  options-layout=\"inline\"",
+      "/>$0"
+    ]
+  },
+  "SRCDEV MultipleRadiobuttons Options Data": {
+    "description": "IFormMultipleOptions ref for MultipleRadiobuttons field-data",
+    "scope": "typescript,vue",
+    "body": [
+      "const ${1:choiceOptions} = ref<IFormMultipleOptions>({",
+      "  data: [",
+      "    { id: \"${2:a}\", name: \"${3:choice}\", value: \"${2:a}\", label: \"${4:Option A}\" },",
+      "    { id: \"${5:b}\", name: \"${3:choice}\", value: \"${5:b}\", label: \"${6:Option B}\" },",
+      "  ],",
+      "});$0"
+    ]
+  },
+  "SRCDEV MultipleRadiobuttons CSS Override": {
+    "description": "CSS override scaffold for MultipleRadiobuttons tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --multiple-radiobuttons-gap: $2;",
+      "  --multiple-radiobuttons-margin-block-start: $3;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-layout-grid-by-cols.code-snippets

@@ -0,0 +1,46 @@
+{
+  "SRCDEV LayoutGridByCols Basic": {
+    "description": "LayoutGridByCols: N equal columns from named slots, collapsing to one column below a width",
+    "scope": "vue,html",
+    "body": [
+      "<LayoutGridByCols :column-count=\"${1:3}\" gap=\"${2:1.6rem}\">",
+      "  <template #${3:item-0}>$0</template>",
+      "</LayoutGridByCols>"
+    ]
+  },
+  "SRCDEV LayoutGridByCols Data": {
+    "description": "LayoutGridByCols filled from an array with dynamic slot names",
+    "scope": "vue,html",
+    "body": [
+      "<LayoutGridByCols :column-count=\"${1:3}\">",
+      "  <template v-for=\"(${2:item}, i) in ${3:items}\" #[`item-${i}`] :key=\"i\">",
+      "    $0",
+      "  </template>",
+      "</LayoutGridByCols>"
+    ]
+  },
+  "SRCDEV LayoutGridByCols Section": {
+    "description": "LayoutGridByCols as a labelled section landmark",
+    "scope": "vue,html",
+    "body": [
+      "<LayoutGridByCols tag=\"section\" label=\"${1:Section name}\" :column-count=\"${2:3}\">",
+      "  <template #${3:item-0}>$0</template>",
+      "</LayoutGridByCols>"
+    ]
+  },
+  "SRCDEV LayoutGridByCols Tokens": {
+    "description": "LayoutGridByCols token overrides (leave the matching props off)",
+    "scope": "css",
+    "body": [
+      ".${1:my-grid} {",
+      "  --layout-grid-by-cols-column-count: ${2:2};",
+      "  --layout-grid-by-cols-gap: ${3:1.6rem};",
+      "  --layout-grid-by-cols-single-col-below: ${4:480px};",
+      "",
+      "  @media (width >= ${5:1024px}) {",
+      "    --layout-grid-by-cols-column-count: ${6:4};",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-link-text.code-snippets

@@ -0,0 +1,30 @@
+{
+  "SRCDEV LinkText": {
+    "description": "LinkText inline link",
+    "scope": "vue,html",
+    "body": [
+      "<LinkText to=\"$1\" link-text=\"$2\" />"
+    ]
+  },
+  "SRCDEV LinkText With Icon": {
+    "description": "LinkText with a trailing icon",
+    "scope": "vue,html",
+    "body": [
+      "<LinkText to=\"$1\" link-text=\"$2\"${3: external target=\"_blank\"}>",
+      "  <template #right><Icon name=\"${4:lucide:arrow-right}\" /></template>",
+      "</LinkText>"
+    ]
+  },
+  "SRCDEV LinkText CSS Override": {
+    "description": "CSS override scaffold for LinkText tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --link-text-colour: $2;",
+      "  --link-text-colour-hover: $3;",
+      "  --link-text-decoration: $4underline;",
+      "  --link-text-decoration-hover: $5none;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-opening-hours.code-snippets

@@ -0,0 +1,40 @@
+{
+  "SRCDEV OpeningHours Basic": {
+    "description": "OpeningHours — weekly opening hours table",
+    "scope": "vue,html",
+    "body": [
+      "<OpeningHours :days=\"${1:openingDays}\" time-zone=\"${2:Europe/London}\" />"
+    ]
+  },
+  "SRCDEV OpeningHours Full": {
+    "description": "OpeningHours with exceptions, 12-hour display and JSON-LD",
+    "scope": "vue,html",
+    "body": [
+      "<OpeningHours",
+      "  :days=\"${1:openingDays}\"",
+      "  :exceptions=\"${2:specialDates}\"",
+      "  :hour12=\"${3|false,true|}\"",
+      "  time-zone=\"${4:Europe/London}\"",
+      "  :structured-data=\"{ type: '${5:LocalBusiness}', name: '${6:Business name}', id: '${7:https://example.com/#business}' }\"",
+      "/>"
+    ]
+  },
+  "SRCDEV OpeningHours Data": {
+    "description": "OpeningHours days + exceptions (import type { OpeningDay, OpeningException } from \"srcdev-nuxt-components\")",
+    "scope": "typescript,vue",
+    "body": [
+      "const ${1:openingDays}: OpeningDay[] = [",
+      "  { day: 0, sessions: [{ opens: \"${2:09:00}\", closes: \"${3:17:30}\" }] }, // Monday",
+      "  { day: 1, sessions: [{ opens: \"$2\", closes: \"$3\" }] },",
+      "  { day: 2, sessions: [{ opens: \"$2\", closes: \"$3\" }] },",
+      "  { day: 3, sessions: [{ opens: \"$2\", closes: \"$3\" }] },",
+      "  { day: 4, sessions: [{ opens: \"$2\", closes: \"$3\" }] },",
+      "  { day: 5, sessions: [{ opens: \"$2\", closes: \"$3\" }] }, // Saturday; Sunday omitted = closed",
+      "];",
+      "",
+      "const ${4:specialDates}: OpeningException[] = [",
+      "  { from: \"${5:2026-12-25}\", to: \"${6:2026-12-26}\", label: \"${7:Christmas}\" },",
+      "];"
+    ]
+  }
+}

package/.vscode/srcdev-component-page-hero-highlights.code-snippets

@@ -0,0 +1,37 @@
+{
+  "SRCDEV PageHeroHighlights": {
+    "description": "PageHeroHighlights: header zone, straddling highlights strip, content panel",
+    "scope": "vue,html",
+    "body": [
+      "<PageHeroHighlights tag=\"section\" content-align=\"${1|center,start|}\">",
+      "  <template #header=\"{ headingId }\">",
+      "    <PageHeroHighlightsHeader>",
+      "      <template #start><h1 :id=\"headingId\">$2</h1></template>",
+      "      <template #end>$3</template>",
+      "    </PageHeroHighlightsHeader>",
+      "  </template>",
+      "  <template #highlights>",
+      "    <div class=\"page-hero-highlights-item\">",
+      "      <p class=\"page-hero-highlights-item-title\">$4</p>",
+      "      <p class=\"page-hero-highlights-item-body\">$5</p>",
+      "    </div>",
+      "  </template>",
+      "  <template #content>",
+      "    $6",
+      "  </template>",
+      "</PageHeroHighlights>"
+    ]
+  },
+  "SRCDEV PageHeroHighlights CSS Override": {
+    "description": "CSS override scaffold for PageHeroHighlights tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --page-hero-highlights-header-background: $2;",
+      "  --page-hero-highlights-content-background: $3;",
+      "  --page-hero-highlights-item-background: $4;",
+      "  --page-hero-highlights-max-width: $5;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-page-row.code-snippets

@@ -0,0 +1,47 @@
+{
+  "SRCDEV PageRow": {
+    "description": "PageRow layout row (children sit on the content track by default)",
+    "scope": "vue,html",
+    "body": [
+      "<PageRow tag=\"${1|div,section,article,header,footer,main,nav|}\" variant=\"${2|content,full,popout,inset-content|}\">",
+      "  $3",
+      "</PageRow>"
+    ]
+  },
+  "SRCDEV PageRow Section With Heading": {
+    "description": "PageRow as a <section> with its heading wired to aria-labelledby via the heading-id slot prop",
+    "scope": "vue,html",
+    "body": [
+      "<PageRow tag=\"section\" variant=\"${1|content,full,popout,inset-content|}\">",
+      "  <template #default=\"{ headingId }\">",
+      "    <h2 :id=\"headingId\">$2</h2>",
+      "    $3",
+      "  </template>",
+      "</PageRow>"
+    ]
+  },
+  "SRCDEV PageRow Nested Breakout": {
+    "description": "Outer PageRow with a nested row that breaks out to a wider track, optionally bleeding to one edge",
+    "scope": "vue,html",
+    "body": [
+      "<PageRow tag=\"section\">",
+      "  $1",
+      "  <PageRow variant=\"${2|popout,full,content,inset-content|}\"${3: align=\"start\"}>",
+      "    $4",
+      "  </PageRow>",
+      "</PageRow>"
+    ]
+  },
+  "SRCDEV PageRow CSS Override": {
+    "description": "CSS override scaffold for PageRow track tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --page-row-minimum-content-padding: $2;",
+      "  --page-row-popout-max-width: $3;",
+      "  --page-row-content-max-width: $4;",
+      "  --page-row-inset-content-max-width: $5;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-pending-effect.code-snippets

@@ -0,0 +1,26 @@
+{
+  "SRCDEV PendingEffect Button": {
+    "description": "InputButton with the PendingEffect animated border while busy",
+    "scope": "vue,html",
+    "body": [
+      "<InputButton",
+      "  button-text=\"$1Submit\"",
+      "  type=\"${2|submit,button|}\"",
+      "  has-pending-effect",
+      "  :is-pending=\"$3isSubmitting\"",
+      "/>"
+    ]
+  },
+  "SRCDEV PendingEffect CSS Override": {
+    "description": "CSS override scaffold for PendingEffect tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --pending-effect-line-color: $2;",
+      "  --pending-effect-line-thickness: $3;",
+      "  --pending-effect-blur-size: $4;",
+      "  --pending-effect-animation-duration: $5;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-price-list.code-snippets

@@ -0,0 +1,37 @@
+{
+  "SRCDEV PriceList Basic": {
+    "description": "PriceList — columns of description/price rows",
+    "scope": "vue,html",
+    "body": [
+      "<PriceList :price-list-data=\"${1:priceListData}\" />"
+    ]
+  },
+  "SRCDEV PriceList Full": {
+    "description": "PriceList with heading level, from label and class passthrough",
+    "scope": "vue,html",
+    "body": [
+      "<PriceList",
+      "  :price-list-data=\"${1:priceListData}\"",
+      "  heading-tag=\"${2|h2,h3,h4,h5,h6|}\"",
+      "  from-label=\"${3:from}\"",
+      "  :style-class-passthrough=\"['${4:my-price-list}']\"",
+      "/>"
+    ]
+  },
+  "SRCDEV PriceList Data": {
+    "description": "PriceList data array (import type { PriceListData } from \"srcdev-nuxt-components\")",
+    "scope": "typescript,vue",
+    "body": [
+      "const ${1:priceListData}: PriceListData[] = [",
+      "  {",
+      "    headingtext: \"${2:Cutting & Styling}\",",
+      "    headingIcon: \"${3:lucide:sparkles}\",",
+      "    items: [",
+      "      { description: \"${4:Cut & Blow Dry}\", price: \"${5:£45}\" },",
+      "      { description: \"${6:Balayage}\", price: \"${7:£95}\", from: true },",
+      "    ],",
+      "  },",
+      "];"
+    ]
+  }
+}

package/.vscode/srcdev-component-pricing-card.code-snippets

@@ -35,7 +35,7 @@
       "  @select=\"$8handleSelect\"",
       ">",
       "  <template #cta=\"{ ctaText, isDisabled, onSelect }\">",
-      "    <InputButtonCore",
+      "    <InputButton",
       "      :button-text=\"ctaText\"",
       "      variant=\"$9primary\"",
       "      :readonly=\"isDisabled\"",
@@ -91,7 +91,7 @@
       "  @select=\"$7handleSelect\"",
       ">",
       "  <template #cta=\"{ ctaText, isDisabled, onSelect }\">",
-      "    <InputButtonCore",
+      "    <InputButton",
       "      :button-text=\"ctaText\"",
       "      variant=\"$8secondary\"",
       "      theme=\"$9default\"",

package/.vscode/srcdev-component-profile-section.code-snippets

@@ -0,0 +1,36 @@
+{
+  "SRCDEV ProfileSection": {
+    "description": "ProfileSection with a heading wired to aria-labelledby and numbered info blocks",
+    "scope": "vue,html",
+    "body": [
+      "<ProfileSection",
+      "  tag=\"section\"",
+      "  :profile-picture=\"{ src: '$1', alt: '$2' }\"",
+      ">",
+      "  <template #eyebrowText>",
+      "    <EyebrowText text-content=\"$3\" />",
+      "  </template>",
+      "  <template #heroText=\"{ headingId }\">",
+      "    <HeroText :id=\"headingId\" tag=\"h2\" :text-content=\"[{ text: '$4' }]\" />",
+      "  </template>",
+      "  <template #profile-info-1>",
+      "    <p>$5</p>",
+      "  </template>",
+      "  <template #profile-info-2>",
+      "    <p>$6</p>",
+      "  </template>",
+      "</ProfileSection>"
+    ]
+  },
+  "SRCDEV ProfileSection CSS Override": {
+    "description": "CSS override scaffold for ProfileSection tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --profile-section-picture-width: $2;",
+      "  --profile-section-gap-wide: $3;",
+      "  --profile-section-picture-border-radius: $4;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-samaritan-prompt.code-snippets

@@ -0,0 +1,60 @@
+{
+  "SRCDEV SamaritanPrompt Basic": {
+    "description": "SamaritanPrompt — loops plain-string messages with one effect",
+    "scope": "vue,html",
+    "body": [
+      "<SamaritanPrompt :messages=\"[${1:'Can you hear me?', 'Surveillance active'}]\" />"
+    ]
+  },
+  "SRCDEV SamaritanPrompt Full": {
+    "description": "SamaritanPrompt with effect, timings, cursor slot and class passthrough",
+    "scope": "vue,html",
+    "body": [
+      "<SamaritanPrompt",
+      "  :messages=\"${1:messages}\"",
+      "  effect=\"${2|typewriter,word-pulse|}\"",
+      "  :type-speed=\"${3:80}\"",
+      "  :delete-speed=\"${4:40}\"",
+      "  :hold-duration=\"${5:2000}\"",
+      "  :pause-duration=\"${6:500}\"",
+      "  :word-duration=\"${7:1200}\"",
+      "  :fade-duration=\"${8:400}\"",
+      "  :hide-cursor-in-cycle=\"${9|true,false|}\"",
+      "  :style-class-passthrough=\"['${10:my-prompt}']\"",
+      ">",
+      "  <template #cursor>${11:▲}</template>",
+      "</SamaritanPrompt>"
+    ]
+  },
+  "SRCDEV SamaritanPromptMixed": {
+    "description": "SamaritanPromptMixed — per-message effect and timing",
+    "scope": "vue,html",
+    "body": [
+      "<SamaritanPromptMixed",
+      "  :message-configs=\"${1:messageConfigs}\"",
+      "  :intro-delay=\"${2:2000}\"",
+      "  :hide-cursor-in-cycle=\"${3|true,false|}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SamaritanPromptMixed Data": {
+    "description": "SamaritanPromptMixed messages (import type { SamaritanPromptMessageConfig } from \"srcdev-nuxt-components\")",
+    "scope": "typescript,vue",
+    "body": [
+      "const ${1:messageConfigs}: SamaritanPromptMessageConfig[] = [",
+      "  { text: \"${2:Good evening}\", effect: \"typewriter\", holdDuration: ${3:3500} },",
+      "  { text: \"${4:Stand by}\", effect: \"word-pulse\", wordDuration: ${5:2500} },",
+      "];"
+    ]
+  },
+  "SRCDEV SamaritanPrompt Tokens": {
+    "description": "SamaritanPrompt / SamaritanPromptMixed CSS token overrides",
+    "scope": "css,vue",
+    "body": [
+      "--samaritan-prompt-font-size: ${1:2rem};",
+      "--samaritan-prompt-text-colour: ${2:var(--theme-text)};",
+      "--samaritan-prompt-underline-colour: ${3:var(--theme-text)};",
+      "--samaritan-prompt-cursor-colour: ${4:#cc0000};"
+    ]
+  }
+}

package/.vscode/srcdev-component-scroll-reveal-frame.code-snippets

@@ -0,0 +1,36 @@
+{
+  "SRCDEV ScrollRevealFrame Basic": {
+    "description": "ScrollRevealFrame: scroll-driven parallax clipping frame for any slot content",
+    "scope": "vue,html",
+    "body": [
+      "<ScrollRevealFrame frame-height=\"${1:540px}\" parallax-offset=\"${2:36rem}\">",
+      "  $0",
+      "</ScrollRevealFrame>"
+    ]
+  },
+  "SRCDEV ScrollRevealFrame CSS Sized": {
+    "description": "ScrollRevealFrame sized from CSS tokens (no sizing props, so --scroll-reveal-frame-* apply)",
+    "scope": "vue,html",
+    "body": [
+      "<ScrollRevealFrame style-class-passthrough=\"${1:my-reveal-frame}\">",
+      "  $0",
+      "</ScrollRevealFrame>"
+    ]
+  },
+  "SRCDEV ScrollRevealFrame Tokens": {
+    "description": "ScrollRevealFrame responsive token overrides",
+    "scope": "css",
+    "body": [
+      ".${1:my-reveal-frame} {",
+      "  --scroll-reveal-frame-height: ${2:320px};",
+      "  --scroll-reveal-frame-parallax-offset: ${3:20rem};",
+      "  --scroll-reveal-frame-radius: ${4:0px};",
+      "",
+      "  @media (width >= 768px) {",
+      "    --scroll-reveal-frame-height: ${5:540px};",
+      "    --scroll-reveal-frame-parallax-offset: ${6:36rem};",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-scroll-reveal-image.code-snippets

@@ -0,0 +1,46 @@
+{
+  "SRCDEV ScrollRevealImage Basic": {
+    "description": "ScrollRevealImage: single NuxtImg with scroll-driven parallax reveal",
+    "scope": "vue,html",
+    "body": [
+      "<ScrollRevealImage",
+      "  src=\"${1:/images/hero.jpg}\"",
+      "  alt=\"${2:Description of the image}\"",
+      "  :img-width=\"${3:1280}\"",
+      "  :img-height=\"${4:1920}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV ScrollRevealImage Sized": {
+    "description": "ScrollRevealImage with frame size, travel, radius and horizontal focal point",
+    "scope": "vue,html",
+    "body": [
+      "<ScrollRevealImage",
+      "  src=\"${1:/images/hero.jpg}\"",
+      "  alt=\"${2:Description of the image}\"",
+      "  :img-width=\"${3:1280}\"",
+      "  :img-height=\"${4:1920}\"",
+      "  frame-height=\"${5:540px}\"",
+      "  parallax-offset=\"${6:36rem}\"",
+      "  radius=\"${7:1.6rem}\"",
+      "  focal-x=\"${8:50%}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV ScrollRevealImage Tokens": {
+    "description": "ScrollRevealImage responsive crop/frame token overrides (leave the matching props off)",
+    "scope": "css",
+    "body": [
+      ".${1:my-section} {",
+      "  --scroll-reveal-frame-height: ${2:320px};",
+      "  --scroll-reveal-image-focal-x: ${3:50%};",
+      "  --scroll-reveal-image-focal-y: ${4:40%};",
+      "",
+      "  @media (width >= 768px) {",
+      "    --scroll-reveal-frame-height: ${5:540px};",
+      "    --scroll-reveal-image-focal-y: ${6:0%};",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-services-card.code-snippets

@@ -5,7 +5,7 @@
     "body": [
       "<ServicesCard :service-data=\"$1service\">",
       "  <template #actions=\"{ serviceData }\">",
-      "    <InputButtonCore",
+      "    <InputButton",
       "      variant=\"secondary\"",
       "      :button-text=\"`More about ${serviceData.title}`\"",
       "      :href=\"`/services/${serviceData.slug}`\"",
@@ -13,7 +13,7 @@
       "      <template #right>",
       "        <Icon name=\"mdi:arrow-right\" class=\"icon\" />",
       "      </template>",
-      "    </InputButtonCore>",
+      "    </InputButton>",
       "  </template>",
       "</ServicesCard>"
     ]
@@ -35,7 +35,7 @@
       "  :hero-config=\"{ tag: '$3h3', fontSize: '$4title' }\"",
       ">",
       "  <template #actions=\"{ serviceData }\">",
-      "    <InputButtonCore variant=\"secondary\" button-text=\"$5Enquire\" :href=\"`/services/${serviceData.slug}`\" />",
+      "    <InputButton variant=\"secondary\" button-text=\"$5Enquire\" :href=\"`/services/${serviceData.slug}`\" />",
       "  </template>",
       "</ServicesCard>"
     ]
@@ -54,7 +54,7 @@
       "    <span>From {{ serviceData.price }}</span>",
       "  </template>",
       "  <template #actions=\"{ serviceData }\">",
-      "    <InputButtonCore variant=\"secondary\" button-text=\"$2Enquire\" :href=\"`/services/${serviceData.slug}`\" />",
+      "    <InputButton variant=\"secondary\" button-text=\"$2Enquire\" :href=\"`/services/${serviceData.slug}`\" />",
       "  </template>",
       "</ServicesCard>"
     ]

package/.vscode/srcdev-component-services-grids.code-snippets

@@ -0,0 +1,36 @@
+{
+  "SRCDEV ServicesCardGrid": {
+    "description": "ServicesCardGrid: auto-fit grid of ServicesCard with generated CTA buttons",
+    "scope": "vue,html",
+    "body": [
+      "<ServicesCardGrid",
+      "  :services-data=\"$1services\"",
+      "  href-base=\"${2:/services/}\"",
+      "  button-text-prefix=\"${3:Enquire about}\"",
+      "  :hero-config=\"{ tag: '${4|h3,h2,h4|}', fontSize: '${5|heading,title,subheading|}' }\"",
+      "/>"
+    ]
+  },
+  "SRCDEV ServiceSummaryGrid": {
+    "description": "ServiceSummaryGrid: stacked ServiceSummary rows with an optional custom link slot",
+    "scope": "vue,html",
+    "body": [
+      "<ServiceSummaryGrid :services-data=\"$1services\" use-alternate-reverse alignment=\"${2|center,start,end|}\">",
+      "  <template #summary-link=\"{ serviceData }\">",
+      "    <LinkText :to=\"`/services/${serviceData.slug}`\" :link-text=\"serviceData.title\" />",
+      "  </template>",
+      "</ServiceSummaryGrid>"
+    ]
+  },
+  "SRCDEV Services Grids CSS Override": {
+    "description": "CSS override scaffold for the services grid tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --services-card-grid-column-min-width: $2;",
+      "  --services-card-grid-gap: $3;",
+      "  --service-summary-grid-row-gap: $4;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-site-navigation.code-snippets

@@ -1,30 +1,38 @@
 {
-  "SRCDEV SiteNavigation Basic": {
-    "description": "SiteNavigation horizontal nav with sliding active/hover indicator",
+  "SRCDEV SiteNavigation": {
+    "description": "SiteNavigation: horizontal links that collapse to a burger panel when they don't fit",
     "scope": "vue,html",
     "body": [
-      "<SiteNavigation :nav-item-data=\"$1navData\" nav-align=\"${2:left}\" />"
+      "<SiteNavigation",
+      "  :nav-item-data=\"$1navItems\"",
+      "  nav-align=\"${2|left,center,right|}\"",
+      "  aria-label=\"${3:Site navigation}\"",
+      "/>"
     ]
   },
-  "SRCDEV SiteNavigation Localised": {
-    "description": "SiteNavigation with a localised aria-label",
-    "scope": "vue,html",
-    "body": [
-      "<SiteNavigation :nav-item-data=\"$1navData\" aria-label=\"${2:Site navigation}\" />"
-    ]
-  },
-  "SRCDEV SiteNavigation Nav Data Script": {
-    "description": "navItemData for SiteNavigation",
-    "scope": "typescript,vue",
+  "SRCDEV SiteNavigation Items": {
+    "description": "NavItemData object for SiteNavigation",
+    "scope": "javascript,typescript",
     "body": [
-      "import type { NavItemData } from \"srcdev-nuxt-components\";",
-      "",
-      "const $1navData: NavItemData = {",
+      "const $1navItems: NavItemData = {",
       "  main: [",
-      "    { text: \"$2Home\", href: \"$3/\" },",
-      "    { text: \"$4About\", href: \"$5/about\" },",
+      "    { text: \"$2Home\", href: \"/\" },",
+      "    { text: \"$3About\", href: \"/about\" },",
       "  ],",
       "};"
     ]
+  },
+  "SRCDEV SiteNavigation CSS Override": {
+    "description": "CSS override scaffold for SiteNavigation tokens (backdrop tokens go on :root)",
+    "scope": "css",
+    "body": [
+      ".$1site-header {",
+      "  --site-nav-link-color: $2;",
+      "  --site-nav-link-hover-color: $3;",
+      "  --site-nav-decorator-indicator-color: $4;",
+      "  --site-nav-panel-bg: $5;",
+      "  --site-nav-burger-color: $6;",
+      "}"
+    ]
   }
 }