srcdev-nuxt-components 9.4.12 → 9.5.1

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

@@ -1,431 +1,202 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
 import InputLabel from "../InputLabel.vue";
 
-// Mock useStyleClassPassthrough composable
-vi.mock("#imports", () => ({
-  useStyleClassPassthrough: vi.fn((classes) => ({
-    elementClasses: { value: Array.isArray(classes) ? classes.join(" ") : classes || "" },
-  })),
-  useSlots: vi.fn(),
-}));
-
-describe("InputLabel", () => {
-  let wrapper: ReturnType<typeof mountSuspended>;
-
-  const createWrapper = async (props = {}, slots = {}) => {
-    const defaultProps = {
-      id: "test-input",
-      name: "testInput",
-      inputVariant: "normal" as InputUiVariant, // Set valid default with proper typing
-      ...props,
-    };
-
-    wrapper = await mountSuspended(InputLabel, {
-      props: defaultProps,
-      slots,
-    });
-
-    return wrapper;
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
+const createWrapper = (props = {}, slots = {}) =>
+  mountSuspended(InputLabel, {
+    props: { id: "test-input", ...props },
+    slots,
   });
 
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  describe("Component Rendering", () => {
-    it("renders label element with correct for attribute", async () => {
-      await createWrapper({ id: "email-input" });
-
+describe("InputLabel", () => {
+  describe("rendering", () => {
+    it("renders a label linked to the control id", async () => {
+      const wrapper = await createWrapper({ id: "email-input" });
       const label = wrapper.find("label");
+
       expect(label.exists()).toBe(true);
       expect(label.attributes("for")).toBe("email-input");
-      expect(label.classes()).toContain("input-label");
+      expect(label.classes()).toEqual(["input-label"]);
     });
 
-    it("renders with textLabel slot", async () => {
-      await createWrapper(
-        {},
-        {
-          textLabel: "Email Address",
-        }
-      );
+    it("updates for when the id changes", async () => {
+      const wrapper = await createWrapper({ id: "initial-id" });
+      await wrapper.setProps({ id: "updated-id" });
 
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
-      expect(label.text()).toBe("Email Address");
+      expect(wrapper.find("label").attributes("for")).toBe("updated-id");
     });
 
-    it("renders with htmlLabel slot", async () => {
-      await createWrapper(
-        {},
-        {
-          htmlLabel: "<strong>Required:</strong> Email Address",
-        }
-      );
+    it("renders an empty label when no slots are given", async () => {
+      const wrapper = await createWrapper();
 
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
-      expect(label.html()).toContain("<strong>Required:</strong>");
-      expect(label.html()).toContain("Email Address");
+      expect(wrapper.find("label").text()).toBe("");
     });
 
-    it("renders both slots when provided", async () => {
-      await createWrapper(
-        {},
-        {
-          htmlLabel: "<strong>Primary:</strong>",
-          textLabel: "Email Address",
-        }
-      );
-
+    it("does not leak removed props as attributes", async () => {
+      const wrapper = await createWrapper();
       const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
-      expect(label.html()).toContain("<strong>Primary:</strong>");
-      expect(label.text()).toContain("Email Address");
-    });
 
-    it("renders empty label when no slots provided", async () => {
-      await createWrapper();
-
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
-      expect(label.text()).toBe("");
+      expect(label.attributes("name")).toBeUndefined();
+      expect(label.attributes("theme")).toBeUndefined();
     });
   });
 
-  describe("Props Handling", () => {
-    it("applies styleClassPassthrough as string", async () => {
-      await createWrapper({
-        styleClassPassthrough: "custom-label-class",
-      });
+  describe("slots", () => {
+    it("renders the textLabel slot", async () => {
+      const wrapper = await createWrapper({}, { textLabel: "Email address" });
 
-      const label = wrapper.find("label");
-      expect(label.classes()).toContain("custom-label-class");
+      expect(wrapper.find("label").text()).toBe("Email address");
     });
 
-    it("applies styleClassPassthrough as array", async () => {
-      await createWrapper({
-        styleClassPassthrough: ["custom-class", "another-class"],
-      });
-
+    it("renders the htmlLabel slot", async () => {
+      const wrapper = await createWrapper({}, { htmlLabel: "<strong>Required:</strong> Email" });
       const label = wrapper.find("label");
-      expect(label.classes()).toContain("custom-class");
-      expect(label.classes()).toContain("another-class");
-    });
-
-    it("applies normal variant class", async () => {
-      await createWrapper({
-        inputVariant: "normal",
-      });
 
-      const label = wrapper.find("label");
-      expect(label.classes()).toContain("normal");
+      expect(label.find("strong").text()).toBe("Required:");
+      expect(label.text()).toBe("Required: Email");
     });
 
-    it("handles theme prop correctly", async () => {
-      await createWrapper({
-        theme: "success",
-      });
+    it("renders htmlLabel before textLabel when both are given", async () => {
+      const wrapper = await createWrapper({}, { htmlLabel: "<em>HTML</em>", textLabel: "Text" });
+      const html = wrapper.find("label").html();
 
-      // Component should render successfully with valid theme
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
+      expect(html.indexOf("<em>HTML</em>")).toBeGreaterThan(-1);
+      expect(html.indexOf("<em>HTML</em>")).toBeLessThan(html.indexOf("Text"));
     });
 
-    it("handles fieldHasError prop", async () => {
-      await createWrapper({
-        fieldHasError: true,
-      });
+    it("escapes special characters in textLabel", async () => {
+      const wrapper = await createWrapper({}, { textLabel: "A & B < C" });
 
-      // Component should render successfully with error state
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
+      expect(wrapper.find("label").text()).toBe("A & B < C");
     });
   });
 
-  describe("Required Props", () => {
-    it("requires id prop for label association", async () => {
-      await createWrapper({
-        id: "required-id",
-        name: "test",
-      });
-
-      const label = wrapper.find("label");
-      expect(label.attributes("for")).toBe("required-id");
-    });
-
-    it("requires name prop", async () => {
-      await createWrapper({
-        id: "test-id",
-        name: "required-name",
-      });
-
-      // Component should render successfully with required name
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
-    });
-
-    it("works with complex ID values", async () => {
-      await createWrapper({
-        id: "complex-id_with.dots-and_underscores123",
-      });
+  describe("state hooks", () => {
+    it("defaults data-input-variant to normal", async () => {
+      const wrapper = await createWrapper();
 
-      const label = wrapper.find("label");
-      expect(label.attributes("for")).toBe("complex-id_with.dots-and_underscores123");
+      expect(wrapper.find("label").attributes("data-input-variant")).toBe("normal");
     });
-  });
 
-  describe("Default Props", () => {
-    it("applies default theme value", async () => {
-      await createWrapper();
+    it.each(["normal", "outlined", "underlined"] as const)("renders data-input-variant=%s", async (inputVariant) => {
+      const wrapper = await createWrapper({ inputVariant });
 
-      // Component should work with default theme 'primary'
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
+      expect(wrapper.find("label").attributes("data-input-variant")).toBe(inputVariant);
     });
 
-    it("applies default InputUiVariant value", async () => {
-      await createWrapper();
+    it("omits data-invalid by default", async () => {
+      const wrapper = await createWrapper();
 
-      // Component should work with default InputUiVariant 'normal'
-      const label = wrapper.find("label");
-      expect(label.classes()).toContain("normal");
+      expect(wrapper.find("label").attributes("data-invalid")).toBeUndefined();
     });
 
-    it("applies default fieldHasError value", async () => {
-      await createWrapper();
+    it("renders data-invalid when the field has an error", async () => {
+      const wrapper = await createWrapper({ fieldHasError: true });
 
-      // Component should work with default fieldHasError false
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
+      expect(wrapper.find("label").attributes("data-invalid")).toBe("");
     });
 
-    it("applies default styleClassPassthrough value", async () => {
-      await createWrapper();
+    it("toggles data-invalid reactively", async () => {
+      const wrapper = await createWrapper();
+      await wrapper.setProps({ fieldHasError: true });
+      expect(wrapper.find("label").attributes("data-invalid")).toBe("");
 
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
-      // Should have base classes but no custom ones
-      expect(label.classes()).toEqual(["input-label", "normal"]);
+      await wrapper.setProps({ fieldHasError: false });
+      expect(wrapper.find("label").attributes("data-invalid")).toBeUndefined();
     });
   });
 
-  describe("Accessibility", () => {
-    it("provides proper label association with for attribute", async () => {
-      await createWrapper(
-        {
-          id: "username-field",
-        },
-        {
-          textLabel: "Username",
-        }
-      );
-
-      const label = wrapper.find("label");
-      expect(label.attributes("for")).toBe("username-field");
-      expect(label.text()).toBe("Username");
-    });
+  describe("indicator", () => {
+    const indicator = (wrapper: Awaited<ReturnType<typeof createWrapper>>) => wrapper.find(".input-label-indicator");
 
-    it("supports rich HTML content for complex labels", async () => {
-      await createWrapper(
-        {},
-        {
-          htmlLabel: `
-          <span>Password</span>
-          <span class="required-indicator" aria-label="required">*</span>
-          <small>(must be 8+ characters)</small>
-        `,
-        }
-      );
+    it("renders no marker by default", async () => {
+      const wrapper = await createWrapper({ required: true });
 
-      const label = wrapper.find("label");
-      expect(label.html()).toContain("<span>Password</span>");
-      expect(label.html()).toContain("required-indicator");
-      expect(label.html()).toContain("<small>");
+      expect(indicator(wrapper).exists()).toBe(false);
     });
 
-    it("maintains semantic HTML structure", async () => {
-      await createWrapper(
-        {
-          id: "semantic-input",
-        },
-        {
-          textLabel: "Semantic Label",
-        }
-      );
+    it("marks a required field with a hidden asterisk in required mode", async () => {
+      const wrapper = await createWrapper({ indicator: "required", required: true }, { textLabel: "Email" });
+      const marker = indicator(wrapper);
 
-      const label = wrapper.find("label");
-      expect(label.element.tagName).toBe("LABEL");
-      expect(label.attributes("for")).toBe("semantic-input");
+      expect(marker.attributes("data-indicator")).toBe("required");
+      expect(marker.attributes("aria-hidden")).toBe("true");
+      expect(marker.text()).toBe("*");
     });
-  });
 
-  describe("Slot Behavior", () => {
-    it("renders htmlLabel slot first when both slots provided", async () => {
-      await createWrapper(
-        {},
-        {
-          htmlLabel: "<em>HTML content</em>",
-          textLabel: "Text content",
-        }
-      );
+    it("leaves an optional field unmarked in required mode", async () => {
+      const wrapper = await createWrapper({ indicator: "required", required: false });
 
-      const label = wrapper.find("label");
-      const html = label.html();
-
-      // HTML slot should appear before text slot in DOM
-      const htmlIndex = html.indexOf("<em>HTML content</em>");
-      const textIndex = html.indexOf("Text content");
-      expect(htmlIndex).toBeGreaterThan(-1);
-      expect(textIndex).toBeGreaterThan(-1);
-      expect(htmlIndex).toBeLessThan(textIndex);
+      expect(indicator(wrapper).exists()).toBe(false);
     });
 
-    it("handles only htmlLabel slot", async () => {
-      await createWrapper(
-        {},
-        {
-          htmlLabel: "<strong>Only HTML Label</strong>",
-        }
-      );
+    it("marks an optional field with visible, announced text in optional mode", async () => {
+      const wrapper = await createWrapper({ indicator: "optional" });
+      const marker = indicator(wrapper);
 
-      const label = wrapper.find("label");
-      expect(label.html()).toContain("<strong>Only HTML Label</strong>");
-      expect(label.text()).toBe("Only HTML Label");
+      expect(marker.attributes("data-indicator")).toBe("optional");
+      expect(marker.attributes("aria-hidden")).toBeUndefined();
+      expect(marker.text()).toBe("(optional)");
     });
 
-    it("handles only textLabel slot", async () => {
-      await createWrapper(
-        {},
-        {
-          textLabel: "Only Text Label",
-        }
-      );
+    it("leaves a required field unmarked in optional mode", async () => {
+      const wrapper = await createWrapper({ indicator: "optional", required: true });
 
-      const label = wrapper.find("label");
-      expect(label.text()).toBe("Only Text Label");
-      expect(label.html()).not.toContain("<strong>");
+      expect(indicator(wrapper).exists()).toBe(false);
     });
-  });
 
-  describe("CSS Classes", () => {
-    it("always includes base input-label class", async () => {
-      await createWrapper();
+    it("uses custom marker text", async () => {
+      const required = await createWrapper({ indicator: "required", required: true, requiredText: "(required)" });
+      const optional = await createWrapper({ indicator: "optional", optionalText: "(facultatif)" });
 
-      const label = wrapper.find("label");
-      expect(label.classes()).toContain("input-label");
+      expect(indicator(required).text()).toBe("(required)");
+      expect(indicator(optional).text()).toBe("(facultatif)");
     });
 
-    it("handles empty styleClassPassthrough", async () => {
-      await createWrapper({
-        styleClassPassthrough: [],
-      });
+    it("renders an icon instead of the required text", async () => {
+      const wrapper = await createWrapper({ indicator: "required", required: true, requiredIcon: "mdi:asterisk" });
+      const marker = indicator(wrapper);
 
-      const label = wrapper.find("label");
-      expect(label.classes()).toEqual(["input-label", "normal"]);
-    });
-  });
-
-  describe("Edge Cases", () => {
-    it("handles empty slot content gracefully", async () => {
-      await createWrapper(
-        {},
-        {
-          textLabel: "",
-        }
-      );
-
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
-      expect(label.text()).toBe("");
+      expect(marker.find(".input-label-indicator-icon").exists()).toBe(true);
+      expect(marker.text()).toBe("");
     });
 
-    it("handles whitespace-only slot content", async () => {
-      await createWrapper(
-        {},
-        {
-          textLabel: "   ",
-        }
-      );
+    it("keeps the optional text for screen readers when an icon is used", async () => {
+      const wrapper = await createWrapper({ indicator: "optional", optionalIcon: "mdi:help-circle-outline" });
+      const marker = indicator(wrapper);
 
-      const label = wrapper.find("label");
-      expect(label.exists()).toBe(true);
-      expect(label.text().trim()).toBe("");
+      expect(marker.find(".input-label-indicator-icon").exists()).toBe(true);
+      expect(marker.find(".sr-only").text()).toBe("(optional)");
     });
 
-    it("handles special characters in labels", async () => {
-      await createWrapper(
-        {},
-        {
-          textLabel: "Label with & < > \" ' characters",
-        }
-      );
+    it("updates when required changes", async () => {
+      const wrapper = await createWrapper({ indicator: "required", required: false });
+      await wrapper.setProps({ required: true });
 
-      const label = wrapper.find("label");
-      expect(label.text()).toBe("Label with & < > \" ' characters");
+      expect(indicator(wrapper).exists()).toBe(true);
     });
+  });
 
-    it("handles multiline label content", async () => {
-      await createWrapper(
-        {},
-        {
-          textLabel: `
-          Multi-line
-          Label Content
-        `,
-        }
-      );
+  describe("styleClassPassthrough", () => {
+    it("applies a string", async () => {
+      const wrapper = await createWrapper({ styleClassPassthrough: "custom-label" });
 
-      const label = wrapper.find("label");
-      expect(label.text()).toContain("Multi-line");
-      expect(label.text()).toContain("Label Content");
+      expect(wrapper.find("label").classes()).toEqual(["input-label", "custom-label"]);
     });
 
-    it("works with all valid theme values", async () => {
-      // Use FormUiTheme type for type-safe theme values
-      const themes = ["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"] as FormUiTheme[];
-      for (const theme of themes) {
-        const testWrapper = await createWrapper({ theme });
-        const label = testWrapper.find("label");
-        expect(label.exists()).toBe(true);
-        testWrapper.unmount();
-      }
-    });
-  });
-
-  describe("Label-Input Association", () => {
-    it("creates proper association between label and input", async () => {
-      await createWrapper(
-        {
-          id: "email-input-field",
-        },
-        {
-          textLabel: "Email Address",
-        }
-      );
+    it("applies an array", async () => {
+      const wrapper = await createWrapper({ styleClassPassthrough: ["one", "two"] });
 
-      const label = wrapper.find("label");
-      expect(label.attributes("for")).toBe("email-input-field");
-      // This ensures clicking the label will focus the associated input
+      expect(wrapper.find("label").classes()).toEqual(["input-label", "one", "two"]);
     });
 
-    it("handles dynamic ID changes", async () => {
-      await createWrapper({
-        id: "initial-id",
-      });
-
-      const label = wrapper.find("label");
-      expect(label.attributes("for")).toBe("initial-id");
+    it("reacts to prop changes", async () => {
+      const wrapper = await createWrapper({ styleClassPassthrough: "first" });
+      await wrapper.setProps({ styleClassPassthrough: "second" });
+      const classes = wrapper.find("label").classes();
 
-      // Update props to simulate ID change
-      await wrapper.setProps({ id: "updated-id" });
-      expect(label.attributes("for")).toBe("updated-id");
+      expect(classes).toContain("second");
+      expect(classes).not.toContain("first");
     });
   });
 });

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

@@ -1,4 +1,4 @@
-# InputNumberCore — Consumer Styling Guide
+# InputNumber — Consumer Styling Guide
 
 ## Public token API
 
@@ -7,10 +7,10 @@ to override just this component; leave it unset and it inherits the shared `--th
 `--theme-*` token every other themed component also falls back to. See
 `theming-component-token-pattern.md` for why this two-tier shape exists.
 
-This shape mirrors `InputTextCore`'s token set (see its own CONSUMER-STYLING.md) — `InputNumberCore`
+This shape mirrors `InputTextCore`'s token set (see its own CONSUMER-STYLING.md) — `InputNumber`
 is a native `<input type="number">` sibling to the text-based `InputTextAsNumberWithLabel` variant,
 and both are meant to look and behave the same way. Border colour also doubles as the divider
-colour between the input and an embedded left/right `InputButtonCore` — there's no separate divider
+colour between the input and an embedded left/right `InputButton` — there's no separate divider
 token, same as `InputTextCore`.
 
 | Token | Falls back to | Controls |
@@ -35,12 +35,12 @@ component and untouched by this — see `theming-form-geometry-tokens.md`.
 `InputTextCore`. Only `normal` (bordered box, with hover/focus outline) and `underlined`
 (bottom-border only) have CSS today; `outlined` has no styling in `InputTextCore` either (no
 `&.outlined` rule exists there), so passing it renders with no border/outline at all — a
-pre-existing gap in the type, not something specific to `InputNumberCore`. Declared for prop-shape
+pre-existing gap in the type, not something specific to `InputNumber`. Declared for prop-shape
 consistency with the rest of `05.forms`.
 
 ---
 
-## Global theming — app-level CSS file
+## Global theming
 
 ```css
 :where(html) {
@@ -54,8 +54,17 @@ Only declare the tokens you want to change — everything else keeps inheriting
 
 ---
 
-## Per-instance overrides
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### One instance
 
 ```vue
-<InputNumberCore id="quantity" name="quantity" :min="1" :max="10" style="--input-number-border: var(--gold-04);" />
+<InputNumber id="quantity" name="quantity" :min="1" :max="10" style="--input-number-border: var(--gold-04);" />
 ```
+

package/app/components/05.forms/input-number/{InputNumberCore.vue → InputNumber.vue}

@@ -21,7 +21,7 @@
         :max
         :step
         :placeholder
-        :class="['input-number-core', `input-number--${weight}`, elementClasses]"
+        :class="['input-number', `input-number--${weight}`, elementClasses]"
         inputmode="numeric"
         pattern="[0-9]+"
         :aria-describedby
@@ -83,7 +83,7 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
      theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
      input/control that also reads --theme-input-surface/--theme-border. Mirrors InputTextCore's
      token shape so a native number input and the text-based InputTextAsNumberWithLabel variant
-     look and behave the same way (see input-number-core.md's "Fixed 2026-09-22" note). */
+     look and behave the same way (see input-number.md's "Fixed 2026-09-22" note). */
     --_surface: var(--input-number-surface, var(--theme-input-surface));
     --_border: var(--input-number-border, var(--theme-border));
     --_border-focus: var(--input-number-border-focus, var(--theme-border-focus));
@@ -127,7 +127,7 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
         font-weight: 900;
       }
 
-      .input-button-core {
+      .input-button {
         background-color: var(--_surface);
         color: var(--input-number-text-color, var(--theme-input-text-color-normal));
         border: none;
@@ -167,15 +167,15 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
       }
     }
 
-    &.has-left-slot .left-slot .input-button-core {
+    &.has-left-slot .left-slot .input-button {
       border-right: var(--form-element-border-width) solid var(--_border);
     }
 
-    &.has-right-slot .right-slot .input-button-core {
+    &.has-right-slot .right-slot .input-button {
       border-left: var(--form-element-border-width) solid var(--_border);
     }
 
-    .input-number-core {
+    .input-number {
       all: unset;
       touch-action: manipulation;