srcdev-nuxt-components 9.2.7 → 9.2.8

package/.claude/commands/create-commit-message.md

@@ -0,0 +1,13 @@
+---
+description: Draft a commit message from staged changes only — never runs git add/commit/push
+---
+
+Draft a commit message for the currently staged changes. Do not run `git add`, `git commit`, or `git push` — this command only produces the message text for review.
+
+Steps:
+1. Run `git status` and `git diff --staged` to see what's staged. If nothing is staged, say so and stop.
+2. Run `git log --oneline -10` to match this repo's existing commit message style (e.g. `type(scope): summary`).
+3. Draft a concise message: a short summary line, plus a body only if the change needs context not obvious from the diff. Focus on *why*, not a restatement of the diff.
+4. Present the message in a fenced code block. Do not commit it.
+
+If the user's request also explicitly says "commit this" or "run it", that's authorization to act — use the `/run-commit` flow instead of stopping at the draft.

package/.claude/commands/run-commit.md

@@ -0,0 +1,13 @@
+---
+description: Stage named files, commit, and push — the full flow (explicit authorization to act)
+---
+
+Run the full commit flow: stage, commit, and push. Unlike `/create-commit-message`, this command is explicit authorization to execute git commands, not just draft text.
+
+Steps:
+1. Run `git status`, `git diff`, and `git diff --staged` to see the full picture before staging anything.
+2. Stage files by name (never `git add -A` or `git add .`) so nothing unexpected — stray build output, `.env`, credentials — gets swept in. Confirm with the user if it's unclear which changed files belong in this commit.
+3. Draft the commit message following the repo's existing style (`git log --oneline -10`), and create the commit with a HEREDOC so formatting is preserved, ending with the `Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>` trailer.
+4. Push to the current branch's tracked remote. If the branch has no upstream yet, ask before setting one with `-u`. Never force-push without explicit user instruction.
+
+Never use `--no-verify`, `--no-gpg-sign`, or otherwise skip hooks/signing. If a pre-commit hook fails, fix the underlying issue and create a **new** commit — never amend to work around a failed hook.

package/.claude/settings.json

@@ -93,12 +93,16 @@
       "Bash(SRCDEV_STANDALONE=true npx playwright test app/components/01.atoms/content-wrappers/docs-pages/playwright/content-docs.playwright.ts --project=chromium)",
       "Bash(git rm *)",
       "Bash(awk '{print $1}')",
-      "Bash(git reset *)"
+      "Bash(git reset *)",
+      "Read(//Users/simoncornforth/.claude/**)",
+      "Bash(git push *)",
+      "Bash(node -e \"JSON.parse\\(require\\('fs'\\).readFileSync\\('.vscode/srcdev-component-pricing-card.code-snippets','utf8'\\)\\); console.log\\('valid json'\\)\")"
     ],
     "additionalDirectories": [
       "/Users/simoncornforth/websites/instepreflexology",
       "/Users/simoncornforth/websites/nuxt-components/.vscode",
-      "/Users/simoncornforth/websites/nuxt-components/.claude/skills/components"
+      "/Users/simoncornforth/websites/nuxt-components/.claude/skills/components",
+      "/Users/simoncornforth/websites/nuxt-components/.claude/skills"
     ]
   }
 }

package/.claude/skills/index.md

@@ -30,7 +30,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── theming-colour-ramps.md          — parametric oklch ramp system: formula, named palettes, semantic slots, generator, consumer setup
 ├── theming-typography-tokens.md     — --step-N fluid font-size scale, 62.5% root reset gotcha (1rem=10px, not 16px), page-heading-*/page-body-* utility classes
 ├── theming-override-default.md      — replace the entire default theme with a custom palette (set --theme-hue/--theme-chroma)
-├── theming-partial-override.md      — override a specific token category (palette, buttons, inputs) without a full theme replacement
+├── theming-partial-override.md      — override a specific colour token category (palette, buttons, inputs) without a full theme replacement
+├── theming-form-geometry-tokens.md  — non-colour form/button/input tokens (padding, border-radius, gaps): full inventory, why partial override doesn't need duplicating the source files
 ├── colour-scheme-disable.md         — disable light/dark scheme support in a consumer app
 ├── component-dynamic-slots.md        — named dynamic slots ($slots iteration) vs indexed dynamic slots (itemCount pattern)
 ├── component-local-style-override.md — styleClassPassthrough + scoped style block for per-usage visual customisation
