srcdev-nuxt-components 9.2.3 → 9.2.5

package/.claude/skills/components/input-copy.md

@@ -0,0 +1,169 @@
+# InputCopy Component
+
+## Overview
+
+`InputCopy` renders a readonly text input with a copy-to-clipboard button. Displays a copyable value (e.g., license key, API token) with optional description text below. Shows visual feedback ("Copied!") in the button after a successful copy. Emits `copy` and `copied` events for consumer-side toast/feedback handling.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:style-class-passthrough`.
+
+| Prop (template form)       | Type                   | Default          | Notes                                                        |
+| -------------------------- | ---------------------- | ---------------- | ------------------------------------------------------------ |
+| `:value`                   | `string`               | (required)       | The text to copy to clipboard (e.g., license key, API token).|
+| `:label`                   | `string`               | (optional)       | Short label for the field; used in aria-label if ariaLabel not set. |
+| `:aria-label`              | `string`               | (optional)       | Custom aria-label for the input; overrides label.           |
+| `:description`             | `string`               | (optional)       | Helper text displayed below the input.                       |
+| `:button-text`             | `string`               | `"Copy"`         | Label on the copy button.                                    |
+| `:copied-text`             | `string`               | `"Copied!"`      | Text shown in button after copy succeeds.                    |
+| `:copied-duration`         | `number`               | `2000`           | Milliseconds the "Copied!" state persists before resetting.  |
+| `:is-disabled`             | `boolean`              | `false`          | Disables the copy button.                                    |
+| `:style-class-passthrough` | `string \| string[]`   | `[]`             | Extra CSS classes applied to the root element.              |
+
+---
+
+## Events
+
+| Event    | Payload              | Notes                                                      |
+| -------- | -------------------- | ---------------------------------------------------------- |
+| `copy`   | `value: string`      | Emitted when the copy button is clicked (before clipboard write). |
+| `copied` | `value: string`      | Emitted after successful clipboard write; fires after `copy`. |
+
+---
+
+## Slots
+
+None. Use events to customize feedback behavior.
+
+---
+
+## CSS Token Customization
+
+All `--input-copy-*` tokens can be overridden at global, page, or instance scope. See `CONSUMER-STYLING.md` in the component directory for full token documentation and examples.
+
+**Common tokens:**
+- `--input-copy-input-bg` — input field background
+- `--input-copy-input-border` — input field border
+- `--input-copy-button-bg` — copy button background
+- `--input-copy-button-bg-hover` — button background on hover
+- `--input-copy-description-color` — description text color
+
+---
+
+## Usage Examples
+
+### License key display (most common)
+
+```vue
+<InputCopy
+  :value="licenseKey"
+  label="License key"
+  description="Your license key is ready to use. Copy it to embed in your application."
+  @copied="showSuccessToast('License key copied!')"
+/>
+```
+
+### API token with custom button text
+
+```vue
+<InputCopy
+  :value="apiToken"
+  label="API token"
+  description="Do not share this token with anyone."
+  button-text="Copy token"
+  copied-text="Token copied!"
+  @copy="logCopy"
+  @copied="logCopied"
+/>
+```
+
+### Disabled state (e.g., loading or error)
+
+```vue
+<InputCopy
+  :value="temporaryCode"
+  label="Temporary code"
+  button-text="Unavailable"
+  :is-disabled="isGenerating"
+  description="Code is being generated. Please wait."
+/>
+```
+
+### With custom styling via CSS tokens
+
+```vue
+<InputCopy
+  :value="shareLink"
+  label="Share link"
+  description="Share this link with others"
+  style="
+    --input-copy-input-bg: #f0f0f0;
+    --input-copy-button-bg: var(--brand-primary);
+    --input-copy-button-text-color: white;
+  "
+/>
+```
+
+### With page-scoped styling
+
+In your page's `<style>` block:
+
+```css
+.success-page .input-copy {
+  --input-copy-input-border: 2px solid var(--success-color);
+  --input-copy-button-bg: var(--success-color);
+  --input-copy-description-color: var(--slate-06);
+}
+```
+
+Then in the template:
+
+```vue
+<div class="success-page">
+  <InputCopy
+    :value="licenseKey"
+    label="Your license key"
+    description="Copy this key to activate the component in your application."
+  />
+</div>
+```
+
+### With toast feedback (consumer-side)
+
+```vue
+<template>
+  <InputCopy
+    :value="apiKey"
+    label="API key"
+    @copied="handleCopied"
+  />
+</template>
+
+<script setup>
+const handleCopied = (value: string) => {
+  // Use your app's toast library
+  useToast().success(`Copied: ${value.slice(0, 8)}...`);
+};
+</script>
+```
+
+---
+
+## Accessibility
+
+- Input always has `aria-label` set from `label` or `aria-label` prop
+- Button has descriptive aria-label: "Copy [label] to clipboard"
+- Button is disabled during the "Copied!" feedback window to prevent repeated clicks
+- Icon-only display on mobile (<480px); text shown on desktop for clarity
+- Readonly input has `readonly` attribute; not editable
+
+---
+
+## Notes
+
+- **Clipboard API**: Uses native `navigator.clipboard.writeText()`. Fails silently if unavailable (e.g., insecure context).
+- **Button text hide on mobile**: By default, only the copy icon displays on screens <480px. Text appears on desktop (≥480px).
+- **No toast built-in**: This component does not show toasts. Listen to `@copied` event and use your app's toast library for feedback.
+- **Manual reset**: The "Copied!" state automatically resets after `copied-duration` milliseconds. No manual reset needed.

package/.claude/skills/components/pricing-card.md

@@ -0,0 +1,163 @@
+# PricingCard Component
+
+## Overview
+
+`PricingCard` renders a SaaS-style pricing plan card with plan name, price, description, feature list, and call-to-action button. Supports "Most Popular" highlight state with optional badge. Features are highly customizable via CSS token overrides, and the CTA button can be customized via the `#cta` slot for custom variants and themes.
+
+---
+
+## Props reference
+
+> **Hyphenation rule**: Vue's ESLint config enforces `vue/attribute-hyphenation`. Always write camelCase prop names hyphenated in templates: `:style-class-passthrough`.
+
+| Prop (template form)       | Type                          | Default      | Notes                                                              |
+| -------------------------- | ----------------------------- | ------------ | ------------------------------------------------------------------ |
+| `tag`                      | `"div" \| "section" \| "article"` | `"article"` | Root element tag for semantic HTML.                               |
+| `:plan-name`               | `string`                      | (required)   | Plan/tier name (e.g., "Basic", "Professional", "Enterprise").     |
+| `:price`                   | `number`                      | (required)   | Price amount (e.g., `99`, `4.99`). Currency symbol added in template. |
+| `:billing-period`          | `string`                      | `"one-time"` | Billing frequency text (e.g., "monthly", "yearly").              |
+| `:description`             | `string`                      | (optional)   | Short plan description.                                            |
+| `:features`                | `string[]`                    | `[]`         | Array of feature strings. Rendered with checkmark icons.          |
+| `:is-highlighted`          | `boolean`                     | `false`      | Highlight state; applies "Most Popular" badge, border, shadow, and scale. |
+| `:cta-text`                | `string`                      | `"Get started"` | Button label text.                                              |
+| `:cta-disabled`            | `boolean`                     | `false`      | Disables the CTA button.                                          |
+| `:style-class-passthrough` | `string \| string[]`          | `[]`         | Extra CSS classes applied to the card root.                       |
+
+---
+
+## Events
+
+| Event  | Payload    | Notes                                    |
+| ------ | ---------- | ---------------------------------------- |
+| `select` | `planName: string` | Emitted when the CTA button is clicked. |
+
+---
+
+## Slots
+
+### Default slot (features)
+
+Override the default feature list rendering. Receives no slot scope.
+
+```vue
+<PricingCard plan-name="Pro" :price="99">
+  <template #features>
+    <li>Custom feature HTML here</li>
+  </template>
+</PricingCard>
+```
+
+### #cta slot
+
+Customize the CTA button. Default renders `InputButtonCore` with theme support.
+
+**Slot scope:**
+- `ctaText: string` — button label from `:cta-text` prop
+- `isDisabled: boolean` — button disabled state from `:cta-disabled` prop
+- `planName: string` — plan name for context
+- `onSelect: () => void` — callback to trigger `select` event
+
+```vue
+<PricingCard plan-name="Pro" :price="99" @select="handleSelect">
+  <template #cta="{ ctaText, isDisabled, onSelect }">
+    <InputButtonCore
+      :button-text="ctaText"
+      variant="secondary"
+      theme="custom"
+      :readonly="isDisabled"
+      @click="onSelect"
+    />
+  </template>
+</PricingCard>
+```
+
+---
+
+## CSS Token Customization
+
+All `--pricing-card-*` tokens can be overridden at global, page, or instance scope. See `CONSUMER-STYLING.md` in the component directory for full token documentation and examples.
+
+**Common tokens:**
+- `--pricing-card-padding` — card internal spacing
+- `--pricing-card-border-radius` — card corners
+- `--pricing-card-cta-bg` — button background
+- `--pricing-card-highlight-border` — highlighted card border
+- `--pricing-card-name-color` — plan name text color
+
+---
+
+## Usage Examples
+
+### Single card with default button
+
+```vue
+<PricingCard
+  plan-name="Basic"
+  :price="29.99"
+  billing-period="monthly"
+  description="Perfect for getting started"
+  :features="['Feature 1', 'Feature 2', 'Feature 3']"
+  cta-text="Get started"
+  @select="handleSelect"
+/>
+```
+
+### Highlighted "Most Popular" card
+
+```vue
+<PricingCard
+  plan-name="Professional"
+  :price="79.99"
+  billing-period="monthly"
+  :is-highlighted="true"
+  :features="['All Basic features', 'Priority support', 'Advanced analytics']"
+  @select="handleSelect"
+/>
+```
+
+### Card with custom button variant
+
+```vue
+<PricingCard
+  plan-name="Enterprise"
+  :price="199.99"
+  billing-period="monthly"
+  description="Everything you need"
+  :features="['Unlimited access', 'Dedicated support', 'Custom integrations']"
+  @select="handleSelect"
+>
+  <template #cta="{ ctaText, isDisabled, onSelect }">
+    <InputButtonCore
+      :button-text="ctaText"
+      variant="primary"
+      :readonly="isDisabled"
+      @click="onSelect"
+    />
+  </template>
+</PricingCard>
+```
+
+### Three-column grid with token customization
+
+```vue
+<div class="pricing-grid">
+  <PricingCard
+    v-for="plan in plans"
+    :key="plan.id"
+    :plan-name="plan.name"
+    :price="plan.price"
+    :is-highlighted="plan.id === 'pro'"
+    :features="plan.features"
+    @select="handleSelect"
+    style="--pricing-card-padding: 2.5rem; --pricing-card-cta-bg: var(--brand-primary)"
+  />
+</div>
+```
+
+---
+
+## Notes
+
+- Feature checkmarks are always rendered with a teal checkmark (`✓`). Customize the color via `--teal-06` or component tokens.
+- The `#cta` slot is preferred over CSS-only button customization when you need variant or theme changes.
+- Highlighted cards apply a 1.05x scale transform — consider z-index when nesting in flex/grid layouts.

