srcdev-nuxt-components 9.3.11 → 9.3.13

package/app/components/05.forms/input-button/stories/InputButtonCore.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
 import StorybookComponent from "../InputButtonCore.vue";
+import InputTextCore from "../../input-text/InputTextCore.vue";
 
 interface InputButtonCoreStoryArgs {
   type: "submit" | "button" | "reset";
@@ -240,7 +241,17 @@ const Template: StoryFn<InputButtonCoreStoryArgs> = (args) => ({
   },
   template: `
     <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;margin: 36px;">
+      <!-- :key forces a remount when any slot-visibility arg changes. Verified the args
+           themselves ARE reactive here (a plain {{ args.useLeftSlot }} interpolation updates
+           live on toggle) — the bug is narrower: Vue's compiled-at-runtime string template
+           doesn't reliably re-evaluate a <template v-if="..."> conditionally attached to a named
+           slot when only the v-if's condition changes, on this component/Storybook combination.
+           Toggling a control changed the fallthrough attribute (confirmed via useleftslot="true"
+           in the rendered DOM) but never actually added/removed the slot content until a hard
+           refresh. Remounting sidesteps whatever the underlying slot-stability quirk is, rather
+           than chasing it further. -->
       <StorybookComponent
+        :key="[args.useLeftSlot, args.useLeftIcon, args.useRightSlot, args.useRightIcon, args.useIconOnlySlot, args.useIconOnly].join(',')"
         v-bind="args"
         @click="handleClick"
       >
@@ -302,3 +313,27 @@ NuxtIconOnlyComponent.args = {
   useIconOnly: true,
   iconOnlyName: "mdi:chevron-right-circle-outline",
 };
+
+// Composition check, not a props demo: confirms InputButtonCore's --button-min-height (defaults
+// to var(--input-min-height)) actually keeps it height-aligned with an inline text input, the
+// most common "usual suspect" pairing (e.g. newsletter signup, search bar). Textareas are the
+// deliberate exception to this alignment and aren't part of this story.
+const InlineTemplate: StoryFn = () => ({
+  components: { StorybookComponent, InputTextCore },
+  template: `
+    <div style="margin: 36px; max-width: 480px;">
+      <div style="display: flex; align-items: flex-start; gap: 0.8rem;">
+        <InputTextCore
+          id="inline-email"
+          name="email"
+          type="email"
+          placeholder="you@example.com"
+          style="flex: 1;"
+        />
+        <StorybookComponent type="submit" variant="primary" button-text="Subscribe" />
+      </div>
+    </div>
+  `,
+});
+
+export const InlineWithTextInput = InlineTemplate.bind({});

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

@@ -0,0 +1,68 @@
+# InputCheckboxRadioCore / InputCheckboxRadioButton — Consumer Styling Guide
+
+## Public token API
+
+Every colour token below is `var(--input-checkbox-*, {default})` — set the `--input-checkbox-*`
+name to override just this component; leave it unset and it inherits the shared `--theme-*` slot
+(or `--theme-checkbox-symbol-surface`/`--theme-input-surface` family) every other themed component
+also falls back to. See `theming-component-token-pattern.md` for why this two-tier shape exists.
+
+Defaults are unchanged from before this migration — this is a token-rename pass (giving each
+property its own override point), not a redesign, unlike `InputButtonCore`'s flat/darker-hover
+treatment. Geometry (`--input-checked-element-size`, `--form-element-*`, etc.) is separate and
+untouched — see `theming-form-geometry-tokens.md`.
+
+### The control itself (`InputCheckboxRadioCore` — the square/circle)
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-checkbox-surface` | `var(--theme-checkbox-symbol-surface)` | Background |
+| `--input-checkbox-border` | `var(--theme-border)` | Border colour |
+| `--input-checkbox-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible` (non-button style only — see note) |
+| `--input-checkbox-icon-color` | `var(--theme-text)` | Checked-state icon colour |
+
+> The `:focus-visible` outline only applies to the plain checkbox/radio style
+> (`:not(.button)`) — `InputCheckboxRadioButton`'s pill/button style has its own focus treatment,
+> below, via `:has(.input-checkbox-radio-core:focus-visible)` on the outer label.
+
+### The pill/button style (`InputCheckboxRadioButton` — e.g. a "Services of interest" option list)
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-checkbox-button-surface` | `var(--theme-input-surface)` | Background (resting) |
+| `--input-checkbox-button-border` | `var(--theme-border)` | Border colour (resting and hover — unchanged between the two by default) |
+| `--input-checkbox-button-surface-hover` | `var(--theme-input-surface-hover)` | Background on hover |
+| `--input-checkbox-button-ring-hover` | `var(--theme-ring)` | Outline colour on hover |
+| `--input-checkbox-button-surface-focus` | `var(--theme-surface-subtle)` | Background when the inner control has `:focus-visible` |
+| `--input-checkbox-button-ring-focus` | `var(--theme-border-focus)` | Outline colour when the inner control has `:focus-visible` |
+| `--input-checkbox-button-label-color` | `var(--colour-text-default)` | Option label text colour |
+| `--input-checkbox-button-icon-color` | `var(--theme-text)` | Trailing decorator icon colour (the `+` in the corner) |
+
+---
+
+## Global theming — app-level CSS file
+
+```css
+:where(html) {
+  --input-checkbox-button-surface: var(--rose-09);
+  --input-checkbox-button-surface-hover: var(--rose-08);
+  --input-checkbox-button-ring-focus: var(--rose-04);
+}
+```
+
+Only declare the tokens you want to change — everything else keeps inheriting the shared
+`--theme-*`/`--theme-input-*` tokens.
+
+---
+
+## Per-instance overrides
+
+```vue
+<InputCheckboxRadioButton
+  id="balayage"
+  type="checkbox"
+  name="services"
+  label="Balayage"
+  style="--input-checkbox-button-surface-hover: var(--gold-08);"
+/>
+```

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

@@ -100,23 +100,28 @@ const flexDirection = ref(props.direction);
   &.inline {
     --_white-space: nowrap;
   }
-  background-color: var(--theme-input-surface);
-  border: var(--form-element-border-width) solid var(--theme-border);
+
+  /* Public --input-checkbox-button-* tokens, inline-fallback to the shared theme tokens (see
+     theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
+     input/control that also reads --theme-input-surface/--theme-border, etc. Defaults are
+     unchanged from before this migration — this is a token-rename pass, not a redesign. */
+  background-color: var(--input-checkbox-button-surface, var(--theme-input-surface));
+  border: var(--form-element-border-width) solid var(--input-checkbox-button-border, var(--theme-border));
   outline: var(--form-element-outline-width) solid transparent;
 
   box-shadow: 0.1rem 0.1rem 0.8rem 0.1rem transparent;
 
   &:hover {
-    background-color: var(--theme-input-surface-hover);
-    border-color: var(--theme-border);
-    outline-color: var(--theme-ring);
+    background-color: var(--input-checkbox-button-surface-hover, var(--theme-input-surface-hover));
+    border-color: var(--input-checkbox-button-border, var(--theme-border));
+    outline-color: var(--input-checkbox-button-ring-hover, var(--theme-ring));
     outline-offset: var(--form-element-outline-offset-focus);
     cursor: pointer;
   }
 
   &:has(.input-checkbox-radio-core:focus-visible) {
-    background-color: var(--theme-surface-subtle);
-    outline-color: var(--theme-border-focus);
+    background-color: var(--input-checkbox-button-surface-focus, var(--theme-surface-subtle));
+    outline-color: var(--input-checkbox-button-ring-focus, var(--theme-border-focus));
     outline-offset: var(--form-element-outline-offset-focus);
   }
 
@@ -127,12 +132,17 @@ const flexDirection = ref(props.direction);
   .input-checkbox-radio-options-button-label {
     display: flex;
     flex-grow: 1;
-    color: var(--colour-text-default);
+    color: var(--input-checkbox-button-label-color, var(--colour-text-default));
     font-size: var(--input-font-size);
     width: 100%;
     min-height: var(--input-element-line-height);
     align-items: center;
     justify-content: center;
+    /* justify-content only centers the label as a single block — once text actually wraps
+       (e.g. "Half Head Highlights"), that block fills the full available width and each
+       individual line falls back to its default left-alignment inside it. text-align is what
+       centers wrapped lines relative to each other. */
+    text-align: center;
     padding-block: 0.8rem;
     padding-inline: 0.8rem;
     white-space: var(--_white-space);
@@ -146,7 +156,7 @@ const flexDirection = ref(props.direction);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--theme-text);
+    color: var(--input-checkbox-button-icon-color, var(--theme-text));
 
     .icon {
       height: var(--input-checkbox-decorator-icon-size);

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

@@ -112,8 +112,11 @@ const inputClasses = computed(() => [
   grid-template-areas: "element-stack";
   place-content: center;
 
-  background-color: var(--theme-checkbox-symbol-surface);
-  border: 0.1rem solid var(--theme-border);
+  /* Public --input-checkbox-* tokens, inline-fallback to the shared theme tokens (see
+     theming-component-token-pattern.md) — overriding one here doesn't touch every other
+     themed input/control that also reads --theme-checkbox-symbol-surface/--theme-border. */
+  background-color: var(--input-checkbox-surface, var(--theme-checkbox-symbol-surface));
+  border: 0.1rem solid var(--input-checkbox-border, var(--theme-border));
   outline: var(--form-element-outline-width) solid transparent;
 
   height: var(--input-checked-element-size);
@@ -139,7 +142,7 @@ const inputClasses = computed(() => [
 
   &:not(:is(.button)) {
     &:has(input:focus-visible) {
-      outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+      outline: var(--form-element-outline-width-focus) solid var(--input-checkbox-border-focus, var(--theme-border-focus));
       outline-offset: var(--form-element-outline-offset-focus);
     }
   }
@@ -150,7 +153,7 @@ const inputClasses = computed(() => [
 
       .input-checked-icon-checked,
       .icon {
-        color: var(--theme-text);
+        color: var(--input-checkbox-icon-color, var(--theme-text));
       }
     }
   }
@@ -164,7 +167,7 @@ const inputClasses = computed(() => [
 
     .input-checked-icon-checked,
     .icon {
-      color: var(--theme-text);
+      color: var(--input-checkbox-icon-color, var(--theme-text));
       height: var(--input-checked-icon-size);
       width: var(--input-checked-icon-size);
       box-shadow: var(--_box-shadow);

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

@@ -0,0 +1,93 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../InputCheckboxRadioButton.vue";
+
+interface InputCheckboxRadioButtonStoryArgs {
+  type: "checkbox" | "radio";
+  label: string;
+  isPill: boolean;
+  fieldHasError: boolean;
+  displayAsDisc: boolean;
+}
+
+export default {
+  title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadioButton",
+  component: StorybookComponent,
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["checkbox", "radio"],
+      table: { category: "Basic" },
+    },
+    label: { control: "text", table: { category: "Basic" } },
+    isPill: { control: "boolean", table: { category: "Styling" } },
+    fieldHasError: { control: "boolean", table: { category: "States" } },
+    displayAsDisc: { control: "boolean", table: { category: "Styling" } },
+  },
+  args: {
+    type: "checkbox",
+    label: "Balayage",
+    isPill: false,
+    fieldHasError: false,
+    displayAsDisc: false,
+  },
+} as Meta<InputCheckboxRadioButtonStoryArgs>;
+
+const Template: StoryFn<InputCheckboxRadioButtonStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const modelValue = ref(false);
+    return { args, modelValue };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 260px;">
+      <StorybookComponent
+        id="single-option"
+        name="single"
+        :type="args.type"
+        :label="args.label"
+        :is-pill="args.isPill"
+        :field-has-error="args.fieldHasError"
+        :display-as-disc="args.displayAsDisc"
+        v-model="modelValue"
+      />
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+// "Services of interest" pattern — the actual multi-option checkbox-pill layout this component
+// is normally used in (as opposed to Default's single isolated control).
+const OptionGroupTemplate: StoryFn = () => ({
+  components: { StorybookComponent },
+  setup() {
+    const services = [
+      "Balayage",
+      "Highlights",
+      "Half Head Highlights",
+      "Full Colour",
+      "Lowlights",
+      "Toner & Gloss",
+    ];
+    const selected = ref<string[]>([]);
+    return { services, selected };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;">
+      <StorybookComponent
+        v-for="service in services"
+        :key="service"
+        :id="'service-' + service"
+        name="services"
+        type="checkbox"
+        :label="service"
+        :true-value="service"
+        :multiple-options="true"
+        v-model="selected"
+      />
+    </div>
+  `,
+});
+
+export const OptionGroup = OptionGroupTemplate.bind({});

