srcdev-nuxt-components 9.4.9 → 9.4.10

package/.claude/skills/components/wipe-away-vertical.md

@@ -0,0 +1,98 @@
+---
+name: WipeAwayVertical
+description: WipeAwayVertical scroll-driven vertical wipe-away effect — props, dynamic slot API, CSS grid overlay mechanics, CSS tokens
+type: reference
+---
+
+# WipeAwayVertical
+
+## Overview
+
+`WipeAwayVertical` is a scroll-driven "wipe away" effect: a stack of sticky panels, each of
+which wipes away (via a `clip-path` animation) to reveal the panel underneath as the user
+scrolls past its paired tracking section. Pure CSS — built on `animation-timeline: view()`, a
+single-column CSS grid overlay, and no JavaScript scroll listeners or measurement at all.
+
+## How it works
+
+- The root is a single-column CSS grid. `.sticky-items-container` spans every row as an overlay
+  (`grid-row: 1 / -1`), holding `itemCount` `.sticky-item` panels stacked with descending
+  `z-index` (item 0 on top).
+- Each real `.scrolling-section` gets its own explicit grid row and acts as a scroll tracker —
+  its entry into the viewport drives the wipe-out animation of its paired sticky item via a
+  named `view-timeline`. Only `itemCount - 1` sections are rendered: the **last** sticky item
+  has nothing left to reveal, so it has no wipe animation (`animation-timeline: none`) and no
+  scrolling section of its own.
+- A `.leading-buffer` (fixed `100vh`) renders before the first scrolling section, so section 0
+  isn't already partway through its `entry` timeline range at page load, whatever content
+  precedes the component.
+- A `.trailing-buffer`, sized by `--wipe-away-vertical-trailing-buffer` (default `20vh`), renders
+  after the last real scrolling section — just enough room for the sticky container to release
+  cleanly once the final panel is fully revealed.
+- `.sticky-items-container` is sized by `--wipe-away-vertical-height` (default `100vh`) and
+  centers itself with `top: calc((100vh - var(--wipe-away-vertical-height, 100vh)) / 2)` — a
+  plain `calc()`, deliberately **not** a `transform: translateY()`. `position: sticky`'s
+  stick/release threshold is computed from the element's *untransformed* layout position, so a
+  transform-based visual shift releases the sticky panel early by the transformed amount,
+  leaving a gap after the last panel. `.scrolling-section`'s `view-timeline-inset` uses the same
+  `calc()` so the entry/exit range lines up with the same visual offset. (An earlier version
+  used `top: 50%` — also wrong, since a percentage `top` on `position: sticky` resolves against
+  the containing block's height, not the viewport, and this component's containing block is
+  deliberately many viewport-heights tall.)
+- Where `@supports not (animation-timeline: view())`, the grid/sticky/animation machinery is
+  dropped entirely: the root becomes `display: block`, the leading/trailing buffers and
+  scrolling sections are hidden, and the sticky items render as plain stacked panels in normal
+  document flow. No JS fallback, no opacity crossfade — just a flat, static stack.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tag` | `"div" \| "section" \| "main" \| "article" \| "aside"` | `"div"` | Root element tag. |
+| `itemCount` | `number` | — (required) | Number of sticky panels. Drives the sticky-item slot loop, `itemCount - 1` scrolling sections, per-item `z-index`, and `view-timeline` naming. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## Slots
+
+Dynamic named slots:
+
+| Slot | Description |
+|------|-------------|
+| `stickyItem-{n}` | Content for sticky panel `n`, indexed `0` to `itemCount - 1`. |
+| `scrollingItem-{n}` | Content (or an empty spacer) for scroll-tracking section `n`, indexed `0` to `itemCount - 2` only — the last panel has no scrolling section of its own. Typically an empty `100vh`-tall `div`; its height determines how much scroll distance that panel's wipe covers. |
+
+## Basic usage
+
+```vue
+<WipeAwayVertical :item-count="3">
+  <template #stickyItem-0><PanelOne /></template>
+  <template #stickyItem-1><PanelTwo /></template>
+  <template #stickyItem-2><PanelThree /></template>
+
+  <template #scrollingItem-0><div style="height: 100vh;"></div></template>
+  <template #scrollingItem-1><div style="height: 100vh;"></div></template>
+</WipeAwayVertical>
+```
+
+Leave the root's own `height` unset — it's a grid that sizes itself from its children (leading
+buffer + scrolling sections + trailing buffer). Setting an explicit height undersizes the root
+relative to its real content and releases the sticky panel mid-wipe.
+
+## CSS custom properties
+
+| Property | Default | Applies to |
+|----------|---------|------------|
+| `--wipe-away-vertical-height` | `100vh` | `.sticky-items-container` height (the visible sticky panel stack) |
+| `--wipe-away-vertical-border-radius` | `0.5rem` | `.sticky-item` corner radius |
+| `--wipe-away-vertical-animation-duration` | `1s` | `wipe-out` keyframe duration (view-timeline-supporting browsers) |
+| `--wipe-away-vertical-trailing-buffer` | `20vh` | height of the release cushion after the last real scrolling section |
+
+## Notes
+
+- Uses indexed dynamic slots (not the library's default named-dynamic-slot pattern) because
+  `itemCount` also drives non-slot logic: per-item `z-index`, grid rows, and the
+  `view-timeline-name`/`animation-timeline` CSS variable naming, not just the slot loop itself.
+- Reduced motion: the wipe animation is disabled under `prefers-reduced-motion: reduce`
+  (`animation: none; clip-path: none;`) — all panels render fully visible with no clip.
+- No hardcoded consumer-facing text — this is a purely structural/animation wrapper around
+  consumer-supplied slot content.

package/.claude/skills/icon-sets.md

@@ -21,7 +21,7 @@ The layer's `modules/icon-sets.ts` runs at dev/build time and logs an info messa
 | `bi` | `@iconify-json/bi` | NavigationItems (overflow caret) |
 | `bitcoin-icons` | `@iconify-json/bitcoin-icons` | Display components |
 | `gravity-ui` | `@iconify-json/gravity-ui` | NavigationItems (burger/ellipsis overflow) |
-| `ic` | `@iconify-json/ic` | CarouselBasic, CarouselFlip, CarouselInfinite, SliderGallery, CanvasSwitcher |
+| `ic` | `@iconify-json/ic` | CarouselFlip, SliderGallery, CanvasSwitcher |
 | `lucide` | `@iconify-json/lucide` | ColourFinder, TreatmentConsultant |
 | `material-symbols` | `@iconify-json/material-symbols` | form components |
 | `mdi` | `@iconify-json/mdi` | NavigationHorizontal, form components, ServicesCard |

package/.claude/skills/index.md

@@ -63,6 +63,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── composable-analytics.md           — useAnalytics: provider-agnostic trackEvent/page-view tracking (google-analytics only implemented), consent-gated, single call site for setup + firing events
 └── components/
     ├── alert-content-inner.md    — AlertContentInner: shared icon/body/dismiss molecule under AlertContent + AlertMaskedContent; app.config icon map (alertContent.icons + dismissIcon) covers all consumers
+    ├── alert-mask-core.md      — AlertMaskCore: SVG border/background mask sized to slotted content via ResizeObserver, config-prop-driven geometry/colour (no CSS token API)
     ├── animated-svg-text.md    — AnimatedSvgText: inline SVG stroke-draw-then-fill animation, text slot, CSS token API
     ├── accordian-core.md       — AccordianCore indexed dynamic slots (accordian-{n}-summary/icon/content), exclusive-open grouping
     ├── eyebrow-text.md         — EyebrowText props, usage patterns, styling
@@ -92,6 +93,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── grid-stack.md           — GridStack: CSS Grid z-axis stacking, slot API, z-order rules, sizing, video+overlay and image+text patterns
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, CSS tokens, browser support
     ├── scroll-reveal-image.md  — ScrollRevealImage: single-image parallax reveal, focalX, imgWidth/imgHeight, responsive frame height
+    ├── wipe-away-vertical.md   — WipeAwayVertical: scroll-driven vertical wipe-away effect, pure-CSS grid overlay (no JS), indexed dynamic slots, sticky-centering-via-calc gotcha, CSS tokens
     ├── marquee-scroller.md     — MarqueeScroller: infinite logo/badge scroller, per-item dynamic slots (marqueeData id), hover/focus/keyboard pause, reduced-motion, CSS tokens
     ├── rotating-carousel-image.md — RotatingCarouselImage: 3D rotating image carousel, scroll-parallax tilt, focus/keyboard/hover pause, reduced-motion, CSS tokens
     ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API
@@ -102,6 +104,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── decode-qr-code.md       — DecodeQrCode: file picker + drag-and-drop image decoder, shared results list, CSS override points
     ├── auto-grid.md            — AutoGrid: auto-fit responsive grid, $slots iteration, --auto-grid-min-col-size/gap tokens, semantic tag + aria
     ├── display-avatar.md       — DisplayAvatar: circular avatar with image/initials fallback, size variants, chip badge, icon slot, styleClassPassthrough
+    ├── display-theme-switch.md — DisplayThemeSwitch: system/light/dark picker wrapping TripleToggleSwitchCore, wired to useSettingsStore, labels/icons props, small sizing variant
     ├── card-core.md            — CardCore: generic card container, dynamic named slots as rows, 4 variants, blurred backdrop layer, full CSS token API
     ├── action-menu.md          — ActionMenu + ActionMenuItemCore: ellipsis trigger + anchored popover menu, indexed item-{n} slots, link/button items, full CSS token API
     ├── display-dialog.md       — DisplayDialog: native <dialog> overlay, 5 variants (dialog/modal/confirm/alert/fullscreen), useDialogControls integration, CSS token API
@@ -123,9 +126,15 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-tooltip-defined.md — DisplayTooltipDefined: structured title/body/action tooltip content with close button, composes DisplayTooltip
     ├── pop-over.md                — PopOver: generic anchor-positioned disclosure panel, consumer-supplied trigger/content slots, placement prop, CSS token API
     ├── input-text-core.md        — InputTextCore: native text/date/number input primitive, min/max pass-through (date-picker range), CSS token API; Variants section covers InputTextWithLabel/InputPasswordWithLabel/InputTextAsNumberWithLabel
+    ├── input-range-core.md       — InputRangeCore: native range-slider primitive, markers/datalist slots, dead --theme-form-range-accent-color token fixed, CSS token API; Variants section covers InputRangeDefault
     ├── entry-animation.md         — EntryAnimation: scroll-driven entry animation wrapper (slide-in/zoom-reveal/exit-blur utility classes), skipAnimation for above-the-fold loop items, reduced-motion handled at the CSS layer
     ├── column-flow-grid.md        — ColumnFlowGrid (renamed from MasonryGrid): CSS multi-column text-flow layout, named dynamic slots (no count/data prop), itemMinWidth/gap/unit sizing, CSS token API; not a true masonry, see "which one do I want?"
-    └── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize) absorbed from the now-retired MasonryGridOrdered; named dynamic slots, fixedWidth/justify, CSS token API
+    ├── masonry-grid.md            — MasonryGrid: real measured-height masonry (greedy shortest-column packing, animated resize) absorbed from the now-retired MasonryGridOrdered; named dynamic slots, fixedWidth/justify, CSS token API
+    ├── glowing-border.md          — GlowingBorder: animated conic-gradient glow border, 5 colour variants, tag prop, full CSS token API for width/radius/surface/duration/per-variant colour stops, reduced-motion guard
+    ├── section-parallax.md        — SectionParallax: CSS fixed-background parallax section, iOS Safari limitation, when to use vs ScrollRevealImage, CSS token API, reduced-motion guard
+    ├── container-glow.md          — ContainerGlow (renamed from ContainerGlowCore): pointer-proximity glow-border cards, named dynamic slots (one card per slot), config-prop-driven layout/interaction, full CSS token API for static visuals, reduced-motion guard
+    ├── dashboard-quad-grid.md      — DashboardQuadGrid (renamed from LayoutGridA): fixed 4-slot dashboard grid, container-query breakpoints, CSS token API
+    └── dashboard-stats-grid.md     — DashboardStatsGrid (renamed from LayoutGridB): top-row panel cluster + bottom-row panel strip dashboard grid, topRowSlot1ItemCount/bottomRowItemCount, CSS token API
 ```
 
 ## Skill file template

