srcdev-nuxt-components 9.5.4 → 9.5.5

package/.claude/skills/components/select-menu.md

@@ -188,6 +188,16 @@ Quick reference:
   `[role="option"]` if one exists (in `multiple` mode, the first checked item), otherwise the first
   option (unlike `ActionMenu`, which always focuses the first item since it has no selection state).
 - **`aria-multiselectable="true"`** is set on the listbox only when `multiple` is `true`.
+- **Selected rows are tinted** via `[aria-selected="true"]` (`--select-menu-item-surface-selected`,
+  default `--theme-surface-subtle`), in both single and multiple mode. Hover/focus is declared after
+  it at equal specificity, so the hover surface still shows on a selected row. Selected text colour,
+  font weight and border colour have their own `-selected` tokens falling back to the resting ones.
+  The row border width (`--select-menu-item-border-width`, default `0`) applies to every row with a
+  transparent resting colour, so a selected border never shifts layout. A hidden `::after` carrying
+  `data-label` in the selected weight reserves the label column's width, so a bolder selected
+  weight doesn't resize the popover. Hover/focus has `-text-color-hover` and `-border-hover`, which
+  fall back to the row's *current* state (selected or resting), not always to resting. There's no
+  hover font-weight token on purpose: the width reserve only covers one alternate weight.
 - **Chevron rotation is pure CSS** via `:has(.select-menu-popover:popover-open)` on the root — no
   JS state drives the visual. `isOpen` is still tracked internally, but only to set `aria-expanded`
   on the trigger.

package/.claude/skills/components/triple-toggle-switch.md

@@ -28,7 +28,7 @@ for that for a theme switch; use `TripleToggleSwitch` directly for any other thr
 | `name` | `string` | `"triple-toggle-switch"` | Shared radio `name`. Give each instance on a page its own. |
 | `aria-label` | `string` | `""` | Accessible name for the `role="radiogroup"`. Omitted from the DOM when empty. Always pass one. |
 | `theme` | `FormUiTheme` | `"default"` | Rendered as `data-theme`. |
-| `step-animation-duration` | `string` | `"250ms"` | Marker slide duration. Ignored under `prefers-reduced-motion`. |
+| `step-animation-duration` | `string` | `"250ms"` | Marker slide duration; also times the icon colour swap (see Behaviour). Ignored under `prefers-reduced-motion`. |
 | `style-class-passthrough` | `string \| string[]` | `[]` | Classes on the root. |
 
 Option `id`s are used as element ids (and as a class on each icon), so they must be unique on the
