srcdev-nuxt-components 9.6.10 → 9.6.12

package/app/components/05.forms/input-button/CONSUMER-STYLING.md

@@ -7,14 +7,21 @@ Every colour token below is `var(--input-button-{variant}-{property}, {default})
 the shared `--theme-*` slot every other themed component (inputs, alerts, ...) also falls back to.
 See `theming-component-token-pattern.md` for why this two-tier shape exists.
 
-**Resting state is flat by design**: `border` defaults to the variant's own surface colour, so
-there's no visible edge until you hover, focus, or override it. **`outline` defaults to fully
-transparent** in both resting and hover state — outline is reserved for the focus-visible ring,
-not used to reinforce the flat look. **Hover always darkens the resting surface** via `color-mix()`
-rather than jumping to a different `--theme-*` step — it's reliably darker in both light and dark
-mode. **`:focus-visible` is a separate token set**, not grouped with hover, since it's the one
-state that gets a real, independently-themeable indicator (its `outline-width`/`-offset` come from
-`--button-focus-ring-width`/`-offset`, not from here — see `theming-form-geometry-tokens.md`).
+The variants follow the usual hierarchy: **primary** is filled, **secondary** is outlined
+(transparent background, border and text in the theme colour), **tertiary** is text-only
+(no background or border until hover), and **inline** has no colours at all, for wrapper
+components that style the button themselves. Primary and secondary also carry a light **shadow ring** (`box-shadow`, 2px of theme step 2)
+outside the border, and on **hover** their 1px outline (no offset) takes the hover border colour,
+so it draws over the inner edge of that ring. Tertiary has neither. The `outline` is transparent
+at rest. **`:focus-visible` is a separate token set**
+(its `outline-width`/`-offset` come from `--button-focus-ring-width`/`-offset`, see
+`theming-form-geometry-tokens.md`).
+
+> **Changed 2026-10-17**: secondary was filled with `--theme-surface-inverted`, which read as a
+> darker primary; tertiary was a grey `--slate-01` fill with an underlined label. To bring back
+> the old look for one site, set the secondary or tertiary tokens below (e.g.
+> `--input-button-secondary-surface: var(--theme-surface-inverted)` and
+> `--input-button-secondary-text: var(--theme-text-inverted)`).
 
 Geometry and typography (`--button-*`) are separate, already-global tokens with real defaults —
 see `theming-form-geometry-tokens.md`. Not duplicated here. One geometry token worth calling out:
@@ -32,60 +39,78 @@ the `InlineWithTextInput` story). `box-sizing: content-box` means it's a floor,
 | `--input-button-primary-ring` | `transparent` | Outline colour (resting) |
 | `--input-button-primary-surface-hover` | `color-mix(in oklab, surface 85%, black)` | Background on hover |
 | `--input-button-primary-border-hover` | the resolved hover surface above | Border colour on hover |
-| `--input-button-primary-ring-hover` | `transparent` | Outline colour on hover |
+| `--input-button-primary-ring-hover` | the resolved hover border above | Outline colour on hover (1px, no offset) |
+| `--input-button-primary-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Shadow ring colour (all states) |
 | `--input-button-primary-border-focus` | `var(--theme-border-focus)` | Border colour on `:focus-visible` |
 | `--input-button-primary-ring-focus` | `var(--theme-ring)` | Outline colour on `:focus-visible` |
 
-### Secondary
+### Secondary (outlined)
 
-Same shape, falls back to the inverted-surface slots instead:
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-button-secondary-surface` | `transparent` | Background (resting) |
+| `--input-button-secondary-text` | `var(--theme-surface)` | Text colour (all states) |
+| `--input-button-secondary-border` | `var(--theme-surface)` | Border colour (resting) |
+| `--input-button-secondary-ring` | `transparent` | Outline colour (resting) |
+| `--input-button-secondary-ring-hover` | the resolved hover border | Outline colour on hover (1px, no offset) |
+| `--input-button-secondary-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Shadow ring colour (all states) |
+| `--input-button-secondary-surface-hover` | `var(--theme-surface-subtle)` | Background on hover |
+| `--input-button-secondary-border-hover` | the resolved border above | Border colour on hover |
+| `--input-button-secondary-border-focus` | `var(--theme-border-focus)` | Border colour on `:focus-visible` |
+| `--input-button-secondary-ring-focus` | `var(--theme-ring)` | Outline colour on `:focus-visible` |
+
+### Tertiary (text-only)
 
