srcdev-nuxt-components 9.5.5 → 9.5.7

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/opening-hours/CONSUMER-STYLING.md

@@ -25,6 +25,7 @@ deliberately matches `PriceList`.
 | `--opening-hours-day-font-size` | `1.4rem` | Day name / exception label size |
 | `--opening-hours-day-colour` | `inherit` | Day name / exception label colour |
 | `--opening-hours-hours-font-size` | `1.4rem` | Times and status text size |
+| `--opening-hours-hours-max-inline-size` | `60%` | Most of the row the hours column can take. Longer content (long session labels, notes, status labels) wraps inside it |
 | `--opening-hours-closed-colour` | `inherit` | Hours colour on closed rows |
 
 ### Sessions and notes
@@ -36,6 +37,9 @@ deliberately matches `PriceList`.
 | `--opening-hours-session-label-colour` | `inherit` | Session label colour |
 | `--opening-hours-note-font-size` | `1.2rem` | Note size |
 | `--opening-hours-note-colour` | `inherit` | Note colour |
+| `--opening-hours-note-line-clamp` | `none` | Cap notes at this many lines, with an ellipsis on the last. `1` is single-line ellipsis, `none` shows everything |
+
+Each session's times stay on one line; a long session label wraps before them.
 
 ### Today
 
@@ -54,8 +58,13 @@ deliberately matches `PriceList`.
 | `--opening-hours-exceptions-heading-margin-block-end` | `1.2rem` | Space below the exceptions heading |
 | `--opening-hours-date-font-size` | `1.2rem` | Exception date size |
 | `--opening-hours-date-colour` | `inherit` | Exception date colour |
+| `--opening-hours-exception-label-line-clamp` | `none` | Cap exception labels at this many lines. `1` is single-line ellipsis, `none` shows everything |
+
+There are no private `--_` tokens. Long unbroken text anywhere in the component wraps rather than overflowing.
 
-There are no private `--_` tokens.
+> **Changed 2026-10-05**: rows are a grid instead of a flex row, so the day column can shrink and
+> the hours column is capped by `--opening-hours-hours-max-inline-size`. `.opening-hours__session`
+> is no longer `nowrap`; the new `.opening-hours__session-times` wrapper is.
 
 ---
 
@@ -77,6 +86,7 @@ Inner element classes, safe to target:
 | `.opening-hours__hours` | `<dd>` |
 | `.opening-hours__session` | One opening session |
 | `.opening-hours__session-label` | Session label ("Lunch") |
+| `.opening-hours__session-times` | The opens–closes pair, kept on one line |
 | `.opening-hours__status` | "Closed" / "Open 24 hours" / "By appointment only" |
 | `.opening-hours__note` | Per-day or per-exception note |
 | `.opening-hours__exceptions` | Exceptions wrapper |

package/app/components/02.molecules/opening-hours/OpeningHours.vue

@@ -21,10 +21,12 @@
           <template v-if="row.status === 'open'">
             <span v-for="(session, index) in row.sessions" :key="index" class="opening-hours__session">
               <span v-if="session.label" class="opening-hours__session-label">{{ session.label }}</span>
-              <time :datetime="session.opens">{{ formatTime(session.opens) }}</time>
-              <span aria-hidden="true"> – </span>
-              <span class="sr-only"> {{ toLabel }} </span>
-              <time :datetime="session.closes">{{ formatTime(session.closes) }}</time>
+              <span class="opening-hours__session-times">
+                <time :datetime="session.opens">{{ formatTime(session.opens) }}</time>
+                <span aria-hidden="true"> – </span>
+                <span class="sr-only"> {{ toLabel }} </span>
+                <time :datetime="session.closes">{{ formatTime(session.closes) }}</time>
+              </span>
             </span>
           </template>
           <span v-else class="opening-hours__status">{{ statusLabel(row.status) }}</span>
@@ -61,10 +63,12 @@
             <template v-if="row.status === 'open'">
               <span v-for="(session, index) in row.sessions" :key="index" class="opening-hours__session">
                 <span v-if="session.label" class="opening-hours__session-label">{{ session.label }}</span>
