srcdev-nuxt-components 9.5.4 → 9.5.6

package/app/components/02.molecules/navigation/deep-expanding-menu/DeepExpandingMenu.vue

@@ -1,16 +1,32 @@
 <template>
-  <component :is="tag" class="deep-expanding-menu" :class="[elementClasses]">
+  <component :is="tag" ref="rootRef" class="deep-expanding-menu" :class="[elementClasses]">
     <div class="inner">
       <template v-for="(link, key) in navLinks" :key="key">
         <NuxtLink v-if="link.path" :to="link.path" class="navigation-link">{{ link.name }}</NuxtLink>
 
         <div v-else class="navigation-group" :style="`--_anchor-name: --anchor-${uid}-${key};`">
-          <button :popovertarget="`popovertarget-${uid}-${key}`" class="navigation-group-toggle">
+          <button
+            :ref="(el) => setElement(triggerEls, key, el)"
+            :popovertarget="`popovertarget-${uid}-${key}`"
+            class="navigation-group-toggle"
+            :aria-expanded="isOpen && activeKey === key"
+            @click="handleGroupClick(key)"
+          >
             <span>{{ link.name }}</span>
             <Icon name="bi:caret-down-fill" class="icon" />
           </button>
 
-          <div :id="`popovertarget-${uid}-${key}`" class="navigation-group-panel" popover role="menu">
+          <div
+            :id="`popovertarget-${uid}-${key}`"
+            :ref="(el) => setElement(panelEls, key, el)"
+            class="navigation-group-panel"
+            :class="{ 'deep-expanding-menu-panel-open': usesFallbackPopover && isOpen && activeKey === key }"
+            :style="activeKey === key ? positionStyle : undefined"
+            :data-placement="activeKey === key ? popoverPlacement : undefined"
+            popover
+            @beforetoggle="handlePanelBeforeToggle(key, $event)"
+            @toggle="handlePanelToggle(key, $event)"
+          >
             <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
             <ul class="navigation-group-list">
               <li v-for="childLink in link.childLinks" :key="childLink.name" class="navigation-group-item">
@@ -25,6 +41,7 @@
 </template>
 
 <script setup lang="ts">