package/.vscode/css-custom-data.json

@@ -0,0 +1,38 @@
+{
+  "version": 1.1,
+  "properties": [
+    {
+      "name": "rule",
+      "status": "experimental",
+      "description": "CSS Gap Decorations: shorthand for row-rule/column-rule width, style, and colour — draws lines in the gaps between grid/flex items. Limited browser support as of 2026.",
+      "references": [
+        {
+          "name": "MDN Reference",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/rule"
+        }
+      ]
+    },
+    {
+      "name": "rule-break",
+      "status": "experimental",
+      "description": "CSS Gap Decorations: controls whether gap rule lines break at grid item intersections (e.g. \"intersection\", \"spanning-item\"). Limited browser support as of 2026.",
+      "references": [
+        {
+          "name": "MDN Reference",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/rule-break"
+        }
+      ]
+    },
+    {
+      "name": "rule-inset",
+      "status": "experimental",
+      "description": "CSS Gap Decorations: insets gap rule lines from the edges of the items they run between. Limited browser support as of 2026.",
+      "references": [
+        {
+          "name": "MDN Reference",
+          "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/rule-inset"
+        }
+      ]
+    }
+  ]
+}

package/.vscode/settings.json

@@ -36,6 +36,9 @@
       "editor.trimAutoWhitespace": "explicit"
     }
   },