package/app/components/05.forms/input-checkbox-radio/stories/InputCheckboxRadioCore.stories.ts

@@ -0,0 +1,75 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../InputCheckboxRadioCore.vue";
+import type { FormUiTheme } from "~/types/forms/types.forms.d";
+
+interface InputCheckboxRadioCoreStoryArgs {
+  type: "checkbox" | "radio";
+  id: string;
+  name: string;
+  required: boolean;
+  theme: FormUiTheme;
+  fieldHasError: boolean;
+  displayAsDisc: boolean;
+}
+
+export default {
+  title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadioCore",
+  component: StorybookComponent,
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["checkbox", "radio"],
+      description: "Control type",
+      table: { category: "Basic" },
+    },
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Basic" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    fieldHasError: { control: "boolean", table: { category: "States" } },
+    displayAsDisc: {
+      control: "boolean",
+      description: "Checkbox only — render as a filled disc instead of a check icon",
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    type: "checkbox",
+    id: "core-checkbox",
+    name: "coreCheckbox",
+    required: false,
+    theme: "default",
+    fieldHasError: false,
+    displayAsDisc: false,
+  },
+} as Meta<InputCheckboxRadioCoreStoryArgs>;
+
+const Template: StoryFn<InputCheckboxRadioCoreStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const modelValue = ref(false);
+    return { args, modelValue };
+  },
+  template: `
+    <div style="margin: 36px;">
+      <StorybookComponent v-bind="args" v-model="modelValue" />
+    </div>
+  `,
+});
+
+export const Checkbox = Template.bind({});
+Checkbox.args = { type: "checkbox" };
+
+export const Radio = Template.bind({});
+Radio.args = { type: "radio" };
+
+export const CheckboxAsDisc = Template.bind({});
+CheckboxAsDisc.args = { type: "checkbox", displayAsDisc: true };
+
+export const ErrorState = Template.bind({});
+ErrorState.args = { type: "checkbox", fieldHasError: true, theme: "error" };

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

