srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/02.molecules/navigation/site-navigation/stories/SiteNavigation.stories.ts

@@ -1,7 +1,7 @@
 import { ref, reactive, computed } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import SiteNavigationComponent from "../SiteNavigation.vue";
-import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+import type { NavItemData } from "~/types/components/nav-item.d";
 
 const meta: Meta<typeof SiteNavigationComponent> = {
   title: "Molecules/SiteNavigation",
@@ -12,11 +12,29 @@ const meta: Meta<typeof SiteNavigationComponent> = {
       options: ["left", "center", "right"],
       description: "Horizontal alignment of the nav list",
     },
+    ariaLabel: {
+      control: { type: "text" },
+      description: "aria-label on the nav landmark",
+      table: { category: "Accessibility" },
+    },
+    openMenuLabel: {
+      control: { type: "text" },
+      description: "Burger button label while the menu is closed",
+      table: { category: "Accessibility" },
+    },
+    closeMenuLabel: {
+      control: { type: "text" },
+      description: "Burger button label while the menu is open",
+      table: { category: "Accessibility" },
+    },
     navItemData: { table: { disable: true } },
     styleClassPassthrough: { table: { disable: true } },
   },
   args: {
     navAlign: "left",
+    ariaLabel: "Site navigation",
+    openMenuLabel: "Open navigation menu",
+    closeMenuLabel: "Close navigation menu",
   },
 };
 
