srcdev-nuxt-components 9.6.2 → 9.6.3

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

@@ -5,196 +5,143 @@
 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.
+> Changed 2026-10-14: colour defaults now come from the `--theme-*` slots (card background
+> `--theme-surface-subtle`, text `--theme-text`, badge `--theme-surface`/`--theme-on-surface`,
+> highlight border `--theme-border`, checkmark `--theme-accent`) instead of fixed `--slate-*`,
+> `--teal-*` and hex values. The badge (`0.75rem` → `1.2rem`) and billing period (`0.9rem` →
+> `1.4rem`) font sizes were too small at this library's 10px rem base and were raised. The five
+> `--pricing-card-cta-*` colour/shape tokens were removed: their rule used `:deep()` in an unscoped
+> style block, which browsers drop, so they never applied. Style the CTA with `InputButton`'s own
+> tokens instead (see **CTA button** below).
+
+### Card
 
 | Token | Default | Controls |
 |---|---|---|
+| `--pricing-card-background` | `var(--theme-surface-subtle)` | Card background colour |
 | `--pricing-card-border` | `1px solid var(--slate-03)` | Card border |
 | `--pricing-card-border-radius` | `0.8rem` | Corner rounding |
 | `--pricing-card-padding` | `2rem` | Internal padding |
-| `--pricing-card-background` | `var(--slate-00)` | Card background colour |
 | `--pricing-card-shadow` | `0 2px 8px oklch(...)` | Box shadow |
-| `--pricing-card-gap` | `1.2rem` | Gap between elements (name, price, features, CTA) |
-| `--pricing-card-highlight-border` | `2px solid var(--teal-06)` | Border when `isHighlighted` |
-| `--pricing-card-highlight-shadow` | `0 8px 24px oklch(...)` | Shadow when highlighted |
-| `--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 |
-| `--pricing-card-amount-color` | `#1a1a1a` | Price text colour |
-| `--pricing-card-period-font-size` | `0.9rem` | Billing period ("one-time", "per month") size |
-| `--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(--input-button-primary-surface)` | CTA button background |
-| `--pricing-card-cta-bg-hover` | `var(--input-button-primary-surface-hover)` | CTA button background on hover |
-| `--pricing-card-cta-text` | `var(--input-button-primary-text)` | CTA button text colour |
-| `--pricing-card-cta-padding` | `1rem 1.6rem` | CTA button padding |
-| `--pricing-card-cta-border-radius` | `0.4rem` | CTA button corner rounding |
+| `--pricing-card-gap` | `1.2rem` | Gap between name, price, description, features and CTA |
+| `--pricing-card-transition-duration` | `300ms` | Transform/shadow/border transition (skipped under `prefers-reduced-motion: reduce`) |
 
----
+### Highlight and badge (`is-highlighted`)
 
-## Global theming
+| Token | Default | Controls |
+|---|---|---|
+| `--pricing-card-highlight-border` | `2px solid var(--theme-border)` | Border when highlighted |
+| `--pricing-card-highlight-shadow` | `0 8px 24px oklch(...)` | Shadow when highlighted |
+| `--pricing-card-highlight-scale` | `1.05` | Scale transform when highlighted; set `1` in a single-column layout so it doesn't overhang |
+| `--pricing-card-badge-bg` | `var(--theme-surface)` | Badge background |
+| `--pricing-card-badge-text` | `var(--theme-on-surface)` | Badge text colour |
+| `--pricing-card-badge-font-size` | `1.2rem` | Badge text size |
 
-Create `assets/styles/setup/07.components/pricing-card.css` in the consuming app and set tokens on
-`:root`. These values apply to every `PricingCard` instance across the site.
+### Ribbon (`ribbon-text`)
 
