srcdev-nuxt-components 9.6.8 → 9.6.10

package/.claude/skills/storybook-add-story.md

@@ -181,7 +181,7 @@ Playwright `STORY_BASE` slug. The slug is derived by lowercasing and replacing s
 | Title                                         | STORY_BASE slug                             |
 | --------------------------------------------- | ------------------------------------------- |
 | `"Atoms/Text Blocks/HeroText"`                | `atoms-text-blocks-herotext`                |
-| `"Components/Forms/Input Text/InputTextCore"` | `components-forms-input-text-inputtextcore` |
+| `"Components/Forms/Input Text/InputText"`     | `components-forms-input-text-inputtext`     |
 
 ## argTypes control types
 

package/.claude/skills/theming-component-token-pattern.md

@@ -25,7 +25,7 @@ overrides (2026-08-25):
    signalled that to the consumer — the app's declaration became permanently dead, silently. A
    `var()` with an undefined custom property and no fallback just resolves to the property's
    initial value; there is no error, no warning, ever.
-2. **Tokens that were "shared" only by accident.** `InputTextCore`, `InputSelectCore`,
+2. **Tokens that were "shared" only by accident.** `InputText`, `InputSelect`,
    `InputNumber` and the checkbox button all read the exact same `--theme-input-surface`, so a
    consumer wanting to restyle just text inputs had no way to do that without also restyling every
    other input type. The private `--_input-text-surface: var(--theme-input-surface);` indirection