@@ -137,6 +155,9 @@ const DefaultTemplate: StoryFn<typeof SiteNavigationComponent> = (args) => ({
         <SiteNavigationComponent
           :nav-item-data="navItemData"
           :nav-align="args.navAlign"
+          :aria-label="args.ariaLabel"
+          :open-menu-label="args.openMenuLabel"
+          :close-menu-label="args.closeMenuLabel"
         />
       </div>
 

package/app/components/02.molecules/navigation/site-navigation/tests/SiteNavigation.spec.ts

@@ -1,8 +1,8 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import { nextTick } from "vue";
+import { defineComponent, nextTick } from "vue";
 import SiteNavigation from "../SiteNavigation.vue";
-import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+import type { NavItemData } from "~/types/components/nav-item.d";
 
 // useResizeObserver (from @vueuse/core) requires ResizeObserver
 // Vitest 4: a mock's implementation must be a regular function (not an
@@ -233,9 +233,9 @@ describe("SiteNavigation", () => {
       isMenuOpen: boolean;
     }
 
-    async function mountCollapsed() {
+    async function mountCollapsed(extraProps: Record<string, unknown> = {}) {
       const wrapper = await mountSuspended(SiteNavigation, {
-        props: { navItemData: defaultNavItemData },
+        props: { navItemData: defaultNavItemData, ...extraProps },
       });
       const setup = (wrapper.vm as unknown as { $: { setupState: SiteNavSetup } }).$.setupState;
       setup.isCollapsed = true;
@@ -324,9 +324,44 @@ describe("SiteNavigation", () => {
       expect(wrapper.find(".site-nav-panel").attributes("inert")).toBeUndefined();
     });
 
-    it("panel has aria-controls pointing to site-nav-panel", async () => {
+    it("burger aria-controls points at the panel's own id", async () => {
       const { wrapper } = await mountCollapsed();
-      expect(wrapper.find(".site-nav-burger").attributes("aria-controls")).toBe("site-nav-panel");
+      const panelId = wrapper.find(".site-nav-panel").attributes("id");
+      expect(panelId).toMatch(/^site-nav-panel-/);
+      expect(wrapper.find(".site-nav-burger").attributes("aria-controls")).toBe(panelId);
+    });
+
+    it("gives two instances on the same page distinct panel ids", async () => {
+      const Host = defineComponent({
+        components: { SiteNavigation },
+        setup: () => ({ navItemData: defaultNavItemData }),
+        template: `<div><SiteNavigation :nav-item-data="navItemData" /><SiteNavigation :nav-item-data="navItemData" /></div>`,
+      });
+      const host = await mountSuspended(Host);
+      const navs = host.findAllComponents(SiteNavigation);
+      for (const nav of navs) {
+        (nav.vm as unknown as { $: { setupState: SiteNavSetup } }).$.setupState.isCollapsed = true;
+      }
+      await nextTick();
+      const ids = host.findAll(".site-nav-panel").map((p) => p.attributes("id"));
+      expect(ids).toHaveLength(2);
+      expect(ids[0]).not.toBe(ids[1]);
+    });
+
+    it("uses the default burger labels", async () => {
+      const { wrapper } = await mountCollapsed();
+      expect(wrapper.find(".site-nav-burger").text()).toContain("Open navigation menu");
+      await wrapper.find(".site-nav-burger").trigger("click");
+      await nextTick();
+      expect(wrapper.find(".site-nav-burger").text()).toContain("Close navigation menu");
+    });
+
+    it("uses openMenuLabel and closeMenuLabel when given", async () => {
+      const { wrapper } = await mountCollapsed({ openMenuLabel: "Ouvrir le menu", closeMenuLabel: "Fermer le menu" });
+      expect(wrapper.find(".site-nav-burger").text()).toContain("Ouvrir le menu");
+      await wrapper.find(".site-nav-burger").trigger("click");
+      await nextTick();
+      expect(wrapper.find(".site-nav-burger").text()).toContain("Fermer le menu");
     });
   });
 });

package/app/components/02.molecules/navigation/tab-navigation/CONSUMER-STYLING.md

@@ -60,7 +60,7 @@ instance) without touching the component itself.
 
 ---
 
-## Global theming — app-level CSS file
+## Global theming
 
 Create `assets/styles/setup/07.components/tab-navigation.css` in the consuming app and set tokens
 on `:root`. These values apply to every `TabNavigation` instance across the site.
@@ -79,7 +79,15 @@ on `:root`. These values apply to every `TabNavigation` instance across the site
 
 ---
 
-## Page-scoped overrides
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### Page or section
 
 Override tokens for a single page by scoping them under a page wrapper. No `:deep()` is required
 (component styles are unscoped).
@@ -95,9 +103,7 @@ Override tokens for a single page by scoping them under a page wrapper. No `:dee
 }
 ```
 
----
-
-## Per-instance overrides via inline style
+### One instance: inline style
 
 ```vue
 <TabNavigation
@@ -110,9 +116,7 @@ Override tokens for a single page by scoping them under a page wrapper. No `:dee
 />
 ```
 
----
-
-## Per-instance overrides via styleClassPassthrough
+### One instance: style-class-passthrough
 
 ```vue
 <TabNavigation :nav-item-data="navData" :style-class-passthrough="['brand-nav']" />
@@ -143,3 +147,4 @@ Override tokens for a single page by scoping them under a page wrapper. No `:dee
   the collapsed state.
 - The backdrop (`--tab-nav-backdrop-*`) appears behind the open panel and above page content at
   `z-index: 10`. It teleports to `<body>` so it is unaffected by parent stacking contexts.
+

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

@@ -50,7 +50,7 @@
       <li aria-hidden="true" role="none" class="nav-indicator-li"><div class="nav__active-indicator"></div></li>
     </ul>
 
-    <InputButtonCore
+    <InputButton
       v-if="showCollapsed"
       class="tab-nav-burger"
       :class="{ 'is-open': isMenuOpen }"
@@ -65,7 +65,7 @@
         <span class="burger-bar" aria-hidden="true"></span>
         <span class="burger-bar" aria-hidden="true"></span>
       </template>
-    </InputButtonCore>
+    </InputButton>
 
     <Teleport to="body">
       <div
@@ -190,18 +190,14 @@ watch(
 <style lang="css">
 @layer components {
   .tab-nav-backdrop {
-    --_backdrop-bg: var(--tab-nav-backdrop-bg, oklch(0% 0 0 / 55%));
-    --_backdrop-blur: var(--tab-nav-backdrop-blur, 3px);
-    --_backdrop-duration: var(--tab-nav-backdrop-duration, 350ms);
-
     position: fixed;
     inset: 0;
     z-index: 10;
-    background: var(--_backdrop-bg);
-    backdrop-filter: blur(var(--_backdrop-blur));
+    background: var(--tab-nav-backdrop-bg, oklch(0% 0 0 / 55%));
+    backdrop-filter: blur(var(--tab-nav-backdrop-blur, 3px));
     opacity: 0;
     pointer-events: none;
-    transition: opacity var(--_backdrop-duration) ease;
+    transition: opacity var(--tab-nav-backdrop-duration, 350ms) ease;
 
     &.is-open {
       opacity: 1;
@@ -212,37 +208,23 @@ watch(
   .tab-navigation {
     /* ─── Public token API ────────────────────────────────────────────── */
 
-    /* Decorators — horizontal nav */
-    --_decorator-hovered-bg: var(--tab-nav-decorator-hovered-bg, transparent);
-    --_decorator-indicator-color: var(--tab-nav-decorator-indicator-color, var(--slate-01, currentColor));
-
     /* Horizontal nav */
     --_link-color: var(--tab-nav-link-color, var(--slate-01, currentColor));
-    --_link-hover-color: var(--tab-nav-link-hover-color, var(--slate-04, var(--_link-color)));
-    --_link-active-color: var(--tab-nav-link-active-color, var(--slate-01, var(--_link-color)));
     --_link-size: var(--tab-nav-link-size, 1.6rem);
     --_link-tracking: var(--tab-nav-link-tracking, 0.06em);
     --_link-weight: var(--tab-nav-link-weight, 400);
-    --_nav-gap: var(--tab-nav-gap, 2.2rem);
     --_nav-transition: var(--tab-nav-transition, 250ms ease);
 
     /* Panel */
-    --_panel-bg: var(--tab-nav-panel-bg, var(--page-bg, #1a1614));
     --_panel-border-color: var(
       --tab-nav-panel-border-color,
       color-mix(in oklch, var(--slate-01, #c0847a) 35%, transparent)
     );
-    --_panel-item-border: var(--tab-nav-panel-item-border, color-mix(in oklch, var(--slate-01, white) 8%, transparent));
     --_panel-link-color: var(--tab-nav-panel-link-color, var(--slate-01, currentColor));
-    --_panel-link-hover-color: var(--tab-nav-panel-link-hover-color, var(--slate-04, var(--_panel-link-color)));
-    --_panel-link-active-color: var(--tab-nav-panel-link-active-color, var(--slate-01, var(--_panel-link-color)));
-    --_panel-padding-block: var(--tab-nav-panel-padding-block, 1.4rem);
-    --_panel-padding-inline: var(--tab-nav-panel-padding-inline, 1.5rem);
     --_panel-slide-duration: var(--tab-nav-panel-slide-duration, 350ms);
     --_panel-slide-easing: var(--tab-nav-panel-slide-easing, cubic-bezier(0.4, 0, 0.2, 1));
 
     /* Burger */
-    --_burger-bar-width: var(--tab-nav-burger-width, 22px);
     --_burger-bar-height: var(--tab-nav-burger-height, 1.5px);
     --_burger-bar-gap: var(--tab-nav-burger-gap, 5px);
     --_burger-color: var(--tab-nav-burger-color, var(--slate-01, currentColor));
@@ -266,7 +248,7 @@ watch(
       margin: 0;
       padding: 0;
       display: flex;
-      gap: var(--_nav-gap);
+      gap: var(--tab-nav-gap, 2.2rem);
       align-items: center;
       position: relative;
 
@@ -305,12 +287,12 @@ watch(
 
         &:hover,
         &:focus-visible {
-          color: var(--_link-hover-color);
+          color: var(--tab-nav-link-hover-color, var(--slate-04, var(--_link-color)));
           outline: none;
         }
 
         &.router-link-exact-active {
-          color: var(--_link-active-color);
+          color: var(--tab-nav-link-active-color, var(--slate-01, var(--_link-color)));
         }
       }
     }
@@ -329,13 +311,13 @@ watch(
       justify-content: end;
     }
 
-    /* ─── Burger button (InputButtonCore) ──────────────────────────── */
+    /* ─── Burger button (InputButton) ──────────────────────────── */
 
-    .tab-nav-burger.input-button-core.icon-only {
+    .tab-nav-burger.input-button.icon-only {
       margin-inline-start: auto;
       color: var(--_burger-color);
 
-      /* Strip all InputButtonCore visual styling */
+      /* Strip all InputButton visual styling */
       background: none;
       border: none;
       outline: none;
@@ -364,7 +346,7 @@ watch(
 
     .burger-bar {
       display: block;
-      width: var(--_burger-bar-width);
+      width: var(--tab-nav-burger-width, 22px);
       height: var(--_burger-bar-height);
       background: currentColor;
       border-radius: 1px;
@@ -413,7 +395,7 @@ watch(
 
       .tab-nav-panel-inner {
         overflow: hidden;
-        background-color: var(--_panel-bg);
+        background-color: var(--tab-nav-panel-bg, var(--page-bg, #1a1614));
       }
 
       .tab-nav-panel-list {
@@ -422,7 +404,7 @@ watch(
         padding: 0;
 
         li {
-          border-block-end: 1px solid var(--_panel-item-border);
+          border-block-end: 1px solid var(--tab-nav-panel-item-border, color-mix(in oklch, var(--slate-01, white) 8%, transparent));
 
           &:last-child {
             border-block-end: none;
@@ -442,20 +424,20 @@ watch(
           font-weight: var(--_link-weight);
           letter-spacing: var(--_link-tracking);
           text-decoration: none;
-          padding-block: var(--_panel-padding-block);
-          padding-inline: var(--_panel-padding-inline);
+          padding-block: var(--tab-nav-panel-padding-block, 1.4rem);
+          padding-inline: var(--tab-nav-panel-padding-inline, 1.5rem);
           position: relative;
           z-index: 1;
           transition: color var(--_nav-transition);
 
           &:hover,
           &:focus-visible {
-            color: var(--_panel-link-hover-color);
+            color: var(--tab-nav-panel-link-hover-color, var(--slate-04, var(--_panel-link-color)));
             outline: none;
           }
 
           &.router-link-exact-active {
-            color: var(--_panel-link-active-color);
+            color: var(--tab-nav-panel-link-active-color, var(--slate-01, var(--_panel-link-color)));
           }
         }
       }

package/app/components/02.molecules/navigation/tab-navigation/stories/TabNavigation.stories.ts

@@ -1,7 +1,7 @@
 import { ref, reactive, computed } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import TabNavigationComponent from "../TabNavigation.vue";
-import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+import type { NavItemData } from "~/types/components/nav-item.d";
 
 const meta: Meta<typeof TabNavigationComponent> = {
   title: "Molecules/TabNavigation",

package/app/components/02.molecules/navigation/tab-navigation/tests/TabNavigation.spec.ts

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import { nextTick } from "vue";
 import TabNavigation from "../TabNavigation.vue";
-import type { NavItemData } from "~/types/components/navigation-horizontal.d";
+import type { NavItemData } from "~/types/components/nav-item.d";
 
 // useResizeObserver (from @vueuse/core) requires ResizeObserver
 // Vitest 4: a mock's implementation must be a regular function (not an

package/app/components/02.molecules/opening-hours/CONSUMER-STYLING.md

@@ -0,0 +1,134 @@
+# OpeningHours — Consumer Styling Guide
+
+`OpeningHours` renders a weekly opening-hours table as a `<dl>` of day/hours rows separated by
+dividers, plus an optional "special opening times" block for exception dates. The row look
+deliberately matches `PriceList`.
+
+## Public token API
+
+### Layout
+
+| Token | Default | Controls |
+|---|---|---|
+| `--opening-hours-section-gap` | `3.2rem` | Gap between the weekly table and the exceptions block |
+
+### Rows
+
+| Token | Default | Controls |
+|---|---|---|
+| `--opening-hours-row-gap` | `1.2rem` | Gap between the day and hours columns |
+| `--opening-hours-row-padding-block` | `1.2rem` | Vertical padding per row |
+| `--opening-hours-row-padding-inline` | `0` | Horizontal padding per row (useful with a today background) |
+| `--opening-hours-divider-width` | `1px` | Divider thickness |
+| `--opening-hours-divider-colour` | `currentColor` | Divider colour |
+| `--opening-hours-divider-opacity` | `0.15` | Divider opacity (0 to 1), mixed into the colour |
+| `--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-closed-colour` | `inherit` | Hours colour on closed rows |
+
+### Sessions and notes
+
+| Token | Default | Controls |
+|---|---|---|
+| `--opening-hours-session-gap` | `0.4rem` | Gap between stacked sessions (lunch/dinner) and the note |
+| `--opening-hours-session-label-gap` | `0.75ch` | Space after a session label |
+| `--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 |
+
+### Today
+
+| Token | Default | Controls |
+|---|---|---|
+| `--opening-hours-today-font-weight` | `600` | Weight of today's row |
+| `--opening-hours-today-colour` | `inherit` | Text colour of today's row |
+| `--opening-hours-today-background-colour` | `transparent` | Background of today's row |
+
+### Exceptions
+
+| Token | Default | Controls |
+|---|---|---|
+| `--opening-hours-exceptions-heading-font-size` | `1.6rem` | Exceptions heading size |
+| `--opening-hours-exceptions-heading-font-weight` | `600` | Exceptions heading weight |
+| `--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 |
+
+There are no private `--_` tokens.
+
+---
+
+## State hooks
+
+| Hook | Where | When |
+|---|---|---|
+| `data-status="open" \| "closed" \| "24-hours" \| "by-appointment"` | `.opening-hours__row` | Always |
+| `data-today` + `aria-current="date"` | `.opening-hours__row` | Row covers today (set after mount, see Notes) |
+
+Inner element classes, safe to target:
+
+| Class | Element |
+|---|---|
+| `.opening-hours` | Root |
+| `.opening-hours__list` | Each `<dl>` (weekly and exceptions) |
+| `.opening-hours__row` | One day, day range or exception |
+| `.opening-hours__days` | `<dt>` |
+| `.opening-hours__hours` | `<dd>` |
+| `.opening-hours__session` | One opening session |
+| `.opening-hours__session-label` | Session label ("Lunch") |
+| `.opening-hours__status` | "Closed" / "Open 24 hours" / "By appointment only" |
+| `.opening-hours__note` | Per-day or per-exception note |
+| `.opening-hours__exceptions` | Exceptions wrapper |
+| `.opening-hours__exceptions-heading` | Exceptions heading |
+| `.opening-hours__exception-label` | Exception name ("Christmas") |
+| `.opening-hours__date` | Exception date or date range |
+
+---
+
+## Global theming
+
+```css
+:where(html) {
+  --opening-hours-divider-colour: var(--theme-border);
+  --opening-hours-divider-opacity: 1;
+}
+```
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
+## Recipe: highlighted today row
+
+```css
+.contact-page {
+  --opening-hours-today-background-colour: var(--theme-surface);
+  --opening-hours-row-padding-inline: 1.2rem;
+}
+```
+
+Set the inline padding whenever you give today a background, or the text sits flush against the
+background's edge.
+
+---
+
+## Class passthrough
+
+`:style-class-passthrough` (string or string array) adds classes to the root `.opening-hours`
+element. Reactive: changing the prop replaces the previous classes.
+
+---
+
+## Notes
+
+- Today's highlight and the hiding of past exceptions are applied after mount, so a cached or
+  prerendered page never shows a stale "today". Expect them to appear a moment after first paint.