srcdev-nuxt-components 9.6.4 → 9.6.6

package/.vscode/srcdev-component-progress-tracker.code-snippets

@@ -0,0 +1,45 @@
+{
+  "SRCDEV ProgressTracker": {
+    "description": "ProgressTracker showing progress through steps (v-model is the 0-based current step)",
+    "scope": "vue,html",
+    "body": [
+      "<ProgressTracker v-model=\"${1:currentStep}\" :steps=\"${2:steps}\" />"
+    ]
+  },
+  "SRCDEV ProgressTracker Wizard": {
+    "description": "ProgressTracker as a wizard: each step's form lives in its #step-{n} slot and drives the model",
+    "scope": "vue,html",
+    "body": [
+      "<ProgressTracker v-model=\"${1:currentStep}\" :steps=\"${2:steps}\">",
+      "  <template #step-0=\"{ headingId }\">",
+      "    <form :aria-labelledby=\"headingId\" @submit.prevent=\"$1++\">",
+      "      $3",
+      "      <InputButton type=\"submit\" button-text=\"Continue\" />",
+      "    </form>",
+      "  </template>",
+      "  <template #step-1=\"{ headingId }\">",
+      "    <form :aria-labelledby=\"headingId\" @submit.prevent=\"$1 = $2.length\">",
+      "      $4",
+      "      <InputButton button-text=\"Back\" variant=\"secondary\" @click=\"$1--\" />",
+      "      <InputButton type=\"submit\" button-text=\"Submit\" />",
+      "    </form>",
+      "  </template>",
+      "</ProgressTracker>"
+    ]
+  },
+  "SRCDEV ProgressTracker CSS Override": {
+    "description": "CSS override scaffold for ProgressTracker tokens",
+    "scope": "css",
+    "body": [
+      ".$1my-page {",
+      "  --progress-tracker-accent: $2;",
+      "  --progress-tracker-track: $3;",
+      "  --progress-tracker-card-surface: $4;",
+      "  --progress-tracker-card-shadow: $5;",
+      "  --progress-tracker-label-font-family: $6;",
+      "  --progress-tracker-title-line-clamp: $7;",
+      "  --progress-tracker-body-line-clamp: $8;",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-social-icons-list.code-snippets

@@ -11,6 +11,19 @@
       "/>"
     ]
   },
+  "SRCDEV SocialIconsList Labelled": {
+    "description": "SocialIconsList with visible labels and brand colours (mono icons, for the pill or tile recipes)",
+    "scope": "vue,html",
+    "body": [
+      "<SocialIconsList",
+      "  :items=\"[",
+      "    { networkName: '${1:Instagram}', iconName: '${2:bi:instagram}', baseHref: '${3:https://www.instagram.com/}', profileId: '$4', brandColour: '${5:#e1306c}' },",
+      "  ]\"",
+      "  show-label",
+      "  :style-class-passthrough=\"['${6:my-social-pills}']\"",
+      "/>"
+    ]
+  },
   "SRCDEV SocialIconsList CSS Override": {
     "description": "CSS override scaffold for SocialIconsList tokens",
     "scope": "css",
@@ -18,6 +31,7 @@
       ".$1my-page {",
       "  --social-icons-list-icon-size: $2;",
       "  --social-icons-list-gap: $3;",
+      "  --social-icons-list-icon-colour: $4;",
       "}"
     ]
   }

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

@@ -31,8 +31,9 @@
       ".$1my-page {",
       "  --stepper-list-gap: $2;",
       "  --stepper-list-connector-color: $3;",
-      "  --stepper-list-counter-disc-background: $4;",
-      "  --stepper-list-counter-disc-text: $5;",
+      "  --stepper-list-connector-gap: $4;",
+      "  --stepper-list-counter-disc-background: $5;",
+      "  --stepper-list-counter-disc-text: $6;",
       "}"
     ]
   }

package/.vscode/srcdev-component-tabbed-content.code-snippets

@@ -58,6 +58,7 @@
       "    --tabs-underline-indicator-height: ;",
       "    --tabs-hover-underline-indicator-colour: ;",
       "    --tabs-hover-underline-indicator-height: ;",
+      "    --tabs-hover-indicator-stretch: ;",
       "    --tabs-list-item-opacity: ;",
       "    --tabs-list-item-colour: ;",
       "    --tabs-list-item-colour-selected: ;",

package/.vscode/srcdev-utility-dynamic-border-radius.code-snippets