package/.claude/skills/index.md

@@ -48,6 +48,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── qa-panel.md                       — collapsible dev-only panel for toggling component props live on a page (demo pages and consuming apps)
 ├── release-notes.md                  — produce release notes as a fenced markdown block from git log
 ├── 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
 ├── composable-whatsapp.md            — useWhatsApp: open pre-filled wa.me link from form payload; runtime config, security, usage
 ├── composable-zod-validation.md      — useZodValidation: schema-driven form validation, error binding, submit flow, API error push
@@ -73,7 +74,8 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── expanding-panel.md      — ExpandingPanel v-model, forceOpened, slots (summary/icon/content), ARIA wiring
     ├── glass-panel.md          — GlassPanel props, slots, CSS token API (--glass-panel-bg/border-color/shadow/highlight), theming override
     ├── navigation-horizontal.md — NavigationHorizontal props, NavItemData type, CSS token API, import path gotcha
-    ├── input-copy-core.md      — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
+    ├── pricing-card.md         — PricingCard: SaaS-style plan card with highlight, feature list, #cta slot for button customization, CSS token API
+    ├── input-copy.md           — InputCopy: readonly copy-to-clipboard input, visual feedback, Clipboard API, accessibility, CSS token API
     ├── banner-video.md         — BannerVideo: full-width hero video banner, depth tier system, objectFit/objectPosition, playIcon/pauseIcon/toggle-icon slot, reduced-motion fallback, CSS tokens
     ├── 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