+import type { ComponentPublicInstance } from "vue";
 import type { ResponsiveHeaderNavItem } from "~/types/components";
 
 interface Props {
@@ -44,6 +61,54 @@ const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.s
 // Scopes anchor-name/popovertarget ids so multiple instances on one page don't collide.
 const uid = useId();
 
+// One panel is open at a time, so a single popover controller follows the active group.
+const rootRef = ref<HTMLElement | null>(null);
+const activeKey = ref<number | null>(null);
+const triggerEls = new Map<number, HTMLElement>();
+const panelEls = new Map<number, HTMLElement>();
+
+const setElement = (map: Map<number, HTMLElement>, key: number, el: Element | ComponentPublicInstance | null) => {
+  if (el instanceof HTMLElement) map.set(key, el);
+  else map.delete(key);
+};
+
+const triggerRef = computed(() => (activeKey.value === null ? null : (triggerEls.get(activeKey.value) ?? null)));
+const popoverRef = computed(() => (activeKey.value === null ? null : (panelEls.get(activeKey.value) ?? null)));
+
+const {
+  isOpen,
+  usesFallbackPopover,
+  positionStyle,
+  popoverPlacement,
+  show,
+  hide,
+  handleBeforeToggle,
+  handleToggle,
+} = useAnchoredPopover({ rootRef, triggerRef, popoverRef });
+
+const handleGroupClick = (key: number) => {
+  if (!usesFallbackPopover.value) return;
+  const wasActive = isOpen.value && activeKey.value === key;
+  hide();
+  if (wasActive) return;
+  activeKey.value = key;
+  show();
+};
+
+const handlePanelBeforeToggle = (key: number, event: Event) => {
+  if ((event as ToggleEvent).newState !== "open") return;
+  activeKey.value = key;
+  handleBeforeToggle(event);
+};
+
+// Opening one auto popover closes the other, and those toggle events can arrive in either order.
+const handlePanelToggle = (key: number, event: Event) => {
+  const opening = (event as ToggleEvent).newState === "open";
+  if (opening) activeKey.value = key;
+  else if (activeKey.value !== key) return;
+  handleToggle(event);
+};
+
 watch(
   () => props.styleClassPassthrough,
   () => {
@@ -55,18 +120,6 @@ watch(
 <style lang="css">
 @layer components {
   @layer deep-expanding-menu-setup {
-    @position-try --anchor-left {
-      inset: auto;
-      top: calc(anchor(bottom) + 1rem);
-      left: calc(anchor(left) + 1rem);
-    }
-
-    @position-try-fallbacks --anchor-right {
-      inset: auto;
-      top: calc(anchor(bottom) + 1rem);
-      right: calc(anchor(right) + 1rem);
-    }
-
     .deep-expanding-menu {
       container-type: inline-size;
       display: grid;
@@ -152,6 +205,24 @@ watch(
               }
             }
 
+            /* Kept apart from :popover-open, which would invalidate a shared selector list where unsupported. */
+            &.deep-expanding-menu-panel-open {
+              display: block;
+              opacity: 1;
+            }
+
+            @supports not (anchor-name: --a) {
+              position: fixed;
+              top: calc(var(--_anchor-bottom, 0px) + 1rem);
+              left: var(--_anchor-left, 0px);
+              z-index: var(--deep-expanding-menu-panel-z-index, 999999);
+
+              &[data-placement="top"] {
+                top: auto;
+                bottom: calc(var(--_anchor-top-inverse, 0px) + 1rem);
+              }
+            }
+
             h4 {
               color: var(--deep-expanding-menu-panel-heading-colour, var(--slate-10));
             }
@@ -186,7 +257,7 @@ watch(
             }
           }
 
-          &:has(.navigation-group-panel:popover-open) {
+          &:has(> .navigation-group-toggle[aria-expanded="true"]) {
             --_icon-transform: scaleY(-1);
           }
         }

package/app/components/02.molecules/navigation/deep-expanding-menu/tests/DeepExpandingMenu.spec.ts

@@ -1,5 +1,6 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { nextTick } from "vue";
 import DeepExpandingMenu from "../DeepExpandingMenu.vue";
 import type { ResponsiveHeaderNavItem } from "~/types/components";
 
@@ -89,4 +90,85 @@ describe("DeepExpandingMenu", () => {
     expect(wrapper.classes()).not.toContain("initial-class");
     expect(wrapper.classes()).toContain("updated-class");
   });
+
+  it("doesn't give the link panels a menu role", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find(".navigation-group-panel").attributes("role")).toBeUndefined();
+  });
+
+  describe("open state", () => {
+    const twoGroups: ResponsiveHeaderNavItem[] = [
+      { name: "Services", childLinksTitle: "Our services", childLinks: [{ name: "Haircuts", path: "/haircuts" }] },
+      { name: "About", childLinksTitle: "About us", childLinks: [{ name: "Team", path: "/team" }] },
+    ];
+
+    const toggleEvent = (newState: "open" | "closed") => Object.assign(new Event("toggle"), { newState });
+
+    afterEach(() => {
+      delete (HTMLElement.prototype as unknown as Record<string, unknown>)["showPopover"];
+      delete (HTMLElement.prototype as unknown as Record<string, unknown>)["hidePopover"];
+    });
+
+    describe("with the Popover API", () => {
+      beforeEach(() => {
+        Object.defineProperty(HTMLElement.prototype, "showPopover", { value: vi.fn(), writable: true, configurable: true });
+        Object.defineProperty(HTMLElement.prototype, "hidePopover", { value: vi.fn(), writable: true, configurable: true });
+      });
+
+      it("tracks the open group from toggle events, whichever order they arrive in", async () => {
+        const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: twoGroups } });
+        const [first, second] = wrapper.findAll(".navigation-group-panel");
+        const toggles = wrapper.findAll(".navigation-group-toggle");
+
+        first!.element.dispatchEvent(toggleEvent("open"));
+        await nextTick();
+        expect(toggles[0]!.attributes("aria-expanded")).toBe("true");
+
+        second!.element.dispatchEvent(toggleEvent("open"));
+        first!.element.dispatchEvent(toggleEvent("closed"));
+        await nextTick();
+        expect(toggles[0]!.attributes("aria-expanded")).toBe("false");
+        expect(toggles[1]!.attributes("aria-expanded")).toBe("true");
+
+        second!.element.dispatchEvent(toggleEvent("closed"));
+        await nextTick();
+        expect(toggles[1]!.attributes("aria-expanded")).toBe("false");
+      });
+    });
+
+    describe("without the Popover API", () => {
+      beforeEach(() => {
+        Object.defineProperty(HTMLElement.prototype, "showPopover", { value: undefined, writable: true, configurable: true });
+      });
+
+      it("opens, switches and closes groups from their toggles", async () => {
+        const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: twoGroups } });
+        const toggles = wrapper.findAll(".navigation-group-toggle");
+        const panels = wrapper.findAll(".navigation-group-panel");
+
+        await toggles[0]!.trigger("click");
+        expect(panels[0]!.classes()).toContain("deep-expanding-menu-panel-open");
+        expect(toggles[0]!.attributes("aria-expanded")).toBe("true");
+
+        await toggles[1]!.trigger("click");
+        expect(panels[0]!.classes()).not.toContain("deep-expanding-menu-panel-open");
+        expect(panels[1]!.classes()).toContain("deep-expanding-menu-panel-open");
+
+        await toggles[1]!.trigger("click");
+        expect(panels[1]!.classes()).not.toContain("deep-expanding-menu-panel-open");
+        expect(toggles[1]!.attributes("aria-expanded")).toBe("false");
+      });
+
+      it("closes the open group on Escape", async () => {
+        const wrapper = await mountSuspended(DeepExpandingMenu, { props: { navLinks: twoGroups }, attachTo: document.body });
+        await wrapper.findAll(".navigation-group-toggle")[0]!.trigger("click");
+        await nextTick();
+
+        document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+        await nextTick();
+        expect(wrapper.find(".deep-expanding-menu-panel-open").exists()).toBe(false);
+        wrapper.unmount();
+      });
+    });
+  });
 });