-| Token | Falls back to |
-|---|---|
-| `--input-button-secondary-surface` | `var(--theme-surface-inverted)` |
-| `--input-button-secondary-text` | `var(--theme-text-inverted)` |
-| `--input-button-secondary-border` | the resolved surface above (flat) |
-| `--input-button-secondary-ring` / `-ring-hover` | `transparent` |
-| `--input-button-secondary-surface-hover` | `color-mix(in oklab, surface 85%, black)` |
-| `--input-button-secondary-border-hover` | the resolved hover surface above |
-| `--input-button-secondary-border-focus` | `var(--theme-border-focus)` |
-| `--input-button-secondary-ring-focus` | `var(--theme-ring)` |
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-button-tertiary-surface` | `transparent` | Background (resting) |
+| `--input-button-tertiary-text` | `var(--theme-surface)` | Text colour (all states) |
+| `--input-button-tertiary-border` | `transparent` | Border colour (resting) |
+| `--input-button-tertiary-ring` / `-ring-hover` | `transparent` | Outline colour |
+| `--input-button-tertiary-surface-hover` | `var(--theme-surface-subtle)` | Background on hover |
+| `--input-button-tertiary-border-hover` | `transparent` | Border colour on hover |
+| `--input-button-tertiary-border-focus` | `var(--theme-border-focus)` | Border colour on `:focus-visible` |
+| `--input-button-tertiary-ring-focus` | `var(--theme-ring)` | Outline colour on `:focus-visible` |
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-button-shadow-width` | `var(--form-element-shadow-width)` (`0.2rem`) | Width of the primary and secondary shadow ring. Set `0` to remove it from buttons only; set the global token to `0` to remove it from every form control |
 
-### Tertiary
+The focus ring's offset (`--button-focus-ring-offset`, `0.2rem`) puts it just outside the shadow
+ring; if you widen the ring, raise the offset to match or the focus ring will draw over it. An
+ancestor with `overflow: hidden` and no spare room clips the ring.
 
-Same shape again:
+Secondary and tertiary text sits on the page background, so on a dark section set their `-text`
+and `-border` tokens to a light colour.
 
-| Token | Falls back to |
-|---|---|
-| `--input-button-tertiary-surface` | `var(--slate-01)` |
-| `--input-button-tertiary-text` | `var(--theme-text)` |
-| `--input-button-tertiary-border` | the resolved surface above (flat) |
-| `--input-button-tertiary-ring` / `-ring-hover` | `transparent` |
-| `--input-button-tertiary-surface-hover` | `color-mix(in oklab, surface 85%, black)` |
-| `--input-button-tertiary-border-hover` | the resolved hover surface above |
-| `--input-button-tertiary-border-focus` | `var(--theme-border-focus)` |
-| `--input-button-tertiary-ring-focus` | `var(--theme-ring)` |
-
-`.is-pending` always dims the *primary* surface regardless of variant — a pre-existing quirk, not
-something this token set changes. The animated border added by `has-pending-effect` has its own
-`--pending-effect-*` tokens, see `../pending-effect/CONSUMER-STYLING.md`.
+`[data-pending]` dims a primary button's surface to 50%; secondary and tertiary keep their own
+background. The animated border added by `has-pending-effect` has its own `--pending-effect-*`
+tokens, see `../pending-effect/CONSUMER-STYLING.md`.
 
 ### Text wrapping
 
 | Token | Default | Controls |
 |---|---|---|