package/.claude/skills/setup-postinstall.md

@@ -2,12 +2,14 @@
 
 ## Overview
 
-Prevent two common "forgot to run after install" problems in a consuming app:
+Prevent common "forgot to run after install" problems in a consuming app:
 
 1. `nuxt prepare` — generates Nuxt type declarations. Skipping it causes TypeScript errors after install or package updates.
 2. `npm run setup:claude` — copies the latest `srcdev-nuxt-components` skills into `.claude/skills/srcdev-nuxt-components/`. Skipping it leaves Claude working from stale skill docs after a package update.
 
-A `postinstall` script runs both automatically after every `npm install`.
+Additionally, `srcdev-nuxt-components` automatically copies VSCode snippet files (`.code-snippets`) to your `.vscode/` folder during its own postinstall, so components' code snippets are available immediately.
+
+A consumer app's `postinstall` script runs both automatically after every `npm install`.
 
 ## Steps
 
@@ -15,11 +17,17 @@ A `postinstall` script runs both automatically after every `npm install`.
 
 ```json
 "scripts": {
-  "setup:claude": "cp -r node_modules/srcdev-nuxt-components/.claude/skills .claude/skills/srcdev-nuxt-components",
-  "postinstall": "nuxt prepare && npm run setup:claude"
+  "setup:claude": "mkdir -p .claude/skills/srcdev-nuxt-components && cp -r node_modules/srcdev-nuxt-components/.claude/skills/. .claude/skills/srcdev-nuxt-components",
+  "postinstall": "node node_modules/srcdev-nuxt-components/scripts/copy-snippets.mjs && nuxt prepare && npm run setup:claude"
 }
 ```
 