-                <time :datetime="session.opens">{{ formatTime(session.opens) }}</time>
-                <span aria-hidden="true"> – </span>
-                <span class="sr-only"> {{ toLabel }} </span>
-                <time :datetime="session.closes">{{ formatTime(session.closes) }}</time>
+                <span class="opening-hours__session-times">
+                  <time :datetime="session.opens">{{ formatTime(session.opens) }}</time>
+                  <span aria-hidden="true"> – </span>
+                  <span class="sr-only"> {{ toLabel }} </span>
+                  <time :datetime="session.closes">{{ formatTime(session.closes) }}</time>
+                </span>
               </span>
             </template>
             <span v-else class="opening-hours__status">{{ statusLabel(row.status) }}</span>
@@ -138,29 +142,35 @@ watch(
 const todayIso = ref<string | null>(null);
 
 onMounted(() => {
-  todayIso.value = new Intl.DateTimeFormat("en-CA", {
-    timeZone: props.timeZone,
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-  }).format(new Date());
+  const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "2-digit", day: "2-digit" };
+  let formatter: Intl.DateTimeFormat;
+  try {
+    formatter = new Intl.DateTimeFormat("en-CA", { ...options, timeZone: props.timeZone });
+  } catch {
+    formatter = new Intl.DateTimeFormat("en-CA", options);
+  }
+  todayIso.value = formatter.format(new Date());
 });
 
-const parseIsoDate = (iso: string) => {
-  const [y = 0, m = 1, d = 1] = iso.split("-").map(Number);
-  return new Date(Date.UTC(y, m - 1, d));
-};
+const todayWeekday = computed<OpeningWeekday | null>(() => {
+  const today = todayIso.value ? parseOpeningDate(todayIso.value) : null;
+  return today ? (((today.getUTCDay() + 6) % 7) as OpeningWeekday) : null;
+});
 