package/app/components/02.molecules/navigation/deep-expanding-menu/tests/__snapshots__/DeepExpandingMenu.spec.ts.snap

@@ -3,8 +3,8 @@
 exports[`DeepExpandingMenu > renders correct HTML structure 1`] = `
 "<nav class="deep-expanding-menu">
   <div class="inner"><a href="/" class="navigation-link">Home</a>
-    <div class="navigation-group" style="--_anchor-name: --anchor-v-0-0-1;"><button popovertarget="popovertarget-v-0-0-1" class="navigation-group-toggle"><span>Services</span><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></button>
-      <div id="popovertarget-v-0-0-1" class="navigation-group-panel" popover="" role="menu">
+    <div class="navigation-group" style="--_anchor-name: --anchor-v-0-0-1;"><button popovertarget="popovertarget-v-0-0-1" class="navigation-group-toggle" aria-expanded="false"><span>Services</span><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></button>
+      <div id="popovertarget-v-0-0-1" class="navigation-group-panel" popover="">
         <h4 class="page-heading-4 mb-6">Our services</h4>
         <ul class="navigation-group-list">
           <li class="navigation-group-item"><a href="/services/haircuts" class="navigation-group-link">Haircuts</a></li>

package/app/components/02.molecules/navigation/site-navigation/SiteNavigation.vue

@@ -531,7 +531,7 @@ watch(
         font-weight: var(--_link-weight);
         letter-spacing: var(--_link-tracking);
         text-decoration: none;
-        text-wrap: nowrap;
+        white-space: nowrap;
         padding-block: 0.8rem;
         padding-inline: 0.4rem;
         position: relative;

package/app/components/02.molecules/navigation/tab-navigation/TabNavigation.vue

@@ -278,7 +278,7 @@ watch(
         font-weight: var(--_link-weight);
         letter-spacing: var(--_link-tracking);
         text-decoration: none;
-        text-wrap: nowrap;
+        white-space: nowrap;
         padding-block: 0.8rem;
         padding-inline: 0.4rem;
         position: relative;

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

@@ -37,6 +37,7 @@ global token so it matches the rest of the design system out of the box.
 | `--select-menu-popover-min-width` | `18rem` | Minimum popover width |
 | `--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 |
 
 ### Options
@@ -49,6 +50,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 |
@@ -60,7 +70,13 @@ 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. |
-| `:has(.select-menu-popover:popover-open)` | `.select-menu` root | Menu open (rotates the chevron). |
+| `.select-menu-trigger[aria-expanded="true"]` | trigger | Menu open (rotates the chevron). 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. |
+
+> Changed 2026-10-05: the chevron hook moved from `:has(.select-menu-popover:popover-open)` on the
+> root to the trigger's `aria-expanded`, so it also works without the Popover API.
 
 ---
 
