srcdev-nuxt-components 9.6.0 → 9.6.1

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

@@ -22,7 +22,20 @@ global token so it matches the rest of the design system out of the box.
 | `--select-menu-trigger-text-color` | `var(--theme-text)` | Trigger label text colour |
 | `--select-menu-trigger-font-size` | `1.6rem` | Trigger label font size |
 | `--select-menu-trigger-outline-width` | `0.2rem` | Focus-visible outline width (trigger and items) |
-| `--select-menu-trigger-icon-size` | `2rem` | Selected option's icon size in the trigger |
+| `--select-menu-trigger-icon-size` | `2rem` | Leading icon size in the trigger (selected option's icon or `triggerIcon`) |
+| `--select-menu-trigger-icon-color` | `currentcolor` | Leading icon colour (monochrome icon sets only) |
+| `--select-menu-trigger-count-surface` | `var(--theme-surface-subtle)` | Count badge background (`indicator="count"`) |
+| `--select-menu-trigger-count-text-color` | `var(--theme-text)` | Count badge text colour |
+| `--select-menu-trigger-count-font-size` | `1.4rem` | Count badge font size |
+| `--select-menu-trigger-count-font-weight` | `600` | Count badge font weight |
+| `--select-menu-trigger-count-min-width` | `2.4rem` | Count badge minimum width, so 1 and 12 read as the same shape |
+| `--select-menu-trigger-count-padding-block` | `0.2rem` | Count badge vertical padding |
+| `--select-menu-trigger-count-padding-inline` | `0.6rem` | Count badge horizontal padding |
+| `--select-menu-trigger-count-border-radius` | `0.4rem` | Count badge corner rounding (`999rem` for a pill) |
+| `--select-menu-trigger-count-margin-inline` | `1.2rem 0` | Extra space around the count badge, on top of `--select-menu-trigger-gap` (start, end) |
+| `--select-menu-trigger-dot-size` | `0.8rem` | Status dot diameter (`indicator="dot"`) |
+| `--select-menu-trigger-dot-margin-inline` | `1.2rem 0` | Extra space around the status dot, on top of `--select-menu-trigger-gap` (start, end) |
+| `--select-menu-trigger-dot-color` | `var(--theme-accent)` | Status dot colour when the selected option has no `dotColor` |
 | `--select-menu-trigger-chevron-size` | `1.6rem` | Chevron icon size |
 
 ### Menu popover
@@ -35,10 +48,11 @@ global token so it matches the rest of the design system out of the box.
 | `--select-menu-popover-surface` | `var(--theme-input-surface)` | Popover background |
 | `--select-menu-popover-border-radius` | `0.5rem` | Popover corner rounding |
 | `--select-menu-popover-min-width` | `18rem` | Minimum popover width |
+| `--select-menu-popover-max-width` | `calc(100vw - 3.2rem)` | Maximum popover width; longer option labels wrap (see `--select-menu-item-label-line-clamp`) |
 | `--select-menu-popover-max-height` | `32rem` | Maximum popover height before scrolling |
 | `--select-menu-popover-shadow` | `0 0.4rem 1.6rem rgb(0 0 0 / 12%)` | Popover drop shadow |
 | `--select-menu-popover-z-index` | `999999` | Stacking order in browsers without CSS anchor positioning (see Notes). Ignored where the popover renders in the top layer |
-| `--select-menu-transition-duration` | `200ms` | Open/close fade and chevron-rotate duration |
+| `--select-menu-transition-duration` | `200ms` | Open/close fade and chevron-flip duration |
 
 ### Options
 
@@ -62,6 +76,14 @@ global token so it matches the rest of the design system out of the box.
 | `--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 |
+| `--select-menu-item-dot-size` | `0.8rem` | Per-option status dot size (options with `dotColor` and no `icon`) |
+| `--select-menu-item-label-line-clamp` | `none` | Lines an option label may take before it's cut with an ellipsis. `none` wraps the full label, `1` is single-line ellipsis |
+
+> Changed 2026-10-08: long values used to push things off screen. The root now caps at its
+> container's width (`max-inline-size: 100%`), so a long trigger label truncates with its ellipsis
+> instead of overflowing. The popover caps at `--select-menu-popover-max-width`, and option labels
+> wrap (they were `nowrap`, so a long one made the menu wider than the viewport). Set
+> `--select-menu-item-label-line-clamp: 1` for the old single-line look.
 
 ---
 
@@ -70,7 +92,7 @@ global token so it matches the rest of the design system out of the box.
 | Hook | Where | Meaning |
 |---|---|---|
 | `.normal` / `.underlined` | `.select-menu` root | The `inputVariant` prop. `underlined` removes the trigger's top and side borders and its corner radius, matching `InputSelect`'s underlined variant. |
-| `.select-menu-trigger[aria-expanded="true"]` | trigger | Menu open (rotates the chevron). Works with and without the Popover API. |
+| `.select-menu-trigger[aria-expanded="true"]` | trigger | Menu open (flips the chevron vertically). Works with and without the Popover API. |
 | `.select-menu-popover:popover-open` | popover | Menu open, Popover API browsers. |
 | `.select-menu-popover-open` | popover | Menu open, browsers without the Popover API (Safari 16 and older). Style both open hooks in **separate rules**: a selector list containing `:popover-open` is dropped whole where it's unsupported. |
 | `[data-placement="top"]` | popover | Flipped above the trigger, browsers without CSS anchor positioning only. |
@@ -142,6 +164,40 @@ the three common shapes:
 | Icon-only (e.g. flag switcher in a tight header) | `:show-label="false" :show-chevron="false"` |
 | Text + chevron (e.g. a category filter with no per-option icons) | `:show-icon="false"` (default `showLabel`/`showChevron`) |
 | Icon + text + chevron (full select) | Defaults — no overrides needed |
+| Filter: category icon + text + count/dot + chevron | `trigger-icon="lucide:list" indicator="count"` (or `"dot"`) |
+
+### Stable trigger width
+
+In single-select the trigger text changes with the selection, so by default the trigger resizes
+("Active" to "Archived"). Set `reserve-label-width` to size it to the longest option label (or
+placeholder) instead: hidden copies of each label (`.select-menu-trigger-label-sizer`) share a grid
+cell with the visible text (`.select-menu-trigger-label-text`), and the root label span gets
+`.select-menu-trigger-label-reserved`. No effect with `multiple`. If only some options have an
+`icon`, the trigger can still change width when the icon appears; give them all an icon, or use
+`triggerIcon`.
+
+### Filter icon and indicator
+
+`triggerIcon` sets a fixed leading icon (a category icon for a filter). It shows in both modes;
+in single-select a selected option's own icon replaces it. `showIcon` hides either.
+
+`indicator` adds a marker after the label, visible only while something is selected. With nothing
+selected it stays in the layout but hidden (`.select-menu-trigger-indicator-empty`, `visibility:
+hidden`), so the trigger doesn't change width as the filter is set and cleared. The count badge's
+`--select-menu-trigger-count-min-width` fits two digits, so it only grows at 100+:
+
+- `count`: a badge with the number selected. Meant for `multiple`.
+- `dot`: a status dot. Meant for single-select, to flag that the filter is active.
+
+Give options a `dotColor` (any CSS colour) to colour the dot per status: the trigger dot takes the
+selected option's colour, and options with a `dotColor` and no `icon` show the same dot in the
+list. The per-option colour beats `--select-menu-trigger-dot-color`, which stays the fallback
+(and the only colour in `multiple` mode, where there's no single selected option). Pass a global
+status token, e.g. `dotColor: "var(--status-success)"`, so the colours stay in step with every other
+status indicator (see `.claude/skills/theming-status-tokens.md`).
+
+The indicator is `aria-hidden`; instead the trigger's accessible name becomes
+`"<label>, <selectedCountLabel>"` (default `"{count} selected"`, override it for translation).
 
 ---
 
@@ -156,9 +212,9 @@ toggles it in the array without closing the popover — so several can be picked
 cycle. By default the trigger text stays fixed on `placeholder`/`label` as a static category tag
 (e.g. `"Services required"`) regardless of how many options are checked, since a comma-joined list
 of checked options would grow unpredictably long. Set `showSelectionInTrigger` to opt into that
-comma-joined list instead (falling back to `placeholder`/`label` when nothing is checked). The
-trigger icon is not shown in multi-select mode (`showIcon` has no effect), since there's no single
-selected option to represent.
+comma-joined list instead (falling back to `placeholder`/`label` when nothing is checked). No
+option icon is shown in the trigger in multi-select mode, since there's no single selected option
+to represent; a fixed `triggerIcon` still shows.
 
 ```vue
 <script setup lang="ts">
@@ -202,6 +258,8 @@ story.
   `contain` becomes its containing block and can misplace it.
 - **Popover left-aligns with the trigger** by default (`left: anchor(left)`), unlike `ActionMenu`
   which right-aligns — matches native `<select>` dropdown behaviour. Flips above the trigger near
-  the bottom of the viewport (`position-try-fallbacks: flip-block`).
-- **Chevron rotation** is driven by the trigger's `aria-expanded`, which tracks the open state in
+  the bottom of the viewport, and right-aligns when there's no room to the right
+  (`position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline`). The inline flip needs
+  CSS anchor positioning; the JS fallback only flips above/below.
+- **Chevron flip** (`scaleY(-1)`, was `rotate(180deg)` until 2026-10-07) is driven by the trigger's `aria-expanded`, which tracks the open state in
   every browser.

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

@@ -11,24 +11,45 @@
       popovertargetaction="toggle"
       type="button"
       class="select-menu-trigger"
-      :aria-label="label"
+      :aria-label="triggerAriaLabel"
       aria-haspopup="listbox"
       :aria-expanded="isOpen"
       @click="handleTriggerClick"
     >
-      <Icon
-        v-if="showIcon && !multiple && selectedOption?.icon"
-        :name="selectedOption.icon"
-        class="select-menu-trigger-icon"
+      <Icon v-if="leadingIcon" :name="leadingIcon" class="select-menu-trigger-icon" aria-hidden="true" />
+      <span
+        v-if="showLabel"
+        class="select-menu-trigger-label"
+        :class="{ 'select-menu-trigger-label-reserved': reservedLabels.length }"
+      >
+        <template v-if="reservedLabels.length">
+          <span class="select-menu-trigger-label-text">{{ triggerLabelText }}</span>
+          <span
+            v-for="(text, index) in reservedLabels"
+            :key="index"
+            class="select-menu-trigger-label-sizer"
+            aria-hidden="true"
+            >{{ text }}</span
+          >
+        </template>
+        <template v-else>{{ triggerLabelText }}</template>
+      </span>
+      <span
+        v-if="indicator === 'count'"
+        class="select-menu-trigger-count"
+        :class="{ 'select-menu-trigger-indicator-empty': !selectedCount }"
         aria-hidden="true"
-      />
-      <span v-if="showLabel" class="select-menu-trigger-label">{{ triggerLabelText }}</span>
-      <Icon
-        v-if="showChevron"
-        name="lucide:chevron-down"
-        class="select-menu-trigger-chevron"
+      >
+        {{ selectedCount || "" }}
+      </span>
+      <span
+        v-else-if="indicator === 'dot'"
+        class="select-menu-trigger-dot"
+        :class="{ 'select-menu-trigger-indicator-empty': !selectedCount }"
+        :style="selectedOption?.dotColor ? { '--_dot-color': selectedOption.dotColor } : undefined"
         aria-hidden="true"
-      />
+      ></span>
+      <Icon v-if="showChevron" name="lucide:chevron-down" class="select-menu-trigger-chevron" aria-hidden="true" />
     </button>
 
     <div
@@ -63,6 +84,12 @@
             <Icon v-else-if="isSelected(option)" name="lucide:check" class="select-menu-item-check-icon" />
           </span>
           <Icon v-if="option.icon" :name="option.icon" class="select-menu-item-icon" aria-hidden="true" />
+          <span
+            v-else-if="option.dotColor"
+            class="select-menu-item-dot"
+            :style="{ '--_dot-color': option.dotColor }"
+            aria-hidden="true"
+          ></span>
           <span class="select-menu-item-label">{{ option.label }}</span>
         </li>
       </ul>
@@ -81,8 +108,14 @@ interface Props {
   label: string;
   /** Text shown in the trigger when no option is selected. Falls back to `label`. */
   placeholder?: string;
-  /** Show the selected option's icon in the trigger. */
+  /** Show the leading icon in the trigger: the selected option's icon (single-select), otherwise `triggerIcon`. */
   showIcon?: boolean;
+  /** Fixed leading icon for the trigger, e.g. a filter category icon. Shown in both modes; in single-select a selected option's own icon replaces it. */
+  triggerIcon?: string;
+  /** Selection indicator after the trigger text, shown only while something is selected: `count` (badge with the number selected) or `dot` (status dot). */
+  indicator?: "none" | "count" | "dot";
+  /** Appended to the trigger's accessible name while the indicator is showing. `{count}` is replaced with the number selected. */
+  selectedCountLabel?: string;
   /** Show the selected option's label (or placeholder) text in the trigger. Set to false for an icon-only compact trigger. */
   showLabel?: boolean;
   /** Show the trailing chevron in the trigger. */
@@ -91,6 +124,8 @@ interface Props {
   multiple?: boolean;
   /** In multiple mode, update the trigger text to a comma-separated list of the currently checked options instead of leaving it fixed on placeholder/label. No effect outside multiple mode. */
   showSelectionInTrigger?: boolean;
+  /** Single-select only. Size the trigger text to the longest option label (or placeholder), so the trigger doesn't change width as the selection changes. */
+  reserveLabelWidth?: boolean;
   /** Trigger border style, matching InputSelect: `normal` (bordered box) or `underlined` (bottom border only). */
   inputVariant?: InputUiVariant;
   styleClassPassthrough?: string | string[];
@@ -99,10 +134,14 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   placeholder: undefined,
   showIcon: true,
+  triggerIcon: undefined,
+  indicator: "none",
+  selectedCountLabel: "{count} selected",
   showLabel: true,
   showChevron: true,
   multiple: false,
   showSelectionInTrigger: false,
+  reserveLabelWidth: false,
   inputVariant: "normal",
   styleClassPassthrough: () => [],
 });
@@ -130,6 +169,11 @@ const selectedOptions = computed(() => props.options.filter((option) => selected
  * options would grow unpredictably long and push on adjacent triggers. Set
  * `showSelectionInTrigger` to opt into the comma-joined list instead.
  */
+const reservedLabels = computed(() => {
+  if (!props.reserveLabelWidth || props.multiple) return [];
+  return [props.placeholder ?? props.label, ...props.options.map((option) => option.label)];
+});
+
 const triggerLabelText = computed(() => {
   if (props.multiple) {
     if (props.showSelectionInTrigger && selectedOptions.value.length) {
@@ -140,6 +184,21 @@ const triggerLabelText = computed(() => {
   return selectedOption.value?.label ?? props.placeholder ?? props.label;
 });
 
+const selectedCount = computed(() => {
+  if (props.multiple) return selectedOptions.value.length;
+  return selectedOption.value ? 1 : 0;
+});
+
+const leadingIcon = computed(() => {
+  if (!props.showIcon) return undefined;
+  return (!props.multiple && selectedOption.value?.icon) || props.triggerIcon;
+});
+
+const triggerAriaLabel = computed(() => {
+  if (props.indicator === "none" || !selectedCount.value) return props.label;
+  return `${props.label}, ${props.selectedCountLabel.replace("{count}", String(selectedCount.value))}`;
+});
+
 const isSelected = (option: SelectMenuOption): boolean =>
   props.multiple ? selectedValues.value.includes(option.value) : option.value === modelValue.value;
 
@@ -238,6 +297,8 @@ watch(
   .select-menu {
     position: relative;
     display: inline-block;
+    max-inline-size: 100%;
+    min-inline-size: 0;
 
     .select-menu-trigger {
       all: unset;
@@ -249,7 +310,8 @@ watch(
       min-height: var(--select-menu-trigger-min-height, 4.4rem);
       padding-block: var(--select-menu-trigger-padding-block, 0.8rem);
       padding-inline: var(--select-menu-trigger-padding-inline, 1.2rem);
-      border: var(--select-menu-trigger-border-width, 0.1rem) solid var(--select-menu-trigger-border, var(--theme-border));
+      border: var(--select-menu-trigger-border-width, 0.1rem) solid
+        var(--select-menu-trigger-border, var(--theme-border));
       border-radius: var(--select-menu-trigger-border-radius, 0.5rem);
       background-color: var(--select-menu-trigger-surface, var(--theme-input-surface));
       color: var(--select-menu-trigger-text-color, var(--theme-text));
@@ -274,6 +336,7 @@ watch(
         flex-shrink: 0;
         width: var(--select-menu-trigger-icon-size, 2rem);
         height: var(--select-menu-trigger-icon-size, 2rem);
+        color: var(--select-menu-trigger-icon-color, currentcolor);
       }
 
       .select-menu-trigger-label {
@@ -285,6 +348,53 @@ watch(
         text-align: start;
       }
 
+      /* Hidden copies of every possible label share one grid cell, so the widest sets the width. */
+      .select-menu-trigger-label-reserved {
+        display: grid;
+
+        .select-menu-trigger-label-text,
+        .select-menu-trigger-label-sizer {
+          grid-area: 1 / 1;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .select-menu-trigger-label-sizer {
+          visibility: hidden;
+          block-size: 0;
+        }
+      }
+
+      .select-menu-trigger-count {
+        flex-shrink: 0;
+        min-width: var(--select-menu-trigger-count-min-width, 2.4rem);
+        padding-block: var(--select-menu-trigger-count-padding-block, 0.2rem);
+        padding-inline: var(--select-menu-trigger-count-padding-inline, 0.6rem);
+        margin-inline: var(--select-menu-trigger-count-margin-inline, 1.2rem 0);
+        border-radius: var(--select-menu-trigger-count-border-radius, 0.4rem);
+        background-color: var(--select-menu-trigger-count-surface, var(--theme-surface-subtle));
+        color: var(--select-menu-trigger-count-text-color, var(--theme-text));
+        font-size: var(--select-menu-trigger-count-font-size, 1.4rem);
+        font-weight: var(--select-menu-trigger-count-font-weight, 600);
+        font-variant-numeric: tabular-nums;
+        text-align: center;
+      }
+
+      .select-menu-trigger-dot {
+        flex-shrink: 0;
+        width: var(--select-menu-trigger-dot-size, 0.8rem);
+        height: var(--select-menu-trigger-dot-size, 0.8rem);
+        margin-inline: var(--select-menu-trigger-dot-margin-inline, 1.2rem 0);
+        border-radius: 50%;
+        background-color: var(--_dot-color, var(--select-menu-trigger-dot-color, var(--theme-accent)));
+      }
+
+      /* Kept in the layout while nothing is selected, so the trigger width doesn't jump. */
+      .select-menu-trigger-indicator-empty {
+        visibility: hidden;
+      }
+
       .select-menu-trigger-chevron {
         display: block;
         flex-shrink: 0;
@@ -306,7 +416,7 @@ watch(
     }
 
     .select-menu-trigger[aria-expanded="true"] .select-menu-trigger-chevron {
-      transform: rotate(180deg);
+      transform: scaleY(-1);
     }
 
     .select-menu-popover {
@@ -318,6 +428,7 @@ watch(
       background-color: var(--select-menu-popover-surface, var(--theme-input-surface));
       border-radius: var(--select-menu-popover-border-radius, 0.5rem);
       min-width: var(--select-menu-popover-min-width, 18rem);
+      max-inline-size: var(--select-menu-popover-max-width, calc(100vw - 3.2rem));
       max-height: var(--select-menu-popover-max-height, 32rem);
       overflow: auto;
       box-shadow: var(--select-menu-popover-shadow, 0 0.4rem 1.6rem rgb(0 0 0 / 12%));
@@ -326,7 +437,7 @@ watch(
       top: calc(anchor(bottom) + var(--select-menu-block-distance, 0.4rem));
       left: anchor(left);
       right: auto;
-      position-try-fallbacks: flip-block;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
 
       opacity: 0;
       display: none;
@@ -455,12 +566,24 @@ watch(
             height: var(--select-menu-item-icon-size, 1.8rem);
           }
 
+          .select-menu-item-dot {
+            grid-column: 2;
+            justify-self: center;
+            width: var(--select-menu-item-dot-size, 0.8rem);
+            height: var(--select-menu-item-dot-size, 0.8rem);
+            border-radius: 50%;
+            background-color: var(--_dot-color);
+          }
+
           .select-menu-item-label {
             grid-column: 3;
             grid-row: 1;
-            white-space: nowrap;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
             overflow: hidden;
-            text-overflow: ellipsis;
+            overflow-wrap: anywhere;
+            -webkit-line-clamp: var(--select-menu-item-label-line-clamp, none);
+            line-clamp: var(--select-menu-item-label-line-clamp, none);
           }
         }
       }