-| `--input-button-text-white-space` | `nowrap` | Set `normal` to let a long label wrap onto several lines instead of overflowing the button. Unbroken strings break anywhere once wrapping is on |
+| `--input-button-text-white-space` | `normal` | Long labels wrap onto several lines inside the button, and unbroken strings break anywhere. Set `nowrap` to keep a label on one line; the button then grows to fit it and can overflow a narrow container |
 
-> Added 2026-10-06. `ServicesCardGrid` sets it to `normal` on its CTA buttons so a long service title stays inside the card.
+> Added 2026-10-06. **Changed 2026-10-17**: the default was `nowrap`, which pushed a long label
+> past a narrow column. If you relied on one-line labels in a tight row, set
+> `--input-button-text-white-space: nowrap` on that row.
+
+Button text has no line-clamp token on purpose: a cut-off action label can't be trusted.
+
+Private tokens (not public API): `--_surface` and `--_surface-hover` (primary's resolved
+surfaces, which its border, hover and contrast colours derive from) and `--_primary-border-hover`, `--_secondary-border` and `--_secondary-border-hover`.
 
 `InputCopy` and `PricingCard` fall back through `--input-button-primary-*` for their own copy/CTA
 buttons (see their own `CONSUMER-STYLING.md`) rather than duplicating this chain.
 
 > **Trial, 2026-09-27: automatic text contrast.** In browsers that support CSS `contrast-color()`
-> (Safari/iOS 26, Firefox 146, Chrome/Edge 147), an unset `--input-button-{variant}-text` resolves
+> (Safari/iOS 26, Firefox 146, Chrome/Edge 147), an unset `--input-button-primary-text` resolves
 > to `contrast-color()` of that state's own surface: pure black or pure white, whichever has more
 > contrast, re-evaluated on hover. Older browsers keep the defaults in the tables above. Setting
-> the `-text` token explicitly always wins, so you can opt a variant out. The whole behaviour is
+> the `-text` token explicitly always wins, so you can opt out. Secondary and tertiary aren't part of the trial since
+> 2026-10-17: their surface is transparent. The whole behaviour is
 > one `@supports` block in `InputButton.vue` and may be removed if the trial doesn't hold up.
 
 ---
@@ -101,15 +126,23 @@ buttons (see their own `CONSUMER-STYLING.md`) rather than duplicating this chain
 
 | Hook | When |
 |---|---|
-| `.primary`, `.secondary`, `.tertiary`, `.inline` | The `variant` prop |
+| `[data-variant="primary" \| "secondary" \| "tertiary" \| "inline"]` | The `variant` prop |
 | `[data-theme]` | The `theme` prop (re-declares the `--theme-*` palette on the button) |
-| `.icon-only` | The `#iconOnly` slot is used (square, text becomes `sr-only`) |
-| `.pill` | `is-pill` |
-| `.is-pending`, `.pending-effect` | `is-pending` / `has-pending-effect` |
-| `.is-link` | `href` is set (renders `NuxtLink` or `<a>`) |
+| `[data-icon-only]` | The `#iconOnly` slot is used (square, text becomes `sr-only`) |
+| `[data-pill]` | `is-pill` |
+| `[data-pending]`, `[data-pending-effect]` | `is-pending` / `has-pending-effect` |
+| `[data-link]` | `href` is set (renders `NuxtLink` or `<a>`) |
 | `[readonly]` + `aria-disabled="true"` | `readonly` (dimmed, not operable by mouse or keyboard) |
 
-Inner classes: `.button-text`, `.btn-icon` with `.left` / `.right` / `.icon-only`.
+Inner elements: `.input-button-text`, and `.input-button-icon` with `data-slot="left"`,
+`"right"` or `"icon-only"`.
+
+> **Changed 2026-10-17**: these were bare classes, which collided with consumer CSS. Update
+> selectors: `.input-button.primary` → `.input-button[data-variant="primary"]`, `.pill` →
+> `[data-pill]`, `.is-pending` → `[data-pending]`, `.pending-effect` → `[data-pending-effect]`,
+> `.is-link` → `[data-link]`, `.icon-only` → `[data-icon-only]`, `.button-text` →
+> `.input-button-text`, `.btn-icon.left` → `.input-button-icon[data-slot="left"]`. Same
+> specificity, so overrides keep winning where they did.
 
 
 ## Global theming

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