+This postinstall hook does three things in order:
+
+1. Copies VSCode snippets from the layer to your `.vscode/` folder
+2. Runs `nuxt prepare` to generate type declarations
+3. Runs `setup:claude` to copy skills into `.claude/skills/srcdev-nuxt-components/`
+
 ### 2. Check whether your app needs an env flag for nuxt prepare
 
 Some apps set an env var to switch `nuxt.config.ts` behaviour when running outside the full dev server (e.g. `NUXT_STANDALONE=true`). Check your own `nuxt.config.ts` — if it gates any config behind such a variable, add it to the `postinstall` command:
@@ -40,6 +48,7 @@ From this point on, `npm install` and `npm ci` trigger both steps automatically.
 
 ## Notes
 
+- **Snippet copy must run in consumer app**: npm doesn't invoke postinstall hooks for dependencies. Each consumer app must explicitly call `scripts/copy-snippets.mjs` in its own postinstall to copy VSCode snippets to `.vscode/`. The layer's postinstall is used when the layer runs standalone, but consumers are responsible for their own `.vscode/` folder.
 - Skills land in `.claude/skills/srcdev-nuxt-components/` — safe to re-run without overwriting your own project's skills.
-- `postinstall` also fires on `npm ci`, so CI environments get the skills too if they have a `.claude/` directory in the project.
-- If you do not want `postinstall` running in CI, guard it: `"postinstall": "[ \"$CI\" = \"true\" ] || (nuxt prepare && npm run setup:claude)"`.
+- `postinstall` also fires on `npm ci`, so CI environments get the skills and snippets too if they have a `.claude/` directory in the project.
+- If you do not want `postinstall` running in CI, guard it: `"postinstall": "[ \"$CI\" = \"true\" ] || (node node_modules/srcdev-nuxt-components/scripts/copy-snippets.mjs && nuxt prepare && npm run setup:claude)"`.