@@ -177,11 +193,15 @@ story.
 
 ## Notes
 
-- **Popover API + CSS anchor positioning** — same mechanism as `ActionMenu`. Broadly supported
-  (Chrome 114+, Firefox 125+, Safari 17+). No polyfill is included.
+- **Popover API + CSS anchor positioning, with fallbacks** — same mechanism as `ActionMenu`, via the
+  shared `useAnchoredPopover` composable. Without anchor positioning (e.g. Safari 17–18), the
+  popover is placed with `position: fixed` from the trigger's measured position, re-measured on
+  scroll and resize. Without the Popover API (Safari 16 and older), the menu also opens and
+  closes in JS, with outside-click and Escape dismissal. In that mode it isn't in the top layer, so
+  `--select-menu-popover-z-index` matters, and an ancestor with `transform`, `filter` or
+  `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 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`.
-
+- **Chevron rotation** 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

@@ -1,5 +1,10 @@
 <template>
-  <div class="select-menu" :class="[inputVariant, elementClasses]" :style="`--_anchor-name: ${anchorName}`">
+  <div
+    ref="rootRef"
+    class="select-menu"
+    :class="[inputVariant, elementClasses]"
+    :style="`--_anchor-name: ${anchorName}`"
+  >
     <button
       ref="triggerRef"
       :popovertarget="menuId"
@@ -9,6 +14,7 @@
       :aria-label="label"
       aria-haspopup="listbox"
       :aria-expanded="isOpen"
+      @click="handleTriggerClick"
     >
       <Icon
         v-if="showIcon && !multiple && selectedOption?.icon"
@@ -30,6 +36,10 @@
       ref="popoverRef"
       popover
       class="select-menu-popover"
+      :class="{ 'select-menu-popover-open': usesFallbackPopover && isOpen }"
+      :style="positionStyle"
+      :data-placement="popoverPlacement"
+      @beforetoggle="handleBeforeToggle"
       @toggle="handleToggle"
       @keydown="handleKeydown"
     >
@@ -41,6 +51,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">
@@ -102,9 +113,9 @@ const id = useId();
 const menuId = `select-menu-${id}`;
 const anchorName = `--select-menu-anchor-${id}`;
 
+const rootRef = ref<HTMLDivElement | null>(null);
 const triggerRef = ref<HTMLButtonElement | null>(null);
 const popoverRef = ref<HTMLDivElement | null>(null);