@@ -0,0 +1,31 @@
+{
+  "SRCDEV Dynamic Border Radius Markup": {
+    "prefix": "srcdev-dynamic-border-radius",
+    "description": ".dynamic-border-radius: rounded until the image fills its container, then square (wrapper needs container-type: inline-size)",
+    "scope": "vue,html",
+    "body": [
+      "<div class=\"$1media-wrapper\">",
+      "  <img class=\"dynamic-border-radius${6:-transition}\" src=\"$2\" alt=\"$3\" width=\"$4\" height=\"$5\">",
+      "</div>"
+    ]
+  },
+  "SRCDEV Dynamic Border Radius CSS": {
+    "prefix": "srcdev-dynamic-border-radius-css",
+    "description": "Container wrapper and image rules for .dynamic-border-radius (max width via the token, so the -transition class can read it)",
+    "scope": "css",
+    "body": [
+      ".$1media-wrapper {",
+      "  container-type: inline-size;",
+      "",
+      "  img {",
+      "    display: block;",
+      "    inline-size: 100%;",
+      "    --dynamic-border-radius-max-width: ${2:50rem};",
+      "    max-inline-size: var(--dynamic-border-radius-max-width);",
+      "    margin-inline: auto;",
+      "    --dynamic-border-radius: ${3:5rem};",
+      "  }",
+      "}"
+    ]
+  }
+}

package/app/assets/styles/setup/06.utility-classes/_dynamic-border-radius.css

@@ -0,0 +1,27 @@
+/* ===========================================
+   DYNAMIC BORDER RADIUS
+   Rounded corners while the element is narrower than its
+   container; square once it spans the full container width.
+   Needs an ancestor with container-type: inline-size.
+   =========================================== */
+
+.dynamic-border-radius {
+  border-radius: clamp(0px, (100cqi - 100%) * 1e5, var(--dynamic-border-radius, 5rem));
+}
+
+/*
+ * Transition variant: compares against a max-width token instead of 100%, so the computed value is a plain length.
+ * A % stays unresolved until layout, which makes a transition start from a stale value and flicker on every resize frame.
+ */
+.dynamic-border-radius-transition {
+  max-inline-size: var(--dynamic-border-radius-max-width, 100%);
+  border-radius: clamp(
+    0px,
+    (100cqi - var(--dynamic-border-radius-max-width, 100%)) * 1e5,
+    var(--dynamic-border-radius, 5rem)
+  );
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: border-radius var(--dynamic-border-radius-duration, 300ms) var(--dynamic-border-radius-easing, ease-out);
+  }
+}

package/app/assets/styles/setup/06.utility-classes/index.css

@@ -2,3 +2,4 @@
 @import "./spacing/index.css";
 /* @import "./layout/"; */
 @import "./_a11y.css";
+@import "./_dynamic-border-radius.css";

package/app/components/01.atoms/tabbed-content/CONSUMER-STYLING.md

@@ -58,6 +58,7 @@ box.
 | `--tabs-underline-indicator-height` | `0.4rem` | Thickness of the underline (`axis="x"`), also its width on `axis="y"` |
 | `--tabs-hover-underline-indicator-colour` | `--tabs-underline-indicator-colour` | Colour of the thin underline/sideline that follows the hovered tab (`trackHover` and `trackIndicator`) |
 | `--tabs-hover-underline-indicator-height` | `0.1rem` | Its thickness; `0` hides it. Sits under the active underline where they overlap |
+| `--tabs-hover-indicator-stretch` | `1` | Stretch of the hover highlight and hover underline as they move: `1` stretches (leading edge first, trailing edge catches up), `0` slides both edges together. Values in between shorten the stretch |
 
 ### More menu (`overflowMode="menu"`, `axis="x"`)
 
