srcdev-nuxt-components 9.6.9 → 9.6.10

package/.claude/skills/component-compliance-checklist.md

@@ -196,6 +196,11 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
    - A toast, banner or status message doesn't `.focus()` itself when it appears (rule
      `consumer/a11y-no-focus-steal.md`).
    - Focus is visible (`:focus-visible`, not a suppressed outline) on anything focusable.
+   - `aria-invalid` is bound as `fieldHasError ? 'true' : undefined`, never the boolean itself:
+     `:aria-invalid="fieldHasError"` renders `aria-invalid="false"` on every valid field
+     (`InputTextarea`, `ToggleSwitch`, fixed 2026-10-16). Same for an empty `aria-describedby`.
+   - A checkbox drawn as an on/off switch has `role="switch"`, and its decorative track is
+     `aria-hidden` (`ToggleSwitch`, 2026-10-16).
    - Live-updating or auto-advancing content (carousels, marquees, auto-dismissing toasts) has a
      way to pause it, per WCAG 2.2.2 — a visible control, or pause-on-hover/focus at minimum.
    - `prefers-reduced-motion` is respected for any animation that isn't purely decorative.
@@ -275,6 +280,17 @@ The ledger can't see items 6c, 9, 10, 11 and 14, so check those by hand.
       defaults to its min-content width and overflows a narrow column (`MultipleCheckboxes`,
       2026-10-16).
     - Element ids come from `useId()`, never from data values (rule `consumer/ids-from-useid.md`).
+    - A wrapper passes its child only props the child declares. Anything else falls through as an
+      HTML attribute on the child's root: `InputTextField` put `label="…"` and
+      `error-message="…"` on `.input-text-wrapper` (fixed 2026-10-16). Check the child root's
+      attributes in a test.
+    - A control styled with `all: unset` restores the UA defaults it depends on. On a `<textarea>`
+      that reset `white-space: pre-wrap` (inherited, so it took the page's `normal`); set
+      `white-space: pre-wrap` and `overflow-wrap: anywhere` explicitly (`InputTextarea`,
+      2026-10-16).
+    - A state rule (`[data-checked]`) written at the root level loses to deeper nested base rules
+      for the same element. Nest it in the element's own block as `.root[data-x] & { … }`
+      (`ToggleSwitch`, 2026-10-16; `css-nesting-conventions.md`).
     - Step buttons and any other script that changes a number round to the step's precision
       (`toFixed`), clamp to `min`/`max`, and compare limits with `<=`/`>=`, never `===` (0.1 steps
       drift to 0.30000000000000004, and an overshoot past an `===` check never disables the button).

package/.claude/skills/component-naming.md

@@ -60,7 +60,12 @@ stripping `Core`.
    control name).
 2. `sed` the old names across `app/`, `.claude/`, `.vscode/`, `MIGRATION.md` and `CLAUDE.md`:
    component names, `import` paths, story titles/`*StoryArgs` interfaces, `describe()` names, and the
-   root/base DOM class (update `CONSUMER-STYLING.md` and test selectors that use it).
+   root/base DOM class (update `CONSUMER-STYLING.md` and test selectors that use it). Match on word
+   boundaries (`\bToggleSwitchCore\b`): a bare `ToggleSwitchCore` also matched inside
+   `TripleToggleSwitchCore` and rewrote its history notes (2026-10-16). Leave out the gitignored
+   `.claude/settings.json` (its old allowlist entries match too) and any dated "Renamed"/"Changed"
+   notes, and rename a removed wrapper by hand before the bulk pass, or `XWithLabel` → `XField`
+   turns `XWithLabelInline` into a name that never existed.
 3. Add a "Renamed YYYY-MM-DD" note at the top of the skill doc listing old → new names and classes.
 4. Grep consumer repos (`/check-component-usage`) and **list** the files/lines that use the old
    names (in the private consumer notes, never in this repo). Don't edit the consumers yet: they pin

package/.claude/skills/css-nesting-conventions.md

@@ -28,7 +28,8 @@ This project uses **native CSS nesting** (W3C CSS Nesting spec), not Sass/SCSS.
 **Why it silently fails**: esbuild converts `&__heading` to `:is(__heading)`, which tries to match an HTML element named `__heading`. No such element exists, so the styles are never applied. There's no error — just missing styles.
 
 The build will show this warning:
-```
+
+```text
 ▲ [WARNING] Cannot use type selector "__heading" directly after nesting selector "&" [css-syntax-error]
   CSS nesting syntax does not allow the "&" selector to come before a type selector.
 ```
@@ -119,3 +120,23 @@ If you see `&__` or `&-` in a `.vue` `<style lang="css">` block, it's Sass synta
 
 - `CLAUDE.md` → Styling Methodology section
 - `css-grid-max-width-gutters.md` — example of correct native nesting in a grid utility
+
+## State rules and specificity
+
+Nesting multiplies specificity: `.toggle-switch { .toggle-switch-wrapper { .toggle-switch-track
+{ .toggle-switch-thumb {} } } }` compiles to a four-class selector. A state rule written once at
+the root level, `.toggle-switch[data-checked] .toggle-switch-thumb`, has only three, so the base
+rule wins and the state never shows. Nest the state rule inside the element's own block instead:
+
+```css
+.toggle-switch-thumb {
+  translate: 0 0;
+
+  .toggle-switch[data-checked] & {
+    translate: 100% 0;
+  }
+}
+```
+
+`.toggle-switch[data-checked] &` adds the root's class and attribute on top of the full nested
+selector, so it always outranks the base rule.

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

@@ -130,5 +130,5 @@ ancestor of the label).
 
 `:style-class-passthrough` (string or string array) adds classes to the `<label>`. It's only
 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-select-label`,
-`input-textarea-label`, `input-switch-label`) and don't forward yours.
+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.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.9",
+  "version": "9.6.10",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",