srcdev-nuxt-components 9.6.10 → 9.6.12

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

@@ -114,6 +114,7 @@ watch(
     border: var(--form-element-border-width) solid var(--input-checkbox-button-border, var(--theme-border));
     border-radius: var(--input-checkbox-button-border-radius, 0.4rem);
     outline: var(--form-element-outline-width) solid transparent;
+    box-shadow: 0 0 0 var(--form-element-shadow-width) var(--input-checkbox-button-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
 
     transition: all var(--input-checkbox-transition-duration, var(--theme-form-transition-duration)) ease-in-out;
 
@@ -127,8 +128,7 @@ watch(
 
     &:hover {
       background-color: var(--input-checkbox-button-surface-hover, var(--theme-input-surface-hover));
-      outline-color: var(--input-checkbox-button-ring-hover, var(--theme-ring));
-      outline-offset: var(--form-element-outline-offset-focus);
+      outline-color: var(--input-checkbox-button-ring-hover, var(--input-checkbox-button-border, var(--theme-border)));
       cursor: pointer;
     }
 

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

@@ -36,7 +36,7 @@ These match `FormFieldset`'s `--form-fieldset-*` panel tokens.
 | `--input-description-slot-margin-block-end` | `0.8rem` | Space below each slot's wrapper |
 | `--input-description-slot-margin-inline` | `0` | Inline margin of each slot's wrapper |
 | `--input-description-font-size` | `var(--step-4)` | Font size of the `descriptionText` paragraph |
-| `--input-description-line-height` | `var(--step-4)` | Line height of the `descriptionText` paragraph. The default equals the font size, which is tight for wrapping text, so `1.5` is a good override for long descriptions |
+| `--input-description-line-height` | `1.5` | Line height of the `descriptionText` paragraph |
 
 With default (unpadded) panel tokens, the slot margins collapse through the root, so they are what
 spaces the description from the label and control. Beyond these the `descriptionHtml` wrapper
@@ -67,7 +67,7 @@ Every field's description at once, from an app-level stylesheet (e.g. `app/asset
 ```css
 :where(html) {
   --input-description-color: var(--theme-input-placeholder);
-  --input-description-line-height: 1.5;
+  --input-description-font-size: 1.4rem;
 }
 ```
 
@@ -175,3 +175,15 @@ show as uneven space inside the panel. Zero them and space the panel with the ro
 `.input-description` element. It's only reachable when you render `InputDescription` directly in
 a custom field wrapper: the library's own wrappers pass `input-text-description` (no styles
 attached) and don't forward yours. Use a `class` on the wrapper instead (see **One field** above).
+
+---
+
+## Notes
+
+- The root sets `overflow-wrap: anywhere`, so a long URL or unbroken word wraps inside a narrow
+  column. Copy arrives through slots, so there is no line-clamp token: clamp your own slot markup
+  if you need to.
+
+> **Changed 2026-10-17**: `--input-description-line-height` defaults to `1.5` (was `var(--step-4)`,
+> the same as the font size, so wrapped lines touched). If you relied on the tighter spacing, set
+> it back with `--input-description-line-height: var(--step-4)`.

package/app/components/05.forms/input-description/InputDescription.vue

@@ -59,6 +59,7 @@ watch(
     border-radius: var(--input-description-border-radius, 0);
     outline: var(--input-description-outline, 0);
     outline-offset: var(--input-description-outline-offset, 0);
+    overflow-wrap: anywhere;
 
     .input-description-html,
     .input-description-text {
@@ -69,7 +70,7 @@ watch(
 
     .input-description-text {
       font-size: var(--input-description-font-size, var(--step-4));
-      line-height: var(--input-description-line-height, var(--step-4));
+      line-height: var(--input-description-line-height, 1.5);
     }
   }
 }

package/app/components/05.forms/input-description/stories/InputDescription.stories.ts

@@ -1,7 +1,9 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import StorybookComponent from "../InputDescription.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { InputUiVariant } from "~/types/forms/types.forms";
+import type { MediaCanvas } from "~/types/components";
 
 interface InputDescriptionStoryArgs {
   descriptionId: string;
@@ -52,8 +54,43 @@ export default {
     descriptionText: "We'll only use this to send your booking confirmation.",
     descriptionHtml: "",
   },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Help text for a form field. Copy goes in the `descriptionText` slot (a paragraph) and the `descriptionHtml` slot (rich markup, rendered first); with neither filled nothing renders. `description-id` becomes the root id, for the control's `aria-describedby`. `field-has-error` and `input-variant` are styling hooks only. Every labelled field renders it from its own description slots: see [InputTextField](?path=/story/components-forms-input-text-inputtextfield--with-description).",
+      },
+    },
+  },
 } as Meta<InputDescriptionStoryArgs>;
 
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const fieldNote = `
+  <p style="${storyNoteStyle}">
+    Every labelled field renders this from its own description slots. See it in a real field in the
+    <a href="/?path=/story/components-forms-input-text-inputtextfield--with-description" target="_top">InputTextField</a> story.
+  </p>
+`;
+
 const Template: StoryFn<InputDescriptionStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