@@ -4,23 +4,29 @@
     :type="!isLink ? props.type : undefined"
     :href="isLink ? props.href : undefined"
     :readonly="!isLink ? props.readonly : undefined"
-    :aria-disabled="!isLink ? props.readonly : undefined"
+    :aria-disabled="!isLink && props.readonly ? 'true' : undefined"
     data-testid="input-button"
     :data-theme="theme"
+    :data-variant="variant"
+    :data-pill="isPill ? '' : undefined"
+    :data-pending="isPending ? '' : undefined"
+    :data-pending-effect="hasPendingEffect ? '' : undefined"
+    :data-link="isLink ? '' : undefined"
+    :data-icon-only="hasIconOnlySlot() ? '' : undefined"
     class="input-button"
-    :class="buttonClasses()"
+    :class="elementClasses"
     @click.capture="guardReadonly"
   >
     <PendingEffect v-if="hasPendingEffect" :theme="theme" />
 
-    <span v-if="hasLeftSlot()" class="btn-icon left">
+    <span v-if="hasLeftSlot()" class="input-button-icon" data-slot="left">
       <slot name="left"></slot>
     </span>
-    <span class="button-text" :class="[{ 'sr-only': hasIconOnlySlot() }]">{{ buttonText }}</span>
-    <span v-if="hasRightSlot()" class="btn-icon right">
+    <span class="input-button-text" :class="{ 'sr-only': hasIconOnlySlot() }">{{ buttonText }}</span>
+    <span v-if="hasRightSlot()" class="input-button-icon" data-slot="right">
       <slot name="right"></slot>
     </span>
-    <span v-if="hasIconOnlySlot()" class="btn-icon icon-only">
+    <span v-if="hasIconOnlySlot()" class="input-button-icon" data-slot="icon-only">
       <slot name="iconOnly"></slot>
     </span>
   </component>
@@ -77,22 +83,10 @@ const tag = computed(() => {
   return "button";
 });
 
-// Cache slot computations for better performance
 const hasLeftSlot = () => Boolean(slots.left && !slots.iconOnly);
 const hasRightSlot = () => Boolean(slots.right && !slots.iconOnly);
 const hasIconOnlySlot = () => Boolean(slots.iconOnly);
 
