srcdev-nuxt-components 9.5.5 → 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
@@ -69,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.
 
 ---
 
@@ -186,10 +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"
     >
@@ -103,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(() =>
@@ -137,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)
@@ -146,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.
  *
@@ -168,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();
@@ -201,7 +218,7 @@ const handleKeydown = (event: KeyboardEvent) => {
       break;
     }
     case "Tab":
-      popoverRef.value?.hidePopover();
+      hide();
       break;
   }
 };
@@ -288,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);
     }
 
@@ -329,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;

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/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 {

package/app/components/03.organisms/responsive-header/ResponsiveHeader.vue

@@ -782,7 +782,7 @@ watch(
           .main-navigation-link {
             display: flex;
             gap: 6px;
-            text-wrap-mode: nowrap;
+            white-space: nowrap;
             font-size: var(--responsive-header-link-font-size, inherit);
             color: var(--responsive-header-link-color, inherit);
             text-decoration: none;
@@ -821,7 +821,7 @@ watch(
             .has-toggle-icon {
               display: flex;
               gap: 6px;
-              text-wrap-mode: nowrap;
+              white-space: nowrap;
 
               /* Reserved for the same reason as .decorator-icon above — an
                  unsized chevron would widen the summary once its SVG loads. */
@@ -883,7 +883,7 @@ watch(
 
                   .main-navigation-sub-nav-link {
                     display: block;
-                    text-wrap-mode: nowrap;
+                    white-space: nowrap;
                     text-decoration: none;
                     color: var(--responsive-header-link-color, inherit);
                   }
@@ -994,7 +994,7 @@ watch(
           align-items: center;
           justify-content: center;
           padding-inline: 5px;
-          text-wrap: nowrap;
+          white-space: nowrap;
 
           aspect-ratio: 1;
           border-radius: 4px;