+  // Recognises CSS properties too new for VS Code's built-in CSS language service (e.g. Gap Decorations' rule/rule-break/rule-inset)
+  "css.customData": [".vscode/css-custom-data.json"],
+
   // More info: https://open-props.style/#getting-started
   "cssvar.files": ["assets/styles/main.css"],
   "cssvar.ignore": [],

package/.vscode/srcdev-component-alert-mask-core.code-snippets

@@ -0,0 +1,31 @@
+{
+  "SRCDEV AlertMaskCore Basic": {
+    "description": "AlertMaskCore — SVG border/background mask sized to slotted content",
+    "scope": "vue,html",
+    "body": [
+      "<AlertMaskCore>",
+      "  $0",
+      "</AlertMaskCore>"
+    ]
+  },
+  "SRCDEV AlertMaskCore Custom Config": {
+    "description": "AlertMaskCore with custom colour/geometry config",
+    "scope": "vue,html",
+    "body": [
+      "<AlertMaskCore",
+      "  :config=\"{",
+      "    borderColour: '$1var(--theme-accent)',",
+      "    backgroundColour: '$2rgba(0, 0, 0, 0.3)',",
+      "    radiusLeft: $38,",
+      "    radiusRight: $44,",
+      "    borderLeft: $56,",
+      "    borderTop: $61,",
+      "    borderRight: $71,",
+      "    borderBottom: $81,",
+      "  }\"",
+      ">",
+      "  $0",
+      "</AlertMaskCore>"
+    ]
+  }
+}