@@ -47,7 +48,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── robots-env-aware.md               — @nuxtjs/robots: allow crawling on prod domain only, block on preview/staging via env var
 ├── new-app-scaffold.md               — scaffold a new Nuxt consumer app extending this layer (package.json, nuxt.config, app structure, CLAUDE.md)
 ├── qa-panel.md                       — collapsible panel for toggling component props live on a page (always on for /pages/ui/ demo pages; gate with isDev in consuming apps)
-├── release-notes.md                  — produce release notes as a fenced markdown block from git log
+├── create-release-notes.md           — produce release notes as a fenced markdown block from git log (named to avoid colliding with the built-in /release-notes command)
 ├── pull-request-description.md       — produce a PR description as a fenced markdown block from git diff vs main
 ├── using-component-skills.md         — discover and use component skills in consumer apps: where skills land, browsing patterns, workflow for deciding build vs. compose
 ├── composable-canonical-url.md       — useCanonicalUrl: set <link rel="canonical"> from runtimeConfig.public.canonicalHost; layout setup, node types

package/.claude/skills/theming-form-geometry-tokens.md

@@ -0,0 +1,71 @@
+# Form Geometry Token Override
+
+## Overview
+
+`setup/04.elements/forms/*.css` defines every non-colour form/button/input token — padding,
+border-radius, gaps, font-size, focus-ring width, transition duration. This is the geometry
+counterpart to the colour tokens covered in `theming-partial-override.md` and the type-scale
+tokens in `theming-typography-tokens.md`.
+
+**You do not need to duplicate these files wholesale to override them.** Every value here is a
+plain custom property declared on `:where(html)` inside the `form-tokens` cascade layer (see
+`@import "./04.elements/" layer(form-tokens);` in `setup/index.css`). A consumer app's own CSS —
+as long as it isn't itself wrapped in a named `@layer` — always wins over layered CSS regardless
+of source order, because unlayered rules are cascade-ordered after every named layer per the CSS
+Cascade Layers spec. Concretely: it does not matter whether the consumer's override file is
+imported before or after this layer's `main.css` in `nuxt.config.ts`'s `css` array — unlayered
+always wins either way. `theming-override-default.md`/`theming-partial-override.md` already rely
+on this same mechanism for colour tokens; it applies identically here.
+
+So: to change one geometry value, redeclare just that one custom property in your app's own CSS
+(e.g. `app/assets/styles/setup/03.theming/_default.css`, or a new file imported the same way).
+There is no dependency between these tokens — overriding `--button-padding-inline` alone does not
+require also redeclaring `--button-border-radius` or anything else in the same source file.
+
+## The token inventory
+
+From `00.element-defaults.css` through `09.animation-motion.css`:
+
+| File | Tokens |
+| --- | --- |
+| `01.field-layout-container-level.css` | `--field-margin-block`, `--field-gap-block`, `--field-gap-inline`, `--field-label-gap`, `--field-description-gap`, `--field-error-gap` |
+| `02.typography.css` | `--field-label-font-size/-weight/-line-height`, `--input-font-size`, `--input-line-height`, `--theme-input-placeholder-font-size`, `--button-font-size/-line-height/-weight/-text-transform`, `--field-description-font-size/-line-height`, `--field-error-font-size/-weight` |
+| `03.generic-input-geometry.css` | `--input-padding-block/-inline`, `--input-padding-inline-with-icon`, `--form-element-border-width`, `--form-element-border-bottom-width-underlined`, `--form-input-border-radius[-underlined]`, `--form-element-outline-width[-focus]`, `--form-element-outline-offset-focus`, `--input-focus-ring-width/-offset`, `--input-underline-width`, `--input-min-height`, `--input-element-line-height`, plus per-element-type geometry (textarea/select/range/checkbox/toggle — see file for the full set) |
+| `04.slot-icon-system.css` | `--input-slot-width/-gap`, `--input-icon-size`, `--input-icon-slot-gap`, `--input-icon-color[-focus/-error]` |
+| `05.checkbox-radio-geometry.css` | `--control-size`, `--control-border-radius`, `--radio-border-radius`, `--control-border-width`, `--control-indicator-scale`, `--control-label-gap` |
+| `06.button-geometry.css` | `--button-padding-block/-inline`, `--button-border-radius[-icon-only]`, `--button-border-width`, `--button-outline-width`, `--button-focus-ring-width/-offset`, `--button-icon-gap` |
+| `07.validation-error-block-layout.css` | `--error-icon-size/-gap`, `--error-border-radius`, `--error-padding-block/-inline` |
+| `09.animation-motion.css` | `--control-transition-duration/-ease`, `--theme-form-transition-duration` |
+
+`00.element-defaults.css` is the one exception — it's not tokens, it's a real selector-based rule
+(browser autofill background/text-colour reset via `input:autofill` etc.). It reads
+`var(--theme-surface)` and the component-private `--_input-text-core-color`, so changing
+`--theme-surface` (per `theming-partial-override.md`) changes autofill colours too — no separate
+override needed there. If you need to change that rule's *behaviour* itself (not just its colour
+inputs), you'd need a competing unlayered selector of your own targeting the same pseudo-classes,
+not a token.
+
+## Example
+
+```css
+/* app/assets/styles/setup/03.theming/_default.css, or any unlayered file registered in nuxt.config.ts */
+:where(html) {
+  --button-padding-block: 1.2rem;
+  --button-padding-inline: 2.4rem;
+  --button-border-radius: 0.8rem;
+}
+```
+
+## Notes
+
+- Uses the layer's `62.5%` root font-size reset — see `theming-typography-tokens.md` before
+  hand-writing any raw `rem` value here.
+- `--theme-surface`, `--theme-input-surface`, etc. referenced by these geometry tokens are colour
+  tokens covered in `theming-partial-override.md`, not this skill — geometry and colour are
+  overridden the same mechanical way, just different token names.
+- Found and fixed while writing this skill (2026-08-03): `00.element-defaults.css` referenced a
+  `--theme-button-surface` token that was never declared anywhere in this codebase — a
+  since-corrected typo for `--theme-surface`, present since the rule was first introduced. Silently
+  broke autofill background/box-shadow (an undefined `var()` with no fallback resolves to the
+  property's initial value). A reminder that a dangling `var()` reference produces no error/warning
+  of any kind — it just quietly does nothing.

package/.claude/skills/theming-partial-override.md

@@ -4,7 +4,9 @@
 
 Use this skill when you need to tweak a specific colour role (page background, text, buttons,
 inputs) without replacing the entire default theme. For a full palette swap see
-`theming-override-default.md`. For the full architecture see `theming-colour-ramps.md`.
+`theming-override-default.md`. For the full architecture see `theming-colour-ramps.md`. For
+non-colour form geometry (padding, border-radius, gaps, etc.) see `theming-form-geometry-tokens.md`
+— same override mechanism, different token set.
 
 ## How it works
 
@@ -14,20 +16,22 @@ after the layer styles.
 
 ## Semantic slots — the tokens to override
 
-All themed components share a 9-slot vocabulary. Overriding these affects buttons, inputs,
-prompts, and toasts simultaneously:
-
-| Token                   | Default (light → dark)     | Role                              |
-|-------------------------|----------------------------|-----------------------------------|
-| `--theme-surface`       | `--colour-theme-7` / `9`   | Filled button/chip surface        |
-| `--theme-surface-hover` | `--colour-theme-9` / `7`   | Hover state of filled surface     |
-| `--theme-accent`        | `--colour-theme-5` / `4`   | Decorative accent strip (prompt/toast left edge) |
-| `--theme-surface-subtle`| `--colour-theme-1` / `9`   | Subtle body bg for prompt/toast, outline element hover |
-| `--theme-border`        | `--colour-theme-6` / `5`   | Input/card border                 |
-| `--theme-border-focus`  | `--colour-theme-4` / `3`   | Focused border                    |
-| `--theme-ring`          | `--colour-theme-1` / `9`   | Focus ring (outline)              |
-| `--theme-on-surface`    | `--colour-theme-0`         | Text/icon on filled surface       |
-| `--theme-text`          | `--colour-theme-9` / `2`   | Text on page, outline element text|
+All themed components share an 11-slot vocabulary (see `_theme-slots.css`). Overriding these
+affects buttons, inputs, prompts, and toasts simultaneously:
+
+| Token                       | Default (light → dark)   | Role                                                                                                                    |
+| --------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `--theme-surface`           | `--colour-theme-7` / `9` | Filled button/chip surface                                                                                              |
+| `--theme-surface-hover`     | `--colour-theme-9` / `7` | Hover state of filled surface                                                                                            |
+| `--theme-surface-inverted`  | `--colour-theme-9` / `2` | Inverted surface (`InputButtonCore`'s `.secondary` background)                                                          |
+| `--theme-accent`            | `--colour-theme-5` / `4` | Decorative accent strip (prompt/toast left edge)                                                                        |
+| `--theme-surface-subtle`    | `--colour-theme-1` / `9` | Subtle body bg for prompt/toast, outline element hover                                                                  |
+| `--theme-border`            | `--colour-theme-6` / `5` | Input/card border                                                                                                        |
+| `--theme-border-focus`      | `--colour-theme-4` / `3` | Focused border                                                                                                           |
+| `--theme-ring`               | `--colour-theme-1` / `9` | Focus ring (outline)                                                                                                     |
+| `--theme-on-surface`        | `--colour-theme-0`       | Text/icon on filled/inverted surface (fixed light value in both modes — pair this with any dark-in-light-mode surface, not `--theme-text`) |
+| `--theme-text`               | `--colour-theme-9` / `2` | Text on page, outline element text (assumes a *light* surface — don't pair with `--theme-surface-hover`/`-inverted`, see pitfall #13 in `Claude.md`) |
+| `--theme-text-inverted`     | `--colour-theme-0` / `7` | Text on `--theme-surface-inverted` (fixed to a light value in light mode as of 2026-08-03 — was `--colour-theme-9`, identical to the surface it sits on) |
 
 Input-specific tokens:
 

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

@@ -102,6 +102,25 @@
       "</PricingCard>"
     ]
   },
+  "SRCDEV PricingCard Ribbon": {
+    "description": "PricingCard with a diagonal discount ribbon",
+    "scope": "vue,html",
+    "body": [
+      "<PricingCard",
+      "  planName=\"$1Annual\"",
+      "  :price=\"$249\"",
+      "  billingPeriod=\"$3per year\"",
+      "  description=\"$4Early adopter pricing on the annual plan.\"",
+      "  ribbonText=\"$5EARLYBIRD50 · 50% off\"",
+      "  :features=\"[",
+      "    '$6Feature 1',",
+      "    '$7Feature 2',",
+      "    '$8Feature 3',",
+      "  ]\"",
+      "  @select=\"$9handleSelect\"",
+      "/>"
+    ]
+  },
   "SRCDEV PricingCard CSS Override": {
     "description": "CSS override scaffold for PricingCard tokens",
     "scope": "css",
@@ -116,11 +135,13 @@
       "    --pricing-card-amount-color: $7;",
       "    --pricing-card-cta-bg: $8;",
       "    --pricing-card-cta-bg-hover: $9;",
+      "    --pricing-card-ribbon-bg: $10;",
+      "    --pricing-card-ribbon-text: $11;",
       "",
       "    &.is-highlighted {",
-      "      --pricing-card-highlight-border: $10;",
-      "      --pricing-card-highlight-shadow: $11;",
-      "      --pricing-card-highlight-scale: $12;",
+      "      --pricing-card-highlight-border: $12;",
+      "      --pricing-card-highlight-shadow: $13;",
+      "      --pricing-card-highlight-scale: $14;",
       "    }",
       "  }",
       "}"

package/app/assets/styles/setup/03.theming/_theme-slots.css

@@ -12,5 +12,10 @@
   --theme-ring: light-dark(var(--colour-theme-1), var(--colour-theme-9));
   --theme-on-surface: var(--colour-theme-0);
   --theme-text: light-dark(var(--colour-theme-9), var(--colour-theme-2));
-  --theme-text-inverted: light-dark(var(--colour-theme-9), var(--colour-theme-7));
+  /* Light-mode branch was --colour-theme-9 — identical to --theme-surface-inverted's own
+     light-mode branch (line 6), its only pairing (InputButtonCore's .secondary, background +
+     color), so secondary-button text was invisible (dark-on-dark) in light mode. Should be a
+     light step to contrast against that dark inverted surface, matching how --theme-on-surface
+     (line 13) contrasts against --theme-surface the same way in both modes. */
+  --theme-text-inverted: light-dark(var(--colour-theme-0), var(--colour-theme-7));
 }

package/app/assets/styles/setup/04.elements/forms/00.element-defaults.css

@@ -1,13 +1,18 @@
+/* Was --theme-button-surface, a token never declared anywhere in this codebase (confirmed via
+   git blame — introduced in 065f254 alongside this rule, before _theme-slots.css even existed,
+   and never matched afterwards) — a plain typo/omission, not an intentional distinct token.
+   Autofill background/box-shadow silently had no effect since an undefined var() with no
+   fallback resolves to the property's initial value. Fixed to the real token, 2026-08-03. */
 :where(html) {
   input:autofill,
   input:-internal-autofill-selected,
   input:-webkit-autofill-strong-password,
   input:-webkit-autofill-strong-password-viewable,
   input:-webkit-autofill-and-obscured {
-    background-color: var(--theme-button-surface) !important;
+    background-color: var(--theme-surface) !important;
     background-image: none !important;
     color: var(--_input-text-core-color) !important;
-    -webkit-box-shadow: 0 0 0rem 1000px var(--theme-button-surface) inset;
+    -webkit-box-shadow: 0 0 0rem 1000px var(--theme-surface) inset;
     -webkit-text-fill-color: var(--_input-text-core-color);
     transition: background-color 5000s ease-in-out 0s;
   }

package/app/components/02.molecules/expandable/accordian/tests/__snapshots__/AccordianCore.spec.ts.snap

@@ -4,7 +4,10 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
 "<div class="display-accordian extra-class">
   <div class="expanding-panel accordian-item" icon-size="medium">
     <details class="expanding-panel-details" name="snapshot-accordian">
-      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
+        <div class="label-wrapper"></div>
+        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
+      </summary>
     </details>
     <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
       <div class="inner"></div>
@@ -12,7 +15,10 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
   </div>
   <div class="expanding-panel accordian-item" icon-size="medium">
     <details class="expanding-panel-details" name="snapshot-accordian">
-      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
+        <div class="label-wrapper"></div>
+        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
+      </summary>
     </details>
     <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
       <div class="inner"></div>
@@ -20,7 +26,10 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
   </div>
   <div class="expanding-panel accordian-item" icon-size="medium">
     <details class="expanding-panel-details" name="snapshot-accordian">
-      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+      <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
+        <div class="label-wrapper"></div>
+        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
+      </summary>
     </details>
     <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region">
       <div class="inner"></div>
@@ -33,7 +42,10 @@ exports[`AccordianCore > renders correct HTML structure with default props 1`] =
 "<div class="display-accordian">
   <div class="expanding-panel accordian-item" icon-size="medium">
     <details class="expanding-panel-details" name="v-0-0-0">
-      <summary id="id-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+      <summary id="id-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false">
+        <div class="label-wrapper"></div>
+        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
+      </summary>
     </details>
     <div id="id-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-0-trigger" role="region">
       <div class="inner"></div>
@@ -41,7 +53,10 @@ exports[`AccordianCore > renders correct HTML structure with default props 1`] =
   </div>
   <div class="expanding-panel accordian-item" icon-size="medium">
     <details class="expanding-panel-details" name="v-0-0-1">
-      <summary id="id-v-0-0-1-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false"><span class="label-wrapper"></span><span class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></span></summary>
+      <summary id="id-v-0-0-1-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false">
+        <div class="label-wrapper"></div>
+        <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
+      </summary>
     </details>
     <div id="id-v-0-0-1-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-1-trigger" role="region">
       <div class="inner"></div>
@@ -54,7 +69,10 @@ exports[`AccordianCore > renders correct HTML structure with populated slots 1`]
 "<div class="display-accordian">
   <div class="expanding-panel accordian-item" icon-size="medium">
     <details class="expanding-panel-details" name="v-0-0-0">
-      <summary id="id-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false"><span class="label-wrapper"><span>Summary 0</span></span><span class="icon-wrapper"><span>Icon 0</span></span></summary>
+      <summary id="id-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false">
+        <div class="label-wrapper"><span>Summary 0</span></div>
+        <div class="icon-wrapper"><span>Icon 0</span></div>
+      </summary>
     </details>
     <div id="id-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-0-trigger" role="region">
       <div class="inner"><span>Content 0</span></div>
@@ -62,7 +80,10 @@ exports[`AccordianCore > renders correct HTML structure with populated slots 1`]
   </div>
   <div class="expanding-panel accordian-item" icon-size="medium">
     <details class="expanding-panel-details" name="v-0-0-1">
-      <summary id="id-v-0-0-1-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false"><span class="label-wrapper"><span>Summary 1</span></span><span class="icon-wrapper"><span>Icon 1</span></span></summary>
+      <summary id="id-v-0-0-1-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false">
+        <div class="label-wrapper"><span>Summary 1</span></div>
+        <div class="icon-wrapper"><span>Icon 1</span></div>
+      </summary>
     </details>
     <div id="id-v-0-0-1-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-1-trigger" role="region">
       <div class="inner"><span>Content 1</span></div>

package/app/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue

@@ -103,6 +103,7 @@ const onDetailsToggle = (event: Event) => {
         flex-direction: row;
         gap: var(--expanding-panel-summary-gap, 1rem);
         list-style: none;
+        user-select: none;
 
         padding-block: var(--expanding-panel-summary-padding-block, 0.5rem);
 

package/app/components/02.molecules/pricing-card/CONSUMER-STYLING.md

@@ -21,6 +21,9 @@ override it — there is no locale-aware formatting, just a literal prefix chara
 | `--pricing-card-highlight-scale` | `1.05` | Scale transform when highlighted |
 | `--pricing-card-badge-bg` | `var(--teal-06)` | "Most Popular" badge background |
 | `--pricing-card-badge-text` | `var(--teal-00)` | Badge text colour |
+| `--pricing-card-ribbon-bg` | `var(--red-06)` | Diagonal corner ribbon background (rendered when `ribbon-text` is set) |
+| `--pricing-card-ribbon-text` | `var(--red-00, white)` | Ribbon text colour |
+| `--pricing-card-ribbon-size` | `20rem` | Width/height of the ribbon's clipping box — controls how far it extends from the top-right corner |
 | `--pricing-card-name-font-size` | `1.8rem` | Plan name heading size |
 | `--pricing-card-name-color` | `#1a1a1a` | Plan name text colour |
 | `--pricing-card-amount-font-size` | `3.2rem` | Price amount size |
@@ -128,6 +131,32 @@ When displaying multiple cards side-by-side (common in pricing pages), wrap in a
 
 ---
 
+## Discount ribbon
+
+Pass `ribbon-text` to render a diagonal corner ribbon (top-right, 45°) for marketing callouts —
+leave it unset for no ribbon. It renders independently of `isHighlighted`, so both can be combined.
+
+```vue
+<PricingCard
+  planName="Annual"
+  :price="49"
+  billing-period="per year"
+  ribbon-text="EARLYBIRD50 · 50% off"
+  @select="handleSelect"
+/>
+```
+
+```css
+.pricing-page {
+  .pricing-card {
+    --pricing-card-ribbon-bg: var(--brand-accent);
+    --pricing-card-ribbon-text: white;
+  }
+}
+```
+
+---
+
 ## Feature checkmark colour
 
 The feature list checkmarks use `--teal-06` by default. Override globally or per-instance:

package/app/components/02.molecules/pricing-card/PricingCard.vue

@@ -2,6 +2,10 @@
   <component :is="tag" class="pricing-card" :class="[elementClasses, { 'is-highlighted': isHighlighted }]">
     <div v-if="isHighlighted" class="pricing-card__badge">Most Popular</div>
 
+    <div v-if="ribbonText" class="pricing-card__ribbon-clip">
+      <span class="pricing-card__ribbon">{{ ribbonText }}</span>
+    </div>
+
     <h3 class="pricing-card__name">{{ planName }}</h3>
 
     <div class="pricing-card__price">
@@ -20,18 +24,8 @@
     </ul>
 
     <div class="pricing-card__cta">
-      <slot
-        name="cta"
-        :cta-text="ctaText"
-        :is-disabled="ctaDisabled"
-        :plan-name="planName"
-        :on-select="handleSelect"
-      >
-        <InputButtonCore
-          :button-text="ctaText"
-          :readonly="ctaDisabled"
-          @click="handleSelect"
-        />
+      <slot name="cta" :cta-text="ctaText" :is-disabled="ctaDisabled" :plan-name="planName" :on-select="handleSelect">
+        <InputButtonCore :button-text="ctaText" :readonly="ctaDisabled" @click="handleSelect" />
       </slot>
     </div>
   </component>
@@ -49,6 +43,7 @@ interface Props {
   isHighlighted?: boolean;
   ctaText?: string;
   ctaDisabled?: boolean;
+  ribbonText?: string;
   styleClassPassthrough?: string | string[];
 }
 
@@ -61,6 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
   isHighlighted: false,
   ctaText: "Get started",
   ctaDisabled: false,
+  ribbonText: undefined,
   styleClassPassthrough: () => [],
 });
 
@@ -78,7 +74,7 @@ watch(
   () => props.styleClassPassthrough,
   () => {
     resetElementClasses(props.styleClassPassthrough);
-  },
+  }
 );
 </script>
 