package/.claude/skills/using-component-skills.md

@@ -0,0 +1,215 @@
+# Using Component Skills
+
+## Overview
+
+Component skills are reference documentation files for every reusable component in `srcdev-nuxt-components`. They land in your consumer app after running `npm run setup:claude` and serve two purposes:
+
+1. **As human-readable reference** — browse component skills to understand props, slots, CSS tokens, and usage patterns
+2. **As discovery tool** — before building custom components, check if a suitable pattern already exists in the layer
+
+---
+
+## Setup
+
+### 1. Copy skills from the layer
+
+After scaffolding a new Nuxt app that extends `srcdev-nuxt-components`, run:
+
+```bash
+npm run setup:claude
+```
+
+This copies all skills (including component skills) into `.claude/skills/srcdev-nuxt-components/`.
+
+### 2. After upgrading the layer
+
+When you upgrade `srcdev-nuxt-components` to a new version (which may include new components), re-run the command to refresh:
+
+```bash
+npm run setup:claude
+```
+
+---
+
+## File structure
+
+Component skills land in `.claude/skills/srcdev-nuxt-components/components/`:
+
+```
+.claude/
+├── skills/
+│   └── srcdev-nuxt-components/
+│       ├── index.md                    — overview of all skills
+│       ├── new-app-scaffold.md         — scaffolding a new app
+│       ├── theming-colour-ramps.md     — theme customization
+│       ├── composable-*.md             — utility composables
+│       └── components/
+│           ├── pricing-card.md         — SaaS pricing plan card
+│           ├── input-copy.md           — copy-to-clipboard input
+│           ├── expanding-panel.md      — single expand/collapse panel
+│           ├── accordian-core.md       — native accordion (grouped panels)
+│           ├── display-avatar.md       — circular avatar component
+│           ├── card-core.md            — generic card container
+│           ├── auto-grid.md            — responsive auto-fit grid
+│           ├── display-dialog.md       — native dialog overlay
+│           ├── display-toast.md        — toast notifications
+│           └── ... (40+ more components)
+```
+
+---
+
+## Discovering components
+
+### Via your file explorer
+
+Browse `.claude/skills/srcdev-nuxt-components/components/` to see all available components with one-line descriptions.
+
+### Via grep
+
+Search for components by pattern:
+
+```bash
+# Find all form-related components
+grep -l "input\|form\|button" .claude/skills/srcdev-nuxt-components/components/*.md
+
+# Find components with slot patterns
+grep -l "slot" .claude/skills/srcdev-nuxt-components/components/*.md
+
+# Find components with CSS token customization
+grep -l "CSS token" .claude/skills/srcdev-nuxt-components/components/*.md
+```
+
+### Via Claude Code
+
+If your `.claude/settings.json` includes the layer's skills in `additionalDirectories`, Claude can reference them:
+
+```json
+{
+  "permissions": {
+    "additionalDirectories": [
+      "path/to/srcdev-nuxt-components/.claude/skills/components"
+    ]
+  }
+}
+```
+
+Then ask Claude: *"What button components are available in the layer?"* or *"Show me the expanding-panel skill."*
+
+---
+
+## Understanding a component skill
+
+Each component skill documents:
+
+### Props
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `:prop-name` | type | default | What this prop does |
+
+### Slots
+
+Explains what content goes inside each slot and provides scoped variables if applicable.
+
+### Events / Emits
+
+When the component emits events and what data they carry.
+
+### CSS Tokens
+
+All `--component-*` tokens available for customization via global/page/instance scope.
+
+### Usage Examples
+
+Practical examples showing:
+- Basic usage (simplest case)
+- Common customizations
+- Advanced patterns (slots, tokens, events)
+
+### Accessibility
+
+ARIA attributes, keyboard support, screen reader behavior.
+
+### Notes
+
+Edge cases, browser support, performance considerations, common gotchas.
+
+---
+
+## Workflow: Build a feature
+
+### 1. Understand the requirement
+
+*"I need a contact form with error handling and field validation."*
+
+### 2. Search skills for similar patterns
+
+```bash
+grep -l "form\|input\|validation" .claude/skills/srcdev-nuxt-components/components/*.md
+```
+
+### 3. Read relevant skills
+
+Open 2–3 matching skills to see:
+- What components already handle form inputs?
+- What slots and CSS tokens do they expose?
+- What validation patterns are documented?
+
+### 4. Decide: build vs. compose
+
+**Compose existing components** if the layer has:
+- Input components with validation props
+- Card/container components for layout
+- Button variants for form actions
+
+**Build custom component** if you need something specific the layer doesn't provide.
+
+---
+
+## Examples
+
+### Pricing page
+
+*Task: Build a pricing plan comparison with 3 tiers.*
+
+1. Search skills: `grep -l "price\|plan\|tier" components/*.md`
+2. Read `pricing-card.md` — describes PricingCard component, props, #cta slot, CSS tokens
+3. Use PricingCard in a grid layout, customize buttons via slot, override token colors via page-scoped CSS
+
+### FAQ section
+
+*Task: Add expandable FAQ items.*
+
+1. Search skills: `grep -l "expand\|accordion\|collaps" components/*.md`
+2. Read `expanding-panel.md` — describes single panel behavior, v-model, slots
+3. Use ExpandingPanel in a v-for loop for FAQ items (no need to build custom accordion)
+
+### License key display
+
+*Task: Show a copyable license key on success page.*
+
+1. Search skills: `grep -l "copy\|clipboard\|readonly" components/*.md`
+2. Read `input-copy.md` — describes readonly input, copy button, events, CSS tokens
+3. Use InputCopy component, listen to @copied event, show toast via consumer's toast library
+
+---
+
+## Updating skills
+
+When the layer releases a new component or updates an existing one:
+
+1. **Upgrade the package**: `npm install srcdev-nuxt-components@latest`
+2. **Refresh skills**: `npm run setup:claude`
+3. **Read the new skill** to understand the new component's API
+
+The skills always stay in sync with the layer's released version.
+
+---
+
+## Tips
+
+- **Skim the index.md** in `.claude/skills/srcdev-nuxt-components/` to get an overview of all available skills
+- **Reference skills when asking Claude** — "Here's the InputCopy skill: [paste content]. How do I customize the button color?"
+- **CSS tokens are your friend** — most components expose tokens for customization without component changes
+- **Slots > props for complexity** — if you need custom button behavior, use a #cta slot instead of adding button props to the component
+- **Check accessibility notes** — ARIA labels, keyboard support, and screen reader behavior are documented per component

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