-// Combine all button classes into a single computed
-const buttonClasses = () => [
-  props.variant,
-  elementClasses.value,
-  { "icon-only": hasIconOnlySlot() },
-  { "pending-effect": props.hasPendingEffect },
-  { "is-pending": props.isPending },
-  { pill: props.isPill },
-  { "is-link": isLink.value },
-];
-
 const guardReadonly = (event: MouseEvent) => {
   if (!props.readonly) return;
   event.preventDefault();
@@ -128,47 +122,32 @@ watch(
     overflow: hidden;
     transition: all var(--control-transition-duration) var(--control-transition-ease);
 
-    &.is-link {
+    &[data-link] {
       display: inline-grid;
     }
 
-    &.pending-effect {
+    &[data-pending-effect] {
       overflow: visible;
     }
 
-    /*
-    * Theming
-    * Every colour is a public --input-button-{variant}-{property} token, inline-fallback to
-    * the shared theme slot (see theming-component-token-pattern.md for why: overriding one
-    * variant here never touches the --theme-* slots other components read).
-    *
-    * Flat by default: border defaults to the variant's own surface colour (so the resting state
-    * shows no visible edge) and outline defaults to fully transparent — outline is reserved for
-    * the focus-visible ring, not used to reinforce the flat look. Hover darkens the surface via
-    * color-mix (always darker, regardless of which direction the underlying theme ramp runs in
-    * light vs dark mode — no more "hover looks lighter" surprises) and carries the border along
-    * with it, still flat; outline stays transparent through hover too.
-    * focus-visible is deliberately its own block, not grouped with :hover — it's the one state
-    * that gets a real, separately-themeable a11y indicator, and its outline-width/-offset (set
-    * below, in Shared States) give it a visible ring regardless of the border/outline being
-    * invisible everywhere else.
-    * --_surface is a private local (not a public token) — it exists purely so -hover/-border/-ring
-    * can color-mix() off the SAME resolved value a consumer's --input-button-{variant}-surface
-    * override produces, without every derived token repeating that fallback chain itself.
-    **/
-    &.primary {
+    /* Primary is filled, secondary outlined, tertiary text-only; inline has no colours (wrappers style it).
+       Primary and secondary carry a light shadow ring; hover draws the outline over its inner edge. */
+    &[data-variant="primary"] {
       --_surface: var(--input-button-primary-surface, var(--theme-surface));
       --_surface-hover: var(--input-button-primary-surface-hover, color-mix(in oklab, var(--_surface) 85%, black));
+      --_primary-border-hover: var(--input-button-primary-border-hover, var(--_surface-hover));
 
       background-color: var(--_surface);
       color: var(--input-button-primary-text, var(--theme-on-surface));
       border: var(--button-border-width) solid var(--input-button-primary-border, var(--_surface));
       outline: var(--button-outline-width) solid var(--input-button-primary-ring, transparent);
+      box-shadow: 0 0 0 var(--input-button-shadow-width, var(--form-element-shadow-width))
+        var(--input-button-primary-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
 
       &:hover {
         background-color: var(--_surface-hover);
-        border-color: var(--input-button-primary-border-hover, var(--_surface-hover));
-        outline-color: var(--input-button-primary-ring-hover, transparent);
+        border-color: var(--_primary-border-hover);
+        outline-color: var(--input-button-primary-ring-hover, var(--_primary-border-hover));
       }
 
       &:focus-visible {
@@ -177,9 +156,7 @@ watch(
       }
     }
 
-    &.is-pending {
-      /* Always the primary surface regardless of variant — pre-existing behaviour, not
-         something this migration changes. */
+    &[data-pending] {
       background-color: color-mix(
         in oklab,
         var(--input-button-primary-surface, var(--theme-surface)) 50%,
@@ -187,22 +164,21 @@ watch(
       );
     }
 
-    &.secondary {
-      --_surface: var(--input-button-secondary-surface, var(--theme-surface-inverted));
-      --_surface-hover: var(
-        --input-button-secondary-surface-hover,
-        color-mix(in oklab, var(--_surface) 85%, black)
-      );
+    &[data-variant="secondary"] {
+      --_secondary-border: var(--input-button-secondary-border, var(--theme-surface));
+      --_secondary-border-hover: var(--input-button-secondary-border-hover, var(--_secondary-border));
 
-      background-color: var(--_surface);
-      color: var(--input-button-secondary-text, var(--theme-text-inverted));
-      border: var(--button-border-width) solid var(--input-button-secondary-border, var(--_surface));
+      background-color: var(--input-button-secondary-surface, transparent);
+      color: var(--input-button-secondary-text, var(--theme-surface));
+      border: var(--button-border-width) solid var(--_secondary-border);
       outline: var(--button-outline-width) solid var(--input-button-secondary-ring, transparent);
+      box-shadow: 0 0 0 var(--input-button-shadow-width, var(--form-element-shadow-width))
+        var(--input-button-secondary-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
 
       &:hover {
-        background-color: var(--_surface-hover);
-        border-color: var(--input-button-secondary-border-hover, var(--_surface-hover));
-        outline-color: var(--input-button-secondary-ring-hover, transparent);
+        background-color: var(--input-button-secondary-surface-hover, var(--theme-surface-subtle));
+        border-color: var(--_secondary-border-hover);
+        outline-color: var(--input-button-secondary-ring-hover, var(--_secondary-border-hover));
       }
 
       &:focus-visible {
@@ -211,22 +187,15 @@ watch(
       }
     }
 
-    &.tertiary {
-      --_surface: var(--input-button-tertiary-surface, var(--slate-01));
-      --_surface-hover: var(
-        --input-button-tertiary-surface-hover,
-        color-mix(in oklab, var(--_surface) 85%, black)
-      );
-
-      background-color: var(--_surface);
-      color: var(--input-button-tertiary-text, var(--theme-text));
-      border: var(--button-border-width) solid var(--input-button-tertiary-border, var(--_surface));
+    &[data-variant="tertiary"] {
+      background-color: var(--input-button-tertiary-surface, transparent);
+      color: var(--input-button-tertiary-text, var(--theme-surface));
+      border: var(--button-border-width) solid var(--input-button-tertiary-border, transparent);
       outline: var(--button-outline-width) solid var(--input-button-tertiary-ring, transparent);
-      text-decoration: underline;
 
       &:hover {
-        background-color: var(--_surface-hover);
-        border-color: var(--input-button-tertiary-border-hover, var(--_surface-hover));
+        background-color: var(--input-button-tertiary-surface-hover, var(--theme-surface-subtle));
+        border-color: var(--input-button-tertiary-border-hover, transparent);
         outline-color: var(--input-button-tertiary-ring-hover, transparent);
       }
 
@@ -236,38 +205,21 @@ watch(
       }
     }
 
-    /* Trial (2026-09-27): where supported, text picks black or white from its own surface, per
-       state. An explicit --input-button-{variant}-text still wins. Remove this block to revert. */
+    /* Trial (2026-09-27): primary text picks black or white from its own surface. Remove to revert. */
     @supports (color: contrast-color(red)) {
-      &.primary {
+      &[data-variant="primary"] {
         color: var(--input-button-primary-text, contrast-color(var(--_surface)));
 
         &:hover {
           color: var(--input-button-primary-text, contrast-color(var(--_surface-hover)));
         }
       }
-
-      &.secondary {
-        color: var(--input-button-secondary-text, contrast-color(var(--_surface)));
-
-        &:hover {
-          color: var(--input-button-secondary-text, contrast-color(var(--_surface-hover)));
-        }
-      }
-
-      &.tertiary {
-        color: var(--input-button-tertiary-text, contrast-color(var(--_surface)));
-
-        &:hover {
-          color: var(--input-button-tertiary-text, contrast-color(var(--_surface-hover)));
-        }
-      }
     }
 
-    &.primary,
-    &.secondary,
-    &.tertiary {
-      &.pill {
+    &[data-variant="primary"],
+    &[data-variant="secondary"],
+    &[data-variant="tertiary"] {
+      &[data-pill] {
         border-radius: 100vw;
       }
     }
@@ -290,10 +242,10 @@ watch(
       pointer-events: none;
     }
 
-    .button-text {
+    & .input-button-text {
       display: inline-block;
       min-inline-size: 0;
-      white-space: var(--input-button-text-white-space, nowrap);
+      white-space: var(--input-button-text-white-space, normal);
       overflow-wrap: anywhere;
       font-size: var(--button-font-size);
       line-height: var(--button-line-height);
@@ -301,22 +253,22 @@ watch(
       text-transform: var(--button-text-transform);
     }
 
-    .btn-icon {
+    & .input-button-icon {
       display: flex;
 
-      .icon {
+      & .icon {
         display: inline-block;
         font-size: var(--input-icon-size);
       }
     }
 
-    &.icon-only {
+    &[data-icon-only] {
       aspect-ratio: 1;
       border-radius: var(--button-border-radius-icon-only);
       margin: 0;
       padding: 0;
 
-      .btn-icon {
+      & .input-button-icon {
         margin: 1.2rem;
       }
     }

package/app/components/05.forms/input-button/playwright/input-button.playwright.ts

@@ -2,7 +2,7 @@ import { test, expect, type Page } from "@playwright/test";
 
 // --- Config ---
 const STORYBOOK_URL = "http://127.0.0.1:6006";
-const STORY_BASE = "components-forms-input-button-inputbuttoncore";
+const STORY_BASE = "components-forms-input-button-inputbutton";
 const BUTTON_TIMEOUT = 15000;
 
 // --- Helpers ---