@@ -93,12 +89,16 @@ watch(
     --_card-gap: var(--pricing-card-gap, 1.2rem);
 
     --_highlight-border: var(--pricing-card-highlight-border, 2px solid var(--teal-06));
-    --_highlight-shadow: var(--pricing-card-highlight-shadow, 0 8px 24px oklch(from var(--teal-06) l c h / 0.20));
+    --_highlight-shadow: var(--pricing-card-highlight-shadow, 0 8px 24px oklch(from var(--teal-06) l c h / 0.2));
     --_highlight-scale: var(--pricing-card-highlight-scale, 1.05);
 
     --_badge-bg: var(--pricing-card-badge-bg, var(--teal-06));
     --_badge-text: var(--pricing-card-badge-text, var(--teal-00));
 
+    --_ribbon-bg: var(--pricing-card-ribbon-bg, var(--red-06));
+    --_ribbon-text: var(--pricing-card-ribbon-text, var(--red-00, white));
+    --_ribbon-size: var(--pricing-card-ribbon-size, 20rem);
+
     --_name-font-size: var(--pricing-card-name-font-size, 1.8rem);
     --_name-color: var(--pricing-card-name-color, #1a1a1a);
 
@@ -153,6 +153,37 @@ watch(
       letter-spacing: 0.05em;
     }
 
+    .pricing-card__ribbon-clip {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: var(--_ribbon-size);
+      height: var(--_ribbon-size);
+      overflow: hidden;
+      pointer-events: none;
+      /* Sits above card content but stays clear of the top-centred "Most Popular" badge. */
+      z-index: 1;
+
+      .pricing-card__ribbon {
+        position: absolute;
+        top: 1.6rem;
+        right: -1.4rem;
+        width: calc(var(--_ribbon-size) + 2rem);
+        transform: rotate(23deg);
+        transform-origin: center;
+
+        display: block;
+        padding: 0.6rem 1.4rem 0.6rem 0;
+        background-color: var(--_ribbon-bg);
+        color: var(--_ribbon-text);
+        text-align: right;
+        font-size: 1.2rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+      }
+    }
+
     .pricing-card__name {
       margin: 0;
       font-size: var(--_name-font-size);

package/app/components/02.molecules/pricing-card/stories/PricingCard.stories.ts

@@ -13,6 +13,7 @@ const meta: Meta<typeof PricingCard> = {
     isHighlighted: { control: "boolean" },
     ctaText: { control: "text" },
     ctaDisabled: { control: "boolean" },
+    ribbonText: { control: "text" },
   },
   args: {
     planName: "Single Site",
@@ -23,6 +24,7 @@ const meta: Meta<typeof PricingCard> = {
     isHighlighted: false,
     ctaText: "Get started",
     ctaDisabled: false,
+    ribbonText: undefined,
   },
   parameters: {
     docs: {
@@ -30,6 +32,8 @@ const meta: Meta<typeof PricingCard> = {
         component:
           "A SaaS pricing plan card displaying plan name, price, features, and a CTA button. " +
           "Supports a 'Most Popular' highlight state with scaled/emphasized styling. " +
+          "Supports an optional `ribbonText` prop that renders a diagonal corner ribbon (top-right, " +
+          "45°) for marketing callouts like a discount — leave it unset for no ribbon. " +
           "Emits a `select` event when the CTA button is clicked. " +
           "Use multiple cards in a grid layout to build a pricing comparison table.",
       },
@@ -116,6 +120,23 @@ export const Disabled: Story = {
   },
 };
 
+export const WithDiscountRibbon: Story = {
+  args: {
+    planName: "Annual",
+    price: 49,
+    billingPeriod: "per year",
+    description: "Early adopter pricing on the annual plan.",
+    features: ["Embed on one domain", "Unlimited consultations", "Email support", "Priced annually"],
+    ribbonText: "EARLYBIRD50 · 50% off",
+  },
+  render: (args) => {
+    const handleSelect = (planName: string) => {
+      console.log(`Selected plan: ${planName}`);
+    };
+    return storyWrapper(args, handleSelect);
+  },
+};
+
 export const ThreeCardComparison: Story = {
   render: () => ({
     components: { PricingCard },

package/app/components/02.molecules/pricing-card/tests/PricingCard.spec.ts

@@ -150,4 +150,29 @@ describe("PricingCard", () => {
 
     expect(wrapper.element.tagName).toBe("SECTION");
   });
+
+  it("does not render a ribbon when ribbonText is unset", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+      },
+    });
+
+    expect(wrapper.find(".pricing-card__ribbon-clip").exists()).toBe(false);
+  });
+
+  it("renders ribbon text when ribbonText is provided", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Test Plan",
+        price: 100,
+        ribbonText: "EARLYBIRD50 · 50% off",
+      },
+    });
+
+    const ribbon = wrapper.find(".pricing-card__ribbon-clip");
+    expect(ribbon.exists()).toBe(true);
+    expect(ribbon.text()).toContain("EARLYBIRD50 · 50% off");
+  });
 });