-const isOpen = ref(false);
 
 const selectedValues = computed(() => (props.multiple && Array.isArray(modelValue.value) ? modelValue.value : []));
 const selectedOption = computed(() =>
@@ -136,6 +147,23 @@ const isSelected = (option: SelectMenuOption): boolean =>
 const getMenuItems = (): HTMLElement[] =>
   Array.from(popoverRef.value?.querySelectorAll<HTMLElement>('[role="option"]') ?? []);
 
+const focusInitialItem = () => {
+  const items = getMenuItems();
+  const selectedIndex = items.findIndex((el) => el.getAttribute("aria-selected") === "true");
+  items[selectedIndex === -1 ? 0 : selectedIndex]?.focus();
+};
+
+const {
+  isOpen,
+  usesFallbackPopover,
+  positionStyle,
+  popoverPlacement,
+  hide,
+  handleTriggerClick,
+  handleBeforeToggle,
+  handleToggle,
+} = useAnchoredPopover({ rootRef, triggerRef, popoverRef, onOpen: focusInitialItem });
+
 const selectOption = (option: SelectMenuOption) => {
   if (props.multiple) {
     const next = selectedValues.value.includes(option.value)
@@ -145,20 +173,10 @@ const selectOption = (option: SelectMenuOption) => {
     return;
   }
   modelValue.value = option.value;
-  popoverRef.value?.hidePopover();
+  hide();
   triggerRef.value?.focus();
 };
 
-const handleToggle = (event: Event) => {
-  const toggleEvent = event as ToggleEvent;
-  isOpen.value = toggleEvent.newState === "open";
-  if (isOpen.value) {
-    const items = getMenuItems();
-    const selectedIndex = items.findIndex((el) => el.getAttribute("aria-selected") === "true");
-    items[selectedIndex === -1 ? 0 : selectedIndex]?.focus();
-  }
-};
-
 /**
  * Keyboard navigation following the WAI-ARIA listbox pattern.
  *
@@ -167,7 +185,7 @@ const handleToggle = (event: Event) => {
  * Enter / Space        — select the focused option. Closes the menu in single-select mode;
  *                        toggles the checkbox and keeps the menu open in multi-select mode.
  * Tab                  — close the menu; let the browser Tab naturally.
- * Escape               — handled natively by the Popover API.
+ * Escape               — native light dismiss, or the fallback listener without the Popover API.
  */
 const handleKeydown = (event: KeyboardEvent) => {
   const items = getMenuItems();
@@ -200,7 +218,7 @@ const handleKeydown = (event: KeyboardEvent) => {
       break;
     }
     case "Tab":
-      popoverRef.value?.hidePopover();
+      hide();
       break;
   }
 };
@@ -287,7 +305,7 @@ watch(
       border-radius: 0;
     }
 
-    &:has(.select-menu-popover:popover-open) .select-menu-trigger-chevron {
+    .select-menu-trigger[aria-expanded="true"] .select-menu-trigger-chevron {
       transform: rotate(180deg);
     }
 
@@ -328,6 +346,24 @@ watch(
         }
       }
 
+      /* Kept apart from :popover-open, which would invalidate a shared selector list where unsupported. */
+      &.select-menu-popover-open {
+        display: block;
+        opacity: 1;
+      }
+
+      @supports not (anchor-name: --a) {
+        position: fixed;
+        top: calc(var(--_anchor-bottom, 0px) + var(--select-menu-block-distance, 0.4rem));
+        left: var(--_anchor-left, 0px);
+        z-index: var(--select-menu-popover-z-index, 999999);
+
+        &[data-placement="top"] {
+          top: auto;
+          bottom: calc(var(--_anchor-top-inverse, 0px) + var(--select-menu-block-distance, 0.4rem));
+        }
+      }
+
       .select-menu-list {
         display: grid;
         grid-template-columns: auto auto 1fr;
@@ -343,15 +379,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 +457,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/SelectMenu.spec.ts

@@ -482,4 +482,40 @@ describe("SelectMenu", () => {
       expect(wrapper.classes()).toContain("select-menu");
     });
   });
+
+  // -------------------------
+  // Without the Popover API (Safari 16 and older)
+  // -------------------------
+  describe("Without the Popover API", () => {
+    beforeEach(() => {
+      Object.defineProperty(HTMLElement.prototype, "showPopover", { value: undefined, writable: true, configurable: true });
+    });
+
+    it("opens from the trigger with the fallback open class and aria-expanded", async () => {
+      wrapper = await createWrapper();
+      const popover = wrapper.find(".select-menu-popover");
+      expect(popover.classes()).not.toContain("select-menu-popover-open");
+
+      await wrapper.find(".select-menu-trigger").trigger("click");
+      expect(popover.classes()).toContain("select-menu-popover-open");
+      expect(wrapper.find(".select-menu-trigger").attributes("aria-expanded")).toBe("true");
+    });
+
+    it("closes when a single-select option is chosen", async () => {
+      wrapper = await createWrapper();
+      await wrapper.find(".select-menu-trigger").trigger("click");
+      await wrapper.findAll('[role="option"]')[1]!.trigger("click");
+
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual(["fr"]);
+      expect(wrapper.find(".select-menu-popover").classes()).not.toContain("select-menu-popover-open");
+    });
+
+    it("stays open while toggling options in multiple mode", async () => {
+      wrapper = await createWrapper({ multiple: true, modelValue: [] });
+      await wrapper.find(".select-menu-trigger").trigger("click");
+      await wrapper.findAll('[role="option"]')[1]!.trigger("click");
+
+      expect(wrapper.find(".select-menu-popover").classes()).toContain("select-menu-popover-open");
+    });
+  });
 });

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/03.organisms/responsive-header/NavigationItems.vue

@@ -263,7 +263,7 @@ watch(
 
                 .label-wrapper {
                   .overflow-navigation-text {
-                    text-wrap: nowrap;
+                    white-space: nowrap;
                   }
                 }
                 .icon-wrapper {
@@ -326,7 +326,7 @@ watch(
 
                 .label-wrapper {
                   .overflow-navigation-text {
-                    text-wrap: nowrap;
+                    white-space: nowrap;
                   }
                 }
                 .icon-wrapper {