-```css
-/* assets/styles/setup/07.components/pricing-card.css */
-:root {
-  --pricing-card-border-radius: 1rem;
-  --pricing-card-padding: 2.4rem;
-  --pricing-card-shadow: 0 4px 12px rgb(0 0 0 / 10%);
-  --pricing-card-gap: 1.6rem;
-  --pricing-card-badge-bg: var(--brand-primary);
-  --pricing-card-highlight-border: 2px solid var(--brand-primary);
-  --pricing-card-highlight-shadow: 0 12px 32px rgb(0 0 0 / 15%);
-  --pricing-card-cta-border-radius: 0.6rem;
-}
-```
+| Token | Default | Controls |
+|---|---|---|
+| `--pricing-card-ribbon-bg` | `var(--red-06)` | Ribbon background |
+| `--pricing-card-ribbon-text` | `var(--red-00, white)` | Ribbon text colour |
+| `--pricing-card-ribbon-size` | `20rem` | Width/height of the ribbon's clipping box: how far it reaches from the top-right corner |
+| `--pricing-card-ribbon-line-clamp` | `2` | Max ribbon lines, with an ellipsis on the last. `1` is single-line ellipsis |
+| `--pricing-card-ribbon-clearance` | `6rem` | Right padding on the plan name while a ribbon is shown, so the name doesn't run under it |
 
----
+### Text
 
-## Local overrides
+| Token | Default | Controls |
+|---|---|---|
+| `--pricing-card-name-font-size` | `1.8rem` | Plan name size |
+| `--pricing-card-name-color` | `var(--theme-text)` | Plan name colour |
+| `--pricing-card-name-line-clamp` | `none` | Max plan name lines. `1` is single-line ellipsis, `none` shows everything |
+| `--pricing-card-amount-font-size` | `3.2rem` | Price size |
+| `--pricing-card-amount-color` | `var(--theme-text)` | Price colour |
+| `--pricing-card-period-font-size` | `1.4rem` | Billing period size |
+| `--pricing-card-period-color` | `var(--theme-text)` | Billing period colour |
+| `--pricing-card-description-color` | `var(--theme-text)` | Description colour |
+| `--pricing-card-description-line-clamp` | `none` | Max description lines |
+| `--pricing-card-feature-color` | `var(--theme-text)` | Feature text colour |
+| `--pricing-card-feature-icon-color` | `var(--theme-accent)` | Feature checkmark colour |
+| `--pricing-card-feature-line-clamp` | `none` | Max lines per feature (built-in feature list only; `#features` slot content is your own markup) |
+
+### CTA
 
-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`.
+| Token | Default | Controls |
+|---|---|---|
+| `--pricing-card-cta-align` | `flex-start` | CTA wrapper `align-self`: `stretch`, `center` or `flex-end` |
 
-### One instance
+Private tokens (not public API): `--_ribbon-size`, the resolved `--pricing-card-ribbon-size` read
+by both the clip box and the ribbon.
 
-Override tokens directly on a single card instance:
+---
 
-```vue
-<PricingCard
-  planName="Enterprise"
-  :price="999"
-  style="
-    --pricing-card-border-radius: 1.2rem;
-    --pricing-card-highlight-shadow: 0 16px 48px rgb(0 0 0 / 20%);
-  "
-  @select="handleSelect"
-/>
-```
+## State hooks
 
-### Page or section
+| Hook | Meaning |
+|---|---|
+| `.is-highlighted` | `is-highlighted` is set: badge shown, highlight border/shadow/scale applied |
+| `.has-ribbon` | `ribbon-text` is set: the plan name gets `--pricing-card-ribbon-clearance` |
 
-When pricing cards appear in a specific page context, scope overrides under the page wrapper:
-
-```css
-/* In the consuming page's unscoped <style> block */
-.pricing-page {
-  .pricing-card {
-    --pricing-card-border-radius: 1.2rem;
-    --pricing-card-padding: 2.8rem;
-    --pricing-card-gap: 1.8rem;
-
-    &.is-highlighted {
-      --pricing-card-highlight-scale: 1.08;
-      --pricing-card-highlight-shadow: 0 20px 48px rgb(0 0 0 / 18%);
-    }
-  }
-}
-```
+Inner elements: `.pricing-card__badge`, `.pricing-card__ribbon-clip`, `.pricing-card__ribbon`,
+`.pricing-card__name`, `.pricing-card__price`, `.pricing-card__amount`, `.pricing-card__period`,
+`.pricing-card__description`, `.pricing-card__features`, `.pricing-card__feature`,
+`.pricing-card__cta`.
 
 ---
 
-## Three-card comparison grid
-
-When displaying multiple cards side-by-side (common in pricing pages), wrap in a grid container:
+## CTA button
 
-```vue
-<div class="pricing-grid">
-  <PricingCard v-for="plan in plans" :key="plan.id" v-bind="plan" @select="handleSelect" />
-</div>
-```
+The default CTA is a primary `InputButton`. Its tokens inherit, so set them on the card (or any
+ancestor) to restyle it:
 
 ```css