@@ -64,7 +101,8 @@ const Template: StoryFn<InputDescriptionStoryArgs> = (args) => ({
     return { args, componentArgs };
   },
   template: `
-    <div style="max-width: 48rem; margin: 3.6rem; font-size: 1.6rem;">
+    <div style="max-width: 48rem; font-size: 1.6rem;">
+      ${fieldNote}
       <label for="story-field" style="display: block; font-weight: 700;">Email address</label>
       <StorybookComponent v-bind="componentArgs">
         <template v-if="args.descriptionHtml" #descriptionHtml><span v-html="args.descriptionHtml"></span></template>
@@ -81,17 +119,26 @@ const Template: StoryFn<InputDescriptionStoryArgs> = (args) => ({
 });
 
 export const TextOnly = Template.bind({});
+TextOnly.parameters = {
+  docs: { description: { story: "Plain help text in the `descriptionText` slot." } },
+};
 
 export const HtmlOnly = Template.bind({});
 HtmlOnly.args = {
   descriptionText: "",
   descriptionHtml: "Password must contain:<ul><li>At least 12 characters</li><li>One number</li></ul>",
 };
+HtmlOnly.parameters = {
+  docs: { description: { story: "Rich markup, here a list, in the `descriptionHtml` slot." } },
+};
 
 export const TextAndHtml = Template.bind({});
 TextAndHtml.args = {
   descriptionHtml: "<strong>Tip:</strong> use your work address if you have one.",
 };
+TextAndHtml.parameters = {
+  docs: { description: { story: "Both slots: `descriptionHtml` renders above `descriptionText`." } },
+};
 
 export const Empty = Template.bind({});
 Empty.args = { descriptionText: "", descriptionHtml: "" };
@@ -101,6 +148,9 @@ Empty.parameters = {
 
 export const CustomTokens = Template.bind({});
 CustomTokens.args = { styleClassPassthrough: "input-description-story-tokens" };
+CustomTokens.parameters = {
+  docs: { description: { story: "Colour, size and slot spacing set as tokens through a passthrough class." } },
+};
 CustomTokens.decorators = [
   () => ({
     template: `
@@ -109,7 +159,6 @@ CustomTokens.decorators = [
           .input-description-story-tokens {
             --input-description-color: var(--theme-input-placeholder);
             --input-description-font-size: 1.4rem;
-            --input-description-line-height: 1.5;
             --input-description-slot-margin-block-start: 0.2rem;
             --input-description-slot-margin-block-end: 1.2rem;
           }
@@ -147,7 +196,6 @@ Panel.decorators = [
             --input-description-padding-inline: 1.2rem;
             --input-description-slot-margin-block-start: 0;
             --input-description-slot-margin-block-end: 0;
-            --input-description-line-height: 1.5;
           }
           .input-description-story-panel .input-description-html + .input-description-text {
             margin-block-start: 0.4rem;
@@ -158,3 +206,21 @@ Panel.decorators = [
     `,
   }),
 ];
+
+export const StressTest = Template.bind({});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
+  descriptionText:
+    "📧 Wir verwenden Ihre Adresse ausschließlich für Rückfragen zu Ihrer Bestellung. Datenschutzgrundverordnungskonformitätsbestätigung https://example.com/a/very/long/unbroken/url/for/the/privacy/policy <b>not bold</b> يرجى إدخال بريدك الإلكتروني",
+  descriptionHtml:
+    "<strong>Hinweis:</strong> Elektronischepostadressefürdiebenachrichtigungüberbestellungen <a href=\"https://example.com/a/very/long/unbroken/url/for/the/terms\">https://example.com/a/very/long/unbroken/url/for/the/terms</a>",
+};
+StressTest.parameters = {
+  initialCanvas: "mobileCanvas",
+  docs: {
+    description: {
+      story:
+        "Long German copy, unbroken compound words, long URLs (one as a link), emoji, HTML-like and right-to-left text in both slots. Check at every canvas width: every line wraps inside the dashed outline and the wrapped lines don't touch. Copy arrives through slots, so there is no line-clamp token: clamp your own slot markup if you need to.",
+    },
+  },
+};

package/app/components/05.forms/input-description/tests/InputDescription.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, afterEach } from "vitest";
+import { describe, it, expect, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { nextTick } from "vue";
 import InputDescription from "../InputDescription.vue";
@@ -19,6 +19,7 @@ describe("InputDescription", () => {
   afterEach(() => {
     wrapper?.unmount();
     wrapper = undefined;
+    vi.restoreAllMocks();
   });
 
   describe("rendering", () => {

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

@@ -132,3 +132,11 @@ ancestor of the label).
 reachable when you render `InputLabel` directly in a custom field wrapper: the library's wrappers
 pass their own hook classes (`input-text-label`, `input-number-label`, `input-range-label`, `input-select-label`,
 `input-textarea-label`, `toggle-switch-label`) and don't forward yours.
+
+---
+
+## Notes
+
+- The label sets `overflow-wrap: anywhere`, so a long URL or unbroken word (and an unbroken
+  marker text) wraps inside a narrow column. Label copy arrives through slots, so there is no
+  line-clamp token: clamp your own slot markup if you need to.

package/app/components/05.forms/input-label/InputLabel.vue

@@ -95,6 +95,7 @@ watch(
     line-height: var(--input-label-line-height, 1.5);
     margin-block: var(--input-label-margin-block, 0.8rem);
     margin-inline: var(--input-label-margin-inline, 0);
+    overflow-wrap: anywhere;
 
     .input-label-indicator {
       --_indicator-color: var(--input-label-indicator-color, inherit);

package/app/components/05.forms/input-label/stories/InputLabel.stories.ts

@@ -1,7 +1,9 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import StorybookComponent from "../InputLabel.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { InputUiVariant, InputLabelIndicator } from "~/types/forms/types.forms";
+import type { MediaCanvas } from "~/types/components";
 
 interface InputLabelStoryArgs {
   id: string;
@@ -109,8 +111,43 @@ export default {
     textLabel: "Email address",
     htmlLabel: "",
   },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "The `<label>` every labelled field wrapper renders. Label copy goes in the `textLabel` and `htmlLabel` slots (html first), `id` becomes its `for`, and `indicator` with `required` adds a required or optional marker (falling back to `app.config` `srcdev.inputLabel`). `field-has-error` and `input-variant` are styling hooks only. The control in these stories is a plain input; see [InputTextField](?path=/story/components-forms-input-text-inputtextfield--required) for it inside a real field.",
+      },
+    },
+  },
 } as Meta<InputLabelStoryArgs>;
 
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const fieldNote = `
+  <p style="${storyNoteStyle}">
+    Every labelled field wrapper renders this label and forwards its own <code>required</code> prop. See it in a real field in the
+    <a href="/?path=/story/components-forms-input-text-inputtextfield--required" target="_top">InputTextField</a> story.
+  </p>
+`;
+
 const Template: StoryFn<InputLabelStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
@@ -133,7 +170,8 @@ const Template: StoryFn<InputLabelStoryArgs> = (args) => ({
     return { args, componentArgs, tokenStyles };
   },
   template: `
-    <div style="max-width: 48rem; margin: 3.6rem; font-size: 1.6rem;" :style="tokenStyles">
+    <div style="max-width: 48rem; font-size: 1.6rem;" :style="tokenStyles">
+      ${fieldNote}
       <StorybookComponent v-bind="componentArgs">
         <template v-if="args.htmlLabel" #htmlLabel><span v-html="args.htmlLabel"></span></template>
         <template v-if="args.textLabel" #textLabel>{{ args.textLabel }}</template>
@@ -150,17 +188,26 @@ const Template: StoryFn<InputLabelStoryArgs> = (args) => ({
 });
 
 export const TextLabel = Template.bind({});
+TextLabel.parameters = {
+  docs: { description: { story: "Plain label text through the `textLabel` slot." } },
+};
 
 export const HtmlLabel = Template.bind({});
 HtmlLabel.args = {
   textLabel: "",
   htmlLabel: 'Email address <small style="font-weight: normal;">(work or personal)</small>',
 };
+HtmlLabel.parameters = {
+  docs: { description: { story: "Rich markup through the `htmlLabel` slot." } },
+};
 
 export const TextAndHtml = Template.bind({});
 TextAndHtml.args = {
   htmlLabel: "<strong>Work</strong> ",
 };
+TextAndHtml.parameters = {
+  docs: { description: { story: "Both slots filled: `htmlLabel` renders first, then `textLabel`." } },
+};
 
 export const MarkRequired = Template.bind({});
 MarkRequired.args = { indicator: "required", required: true };
@@ -234,3 +281,22 @@ CustomTokens.decorators = [
     `,
   }),
 ];
+
+export const StressTest = Template.bind({});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
+  textLabel:
+    "📧 Elektronischepostadressefürdiebenachrichtigungüberbestellungen https://example.com/a/very/long/unbroken/url/for/the/label <b>not bold</b> البريد الإلكتروني",
+  indicator: "optional",
+  required: false,
+  optionalText: "(freiwilligeAngabekeinePflichtfeldbitteleerlassenwennnichtzutreffend)",
+};
+StressTest.parameters = {
+  initialCanvas: "mobileCanvas",
+  docs: {
+    description: {
+      story:
+        "Long unbroken German, a long URL, emoji, HTML-like and right-to-left text in the label, plus an unbroken optional marker. Check at every canvas width: the label and the marker wrap inside the dashed outline, markup renders as text, and the marker stays after the text in RTL. Switch `indicator` to required and turn `required` on to check the required marker. Label copy arrives through slots, so there is no line-clamp token: clamp your own slot markup if you need to.",
+    },
+  },
+};

package/app/components/05.forms/input-label/tests/InputLabel.spec.ts

@@ -1,14 +1,24 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import InputLabel from "../InputLabel.vue";
 
-const createWrapper = (props = {}, slots = {}) =>
-  mountSuspended(InputLabel, {
+const mounted: { unmount: () => void }[] = [];
+
+const createWrapper = async (props = {}, slots = {}) => {
+  const wrapper = await mountSuspended(InputLabel, {
     props: { id: "test-input", ...props },
     slots,
   });
+  mounted.push(wrapper);
+  return wrapper;
+};
 
 describe("InputLabel", () => {
+  afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+    vi.restoreAllMocks();
+  });
+
   describe("rendering", () => {
     it("renders a label linked to the control id", async () => {
       const wrapper = await createWrapper({ id: "email-input" });

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

@@ -18,7 +18,8 @@ token, same as `InputText`.
 | `--input-number-surface` | `var(--theme-input-surface)` | Wrapper, input, and embedded-button background |
 | `--input-number-surface-hover` | `var(--theme-input-surface-hover)` | Embedded left/right button background on hover |
 | `--input-number-border` | `var(--theme-border)` | Border/divider colour (`normal`/`underlined` variant border, and the divider between the input and an embedded button) |
-| `--input-number-border-hover` | `var(--theme-border-focus)` | Wrapper outline colour on mouse hover over the input or either step button (`normal` variant only) |
+| `--input-number-border-hover` | the resolved border | 1px wrapper outline colour on mouse hover over the input or either step button (`normal` variant only) |
+| `--input-number-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Resting shadow ring outside the border (`normal` only). Width is the global `--form-element-shadow-width` (`0.2rem`; `0` removes it) |
 | `--input-number-border-focus` | `var(--theme-border-focus)` | Wrapper outline colour on `:focus-visible` (`normal` variant), and the embedded button's own `:focus-visible` outline |
 | `--input-number-text-color` | `var(--theme-input-text-color-normal)` | Input text colour |
 | `--input-number-placeholder-color` | `var(--theme-input-placeholder)` | Placeholder text colour |
@@ -33,6 +34,11 @@ and `step` and capped at `12em`).
 
 ---
 
+> **Changed 2026-10-17**: bordered controls carry a light shadow ring (`box-shadow`, theme step 2,
+> so red when invalid), and hover draws a 1px outline in the border colour with no offset, over the
+> ring's inner edge. Hover used to draw a 2px outline at a 2px offset in the focus colour. Focus is
+> unchanged and sits just outside the ring.
+
 ## State hooks
 
 | Attribute | On | When |

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

@@ -123,11 +123,10 @@ const inputmode = computed(() => {
       border: var(--form-element-border-width) solid var(--_border);
       border-radius: var(--form-input-border-radius);
       outline: var(--form-element-outline-width) solid transparent;
+      box-shadow: 0 0 0 var(--form-element-shadow-width) var(--input-number-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
 
       &:has(input:hover, button:hover) {
-        outline: var(--form-element-outline-width-focus) solid
-          var(--input-number-border-hover, var(--theme-border-focus));
-        outline-offset: var(--form-element-outline-offset-focus);
+        outline-color: var(--input-number-border-hover, var(--_border));
       }
 
       &:has(input:focus-visible, button:focus-visible) {
@@ -167,8 +166,8 @@ const inputmode = computed(() => {
           outline-offset: -4px;
         }
 
-        &.icon-only {
-          .btn-icon {
+        &[data-icon-only] {
+          & .input-button-icon {
             margin: 0;
           }
         }

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

@@ -18,7 +18,8 @@ for the two-tier shape.
 | `--input-otp-surface` | `var(--theme-input-surface)` | Box background |
 | `--input-otp-text-color` | `var(--theme-input-text-color-normal)` | Digit colour |
 | `--input-otp-border` | `var(--theme-border)` | Box border (`normal`) or bottom border (`underlined`) |
-| `--input-otp-border-hover` | `var(--input-otp-border-focus)` | Outline colour on hover (`normal` variant) |
+| `--input-otp-border-hover` | the resolved border | 1px outline colour on hover (`normal` variant) |
+| `--input-otp-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Resting shadow ring outside the border (each box, `normal` only). Width is the global `--form-element-shadow-width` (`0.2rem`; `0` removes it) |
 | `--input-otp-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible`, and the bottom border colour on focus (`underlined`) |
 
 ### Field (`InputOtpField`)
@@ -35,6 +36,11 @@ Border/outline widths and transition duration are the shared form geometry token
 Private tokens (not public API): `--_border` and `--_border-focus` on `.input-otp`, which only
 resolve the two public border tokens once for reuse across the variant rules.
 
+> **Changed 2026-10-17**: bordered controls carry a light shadow ring (`box-shadow`, theme step 2,
+> so red when invalid), and hover draws a 1px outline in the border colour with no offset, over the
+> ring's inner edge. Hover used to draw a 2px outline at a 2px offset in the focus colour. Focus is
+> unchanged and sits just outside the ring.
+
 ## State hooks
 
 | Hook | Where | Meaning |

package/app/components/05.forms/input-otp/InputOtp.vue

@@ -230,10 +230,10 @@ function onFocus(event: FocusEvent) {
       border: var(--form-element-border-width) solid var(--_border);
       border-radius: var(--input-otp-border-radius, var(--form-input-border-radius));
       outline: var(--form-element-outline-width) solid transparent;
+      box-shadow: 0 0 0 var(--form-element-shadow-width) var(--input-otp-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
 
       &:hover {
-        outline: var(--form-element-outline-width-focus) solid var(--input-otp-border-hover, var(--_border-focus));
-        outline-offset: var(--form-element-outline-offset-focus);
+        outline-color: var(--input-otp-border-hover, var(--_border));
       }
 
       &:focus-visible {

package/app/components/05.forms/input-range/InputRange.vue

@@ -103,7 +103,7 @@ watch(
         width: var(--input-range-button-size);
         height: var(--input-range-button-size);
 
-        .btn-icon {
+        & .input-button-icon {
           margin: initial;
         }
       }

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

@@ -17,7 +17,8 @@ to override just this component; leave it unset and it inherits the shared `--th
 | `--input-select-surface` | `var(--theme-input-surface)` | Wrapper/select background |
 | `--input-select-text-color` | `var(--theme-input-text-color-normal)` | Select text colour (added 2026-10-16; it inherited the page colour before) |
 | `--input-select-border` | `var(--theme-border)` | Border colour (`normal`/`underlined` variants and the open picker, resting) |
-| `--input-select-border-hover` | `var(--theme-border-focus)` | Outline colour on hover (mouse) |
+| `--input-select-border-hover` | the resolved border (`normal`), `var(--theme-border-focus)` (`underlined`) | Outline colour on hover (mouse): 1px with no offset on `normal`, 2px at a 2px offset on `underlined` |
+| `--input-select-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Resting shadow ring outside the border (`normal` only). Width is the global `--form-element-shadow-width` (`0.2rem`; `0` removes it) |
 | `--input-select-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible` (keyboard/assistive), and the open picker's outline |
 
 ### Options
@@ -41,6 +42,11 @@ shows and ignores them.
 
 ---
 
+> **Changed 2026-10-17**: bordered controls carry a light shadow ring (`box-shadow`, theme step 2,
+> so red when invalid), and hover draws a 1px outline in the border colour with no offset, over the
+> ring's inner edge. Hover used to draw a 2px outline at a 2px offset in the focus colour. Focus is
+> unchanged and sits just outside the ring.
+
 ## State hooks
 
 | Attribute | On | When |

package/app/components/05.forms/input-select/InputSelect.vue

@@ -112,16 +112,25 @@ watch(
       border: var(--form-element-border-width) solid var(--_border);
       border-radius: var(--form-input-border-radius);
       outline: var(--form-element-outline-width) solid transparent;
+      box-shadow: 0 0 0 var(--form-element-shadow-width) var(--input-select-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
+
+      &:has(:hover) {
+        outline-color: var(--input-select-border-hover, var(--_border));
+      }
+
+      &:has(select:focus-visible) {
+        outline-color: var(--_border-focus);
+      }
     }
 
     &[data-input-variant="underlined"] {
       border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
-    }
 
-    &:has(:hover) {
-      outline: var(--form-element-outline-width-focus) solid
-        var(--input-select-border-hover, var(--theme-border-focus));
-      outline-offset: var(--form-element-outline-offset-focus);
+      &:has(:hover) {
+        outline: var(--form-element-outline-width-focus) solid
+          var(--input-select-border-hover, var(--theme-border-focus));
+        outline-offset: var(--form-element-outline-offset-focus);
+      }
     }
 
     &:has(select:focus-visible) {

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

@@ -17,7 +17,8 @@ override just this component; leave it unset and it inherits the shared `--theme
 | `--input-text-surface` | `var(--theme-input-surface)` | Wrapper background, and slot `InputButton` background |
 | `--input-text-surface-hover` | `var(--theme-input-surface-hover)` | Slot `InputButton` background on hover |
 | `--input-text-border` | `var(--theme-border)` | Border colour (`normal`/`underlined`, resting), and the stepper's button dividers |
-| `--input-text-border-hover` | `var(--theme-border-focus)` | Outline colour on hover (`normal` only) |
+| `--input-text-border-hover` | the resolved border | 1px outline colour on hover (`normal` only) |
+| `--input-text-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Resting shadow ring outside the border (`normal` only). Width is the global `--form-element-shadow-width` (`0.2rem`; `0` removes it) |
 | `--input-text-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible` (`normal` only), and a slot button's own focus outline |
 | `--input-text-color` | `var(--theme-input-text-color-normal)` | Input text and slot button colour, and autofilled text (global rule) |
 | `--input-text-placeholder-color` | `var(--theme-input-placeholder)` | Placeholder text colour |
@@ -31,6 +32,11 @@ read in several places.
 
 ---
 
+> **Changed 2026-10-17**: bordered controls carry a light shadow ring (`box-shadow`, theme step 2,
+> so red when invalid), and hover draws a 1px outline in the border colour with no offset, over the
+> ring's inner edge. Hover used to draw a 2px outline at a 2px offset in the focus colour. Focus is
+> unchanged and sits just outside the ring.
+
 ## State hooks
 
 | Attribute | On | When |

package/app/components/05.forms/input-text/InputText.vue

@@ -131,12 +131,12 @@ watch(
       border: var(--form-element-border-width) solid var(--_border);
       border-radius: var(--form-input-border-radius);
       outline: var(--form-element-outline-width) solid transparent;
+      box-shadow: 0 0 0 var(--form-element-shadow-width) var(--input-text-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
 
       padding-inline: var(--input-padding-inline);
 
       &:has(input:is(:hover), button:is(:hover)) {
-        outline: var(--form-element-outline-width-focus) solid var(--input-text-border-hover, var(--theme-border-focus));
-        outline-offset: var(--form-element-outline-offset-focus);
+        outline-color: var(--input-text-border-hover, var(--_border));
       }
 
       &:has(input:focus-visible, button:focus-visible) {
@@ -180,8 +180,8 @@ watch(
           outline-offset: -4px;
         }
 
-        &.icon-only {
-          .btn-icon {
+        &[data-icon-only] {
+          & .input-button-icon {
             margin: 0;
           }
         }

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

@@ -18,7 +18,8 @@ This shape mirrors `InputText`'s token set (see its own CONSUMER-STYLING.md).
 |---|---|---|
 | `--input-textarea-surface` | `var(--theme-input-surface)` | Wrapper background |
 | `--input-textarea-border` | `var(--theme-border)` | Border colour (`normal`/`underlined` variant border) |
-| `--input-textarea-border-hover` | `var(--theme-border-focus)` | Wrapper outline colour on mouse hover (`normal` only) |
+| `--input-textarea-border-hover` | the resolved border | 1px wrapper outline colour on mouse hover (`normal` only) |
+| `--input-textarea-shadow` | `var(--form-element-shadow-colour, var(--colour-theme-2))` | Resting shadow ring outside the border (`normal` only). Width is the global `--form-element-shadow-width` (`0.2rem`; `0` removes it) |
 | `--input-textarea-border-focus` | `var(--theme-border-focus)` | Wrapper outline colour on `:focus-visible` (`normal` only) |
 | `--input-textarea-text-color` | `var(--theme-input-text-color-normal)` | Textarea text colour |
 | `--input-textarea-placeholder-color` | `var(--theme-input-placeholder)` | Placeholder text colour |
@@ -41,6 +42,11 @@ Private (not public API): `--_border`, resolved once and read by both border var
 
 ---
 
+> **Changed 2026-10-17**: bordered controls carry a light shadow ring (`box-shadow`, theme step 2,
+> so red when invalid), and hover draws a 1px outline in the border colour with no offset, over the
+> ring's inner edge. Hover used to draw a 2px outline at a 2px offset in the focus colour. Focus is
+> unchanged and sits just outside the ring.
+
 ## State hooks
 
 | Attribute | On | When |

package/app/components/05.forms/input-textarea/InputTextarea.vue

@@ -105,11 +105,10 @@ watch(
       border: var(--form-element-border-width) solid var(--_border);
       border-radius: var(--form-input-border-radius);
       outline: var(--form-element-outline-width) solid transparent;
+      box-shadow: 0 0 0 var(--form-element-shadow-width) var(--input-textarea-shadow, var(--form-element-shadow-colour, var(--colour-theme-2)));
 
       &:has(textarea:is(:hover)) {
-        outline: var(--form-element-outline-width-focus) solid
-          var(--input-textarea-border-hover, var(--theme-border-focus));
-        outline-offset: var(--form-element-outline-offset-focus);
+        outline-color: var(--input-textarea-border-hover, var(--_border));
       }
 
       &:has(textarea:focus-visible) {