@@ -0,0 +1,41 @@
+# InputNumberCore — Consumer Styling Guide
+
+## Public token API
+
+Every colour token below is `var(--input-number-*, {default})` — set the `--input-number-*` name
+to override just this component; leave it unset and it inherits the shared `--theme-input-*`/
+`--theme-*` token every other themed component also falls back to. See
+`theming-component-token-pattern.md` for why this two-tier shape exists.
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-number-surface` | `var(--theme-input-surface)` | Wrapper and input background |
+| `--input-number-border` | `var(--theme-border)` | Border colour |
+| `--input-number-text-color` | `var(--theme-input-text-color-normal)` | Input text colour |
+| `--input-number-divider-color` | `var(--theme-input-surface-hover)` | Divider between the input and an embedded left/right `InputButtonCore` |
+
+Geometry (`--form-textarea-padding-*`, `--input-font-size`, `--input-element-line-height`, etc.)
+is shared across every `05.forms` component and untouched by this — see
+`theming-form-geometry-tokens.md`.
+
+---
+
+## Global theming — app-level CSS file
+
+```css
+:where(html) {
+  --input-number-surface: var(--rose-09);
+  --input-number-border: var(--rose-05);
+}
+```
+
+Only declare the tokens you want to change — everything else keeps inheriting the shared
+`--theme-input-*`/`--theme-*` tokens.
+
+---
+
+## Per-instance overrides
+
+```vue
+<InputNumberCore id="quantity" name="quantity" :min="1" :max="10" style="--input-number-border: var(--gold-04);" />
+```

package/app/components/05.forms/input-number/InputNumberCore.vue

@@ -66,14 +66,20 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
   --_focus-box-shadow: var(--box-shadow-off);
   --_min-width: v-bind(minLength);
 
+  /* Public --input-number-* tokens, inline-fallback to the shared --theme-* tokens (see
+     theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
+     input/control that also reads --theme-input-surface/--theme-border. */
+  --_surface: var(--input-number-surface, var(--theme-input-surface));
+  --_border: var(--input-number-border, var(--theme-border));
+
   display: flex;
   align-items: center;
 
   width: fit-content;
 
-  background-color: var(--theme-input-surface);
+  background-color: var(--_surface);
   border-radius: var(--form-element-border-width);
-  border: var(--form-element-border-width) solid var(--theme-border);
+  border: var(--form-element-border-width) solid var(--_border);
   outline: var(--form-element-outline-width) solid transparent;
   box-shadow: var(--_focus-box-shadow);
 
@@ -106,8 +112,8 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
     outline: none;
     box-shadow: none;
 
-    background-color: var(--theme-input-surface);
-    color: var(--theme-input-text-color-normal);
+    background-color: var(--_surface);
+    color: var(--input-number-text-color, var(--theme-input-text-color-normal));
     font-family: var(--font-family);
     font-size: var(--input-font-size);
     line-height: var(--input-element-line-height);
@@ -144,12 +150,12 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
 
     .left-slot {
       margin-inline-end: 0;
-      border-right: 2px solid var(--theme-input-surface-hover);
+      border-right: 2px solid var(--input-number-divider-color, var(--theme-input-surface-hover));
     }
 
     .right-slot {
       margin-inline-end: 0;
-      border-left: 2px solid var(--theme-input-surface-hover);
+      border-left: 2px solid var(--input-number-divider-color, var(--theme-input-surface-hover));
     }
   }
 }

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

@@ -1,42 +1,48 @@
 # InputSelectCore — Consumer Styling Guide
 
-## Two override paths
+## Public token API
+
+Every colour token below is `var(--input-select-*, {default})` — set the `--input-select-*` name
+to override just this component; leave it unset and it inherits the shared `--theme-input-*`/
+`--theme-*` token every other themed component also falls back to. See
+`theming-component-token-pattern.md` for why this two-tier shape exists.
+
+(Before 2026-08-25 this component used a private `--_input-select-*` naming scheme presented as a
+"local override path" — that's gone. A private, underscore-prefixed custom property was never a
+real override point; renaming it public with a real fallback is the actual fix, not a second
+documented path to reach for.)
+
+| Token | Falls back to | Controls |
+|---|---|---|
+| `--input-select-surface` | `var(--theme-input-surface)` | Wrapper/select background |
+| `--input-select-surface-hover` | `var(--theme-input-surface-hover)` | Option row background on hover |
+| `--input-select-border` | `var(--theme-border)` | Border colour (`.normal`/`.underlined`/open picker, resting) |
+| `--input-select-border-hover` | `var(--theme-border-focus)` | Outline colour on hover (mouse) |
+| `--input-select-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible` (keyboard/assistive) |
+
+Geometry (`--input-padding-*`, `--input-min-height`, `--input-select-option-min-height`,
+`--form-element-*`, etc.) is shared across every `05.forms` component and untouched by this — see
+`theming-form-geometry-tokens.md`.
 
-Same public/private split as `InputTextCore` (see that component's `CONSUMER-STYLING.md` for the
-full rationale) — `.input-select-wrapper` now exposes local tokens, one indirection step below the
-global `--theme-*` ones they default from:
-
-```css
---_input-select-surface: var(--theme-input-surface);
---_input-select-surface-hover: var(--theme-input-surface-hover);
---_input-select-border: var(--theme-border);
---_input-select-border-focus: var(--theme-border-focus);
---_input-select-outline-color: var(--_input-select-border-focus);
-```
+---
 
-- **Global override**: redeclare `--theme-input-surface` / `--theme-border` / `--theme-border-focus`
-  / `--theme-input-surface-hover` wherever you'd normally set theme tokens.
-- **Local override** (this component only, guaranteed to win):
+## Global theming — app-level CSS file
 
 ```css