package/app/components/03.organisms/services/services-section/tests/__snapshots__/ServicesSection.spec.ts.snap

@@ -63,7 +63,10 @@ exports[`ServicesSection > renders correct HTML structure 1`] = `
       <div class="display-accordian services-section__faq" id="faq">
         <div class="expanding-panel accordian-item" icon-size="medium">
           <details class="expanding-panel-details" name="faq-v-0-0-0">
-            <summary id="id-faq-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-faq-v-0-0-0-content" aria-expanded="false"><span class="label-wrapper">FAQ question?</span><span class="icon-wrapper"><span class="iconify i-mdi:chevron-down" aria-hidden="true"></span></span></summary>
+            <summary id="id-faq-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-faq-v-0-0-0-content" aria-expanded="false">
+              <div class="label-wrapper">FAQ question?</div>
+              <div class="icon-wrapper"><span class="iconify i-mdi:chevron-down" aria-hidden="true"></span></div>
+            </summary>
           </details>
           <div id="id-faq-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-faq-v-0-0-0-trigger" role="region">
             <div class="inner">

package/app/components/05.forms/input-button/InputButtonCore.vue

@@ -111,6 +111,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     padding-inline: var(--button-padding-inline);
     padding-block: var(--button-padding-block);
     touch-action: manipulation;
+    user-select: none;
     overflow: hidden;
     transition: all var(--control-transition-duration) var(--control-transition-ease);
 
@@ -129,7 +130,13 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     &:hover,
     &:focus-visible {
       background-color: var(--theme-surface-hover);
-      color: var(--theme-text);
+      /* --theme-on-surface, not --theme-text: --theme-surface-hover's light-mode branch is a
+         dark step (by design — this button stays a bold colour even in light mode), and
+         --theme-text's light-mode branch is dark too (it's meant for text on a light surface
+         elsewhere, e.g. AlertContentInner). Pairing them made hover text invisible in light
+         mode. --theme-on-surface is a fixed light value regardless of scheme, matching how
+         AlertContentInner's own dismiss-button hover and .secondary:hover below already do it. */
+      color: var(--theme-on-surface);
       border-color: var(--theme-border-focus);
       outline-color: var(--theme-ring);
     }
@@ -163,6 +170,9 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       &:hover,
       &:focus-visible {
         background-color: var(--theme-surface-hover);
+        /* Same fix as the base :hover above — background goes dark in light mode, so text
+           needs to switch off --theme-text (dark in light mode) to stay visible. */
+        color: var(--theme-on-surface);
         border-color: var(--theme-border-focus);
         outline-color: var(--theme-border-focus);
       }

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -90,6 +90,7 @@ const flexDirection = ref(props.direction);
   justify-content: space-between;
   gap: 1rem;
   border-radius: 0.4rem;
+  user-select: none;
   transition: all 0.2s ease-in-out;
 
   &.is-pill {

package/app/components/05.forms/input-checkbox-radio/InputCheckboxRadioWithLabel.vue

@@ -80,6 +80,7 @@ const id = useId();
   align-items: center;
   gap: var(--input-checked-icon-gap);
   min-height: var(--input-min-height);
+  user-select: none;
 
   transition: all var(--theme-form-transition-duration) ease-in-out;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.2.7",
+  "version": "9.2.8",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",