-.pricing-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 2rem;
-
-  .pricing-card {
-    /* Optional per-card overrides */
-  }
-
-  /* Alternate: fixed 3-column layout */
-  &.three-col {
-    grid-template-columns: repeat(3, 1fr);
-  }
+.pricing-page .pricing-card {
+  --input-button-primary-surface: var(--brand-primary);
+  --input-button-primary-surface-hover: var(--brand-primary-dark);
+  --input-button-primary-text: white;
 }
 ```
 
----
-
-## Highlight badge text
-
-`isHighlighted` shows a top-centred badge reading "Most Popular". Pass `badge-text` to change it,
-e.g. for localisation:
-
-```vue
-<PricingCard planName="Standard" :price="99" is-highlighted :badge-text="t('pricing.mostPopular')" />
-```
+Shape (`--button-border-radius`, `--button-padding-inline`, `--button-padding-block`) comes from the
+global button tokens and can be set the same way. For a different variant or extra controls, replace
+the button with the `#cta` slot.
 
 ---
 
-## 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"
-/>
-```
+## Global theming
 
 ```css
-.pricing-page {
-  .pricing-card {
-    --pricing-card-ribbon-bg: var(--brand-accent);
-    --pricing-card-ribbon-text: white;
-  }
+:where(html) {
+  --pricing-card-border-radius: 1.2rem;
+  --pricing-card-padding: 2.4rem;
+  --pricing-card-badge-bg: var(--brand-primary);
+  --pricing-card-highlight-border: 2px solid var(--brand-primary);
 }
 ```
 
 ---
 
-## Feature checkmark colour
+## Local overrides
 
-The feature list checkmarks use `--teal-06` by default. Override globally or per-instance:
+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`.
 
-```css
-.pricing-page {
-  .pricing-card__feature::before {
-    color: var(--brand-primary);
-  }
-}
-```
+---
 
-Or inline:
+## Class passthrough
 
-```vue
-<PricingCard
-  v-bind="plan"
-  style="--_feature-checkmark-color: var(--brand-accent);"
-  @select="handleSelect"
-/>
-```
+`style-class-passthrough` adds classes to the card root (the `article`/`section`/`div`), so a class
+passed there is a direct hook for both tokens and selectors.
+
+---
 
-(Note: `--_feature-checkmark-color` is an internal token; consider requesting it as a public token if override is needed frequently.)
+## Notes
 
+- The price is `currency-symbol` + the number, with fractional prices shown to two decimals
+  (`9.5` → `9.50`). There is no locale-aware formatting.
+- The highlight scale is a `transform`, so it doesn't change layout size; in a stacked
+  single-column layout the scaled card can overhang its column. Set
+  `--pricing-card-highlight-scale: 1` there.

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

@@ -1,15 +1,20 @@
 <template>
-  <component :is="tag" class="pricing-card" :class="[elementClasses, { 'is-highlighted': isHighlighted }]">
+  <component
+    :is="tag"
+    class="pricing-card"
+    :class="[elementClasses, { 'is-highlighted': isHighlighted, 'has-ribbon': Boolean(ribbonText) }]"
+    :aria-labelledby="headingId"
+  >
     <div v-if="isHighlighted" class="pricing-card__badge">{{ badgeText }}</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>
+    <component :is="headingTag" :id="headingId" class="pricing-card__name">{{ planName }}</component>
 
     <div class="pricing-card__price">
-      <span class="pricing-card__amount">{{ currencySymbol }}{{ price }}</span>
+      <span class="pricing-card__amount">{{ currencySymbol }}{{ displayPrice }}</span>
       <span v-if="billingPeriod" class="pricing-card__period">{{ billingPeriod }}</span>
     </div>
 
@@ -34,6 +39,7 @@
 <script setup lang="ts">
 interface Props {
   tag?: "div" | "section" | "article";
+  headingTag?: "h2" | "h3" | "h4" | "h5" | "h6";
   planName: string;
   price: number;
   currencySymbol?: string;
@@ -50,6 +56,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   tag: "article",
+  headingTag: "h3",
   currencySymbol: "$",
   billingPeriod: "one-time",
   description: undefined,
@@ -66,6 +73,13 @@ const emit = defineEmits<{
   select: [planName: string];
 }>();
 
+const headingId = useId();
+
+const displayPrice = computed(() => {
+  if (!Number.isFinite(props.price)) return "";
+  return Number.isInteger(props.price) ? String(props.price) : props.price.toFixed(2);
+});
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const handleSelect = () => {
@@ -85,48 +99,52 @@ watch(
   .pricing-card {
     --_ribbon-size: var(--pricing-card-ribbon-size, 20rem);
 
-    --_cta-bg-hover: var(
-      --pricing-card-cta-bg-hover,
-      var(--input-button-primary-surface-hover, var(--theme-surface-hover))
-    );
-
     display: flex;
     flex-direction: column;
     gap: var(--pricing-card-gap, 1.2rem);
     position: relative;
+    min-inline-size: 0;
 
     padding: var(--pricing-card-padding, 2rem);
-    background-color: var(--pricing-card-background, var(--slate-00));
+    background-color: var(--pricing-card-background, var(--theme-surface-subtle));
     border: var(--pricing-card-border, 1px solid var(--slate-03));
     border-radius: var(--pricing-card-border-radius, 0.8rem);
     box-shadow: var(--pricing-card-shadow, 0 2px 8px oklch(from var(--slate-08) l c h / 0.12));
 
-    transition: all 0.3s ease;
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: transform, box-shadow, border-color;
+      transition-duration: var(--pricing-card-transition-duration, 300ms);
+      transition-timing-function: ease;
+    }
 
     &.is-highlighted {
-      border: var(--pricing-card-highlight-border, 2px solid var(--teal-06));
-      box-shadow: var(--pricing-card-highlight-shadow, 0 8px 24px oklch(from var(--teal-06) l c h / 0.2));
+      border: var(--pricing-card-highlight-border, 2px solid var(--theme-border));
+      box-shadow: var(--pricing-card-highlight-shadow, 0 8px 24px oklch(from var(--slate-08) l c h / 0.2));
       transform: scale(var(--pricing-card-highlight-scale, 1.05));
     }
 
     .pricing-card__badge {
       position: absolute;
-      top: -0.6rem;
-      left: 50%;
-      transform: translateX(-50%);
-      /* Above .pricing-card__ribbon-clip (z-index: 1) — without this the badge has no stacking
-         context of its own and the ribbon, which does, paints over it regardless of DOM order. */
+      inset-block-start: 0;
+      inset-inline: 0;
+      translate: 0 -50%;
+      inline-size: fit-content;
+      max-inline-size: calc(100% - 2rem);
+      margin-inline: auto;
+      /* Above .pricing-card__ribbon-clip (z-index: 1), which otherwise paints over it. */
       z-index: 2;
 
-      display: inline-block;
       padding: 0.4rem 1rem;
-      background-color: var(--pricing-card-badge-bg, var(--teal-06));
-      color: var(--pricing-card-badge-text, var(--teal-00));
+      background-color: var(--pricing-card-badge-bg, var(--theme-surface));
+      color: var(--pricing-card-badge-text, var(--theme-on-surface));
       border-radius: 2rem;
-      font-size: 0.75rem;
+      font-size: var(--pricing-card-badge-font-size, 1.2rem);
       font-weight: 600;
+      text-align: center;
       text-transform: uppercase;
       letter-spacing: 0.05em;
+      overflow-wrap: anywhere;
+      text-wrap: balance;
     }
 
     .pricing-card__ribbon-clip {
@@ -137,7 +155,6 @@ watch(
       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 {
@@ -148,7 +165,12 @@ watch(
         transform: rotate(23deg);
         transform-origin: center;
 
-        display: block;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        -webkit-line-clamp: var(--pricing-card-ribbon-line-clamp, 2);
+        line-clamp: var(--pricing-card-ribbon-line-clamp, 2);
+        overflow-wrap: anywhere;
         padding: 0.6rem 1.4rem 0.6rem 0;
         background-color: var(--pricing-card-ribbon-bg, var(--red-06));
         color: var(--pricing-card-ribbon-text, var(--red-00, white));
@@ -160,33 +182,55 @@ watch(
       }
     }
 
+    &.has-ribbon .pricing-card__name {
+      padding-right: var(--pricing-card-ribbon-clearance, 6rem);
+    }
+
     .pricing-card__name {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      -webkit-line-clamp: var(--pricing-card-name-line-clamp, none);
+      line-clamp: var(--pricing-card-name-line-clamp, none);
+      overflow-wrap: anywhere;
       margin: 0;
       font-size: var(--pricing-card-name-font-size, 1.8rem);
       font-weight: 600;
-      color: var(--pricing-card-name-color, #1a1a1a);
+      color: var(--pricing-card-name-color, var(--theme-text));
     }
 
     .pricing-card__price {
       display: flex;
+      flex-wrap: wrap;
       align-items: baseline;
       gap: 0.4rem;
+      min-inline-size: 0;
     }
 
     .pricing-card__amount {
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
       font-size: var(--pricing-card-amount-font-size, 3.2rem);
       font-weight: 700;
-      color: var(--pricing-card-amount-color, #1a1a1a);
+      color: var(--pricing-card-amount-color, var(--theme-text));
     }
 
     .pricing-card__period {
-      font-size: var(--pricing-card-period-font-size, 0.9rem);
-      color: var(--pricing-card-period-color, #666);
+      min-inline-size: 0;
+      overflow-wrap: anywhere;
+      font-size: var(--pricing-card-period-font-size, 1.4rem);
+      color: var(--pricing-card-period-color, var(--theme-text));
     }
 
     .pricing-card__description {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      -webkit-line-clamp: var(--pricing-card-description-line-clamp, none);
+      line-clamp: var(--pricing-card-description-line-clamp, none);
+      overflow-wrap: anywhere;
       margin: 0;
-      color: var(--pricing-card-description-color, #555);
+      color: var(--pricing-card-description-color, var(--theme-text));
       line-height: 1.5;
     }
 
@@ -202,33 +246,29 @@ watch(
     }
 
     .pricing-card__feature {
-      color: var(--pricing-card-feature-color, #333);
-      padding-left: 1.6rem;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      -webkit-line-clamp: var(--pricing-card-feature-line-clamp, none);
+      line-clamp: var(--pricing-card-feature-line-clamp, none);
+      overflow-wrap: anywhere;
+      color: var(--pricing-card-feature-color, var(--theme-text));
+      padding-inline-start: 1.6rem;
       position: relative;
 
       &::before {
         content: "✓";
+        content: "✓" / "";
         position: absolute;
-        left: 0;
-        color: var(--teal-06);
+        inset-inline-start: 0;
+        color: var(--pricing-card-feature-icon-color, var(--theme-accent));
         font-weight: bold;
       }
     }
 
     .pricing-card__cta {
       align-self: var(--pricing-card-cta-align, flex-start);
-
-      :deep(.input-button) {
-        padding: var(--pricing-card-cta-padding, 1rem 1.6rem);
-        background-color: var(--pricing-card-cta-bg, var(--input-button-primary-surface, var(--theme-surface)));
-        color: var(--pricing-card-cta-text, var(--input-button-primary-text, var(--theme-on-surface)));
-        border-radius: var(--pricing-card-cta-border-radius, 0.4rem);
-        font-weight: 600;
-
-        &:hover:not([aria-disabled="true"]) {
-          background-color: var(--_cta-bg-hover);
-        }
-      }
+      max-inline-size: 100%;
     }
   }
 }