-const todayWeekday = computed<OpeningWeekday | null>(() =>
-  todayIso.value ? (((parseIsoDate(todayIso.value).getUTCDay() + 6) % 7) as OpeningWeekday) : null
-);
+const safeLocale = computed(() => {
+  try {
+    return Intl.getCanonicalLocales(props.locale)[0] ?? "en-GB";
+  } catch {
+    return "en-GB";
+  }
+});
 
 const dayFormatter = computed(
-  () => new Intl.DateTimeFormat(props.locale, { weekday: props.dayFormat, timeZone: "UTC" })
+  () => new Intl.DateTimeFormat(safeLocale.value, { weekday: props.dayFormat, timeZone: "UTC" })
 );
 const timeFormatter = computed(
   () =>
-    new Intl.DateTimeFormat(props.locale, {
+    new Intl.DateTimeFormat(safeLocale.value, {
       hour: props.hour12 ? "numeric" : "2-digit",
       minute: "2-digit",
       hour12: props.hour12,
@@ -168,15 +178,20 @@ const timeFormatter = computed(
     })
 );
 const dateFormatter = computed(
-  () => new Intl.DateTimeFormat(props.locale, { day: "numeric", month: "long", timeZone: "UTC" })
+  () => new Intl.DateTimeFormat(safeLocale.value, { day: "numeric", month: "long", timeZone: "UTC" })
 );
 
 // 1 Jan 2024 was a Monday
 const dayName = (day: OpeningWeekday) => dayFormatter.value.format(new Date(Date.UTC(2024, 0, 1 + day)));
 
 const formatTime = (time: string) => {
-  const [h = 0, m = 0] = time.split(":").map(Number);
-  return timeFormatter.value.format(new Date(Date.UTC(2024, 0, 1, h, m)));
+  const parsed = parseOpeningTime(time);
+  return parsed ? timeFormatter.value.format(new Date(Date.UTC(2024, 0, 1, parsed.hours, parsed.minutes))) : time;
+};
+
+const formatDate = (iso: string) => {
+  const date = parseOpeningDate(iso);
+  return date ? dateFormatter.value.format(date) : iso;
 };
 
 const statusLabel = (status: OpeningStatus) => {
@@ -225,21 +240,22 @@ const weeklyRows = computed(() => {
 
 const exceptionRows = computed(() =>
   props.exceptions
-    .filter((exception) => !(props.hidePastExceptions && todayIso.value && (exception.to ?? exception.from) < todayIso.value))
-    .map((exception) => {
-      const to = exception.to && exception.to !== exception.from ? exception.to : null;
+    .filter((exception) => {
+      const last = exception.to && exception.to > exception.from ? exception.to : exception.from;
+      return !(props.hidePastExceptions && todayIso.value && last < todayIso.value);
+    })
+    .map((exception, index) => {
+      const [from, rawTo] =
+        exception.to && exception.to < exception.from ? [exception.to, exception.from] : [exception.from, exception.to];
+      const to = rawTo && rawTo !== from ? rawTo : null;
       return {
-        key: `${exception.from}-${to ?? ""}`,
+        key: `${index}-${from}-${to ?? ""}`,
         label: exception.label,
-        from: exception.from,
+        from,
         to,
-        start: dateFormatter.value.format(parseIsoDate(exception.from)),
-        end: to ? dateFormatter.value.format(parseIsoDate(to)) : null,
-        isToday:
-          props.highlightToday &&
-          todayIso.value !== null &&
-          exception.from <= todayIso.value &&
-          todayIso.value <= (to ?? exception.from),
+        start: formatDate(from),
+        end: to ? formatDate(to) : null,
+        isToday: props.highlightToday && todayIso.value !== null && from <= todayIso.value && todayIso.value <= (to ?? from),
         ...resolve(exception),
       };
     })
@@ -269,6 +285,7 @@ if (props.structuredData) {
     gap: var(--opening-hours-section-gap, 3.2rem);
 
     .opening-hours__exceptions-heading {
+      overflow-wrap: anywhere;
       font-size: var(--opening-hours-exceptions-heading-font-size, 1.6rem);
       font-weight: var(--opening-hours-exceptions-heading-font-weight, 600);
       margin: 0 0 var(--opening-hours-exceptions-heading-margin-block-end, 1.2rem);
@@ -279,10 +296,10 @@ if (props.structuredData) {
       padding: 0;
 
       .opening-hours__row {
-        display: flex;
-        justify-content: space-between;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) fit-content(var(--opening-hours-hours-max-inline-size, 60%));
         align-items: baseline;
-        gap: var(--opening-hours-row-gap, 1.2rem);
+        column-gap: var(--opening-hours-row-gap, 1.2rem);
         padding-block: var(--opening-hours-row-padding-block, 1.2rem);
         padding-inline: var(--opening-hours-row-padding-inline, 0);
         border-block-end: var(--opening-hours-divider-width, 1px) solid
@@ -308,12 +325,17 @@ if (props.structuredData) {
       }
 
       .opening-hours__days {
+        overflow-wrap: anywhere;
         font-size: var(--opening-hours-day-font-size, 1.4rem);
         color: var(--opening-hours-day-colour, inherit);
       }
 
       .opening-hours__exception-label {
-        display: block;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        -webkit-line-clamp: var(--opening-hours-exception-label-line-clamp, none);
+        line-clamp: var(--opening-hours-exception-label-line-clamp, none);
       }
 
       .opening-hours__date {
@@ -329,11 +351,12 @@ if (props.structuredData) {
         gap: var(--opening-hours-session-gap, 0.4rem);
         margin: 0;
         text-align: end;
+        overflow-wrap: anywhere;
         font-size: var(--opening-hours-hours-font-size, 1.4rem);
         font-variant-numeric: tabular-nums;
       }
 
-      .opening-hours__session {
+      .opening-hours__session-times {
         white-space: nowrap;
       }
 
@@ -343,6 +366,11 @@ if (props.structuredData) {
       }
 
       .opening-hours__note {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        -webkit-line-clamp: var(--opening-hours-note-line-clamp, none);
+        line-clamp: var(--opening-hours-note-line-clamp, none);
         font-size: var(--opening-hours-note-font-size, 1.2rem);
         color: var(--opening-hours-note-colour, inherit);
       }