package/.vscode/srcdev-component-carousel-flip.code-snippets

@@ -0,0 +1,41 @@
+{
+  "SRCDEV CarouselFlip Basic": {
+    "description": "CarouselFlip with looped item slots",
+    "scope": "vue,html",
+    "body": [
+      "<CarouselFlip :carousel-data-ids=\"$1items.map((item) => item.id)\">",
+      "  <template v-for=\"$2item in $1items\" :key=\"$2item.id\" #[$2item.id]>",
+      "    $3",
+      "  </template>",
+      "</CarouselFlip>"
+    ]
+  },
+  "SRCDEV CarouselFlip Overlay Controls": {
+    "description": "CarouselFlip with markers floating over the item track",
+    "scope": "vue,html",
+    "body": [
+      "<CarouselFlip",
+      "  :carousel-data-ids=\"$1items.map((item) => item.id)\"",
+      "  button-layout=\"overlay\"",
+      "  :use-flip-animation=\"true\"",
+      ">",
+      "  <template v-for=\"$2item in $1items\" :key=\"$2item.id\" #[$2item.id]>",
+      "    $3",
+      "  </template>",
+      "</CarouselFlip>"
+    ]
+  },
+  "SRCDEV CarouselFlip CSS Override": {
+    "description": "CSS override scaffold for CarouselFlip tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .carousel-flip {",
+      "    --carousel-flip-gap: $2;",
+      "    --carousel-flip-marker-active-colour: $3;",
+      "    --carousel-flip-button-background-colour: $4;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-container-glow.code-snippets

@@ -0,0 +1,33 @@
+{
+  "SRCDEV ContainerGlow Basic": {
+    "description": "ContainerGlow — pointer-proximity glow-border card(s), one card per named slot",
+    "scope": "vue,html",
+    "body": [
+      "<ContainerGlow>",
+      "  <template #${1:one}>",
+      "    $0",
+      "  </template>",
+      "</ContainerGlow>"
+    ]
+  },
+  "SRCDEV ContainerGlow With Config": {
+    "description": "ContainerGlow with custom proximity/spread/blur/gap/vertical config",
+    "scope": "vue,html",
+    "body": [
+      "<ContainerGlow",
+      "  :config=\"{",
+      "    proximity: ${1:40},",
+      "    spread: ${2:80},",
+      "    blur: ${3:20},",
+      "    gap: ${4:32},",
+      "    vertical: ${5:false},",
+      "    inactiveOpacity: ${6:0},",
+      "  }\"",
+      ">",
+      "  <template #${7:one}>",
+      "    $0",
+      "  </template>",
+      "</ContainerGlow>"
+    ]
+  }
+}

package/.vscode/srcdev-component-dashboard-quad-grid.code-snippets

@@ -0,0 +1,36 @@
+{
+  "SRCDEV DashboardQuadGrid Basic": {
+    "description": "DashboardQuadGrid with all four fixed slots",
+    "scope": "vue,html",
+    "body": [
+      "<DashboardQuadGrid>",
+      "  <template #slot1>",
+      "    $1",
+      "  </template>",
+      "  <template #slot2>",
+      "    $2",
+      "  </template>",
+      "  <template #slot3>",
+      "    $3",
+      "  </template>",
+      "  <template #slot4>",
+      "    $4",
+      "  </template>",
+      "</DashboardQuadGrid>"
+    ]
+  },
+  "SRCDEV DashboardQuadGrid CSS Override": {
+    "description": "CSS override scaffold for DashboardQuadGrid tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .dashboard-quad-grid-wrapper {",
+      "    --dashboard-quad-grid-gap: $2;",
+      "    --dashboard-quad-grid-outline-colour: $3;",
+      "    --dashboard-quad-grid-border-width: $4;",
+      "    --dashboard-quad-grid-border-colour: $5;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-dashboard-stats-grid.code-snippets

@@ -0,0 +1,35 @@
+{
+  "SRCDEV DashboardStatsGrid Basic": {
+    "description": "DashboardStatsGrid with looped top-row cluster, both static top-row slots, and looped bottom row",
+    "scope": "vue,html",
+    "body": [
+      "<DashboardStatsGrid :top-row-slot1-item-count=\"$1items.length\" :bottom-row-item-count=\"$2features.length\">",
+      "  <template v-for=\"($3item, $4index) in $1items\" :key=\"$3item.id\" #[`top-row-slot1-\\${$4index + 1}-content`]>",
+      "    $5",
+      "  </template>",
+      "  <template #top-row-slot-2>",
+      "    $6",
+      "  </template>",
+      "  <template #top-row-slot-3>",
+      "    $7",
+      "  </template>",
+      "  <template v-for=\"($8feature, $9findex) in $2features\" :key=\"$8feature.id\" #[`bottom-row-\\${$9findex + 1}-content`]>",
+      "    $10",
+      "  </template>",
+      "</DashboardStatsGrid>"
+    ]
+  },
+  "SRCDEV DashboardStatsGrid CSS Override": {
+    "description": "CSS override scaffold for DashboardStatsGrid tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .dashboard-stats-grid {",
+      "    --dashboard-stats-grid-gap: $2;",
+      "    --dashboard-stats-grid-border-colour: $3;",
+      "    --dashboard-stats-grid-rule-colour: $4;",
+      "  }",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-display-theme-switch.code-snippets

@@ -0,0 +1,27 @@
+{
+  "SRCDEV DisplayThemeSwitch Basic": {
+    "description": "DisplayThemeSwitch — system/light/dark theme picker",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayThemeSwitch />"
+    ]
+  },
+  "SRCDEV DisplayThemeSwitch Small": {
+    "description": "DisplayThemeSwitch compact size, for a header/nav slot",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayThemeSwitch style-class-passthrough=\"small\" />"
+    ]
+  },
+  "SRCDEV DisplayThemeSwitch Custom Labels": {
+    "description": "DisplayThemeSwitch with translated/custom option labels",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayThemeSwitch",
+      "  system-label=\"$1System\"",
+      "  light-label=\"$2Light\"",
+      "  dark-label=\"$3Dark\"",
+      "/>"
+    ]
+  }
+}

package/.vscode/srcdev-component-glowing-border.code-snippets

@@ -0,0 +1,23 @@
+{
+  "SRCDEV GlowingBorder Basic": {
+    "description": "GlowingBorder — animated conic-gradient glow border",
+    "scope": "vue,html",
+    "body": [
+      "<GlowingBorder variant=\"${1|subtle,vivid,silver,steel,green|}\">",
+      "  $0",
+      "</GlowingBorder>"
+    ]
+  },
+  "SRCDEV GlowingBorder Custom Tokens": {
+    "description": "GlowingBorder with custom width/radius/animation-duration CSS tokens",
+    "scope": "vue,html",
+    "body": [
+      "<GlowingBorder",
+      "  variant=\"${1|subtle,vivid,silver,steel,green|}\"",
+      "  style=\"--glowing-border-width: ${2:3px}; --glowing-border-radius: ${3:30px}; --glowing-border-animation-duration: ${4:10s};\"",
+      ">",
+      "  $0",
+      "</GlowingBorder>"
+    ]
+  }
+}

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

@@ -0,0 +1,85 @@
+{
+  "SRCDEV InputRangeCore Basic": {
+    "description": "Basic InputRangeCore native range input (no label/error wrapper)",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputRangeCore With Markers": {
+    "description": "InputRangeCore with custom tick-mark markers overlaid on the track",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeCore",
+      "  id=\"$1fieldId\"",
+      "  name=\"$2fieldName\"",
+      "  v-model=\"$3fieldValue\"",
+      "  :min=\"$40\"",
+      "  :max=\"$52\"",
+      "  :step=\"$61\"",
+      ">",
+      "  <template #markers>",
+      "    <div class=\"input-range-markers\">",
+      "      <div class=\"marker\"><span class=\"marker-icon\">$7\\ud83d\\ude00</span></div>",
+      "      <div class=\"marker\"><span class=\"marker-icon\">$8\\ud83d\\ude10</span></div>",
+      "      <div class=\"marker\"><span class=\"marker-icon\">$9\\ud83d\\ude1e</span></div>",
+      "    </div>",
+      "  </template>",
+      "</InputRangeCore>"
+    ]
+  },
+  "SRCDEV InputRangeDefault Basic": {
+    "description": "InputRangeDefault: labelled range slider with error/description support",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeDefault",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "  :error-message=\"$7errors.fieldName\"",
+      "  :field-has-error=\"!!$7errors.fieldName\"",
+      "/>"
+    ]
+  },
+  "SRCDEV InputRangeDefault With Step Buttons": {
+    "description": "InputRangeDefault with step-down/step-up buttons wired into the left/right slots",
+    "scope": "vue,html",
+    "body": [
+      "<InputRangeDefault",
+      "  v-model=\"$1fieldValue\"",
+      "  name=\"$2fieldName\"",
+      "  label=\"$3Field label\"",
+      "  :min=\"$40\"",
+      "  :max=\"$5100\"",
+      "  :step=\"$61\"",
+      "  :error-message=\"$7errors.fieldName\"",
+      "  :field-has-error=\"!!$7errors.fieldName\"",
+      ">",
+      "  <template #left>\\u2212</template>",
+      "  <template #right>+</template>",
+      "</InputRangeDefault>"
+    ]
+  },
+  "SRCDEV InputRange CSS Override": {
+    "description": "CSS override scaffold for InputRangeCore tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  .input-range-wrapper {",
+      "    --input-range-accent-colour: $2;",
+      "    --input-range-marker-background-colour: $3;",
+      "  }",
+      "}"
+    ]
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "SRCDEV SectionParallax Basic": {
+    "description": "SectionParallax — fixed-background parallax section",
+    "scope": "vue,html",
+    "body": [
+      "<SectionParallax",
+      "  tag=\"${1|section,div,article,aside|}\"",
+      "  background-image=\"${2:/images/example.jpg}\"",
+      ">",
+      "  $0",
+      "</SectionParallax>"
+    ]
+  },
+  "SRCDEV SectionParallax Custom Height": {
+    "description": "SectionParallax with custom min-height CSS tokens",
+    "scope": "vue,html",
+    "body": [
+      "<SectionParallax",
+      "  tag=\"${1|section,div,article,aside|}\"",
+      "  background-image=\"${2:/images/example.jpg}\"",
+      "  style=\"--section-parallax-min-height: ${3:60vh}; --section-parallax-min-height-fixed: ${4:70vh};\"",
+      ">",
+      "  $0",
+      "</SectionParallax>"
+    ]
+  }
+}

package/.vscode/srcdev-component-ui-block-decorated.code-snippets

@@ -0,0 +1,24 @@
+{
+  "SRCDEV UiBlockDecorated Basic": {
+    "description": "UiBlockDecorated — plain block with border/shadow/inner-shadow strength props",
+    "scope": "vue,html",
+    "body": [
+      "<UiBlockDecorated :shadow-strength=\"$1{1|1,2,3,4,5,6|}\">",
+      "  $0",
+      "</UiBlockDecorated>"
+    ]
+  },
+  "SRCDEV UiBlockDecorated Combined": {
+    "description": "UiBlockDecorated with border, shadow and inner-shadow combined",
+    "scope": "vue,html",
+    "body": [
+      "<UiBlockDecorated",
+      "  :border-strength=\"$1{1|1,2,3,4,5,6|}\"",
+      "  :shadow-strength=\"$2{2|1,2,3,4,5,6|}\"",
+      "  :inner-shadow-strength=\"$3{1|1,2,3,4|}\"",
+      ">",
+      "  $0",
+      "</UiBlockDecorated>"
+    ]
+  }
+}

package/.vscode/srcdev-component-wipe-away-vertical.code-snippets

@@ -0,0 +1,25 @@
+{
+  "SRCDEV WipeAwayVertical Basic": {
+    "description": "WipeAwayVertical — scroll-driven vertical wipe-away effect with sticky/scrolling section pairs",
+    "scope": "vue,html",
+    "body": [
+      "<WipeAwayVertical :item-count=\"$13\">",
+      "  <template #stickyItem-0>$2</template>",
+      "  <template #stickyItem-1>$3</template>",
+      "  <template #stickyItem-2>$4</template>",
+      "",
+      "  <template #scrollingItem-0><div style=\"height: 100vh;\"></div></template>",
+      "  <template #scrollingItem-1><div style=\"height: 100vh;\"></div></template>",
+      "</WipeAwayVertical>$0"
+    ]
+  },
+  "SRCDEV WipeAwayVertical With Passthrough": {
+    "description": "WipeAwayVertical with styleClassPassthrough for a custom wrapper class",
+    "scope": "vue,html",
+    "body": [
+      "<WipeAwayVertical :item-count=\"$12\" style-class-passthrough=\"$2my-wipe-wrapper\">",
+      "  $0",
+      "</WipeAwayVertical>"
+    ]
+  }
+}