@@ -18,7 +18,7 @@
     ]
   },
   "SRCDEV PricingCard Highlighted": {
-    "description": "PricingCard with 'Most Popular' highlight",
+    "description": "PricingCard with 'Most Popular' highlight and custom button",
     "scope": "vue,html",
     "body": [
       "<PricingCard",
@@ -33,7 +33,16 @@
       "    '$7Feature 3',",
       "  ]\"",
       "  @select=\"$8handleSelect\"",
-      "/>"
+      ">",
+      "  <template #cta=\"{ ctaText, isDisabled, onSelect }\">",
+      "    <InputButtonCore",
+      "      :button-text=\"ctaText\"",
+      "      variant=\"$9primary\"",
+      "      :readonly=\"isDisabled\"",
+      "      @click=\"onSelect\"",
+      "    />",
+      "  </template>",
+      "</PricingCard>"
     ]
   },
   "SRCDEV PricingCard Grid": {
@@ -69,6 +78,30 @@
       "</div>"
     ]
   },
+  "SRCDEV PricingCard Custom Button": {
+    "description": "PricingCard with custom button variant via #cta slot",
+    "scope": "vue,html",
+    "body": [
+      "<PricingCard",
+      "  planName=\"$1Premium\"",
+      "  :price=\"$2799\"",
+      "  billingPeriod=\"$3one-time\"",
+      "  description=\"$4All features included.\"",
+      "  :features=\"['$5Feature 1', '$6Feature 2']\"",
+      "  @select=\"$7handleSelect\"",
+      ">",
+      "  <template #cta=\"{ ctaText, isDisabled, onSelect }\">",
+      "    <InputButtonCore",
+      "      :button-text=\"ctaText\"",
+      "      variant=\"$8secondary\"",
+      "      theme=\"$9default\"",
+      "      :readonly=\"isDisabled\"",
+      "      @click=\"onSelect\"",
+      "    />",
+      "  </template>",
+      "</PricingCard>"
+    ]
+  },
   "SRCDEV PricingCard CSS Override": {
     "description": "CSS override scaffold for PricingCard tokens",
     "scope": "css",

package/README.md

@@ -43,16 +43,22 @@ Skills are copied into `.claude/skills/srcdev-nuxt-components/` so they never co
 
 ### Automate with postinstall (recommended)
 
-To ensure skills are always up to date and `nuxt prepare` is never forgotten, combine both into a `postinstall` script. npm runs this automatically after every `npm install`:
+To ensure skills are always up to date, VSCode snippets are installed, and `nuxt prepare` is never forgotten, add a `postinstall` script. npm runs this automatically after every `npm install`:
 
 ```json
 "scripts": {
-  "setup:claude": "cp -r node_modules/srcdev-nuxt-components/.claude/skills .claude/skills/srcdev-nuxt-components",
-  "postinstall": "nuxt prepare && npm run setup:claude"
+  "setup:claude": "mkdir -p .claude/skills/srcdev-nuxt-components && cp -r node_modules/srcdev-nuxt-components/.claude/skills/. .claude/skills/srcdev-nuxt-components",
+  "postinstall": "node node_modules/srcdev-nuxt-components/scripts/copy-snippets.mjs && nuxt prepare && npm run setup:claude"
 }
 ```
 
-> If your app uses a standalone env flag for `nuxt prepare` (e.g. `NUXT_STANDALONE=true`), include it in the `postinstall` command. This is project-specific — check your own `nuxt.config.ts` to confirm whether it is needed.
+**What this does:**
+
+1. `copy-snippets.mjs` — copies VSCode snippets (`.code-snippets` files) from the layer to your `.vscode/` folder
+2. `nuxt prepare` — generates Nuxt type declarations
+3. `setup:claude` — copies skills into `.claude/skills/srcdev-nuxt-components/`
+
+> **Note**: The snippet copy must run from your consumer app's postinstall, not the layer's. npm doesn't invoke postinstall hooks for dependencies, so each consumer app is responsible for copying snippets into its own `.vscode/` folder. If your app uses a standalone env flag for `nuxt prepare` (e.g. `NUXT_STANDALONE=true`), add it before `nuxt prepare`. This is project-specific — check your own `nuxt.config.ts` to confirm whether it is needed.
 
 ---
 

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

@@ -5,6 +5,9 @@
 All `--pricing-card-*` tokens are the stable override surface. Set them at any scope (global, page,
 or instance) without touching the component itself.
 
+Note: the price amount defaults to a `$` prefix. Pass `currency-symbol="£"` (or any other symbol) to
+override it — there is no locale-aware formatting, just a literal prefix character.
+
 | Token | Default | Controls |
 |---|---|---|
 | `--pricing-card-border` | `1px solid var(--slate-03)` | Card border |
@@ -26,6 +29,7 @@ or instance) without touching the component itself.
 | `--pricing-card-period-color` | `#666` | Billing period text colour |
 | `--pricing-card-description-color` | `#555` | Plan description text colour |
 | `--pricing-card-feature-color` | `#333` | Feature list text colour |