@@ -98,7 +99,10 @@ measured layout, per indicator (`active` / `hovered`): `--_{kind}-start` / `--_{
 insets from the bar's start and end along the axis), `--_{kind}-duration`,
 `--_{kind}-start-delay` / `--_{kind}-end-delay`; each indicator reads them through its own
 `--_start` / `--_end` / `--_duration` / `--_start-delay` / `--_end-delay`. Not public API; use the
-`transitionDuration` prop for indicator speed (one edge moves for that long, then the other).
+`transitionDuration` prop for indicator speed (one edge moves for that long, then the other), and
+`--tabs-hover-indicator-stretch` to turn the hover stretch off. The More menu also uses
+`--_anchor-name` (a per-instance anchor name) and the `--_anchor-*` position values
+`useAnchoredPopover` writes for browsers without CSS anchor positioning.
 
 > **Changed 2026-10-08**: indicators were a bar-wide box moved with `translate` and sized with
 > `scale` (`--_x-*`, `--_width-*`, `--_y-*`, a shared `--_transition-duration`), with a timer

package/app/components/01.atoms/tabbed-content/TabbedContent.vue

@@ -354,8 +354,8 @@ watch(
         --_start: var(--_hovered-start, 0px);
         --_end: var(--_hovered-end, 100%);
         --_duration: var(--_hovered-duration, 0ms);
-        --_start-delay: var(--_hovered-start-delay, 0ms);
-        --_end-delay: var(--_hovered-end-delay, 0ms);
+        --_start-delay: calc(var(--_hovered-start-delay, 0ms) * var(--tabs-hover-indicator-stretch, 1));
+        --_end-delay: calc(var(--_hovered-end-delay, 0ms) * var(--tabs-hover-indicator-stretch, 1));
       }
 
       .tabbed-content-indicator-active,

package/app/components/01.atoms/tabbed-content/stories/TabbedContent.stories.ts

@@ -219,6 +219,32 @@ export const IndicatorColours: Story = {
   }),
 };
 
+export const HoverWithoutStretch: Story = {
+  name: "Hover Without Stretch",
+  args: { itemCount: 5 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "--tabs-hover-indicator-stretch: 0 makes the hover highlight slide between tabs instead of stretching across and catching up. Clicking a tab still stretches the active indicator.",
+      },
+    },
+  },
+  render: (args) => ({
+    components: { TabbedContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="--tabs-hover-indicator-stretch: 0">
+        <TabbedContent v-bind="args">
+          ${tabSlots}
+        </TabbedContent>
+      </div>
+    `,
+  }),
+};
+
 // ─── Stress test ──────────────────────────────────────────────────────────────
 
 const stressTabs = [

package/app/components/02.molecules/contact-section/tests/__snapshots__/ContactSection.spec.ts.snap

@@ -4,22 +4,22 @@ exports[`ContactSection > renders correct HTML structure with default props 1`]
 "<div class="contact-section">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 1</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 2</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 3</p>
           </div>
         </li>
@@ -34,22 +34,22 @@ exports[`ContactSection > renders correct HTML structure with form slot 1`] = `
 "<div class="contact-section">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 1</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 2</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 3</p>
           </div>
         </li>
@@ -66,22 +66,22 @@ exports[`ContactSection > renders correct HTML structure with styleClassPassthro
 "<div class="contact-section custom-class another-class">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 1</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 2</p>
           </div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div>
+          <div class="stepper-list-content">
             <p class="page-body-normal">Default slot content for item 3</p>
           </div>
         </li>
@@ -96,18 +96,18 @@ exports[`ContactSection > renders correctly with all props and slots combined 1`
 "<section class="contact-section combined-class">
   <div class="contact-section-inner">
     <div class="contact-section-info">
-      <ul class="stepper-list">
-        <li class="has-indicator indicator-top indicator-disc">
+      <ul role="list" class="stepper-list">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"><span class="icon">✓</span></div>
-          <div><span>Step one</span></div>
+          <div class="stepper-list-content"><span>Step one</span></div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div><span>Step two</span></div>
+          <div class="stepper-list-content"><span>Step two</span></div>
         </li>
-        <li class="has-indicator indicator-top indicator-disc">
+        <li class="stepper-list-item has-indicator indicator-top indicator-disc">
           <div class="stepper-list__indicator-custom"></div>
-          <div><span>Step three</span></div>
+          <div class="stepper-list-content"><span>Step three</span></div>
         </li>
       </ul>
     </div>

package/app/components/02.molecules/progress-tracker/CONSUMER-STYLING.md

@@ -0,0 +1,116 @@
+# ProgressTracker — Consumer Styling Guide
+
+## Public token API
+
+All `--progress-tracker-*` tokens are the stable override surface. Set them on an ancestor you
+own, or on a class added with `:style-class-passthrough`.
+
+### Colours
+
+| Token | Default | Controls |
+|---|---|---|
+| `--progress-tracker-accent` | `var(--theme-accent)` | Done indicator fill, current indicator outline and number, connectors below done steps, progress bar fill |
+| `--progress-tracker-on-accent` | `var(--theme-on-surface)` | Tick colour on the done indicator; keep it in contrast with the accent |
+| `--progress-tracker-track` | `--theme-text` mixed to 15% | Progress bar track, upcoming indicator outline, connectors below current and upcoming steps |
+| `--progress-tracker-ring-colour` | `--theme-accent` mixed to 20% | Halo around the current indicator |
+| `--progress-tracker-upcoming-text` | `--theme-text` mixed to 60% | Upcoming step numbers, titles and bodies |
+| `--progress-tracker-title-colour` | `var(--theme-text)` | Done and current step titles |
+| `--progress-tracker-body-colour` | `--theme-text` mixed to 80% | Done and current step bodies |
+| `--progress-tracker-label-colour` | `--theme-text` mixed to 70% | Header label |
+
+### Header
+
+| Token | Default | Controls |
+|---|---|---|
+| `--progress-tracker-header-gap` | `2.4rem` | Space between the header and the first step |
+| `--progress-tracker-label-font-family` | `inherit` | Header label font (e.g. a monospace stack) |
+| `--progress-tracker-label-font-size` | `var(--step-4)` | Header label size |
+| `--progress-tracker-label-font-weight` | `600` | Header label weight |
+| `--progress-tracker-label-letter-spacing` | `0.12em` | Header label tracking |
+| `--progress-tracker-label-text-transform` | `uppercase` | Header label case; `none` keeps the prop's casing |
+| `--progress-tracker-bar-inline-size` | `16rem` | Preferred bar width; it shrinks first and wraps below the label when space runs out |
+| `--progress-tracker-bar-height` | `0.6rem` | Bar thickness |
+| `--progress-tracker-bar-radius` | `99rem` | Bar corner rounding |
+
+### Steps and indicators
+
+| Token | Default | Controls |
+|---|---|---|
+| `--progress-tracker-gap` | `4rem` | Space between the indicator column and the step content |
+| `--progress-tracker-step-padding-block` | `1.2rem` | Vertical padding of each step row |
+| `--progress-tracker-connector-width` | `0.2rem` | Connector line thickness |
+| `--progress-tracker-indicator-size` | `4.4rem` | Indicator width and height; titles are centred against it |
+| `--progress-tracker-indicator-border-width` | `0.2rem` | Indicator outline width |
+| `--progress-tracker-indicator-radius` | `50%` | Indicator shape; `0.8rem` gives rounded squares |
+| `--progress-tracker-indicator-font-size` | `var(--step-4)` | Step number size |
+| `--progress-tracker-ring-width` | `0.6rem` | Halo width around the current indicator |
+| `--progress-tracker-content-gap` | `0.8rem` | Space between title, body and slot content in a step |
+| `--progress-tracker-slot-gap` | `0.8rem` | Extra space above the `#step-{n}` slot content |
+| `--progress-tracker-title-font-size` | `var(--step-5)` | Step title size |
+| `--progress-tracker-title-font-weight` | `600` | Step title weight |
+| `--progress-tracker-title-line-clamp` | `none` | Lines before a title is cut off with an ellipsis (`1` is single-line) |
+| `--progress-tracker-body-font-size` | `var(--step-4)` | Step body size |
+| `--progress-tracker-body-line-clamp` | `none` | Lines before a body is cut off with an ellipsis |
+
+### Focus card (current step)
+
+| Token | Default | Controls |
+|---|---|---|
+| `--progress-tracker-card-surface` | `var(--theme-surface-subtle)` | Card background; set `#ffffff` (or similar) to lift it off a grey panel |
+| `--progress-tracker-card-shadow` | soft two-layer shadow | Card shadow; `none` for a flat card |
+| `--progress-tracker-card-radius` | `1.6rem` | Card corner rounding |
+| `--progress-tracker-card-padding-block` | `1.6rem` | Card top and bottom padding; the current indicator moves down by the same amount to stay level with the title |
+| `--progress-tracker-card-padding-inline` | `2rem` | Card side padding; the card bleeds left by the same amount so its text lines up with the other steps. Clearance between the current ring and the card is `--progress-tracker-gap` minus this minus `--progress-tracker-ring-width` (1.4rem by default), so raise the gap with it |
+
+### Motion
+
+| Token | Default | Controls |
+|---|---|---|
+| `--progress-tracker-transition-duration` | `200ms` | Bar fill and state colour transitions. Off under `prefers-reduced-motion: reduce` |
+
+Private (not public API): `--_progress-tracker-progress`, the done fraction the component sets
+inline on the bar.
+
+---
+
+## State hooks
+
+| Hook | Element | When |
+|---|---|---|
+| `.is-complete` | root | The model equals `steps.length` |
+| `.is-done`, `.is-current`, `.is-upcoming` | `.progress-tracker-step` and `.progress-tracker-indicator` | That step's state |
+| `aria-current="step"` | `.progress-tracker-title` | The current step |
+
+Inner classes: `.progress-tracker-header`, `.progress-tracker-label`, `.progress-tracker-bar`,
+`.progress-tracker-bar-fill`, `.progress-tracker-list` (the StepperList root),
+`.progress-tracker-indicator`, `.progress-tracker-indicator-icon`, `.progress-tracker-step`,
+`.progress-tracker-title`, `.progress-tracker-body`, `.progress-tracker-slot`.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat: StepperList tokens.** The list is a `StepperList`, and ProgressTracker sets its
+`--stepper-list-*` tokens on `.progress-tracker-list` from its own tokens. A `--stepper-list-*`
+value set on an ancestor never reaches it; use the `--progress-tracker-*` equivalents
+(`-gap`, `-step-padding-block`, `-connector-width`, `-accent`, `-track`).
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `div`. Tokens set on a passthrough class apply to
+the whole tracker. Reactive after mount.
+
+---
+
+## Notes
+
+- Title centring against the indicator uses the `lh` unit. Safari before 16.4 ignores it and the
+  title sits level with the top of the indicator instead.