@@ -66,6 +66,12 @@ const options = ref<IFormMultipleOptions>({
 - The marker is measured from the first option's width on mount and fades in after ~250ms. It
   isn't re-measured on resize, so changing the icon-size/padding tokens after mount (e.g. toggling
   a class) leaves the marker at its old size.
+- Icon colour swaps are timed to the marker: the newly active icon waits half of
+  `stepAnimationDuration`, then fades to the active colour over the other half, so it lands as the
+  marker arrives rather than turning white on the bare track. The previous icon fades back straight
+  away. The marker takes the same time whatever the distance, so no per-index delay is needed.
+- Option circles are sized by their content (1em icon + equal padding) with `place-items: center`,
+  not `aspect-ratio`; older iPad Safari mis-centred the icons under the `aspect-ratio` version.
 - Marker gradients only exist for the values `system`, `light` and `dark`; other values get the
   plain `--triple-toggle-switch-marker-surface` background.
 

package/app/components/02.molecules/select-menu/CONSUMER-STYLING.md

@@ -49,6 +49,15 @@ global token so it matches the rest of the design system out of the box.
 | `--select-menu-item-text-color` | `var(--theme-text)` | Option label colour |
 | `--select-menu-item-font-size` | `1.5rem` | Option label font size |
 | `--select-menu-item-surface-hover` | `var(--theme-input-surface-hover)` | Option row background on hover/focus |
+| `--select-menu-item-surface-selected` | `var(--theme-surface-subtle)` | Background of selected/checked option rows (hover/focus still wins) |
+| `--select-menu-item-text-color-selected` | `--select-menu-item-text-color` | Selected row label colour (the checkmark follows via `currentcolor`) |
+| `--select-menu-item-font-weight` | inherited | Option row font weight |
+| `--select-menu-item-font-weight-selected` | `--select-menu-item-font-weight` | Selected row font weight; the popover reserves the bolder width, so selecting doesn't resize it |
+| `--select-menu-item-border-width` | `0` | Block (top/bottom) border width on **every** row, so a selected border never shifts layout |
+| `--select-menu-item-border` | `transparent` | Resting row border colour |
+| `--select-menu-item-border-selected` | `--select-menu-item-border` | Selected row border colour. Two adjacent selected rows show both borders where they meet |
+| `--select-menu-item-text-color-hover` | the row's current colour | Label colour on hover/focus. Unset, a selected row keeps its selected colour |
+| `--select-menu-item-border-hover` | the row's current border | Border colour on hover/focus. Unset, a selected row keeps its selected border |
 | `--select-menu-item-check-size` | `1.6rem` | Checkmark icon box size |
 | `--select-menu-item-check-color` | `currentcolor` | Checkmark icon colour |
 | `--select-menu-item-icon-size` | `1.8rem` | Per-option icon size |
@@ -184,4 +193,3 @@ story.
   the bottom of the viewport (`position-try-fallbacks: flip-block`).
 - **Chevron rotation** is pure CSS via `:has(.select-menu-popover:popover-open)` — no JS state
   needed for the visual, though `isOpen` is still tracked internally to drive `aria-expanded`.
-

package/app/components/02.molecules/select-menu/SelectMenu.vue

@@ -41,6 +41,7 @@
           role="option"
           tabindex="-1"
           :aria-selected="isSelected(option)"
+          :data-label="option.label"
           @click="selectOption(option)"
         >
           <span class="select-menu-item-check" aria-hidden="true">
@@ -343,15 +344,50 @@ watch(
           gap: var(--select-menu-item-gap, 0.8rem);
           padding-block: var(--select-menu-item-padding-block, 1rem);
           padding-inline: var(--select-menu-item-padding-inline, 1.2rem);
+          --_text-color: var(--select-menu-item-text-color, var(--theme-text));
+          --_border: var(--select-menu-item-border, transparent);
+
           cursor: pointer;
-          color: var(--select-menu-item-text-color, var(--theme-text));
+          color: var(--_text-color);
           font-family: var(--font-family);
           font-size: var(--select-menu-item-font-size, 1.5rem);
-          transition: background-color var(--select-menu-transition-duration, 200ms) ease;
+          /* No fallback: unset means invalid at computed time, so the weight inherits. */
+          font-weight: var(--select-menu-item-font-weight);
+          border-block: var(--select-menu-item-border-width, 0) solid var(--_border);
+          transition:
+            background-color var(--select-menu-transition-duration, 200ms) ease,
+            border-color var(--select-menu-transition-duration, 200ms) ease,
+            color var(--select-menu-transition-duration, 200ms) ease;
+
+          /* Reserves the selected label width so a bolder selected weight doesn't resize the popover. */
+          &::after {
+            content: attr(data-label);
+            grid-column: 3;
+            grid-row: 1;
+            block-size: 0;
+            overflow: hidden;
+            visibility: hidden;
+            white-space: nowrap;
+            font-weight: var(--select-menu-item-font-weight-selected, var(--select-menu-item-font-weight));
+          }
+
+          &[aria-selected="true"] {
+            --_text-color: var(
+              --select-menu-item-text-color-selected,
+              var(--select-menu-item-text-color, var(--theme-text))
+            );
+            --_border: var(--select-menu-item-border-selected, var(--select-menu-item-border, transparent));
+
+            background-color: var(--select-menu-item-surface-selected, var(--theme-surface-subtle));
+            font-weight: var(--select-menu-item-font-weight-selected, var(--select-menu-item-font-weight));
+          }
 
+          /* Hover falls back to the row's current state, so an unset hover token keeps a selected row's colours. */
           &:hover,
           &:focus-visible {
             background-color: var(--select-menu-item-surface-hover, var(--theme-input-surface-hover));
+            color: var(--select-menu-item-text-color-hover, var(--_text-color));
+            border-color: var(--select-menu-item-border-hover, var(--_border));
           }
 
           &:focus-visible {
@@ -386,6 +422,7 @@ watch(
 
           .select-menu-item-label {
             grid-column: 3;
+            grid-row: 1;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;

package/app/components/02.molecules/select-menu/tests/__snapshots__/SelectMenu.spec.ts.snap

@@ -6,9 +6,9 @@ exports[`SelectMenu > Snapshots > default 1`] = `
   </button>
   <div id="select-menu-v-0-0" popover="" class="select-menu-popover">
     <ul class="select-menu-list" role="listbox" aria-label="Language">
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="English"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="Français"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="Deutsch"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
     </ul>
   </div>
 </div>"
@@ -21,9 +21,9 @@ exports[`SelectMenu > Snapshots > icon-only trigger 1`] = `
   </button>
   <div id="select-menu-v-0-0" popover="" class="select-menu-popover">
     <ul class="select-menu-list" role="listbox" aria-label="Language">
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="true"><span class="select-menu-item-check" aria-hidden="true"><span class="iconify i-lucide:check select-menu-item-check-icon" aria-hidden="true"></span></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="true" data-label="English"><span class="select-menu-item-check" aria-hidden="true"><span class="iconify i-lucide:check select-menu-item-check-icon" aria-hidden="true"></span></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="Français"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="Deutsch"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
     </ul>
   </div>
 </div>"
@@ -33,9 +33,9 @@ exports[`SelectMenu > Snapshots > with a selected value 1`] = `
 "<div class="select-menu normal" style="--_anchor-name: --select-menu-anchor-v-0-0;"><button popovertarget="select-menu-v-0-0" popovertargetaction="toggle" type="button" class="select-menu-trigger" aria-label="Language" aria-haspopup="listbox" aria-expanded="false"><span class="iconify i-flag:fr-4x3 select-menu-trigger-icon" aria-hidden="true"></span><span class="select-menu-trigger-label">Français</span><span class="iconify i-lucide:chevron-down select-menu-trigger-chevron" aria-hidden="true"></span></button>
   <div id="select-menu-v-0-0" popover="" class="select-menu-popover">
     <ul class="select-menu-list" role="listbox" aria-label="Language">
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="true"><span class="select-menu-item-check" aria-hidden="true"><span class="iconify i-lucide:check select-menu-item-check-icon" aria-hidden="true"></span></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
-      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="English"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:gb-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">English</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="true" data-label="Français"><span class="select-menu-item-check" aria-hidden="true"><span class="iconify i-lucide:check select-menu-item-check-icon" aria-hidden="true"></span></span><span class="iconify i-flag:fr-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Français</span></li>
+      <li class="select-menu-list-item" role="option" tabindex="-1" aria-selected="false" data-label="Deutsch"><span class="select-menu-item-check" aria-hidden="true"><!--v-if--></span><span class="iconify i-flag:de-4x3 select-menu-item-icon" aria-hidden="true"></span><span class="select-menu-item-label">Deutsch</span></li>
     </ul>
   </div>
 </div>"

package/app/components/05.forms/triple-toggle-switch/TripleToggleSwitch.vue

@@ -186,10 +186,9 @@ onMounted(() => {
         position: relative;
 
         .option-group {
-          aspect-ratio: 1;
           display: grid;
           grid-template-areas: "icon-stack";
-          place-content: center;
+          place-items: center;
           background: transparent;
           border: var(--form-element-border-width) solid var(--triple-toggle-switch-option-border, #00000025);
           outline: var(--form-element-outline-width) solid transparent;
@@ -214,10 +213,18 @@ onMounted(() => {
             grid-area: icon-stack;
             display: block;
             font-size: var(--_scheme-icon-font-size);
+            width: 1em;
+            height: 1em;
             color: var(--triple-toggle-switch-option-icon-color, var(--slate-10));
+            transition: color calc(v-bind(stepAnimationDuration) / 2) ease-in-out;
 
             &.active {
               color: var(--triple-toggle-switch-option-icon-color-active, var(--slate-00));
+              transition-delay: calc(v-bind(stepAnimationDuration) / 2);
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+              transition: none;
             }
 
             &:hover {
@@ -227,9 +234,10 @@ onMounted(() => {
 
           .option-input {
             grid-area: icon-stack;
+            appearance: none;
             opacity: 0;
-            aspect-ratio: 1;
             width: var(--_scheme-icon-font-size);
+            height: var(--_scheme-icon-font-size);
 
             &:hover {
               cursor: pointer;

package/package.json

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