+| `--pricing-card-cta-align` | `flex-start` | CTA wrapper `align-self` — set to `stretch`, `center`, or `flex-end` to change CTA alignment/width within the card |
 | `--pricing-card-cta-bg` | `var(--theme-button-primary-surface)` | CTA button background |
 | `--pricing-card-cta-bg-hover` | `var(--theme-button-primary-surface-hover)` | CTA button background on hover |
 | `--pricing-card-cta-text` | `var(--theme-button-primary-text)` | CTA button text colour |

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

@@ -5,7 +5,7 @@
     <h3 class="pricing-card__name">{{ planName }}</h3>
 
     <div class="pricing-card__price">
-      <span class="pricing-card__amount">${{ price }}</span>
+      <span class="pricing-card__amount">{{ currencySymbol }}{{ price }}</span>
       <span v-if="billingPeriod" class="pricing-card__period">{{ billingPeriod }}</span>
     </div>
 
@@ -42,6 +42,7 @@ interface Props {
   tag?: "div" | "section" | "article";
   planName: string;
   price: number;
+  currencySymbol?: string;
   billingPeriod?: string;
   description?: string;
   features?: string[];
@@ -53,6 +54,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   tag: "article",
+  currencySymbol: "$",
   billingPeriod: "one-time",
   description: undefined,
   features: () => [],
@@ -108,6 +110,7 @@ watch(
     --_description-color: var(--pricing-card-description-color, #555);
     --_feature-color: var(--pricing-card-feature-color, #333);
 
+    --_cta-align: var(--pricing-card-cta-align, flex-start);
     --_cta-bg: var(--pricing-card-cta-bg, var(--theme-button-primary-surface));
     --_cta-bg-hover: var(--pricing-card-cta-bg-hover, var(--theme-button-primary-surface-hover));
     --_cta-text: var(--pricing-card-cta-text, var(--theme-button-primary-text));
@@ -206,7 +209,7 @@ watch(
     }
 
     .pricing-card__cta {
-      align-self: flex-start;
+      align-self: var(--_cta-align);
 
       :deep(.input-button-core) {
         padding: var(--_cta-padding);

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

@@ -19,6 +19,19 @@ describe("PricingCard", () => {
     expect(wrapper.text()).toContain("Get started");
   });
 
+  it("uses custom currency symbol when provided", () => {
+    const wrapper = mount(PricingCard, {
+      props: {
+        planName: "Single Site",
+        price: 49,
+        currencySymbol: "£",
+      },
+    });
+
+    expect(wrapper.text()).toContain("£49");
+    expect(wrapper.text()).not.toContain("$49");
+  });
+
   it("renders features from props", () => {
     const features = ["Feature 1", "Feature 2", "Feature 3"];
     const wrapper = mount(PricingCard, {

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.2.3",
+  "version": "9.2.5",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
   "scripts": {
+    "postinstall": "node scripts/copy-snippets.mjs",
     "clean": "rm -rf .nuxt && rm -rf .output",
     "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm package-lock.json",
     "reinstall": "rm -rf node_modules && npm install",

package/scripts/copy-snippets.mjs

@@ -0,0 +1,38 @@
+import { copyFileSync, mkdirSync, readdirSync } from 'fs';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const srcDir = join(__dirname, '../.vscode');
+const destDir = join(process.cwd(), '.vscode');
+
+// Only run when installed as a package (not in the layer's own repo)
+if (process.cwd() === join(__dirname, '..')) {
+  console.log('⊘ Skipping snippet copy (running in layer repo)');
+  process.exit(0);
+}
+
+mkdirSync(destDir, { recursive: true });
+
+// Find and copy all .code-snippets files
+try {
+  const files = readdirSync(srcDir).filter(file => file.endsWith('.code-snippets'));
+
+  if (files.length === 0) {
+    console.log('⊘ No snippet files found');
+    process.exit(0);
+  }
+
+  files.forEach(file => {
+    try {
+      copyFileSync(join(srcDir, file), join(destDir, file));
+      console.log(`✓ Copied VSCode snippet: ${file}`);
+    } catch (err) {
+      console.warn(`⚠ Failed to copy ${file}:`, err.message);
+    }
+  });
+
+  console.log(`✓ VSCode snippets installed to .vscode/`);
+} catch (err) {
+  console.warn('⚠ Snippet installation skipped:', err.message);
+}