@@ -208,27 +208,27 @@ consuming app having declared anything.
   Pure token-rename pass, no visual/default changes (unlike `InputButton`'s redesign above).
   Added Storybook stories for both (`InputCheckboxRadio`, `InputCheckboxRadioButton`) —
   neither had one before.
-- ✅ `InputTextCore`, `InputSelectCore`, `InputNumber` — migrated 2026-08-25, see their
-  `CONSUMER-STYLING.md`. `InputTextCore`/`InputSelectCore` also had this exact problem's original
+- ✅ `InputText`, `InputSelect`, `InputNumber` — migrated 2026-08-25, see their
+  `CONSUMER-STYLING.md`. `InputText`/`InputSelect` also had this exact problem's original
   form: a private `--_input-text-*`/`--_input-select-*` naming scheme documented as a second
   "local override path" alongside the global tokens, added 2026-08-22 (three days before this
   pattern was formalised) as a workaround for a global-override-not-landing report that was never
   root-caused. That private-var-as-override-point shape is exactly what this pattern replaces —
   renamed public with real fallbacks, old two-path docs removed. `InputNumber` had no
   component-scoped tokens at all before this (bare `--theme-input-*` throughout). Added a
-  Storybook story for `InputSelectCore` (didn't have one); `InputNumber` still doesn't.
-  `InputTextCore`/`InputSelectCore`'s `.normal` variant also had hover and `:focus-visible` share
+  Storybook story for `InputSelect` (didn't have one); `InputNumber` still doesn't.
+  `InputText`/`InputSelect`'s `.normal` variant also had hover and `:focus-visible` share
   one token (literally the same rule content duplicated under two selectors) — split into
   `--input-text-border-hover`/`--input-select-border-hover` alongside the existing `-border-focus`
   pair, both still defaulting to `--theme-border-focus` so default rendering is unchanged, but
   mouse and assistive-tech interaction can now be themed independently. `InputNumber` has no
   hover state on its border at all (only a `:focus-visible` box-shadow toggle), so there was
   nothing to split there.
-- ✅ `ToggleSwitchCore`, `TripleToggleSwitch`, `DisplayThemeSwitch` — migrated 2026-08-25, see
+- ✅ `ToggleSwitch`, `TripleToggleSwitch`, `DisplayThemeSwitch` — migrated 2026-08-25, see
   the first two's `CONSUMER-STYLING.md`. Correction to the two lines this replaces: they claimed
-  `ToggleSwitchCore` read a bare `--theme-toggle-symbol-color-*` — that token doesn't exist
+  `ToggleSwitch` read a bare `--theme-toggle-symbol-color-*` — that token doesn't exist
   anywhere in this codebase and never did; false memory from conflating it with the checkbox
-  fix. `ToggleSwitchCore` itself turned out to be a plain Tier 2 case (real, live tokens, just no
+  fix. `ToggleSwitch` itself turned out to be a plain Tier 2 case (real, live tokens, just no
   component-scoped override point) plus five confirmed-dead private locals (declared, never read
   anywhere in the file) removed outright. The real dead-token bug was in `TripleToggleSwitch`
   (and duplicated in `DisplayThemeSwitch`'s own override): `--theme-form-radio-border`,

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

@@ -51,7 +51,7 @@ From `00.element-defaults.css` through `09.animation-motion.css`:
 
 `00.element-defaults.css` is the one exception — it's not tokens, it's a real selector-based rule
 (browser autofill background/text-colour reset via `input:autofill` etc.). It reads
-`var(--theme-surface)` and the component-private `--_input-text-core-color`, so changing
+`var(--theme-surface)` and the component-private `--_input-text-color`, so changing
 `--theme-surface` (per `theming-partial-override.md`) changes autofill colours too — no separate
 override needed there. If you need to change that rule's *behaviour* itself (not just its colour
 inputs), you'd need a competing unlayered selector of your own targeting the same pseudo-classes,

package/.vscode/srcdev-component-input-select.code-snippets

@@ -1,22 +1,22 @@
 {
-  "SRCDEV InputSelectCore Basic": {
-    "description": "Basic InputSelectCore native select (no label/error wrapper)",
+  "SRCDEV InputSelect Basic": {
+    "description": "Basic InputSelect native select (no label/error wrapper)",
     "scope": "vue,html",
     "body": [
-      "<InputSelectCore",
+      "<InputSelect",
       "  id=\"$1fieldId\"",
-      "  name=\"$2fieldName\"",
-      "  v-model=\"$3fieldValue\"",
-      "  v-model:field-data=\"$4fieldOptions\"",
+      "  v-model=\"$2fieldValue\"",
+      "  v-model:field-data=\"$3fieldOptions\"",
+      "  name=\"$4fieldName\"",
       "  placeholder=\"$5Choose an option\"",
       "/>"
     ]
   },
-  "SRCDEV InputSelectWithLabel Basic": {
-    "description": "InputSelectWithLabel: labelled select with error/description support",
+  "SRCDEV InputSelectField Basic": {
+    "description": "InputSelectField: labelled select with description and error support",
     "scope": "vue,html",
     "body": [
-      "<InputSelectWithLabel",
+      "<InputSelectField",
       "  v-model=\"$1fieldValue\"",
       "  v-model:field-data=\"$2fieldOptions\"",
       "  name=\"$3fieldName\"",
@@ -24,17 +24,23 @@
       "  placeholder=\"$5Choose an option\"",
       "  :error-message=\"$6errors.fieldName\"",
       "  :field-has-error=\"!!$6errors.fieldName\"",
-      "/>"
+      ">",
+      "  <template #descriptionText>$7</template>",
+      "</InputSelectField>"
     ]
   },
   "SRCDEV InputSelect CSS Override": {
-    "description": "CSS override scaffold for InputSelectCore tokens",
+    "description": "CSS override scaffold for InputSelect tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",
-      "  .input-select-wrapper {",
-      "    --input-select-surface: $2;",
-      "    --input-select-border: $3;",
+      "  --input-select-surface: $2;",
+      "  --input-select-text-color: $3;",
+      "  --input-select-border: $4;",
+      "  --input-select-border-focus: $5;",
+      "",
+      "  .input-select-field[data-invalid] {",
+      "    $0",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-input-text.code-snippets

@@ -1,53 +1,54 @@
 {
-  "SRCDEV InputTextCore Basic": {
-    "description": "Basic InputTextCore native input (no label/error wrapper)",
+  "SRCDEV InputText Basic": {
+    "description": "Basic InputText native input (no label/error wrapper)",
     "scope": "vue,html",
     "body": [
-      "<InputTextCore",
+      "<InputText",
       "  id=\"$1fieldId\"",
-      "  name=\"$2fieldName\"",
-      "  v-model=\"$3fieldValue\"",
+      "  v-model=\"$2fieldValue\"",
+      "  name=\"$3fieldName\"",
       "  type=\"$4text\"",
-      "  placeholder=\"$5Enter value...\"",
+      "  placeholder=\"$5Enter value\"",
       "/>"
     ]
   },
-  "SRCDEV InputTextCore Date with min/max": {
-    "description": "InputTextCore date input constrained to a min/max range (e.g. no dates in the past)",
+  "SRCDEV InputText Date with min/max": {
+    "description": "InputText date input constrained to a min/max range (e.g. no dates in the past)",
     "scope": "vue,html",
     "body": [
-      "<InputTextCore",
+      "<InputText",
       "  id=\"$1appointment-date\"",
-      "  name=\"$2appointmentDate\"",
-      "  v-model=\"$3appointmentDate\"",
+      "  v-model=\"$2appointmentDate\"",
+      "  name=\"$3appointmentDate\"",
       "  type=\"date\"",
       "  :min=\"new Date().toISOString().split('T')[0]\"",
       "  max=\"$42027-12-31\"",
       "/>"
     ]
   },
-  "SRCDEV InputTextWithLabel Basic": {
-    "description": "InputTextWithLabel: labelled text field with error/description support",
+  "SRCDEV InputTextField Basic": {
+    "description": "InputTextField: labelled text field with description and error support",
     "scope": "vue,html",
     "body": [
-      "<InputTextWithLabel",
+      "<InputTextField",
       "  v-model=\"$1fieldValue\"",
-      "  id=\"$2fieldId\"",
-      "  name=\"$3fieldName\"",
-      "  type=\"$4text\"",
-      "  label=\"$5Field label\"",
+      "  name=\"$2fieldName\"",
+      "  type=\"${3|text,email,tel,url,date,number|}\"",
+      "  label=\"$4Field label\"",
+      "  autocomplete=\"$5\"",
       "  :error-message=\"$6errors.fieldName\"",
       "  :field-has-error=\"!!$6errors.fieldName\"",
-      "/>"
+      ">",
+      "  <template #descriptionText>$7</template>",
+      "</InputTextField>"
     ]
   },
-  "SRCDEV InputTextWithLabel Date with min/max": {
-    "description": "InputTextWithLabel date field constrained to a min/max range",
+  "SRCDEV InputTextField Date with min/max": {
+    "description": "InputTextField date field constrained to a min/max range",
     "scope": "vue,html",
     "body": [
-      "<InputTextWithLabel",
+      "<InputTextField",
       "  v-model=\"$1appointmentDate\"",
-      "  id=\"$2appointment-date\"",
       "  name=\"$2appointmentDate\"",
       "  type=\"date\"",
       "  label=\"$3Appointment date\"",
@@ -58,24 +59,27 @@
       "/>"
     ]
   },
-  "SRCDEV InputPasswordWithLabel": {
-    "description": "InputPasswordWithLabel with show/hide toggle",
+  "SRCDEV InputPasswordField": {
+    "description": "InputPasswordField with show/hide toggle",
     "scope": "vue,html",
     "body": [
-      "<InputPasswordWithLabel",
+      "<InputPasswordField",
       "  v-model=\"$1password\"",
       "  name=\"$2password\"",
       "  label=\"$3Password\"",
-      "  :error-message=\"$4errors.password\"",
-      "  :field-has-error=\"!!$4errors.password\"",
+      "  autocomplete=\"${4|current-password,new-password|}\"",
+      "  :error-message=\"$5errors.password\"",
+      "  :field-has-error=\"!!$5errors.password\"",
+      "  show-password-text=\"$6Show password\"",
+      "  hide-password-text=\"$7Hide password\"",
       "/>"
     ]
   },
-  "SRCDEV InputTextAsNumberWithLabel": {
-    "description": "InputTextAsNumberWithLabel numeric stepper with min/max/step",
+  "SRCDEV InputTextAsNumberField": {
+    "description": "InputTextAsNumberField numeric stepper with min/max/step",
     "scope": "vue,html",
     "body": [
-      "<InputTextAsNumberWithLabel",
+      "<InputTextAsNumberField",
       "  v-model=\"$1quantity\"",
       "  name=\"$2quantity\"",
       "  label=\"$3Quantity\"",
@@ -85,21 +89,23 @@
       "  :error-message=\"$7errors.quantity\"",
       "  :field-has-error=\"!!$7errors.quantity\"",
       ">",
-      "  <template #left>−</template>",
-      "  <template #right>+</template>",
-      "</InputTextAsNumberWithLabel>"
+      "  <template #left><Icon name=\"mdi:minus\" /></template>",
+      "  <template #right><Icon name=\"mdi:plus\" /></template>",
+      "</InputTextAsNumberField>"
     ]
   },
   "SRCDEV InputText CSS Override": {
-    "description": "CSS override scaffold for InputTextCore tokens",
+    "description": "CSS override scaffold for InputText tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",
-      "  .input-text-wrapper {",
-      "    --input-text-surface: $2;",
-      "    --input-text-border: $3;",
-      "    --input-text-border-focus: $4;",
-      "    --input-text-color: $5;",
+      "  --input-text-surface: $2;",
+      "  --input-text-border: $3;",
+      "  --input-text-border-focus: $4;",
+      "  --input-text-color: $5;",
+      "",
+      "  .input-text-field[data-invalid] {",
+      "    $0",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-input-textarea.code-snippets

@@ -1,38 +1,43 @@
 {
-  "SRCDEV InputTextareaCore Basic": {
-    "description": "Basic InputTextareaCore native textarea (no label/error wrapper)",
+  "SRCDEV InputTextarea Basic": {
+    "description": "Basic InputTextarea native textarea (no label/error wrapper)",
     "scope": "vue,html",
     "body": [
-      "<InputTextareaCore",
+      "<InputTextarea",
       "  id=\"$1fieldId\"",
-      "  name=\"$2fieldName\"",
-      "  v-model=\"$3fieldValue\"",
+      "  v-model=\"$2fieldValue\"",
+      "  name=\"$3fieldName\"",
       "  placeholder=\"$4Placeholder text\"",
       "/>"
     ]
   },
-  "SRCDEV InputTextareaWithLabel Basic": {
-    "description": "InputTextareaWithLabel: labelled textarea with error/description support",
+  "SRCDEV InputTextareaField Basic": {
+    "description": "InputTextareaField: labelled textarea with description and error support",
     "scope": "vue,html",
     "body": [
-      "<InputTextareaWithLabel",
+      "<InputTextareaField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
-      "  placeholder=\"$4Placeholder text\"",
+      "  :maxlength=\"${4:1000}\"",
       "  :error-message=\"$5errors.fieldName\"",
       "  :field-has-error=\"!!$5errors.fieldName\"",
-      "/>"
+      ">",
+      "  <template #descriptionText>$6</template>",
+      "</InputTextareaField>"
     ]
   },
   "SRCDEV InputTextarea CSS Override": {
-    "description": "CSS override scaffold for InputTextareaCore tokens",
+    "description": "CSS override scaffold for InputTextarea tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",
-      "  .input-textarea-wrapper {",
-      "    --input-textarea-surface: $2;",
-      "    --input-textarea-border: $3;",
+      "  --input-textarea-surface: $2;",
+      "  --input-textarea-border: $3;",
+      "  --input-textarea-max-height: ${4:20lh};",
+      "",
+      "  .input-textarea-field[data-invalid] {",
+      "    $0",
       "  }",
       "}"
     ]

package/.vscode/srcdev-component-toggle-switch.code-snippets

@@ -1,50 +1,40 @@
 {
-  "SRCDEV ToggleSwitchCore": {
-    "description": "ToggleSwitchCore — bare toggle switch (no label, use ToggleSwitchWithLabel for that)",
+  "SRCDEV ToggleSwitch": {
+    "description": "ToggleSwitch: bare switch (pair with a label for=\"toggle-switch-{id}\", or use ToggleSwitchField)",
     "scope": "vue,html",
     "body": [
-      "<ToggleSwitchCore",
-      "  v-model=\"$1modelValue\"",
-      "  id=\"$2toggle-id\"",
-      "  name=\"$3toggleName\"",
+      "<label for=\"toggle-switch-$1toggle-id\">$2Label</label>",
+      "<ToggleSwitch",
+      "  id=\"$1toggle-id\"",
+      "  v-model=\"$3modelValue\"",
+      "  name=\"$4toggleName\"",
       "/>"
     ]
   },
-  "SRCDEV ToggleSwitchWithLabel": {
-    "description": "ToggleSwitchWithLabel: labelled toggle switch with description/error support",
+  "SRCDEV ToggleSwitchField": {
+    "description": "ToggleSwitchField: labelled switch with description and error support",
     "scope": "vue,html",
     "body": [
-      "<ToggleSwitchWithLabel",
+      "<ToggleSwitchField",
       "  v-model=\"$1fieldValue\"",
       "  name=\"$2fieldName\"",
       "  label=\"$3Field label\"",
-      "  :error-message=\"$4errors.fieldName\"",
-      "  :field-has-error=\"!!$4errors.fieldName\"",
+      "  layout=\"${4|stacked,inline|}\"",
+      "  :error-message=\"$5errors.fieldName\"",
+      "  :field-has-error=\"!!$5errors.fieldName\"",
       ">",
-      "  <template #descriptionText>$5Help text</template>",
-      "</ToggleSwitchWithLabel>"
-    ]
-  },
-  "SRCDEV ToggleSwitchWithLabelInline": {
-    "description": "ToggleSwitchWithLabelInline: compact label + toggle switch side by side, no error support",
-    "scope": "vue,html",
-    "body": [
-      "<ToggleSwitchWithLabelInline",
-      "  v-model=\"$1fieldValue\"",
-      "  name=\"$2fieldName\"",
-      "  label=\"$3Field label\"",
-      "/>"
+      "  <template #descriptionText>$6Help text</template>",
+      "</ToggleSwitchField>"
     ]
   },
   "SRCDEV ToggleSwitch CSS Override": {
-    "description": "CSS override scaffold for ToggleSwitchCore tokens",
+    "description": "CSS override scaffold for ToggleSwitch tokens",
     "scope": "css",
     "body": [
       ".$1my-page {",
-      "  .toggle-switch-wrapper {",
-      "    --toggle-switch-surface: $2;",
-      "    --toggle-switch-symbol-surface-on: $3;",
-      "  }",
+      "  --toggle-switch-surface: $2;",
+      "  --toggle-switch-symbol-surface-on: $3;",
+      "  --input-toggle-symbol-size: ${4:2.4rem};",
       "}"
     ]
   }

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

@@ -11,9 +11,9 @@
   input:-webkit-autofill-and-obscured {
     background-color: var(--theme-surface) !important;
     background-image: none !important;
-    color: var(--_input-text-core-color) !important;
+    color: var(--input-text-color, var(--theme-input-text-color-normal)) !important;
     -webkit-box-shadow: 0 0 0rem 1000px var(--theme-surface) inset;
-    -webkit-text-fill-color: var(--_input-text-core-color);
+    -webkit-text-fill-color: var(--input-text-color, var(--theme-input-text-color-normal));
     transition: background-color 5000s ease-in-out 0s;
   }
 }

package/app/assets/styles/setup/04.elements/forms/06.button-geometry.css

@@ -17,7 +17,7 @@
      box alone — .input-button keeps box-sizing: content-box (changing that risks shifting
      icon-only's aspect-ratio: 1 sizing), so its own padding-block and border have to be
      subtracted back out here, unlike --input-min-height itself which happens to need no such
-     adjustment (InputTextCore has zero padding-block and no full border in its resting state).
+     adjustment (InputText has zero padding-block and no full border in its resting state).
      This is a floor, not a fixed height — icon-only/pill buttons or longer button-text can
      still grow past it. Textareas are the deliberate exception to this alignment entirely. */
   --button-min-height: calc(

package/app/components/01.atoms/animations/glowing-border/CONSUMER-STYLING.md

@@ -86,7 +86,7 @@ For a single "special" button or input, wrap just the control so the glow become
 No changes to the control are needed:
 
 - `InputButton`'s border already defaults to its own surface colour, so it shows no edge of its own.
-- `InputTextCore` needs `--input-text-border: transparent`.
+- `InputText` needs `--input-text-border: transparent`.
 - On the `GlowingBorder`: radius is the control's radius plus the glow width, surface
   `transparent`, overflow `visible` (so the control's hover and focus outlines aren't clipped),
   and an inline or shrink-to-fit display so it hugs the control.
@@ -97,7 +97,7 @@ No changes to the control are needed:
 </GlowingBorder>
 
 <GlowingBorder variant="vivid" style-class-passthrough="special-input">
-  <InputTextCore id="email" v-model="email" type="email" name="email"></InputTextCore>
+  <InputText id="email" v-model="email" type="email" name="email"></InputText>
 </GlowingBorder>
 ```
 

package/app/components/01.atoms/animations/glowing-border/stories/GlowingBorder.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { computed, ref } from "vue";
 import StorybookComponent from "../GlowingBorder.vue";
-import InputTextCore from "../../../../05.forms/input-text/InputTextCore.vue";
+import InputText from "../../../../05.forms/input-text/InputText.vue";
 import InputButton from "../../../../05.forms/input-button/InputButton.vue";
 import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
 import type { MediaCanvas } from "~/types/components";
@@ -194,7 +194,7 @@ CustomTokens.args = {
 };
 
 export const HighlightedControls: StoryFn<StoryArgs> = (args) => ({
-  components: { StorybookComponent, InputTextCore, InputButton },
+  components: { StorybookComponent, InputText, InputButton },
   setup() {
     const { args: storyArgs, stageStyle } = useStorySetup(args);
     const glowStyle = (controlRadius: string) =>
@@ -224,13 +224,13 @@ export const HighlightedControls: StoryFn<StoryArgs> = (args) => ({
       <div style="display: grid; gap: 8px; inline-size: min(100%, 40rem);">
         <label for="highlighted-email">Early-access email</label>
         <StorybookComponent :variant="args.variant" :style="inputGlowStyle">
-          <InputTextCore
+          <InputText
             id="highlighted-email"
             v-model="email"
             type="email"
             name="highlighted-email"
             placeholder="eg. jane@example.com"
-          ></InputTextCore>
+          ></InputText>
         </StorybookComponent>
       </div>
     </div>

package/app/components/02.molecules/progress-tracker/stories/ProgressTracker.stories.ts

@@ -2,7 +2,7 @@ import { computed, reactive, ref } from "vue";
 import ProgressTracker from "../ProgressTracker.vue";
 import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import InputButton from "../../../05.forms/input-button/InputButton.vue";
-import InputTextWithLabel from "../../../05.forms/input-text/InputTextWithLabel.vue";
+import InputTextField from "../../../05.forms/input-text/InputTextField.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { MediaCanvas, ProgressTrackerStep } from "~/types/components";
 
@@ -217,7 +217,7 @@ export const Wizard: Story = {
   name: "Wizard (parent-owned forms)",
   args: { modelValue: 0, steps: wizardSteps },
   render: (args) => ({
-    components: { ProgressTracker, InputButton, InputTextWithLabel },
+    components: { ProgressTracker, InputButton, InputTextField },
     setup() {
       const story = useStorySetup(args);
       const form = reactive({ name: "", email: "" });
@@ -254,7 +254,7 @@ export const Wizard: Story = {
         <ProgressTracker v-bind="componentArgs" v-model="args.modelValue" :steps="steps">
           <template #step-0="{ headingId }">
             <form :aria-labelledby="headingId" style="display: grid; gap: 1.6rem;" @submit.prevent="next('name')">
-              <InputTextWithLabel
+              <InputTextField
                 v-model="form.name"
                 type="text"
                 name="wizard-name"
@@ -270,7 +270,7 @@ export const Wizard: Story = {
           </template>
           <template #step-1="{ headingId }">
             <form :aria-labelledby="headingId" style="display: grid; gap: 1.6rem;" @submit.prevent="next('email')">
-              <InputTextWithLabel
+              <InputTextField
                 v-model="form.email"
                 type="email"
                 name="wizard-email"

package/app/components/05.forms/form-errors/CONSUMER-STYLING.md

@@ -1,7 +1,7 @@
 # InputError — Consumer Styling Guide
 
 `InputError` is the red error message strip rendered under a form control by every `*Field`
-wrapper (`InputTextWithLabel`, `InputNumberField`, `InputSelectWithLabel`, `SingleCheckbox`, ...).
+wrapper (`InputTextField`, `InputNumberField`, `InputSelectField`, `SingleCheckbox`, ...).
 It animates open (`grid-template-rows: 0fr → 1fr` plus opacity) when the field is in error.
 
 ## Public token API

package/app/components/05.forms/form-field/CONSUMER-STYLING.md

@@ -1,7 +1,7 @@
 # FormField — Consumer Styling Guide
 
 `FormField` is a layout wrapper for one form control (typically an `*Field` component such as
-`InputTextWithLabel` or `InputNumberField`). It caps the field's width, centres it, optionally
+`InputTextField` or `InputNumberField`). It caps the field's width, centres it, optionally
 insets it from its container's edges with a gutter, and applies vertical spacing between fields.
 
 ## Public token API
@@ -65,7 +65,7 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 ```vue
 <FormField width="wide" style="--form-field-background-color: var(--slate-01);">
-  <InputTextWithLabel ... />
+  <InputTextField ... />
 </FormField>
 ```
 

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
 import StorybookComponent from "../InputButton.vue";
-import InputTextCore from "../../input-text/InputTextCore.vue";
+import InputText from "../../input-text/InputText.vue";
 
 interface InputButtonStoryArgs {
   type: "submit" | "button" | "reset";
@@ -314,11 +314,11 @@ NuxtIconOnlyComponent.args = {
 // 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 },
+  components: { StorybookComponent, InputText },
   template: `
     <div style="margin: 36px; max-width: 480px;">
       <div style="display: flex; align-items: flex-start; gap: 0.8rem;">
-        <InputTextCore
+        <InputText
           id="inline-email"
           name="email"
           type="email"

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

@@ -1,8 +1,8 @@
 # InputDescription — Consumer Styling Guide
 
 `InputDescription` is the help text rendered between the label and the control by every `*Field`
-wrapper (`InputTextWithLabel`, `InputNumberField`, `InputSelectWithLabel`,
-`InputTextareaWithLabel`, `InputRangeField`, `InputTextAsNumberWithLabel`, `SingleCheckbox`,
+wrapper (`InputTextField`, `InputNumberField`, `InputSelectField`,
+`InputTextareaField`, `InputRangeField`, `InputTextAsNumberField`, `SingleCheckbox`,
 `MultipleCheckboxes`, `MultipleRadiobuttons`) when you pass it a `descriptionText` or
 `descriptionHtml` slot. With neither slot it renders nothing.
 
@@ -84,9 +84,9 @@ description. Keep these blocks **unlayered** (no `@layer ...` wrapper) so they b
 ```vue
 <template>
   <div class="contact-page-content">
-    <InputTextWithLabel v-model="email" name="email" label="Email">
+    <InputTextField v-model="email" name="email" label="Email">
       <template #descriptionText>We'll only use this for your booking confirmation</template>
-    </InputTextWithLabel>
+    </InputTextField>
   </div>
 </template>
 
@@ -108,9 +108,9 @@ The wrappers don't forward `style-class-passthrough` to the description, but a p
 the wrapper itself lands on its root element, which is an ancestor of the description:
 
 ```vue
-<InputTextWithLabel class="email-field" v-model="email" name="email" label="Email">
+<InputTextField class="email-field" v-model="email" name="email" label="Email">
   <template #descriptionText>We'll only use this for your booking confirmation</template>
-</InputTextWithLabel>
+</InputTextField>
 
 <style>
 .email-field {