-.input-select-wrapper {
-  --_input-select-border: var(--slate-06);
-  --_input-select-border-focus: var(--slate-04);
-  --_input-select-surface: var(--slate-01);
+:where(html) {
+  --input-select-surface: var(--rose-09);
+  --input-select-border: var(--rose-05);
+  --input-select-border-focus: var(--rose-03);
 }
 ```
 
-## Note on `--_input-select-outline-color`
-
-Before 2026-08-22 this was referenced (on the open-picker outline) but never declared anywhere —
-a dangling private token that silently resolved to the property's initial value (same failure mode
-as the `--theme-button-surface` typo documented in the layer's `CLAUDE.md`, pitfall list). It's now
-properly defined, defaulting to `--_input-select-border-focus`.
+Only declare the tokens you want to change — everything else keeps inheriting the shared
+`--theme-input-*`/`--theme-*` tokens.
 
 ---
 
-## Other tokens
+## Per-instance overrides
 
-Generic form-geometry tokens (`--input-padding-inline`, `--input-min-height`, `--input-font-size`,
-`--form-element-border-width`, `--form-input-border-radius`, etc.) are shared across every
-`05.forms` component and declared in `setup/04.elements/forms/*.css` — not component-local.
+```vue
+<InputSelectCore id="country" name="country" style="--input-select-border-focus: var(--gold-04);" />
+```