srcdev-nuxt-components 9.5.5 → 9.5.7

package/.claude/skills/component-compliance-checklist.md

@@ -13,7 +13,8 @@ skip silently. Notes marked **Existing component** only apply when migrating.
 
 A component passes when its Component Ledger row (`node .claude/component-ledger/build.mjs`, then
 `.claude/component-ledger/audit.json`) shows `score: 5`, a real tier, and `variants`, `legacy_props`,
-`story_args_bug`, `eslint_issues`, `redundant_priv_tokens` and `styling_doc_outdated` all `false`.
+`story_args_bug`, `eslint_issues`, `redundant_priv_tokens`, `styling_doc_outdated` and `missing_stress_story`
+all `false`.
 The ledger can't see items 9, 10, 11 and 14, so check those by hand.
 
 ## The checklist
@@ -131,7 +132,10 @@ The ledger can't see items 9, 10, 11 and 14, so check those by hand.
     covers ellipsis too (`1` is single-line ellipsis). Default it to `none` unless the layout
     clearly needs a cap, and never clamp text that must stay readable (legal or attribution text,
     link text that names its destination). Shape and rules: `theming-component-token-pattern.md`,
-    "Line-clamp tokens". Add a unit test for any logic fix. A component that takes no data or copy
+    "Line-clamp tokens". Give each line-clamp token a Controls-panel select in the stories (set on
+    a wrapper `:style`, stripped from the component's args), labelled as a story-only CSS token so
+    nobody mistakes it for a prop: `storybook-add-story.md`, "Label token controls as story-only".
+    Add a unit test for any logic fix. A component that takes no data or copy
     (e.g. a pure layout wrapper) still gets one with oversized slot content.
 7. **Skill doc** — create or update `.claude/skills/components/<component-name>.md`, following the
    pattern of an existing one. A labelled `<Name>Field` wrapper (or any other wrapper) is documented

package/.claude/skills/components/action-menu.md

@@ -8,7 +8,7 @@
 Clicking it opens an anchored menu list populated via indexed dynamic slots (`item-{n}`). Each slot
 should contain a single `ActionMenuItem` — either a `<button>` (for actions) or a link (for
 navigation). The popover API and CSS anchor positioning handle positioning and dismiss behaviour
-natively; no JavaScript click-outside logic is needed.
+natively, with a JS fallback for older Safari (see Notes).
 
 **Location**: `app/components/02.molecules/action-menu/`
 
@@ -16,7 +16,7 @@ natively; no JavaScript click-outside logic is needed.
 
 ## Components
 
-### ActionMenu
+### `ActionMenu`
 
 | Prop | Type | Default | Notes |
 |---|---|---|---|
@@ -24,7 +24,7 @@ natively; no JavaScript click-outside logic is needed.
 | `triggerIcon` | `string` | `"lucide:ellipsis"` | Icon on the trigger button. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root `<div>`. |
 
-**Slots**
+#### Slots
 
 | Slot | When used |
 |---|---|
@@ -32,7 +32,7 @@ natively; no JavaScript click-outside logic is needed.
 
 ---
 
-### ActionMenuItem
+### `ActionMenuItem`
 
 | Prop | Type | Default | Notes |
 |---|---|---|---|
@@ -41,19 +41,20 @@ natively; no JavaScript click-outside logic is needed.
 | `arrowIcon` | `string` | `"lucide:arrow-right"` | Decorative trailing arrow icon. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the root element. |
 
-**Slots**
+#### Slots
 
 | Slot | Content |
 |---|---|
 | `#icon` | Optional left icon (e.g. `<Icon name="lucide:pencil" />`). Wrapped in `aria-hidden` span. |
 
-**Emits**
+#### Emits
 
 | Event | Payload | Notes |
 |---|---|---|
 | `click` | `MouseEvent` | Fired on every click regardless of whether the item is a button or link. |
 
-**Notes on routing**
+#### Notes on routing
+
 - Internal paths (`/…`) resolve to `<NuxtLink>` via `resolveComponent`.
 - External URLs or relative paths without a leading `/` render as plain `<a>`.
 - `type="button"` is set automatically on `<button>` elements to prevent accidental form submission.
@@ -63,7 +64,7 @@ natively; no JavaScript click-outside logic is needed.
 ## Basic usage
 
 ```vue
-<ActionMenu :item-count="3" label="Row actions">
+<ActionMenu label="Row actions">
   <template #item-0>
     <ActionMenuItem label="Edit" @click="handleEdit">
       <template #icon><Icon name="lucide:pencil" /></template>
@@ -122,13 +123,18 @@ Quick reference:
 
 ## Notes
 
-- **Popover API + CSS anchor positioning** — the menu uses the `popover` attribute (broadly supported)
-  and `position-anchor` (newer: Chromium 125+, Safari 26+). Without anchor positioning the popover
-  still opens, just not anchored to the trigger. No polyfill is included.
-- **Auto-close** — clicking any `<li>` row fires `hidePopover()` on the menu. The `ActionMenuItem`
-  emitting `click` triggers normally before the menu closes.
-- **Focus management** — on open the `toggle` event fires `handleToggle`, which moves focus to the
-  first `[role="menuitem"]` inside the popover.
+- **Popover API + CSS anchor positioning, with fallbacks** — open/close and positioning go through
+  the shared `useAnchoredPopover` composable, same as `SelectMenu`. Without anchor
+  positioning (Safari 17–18) JS measures the trigger and writes `--_anchor-*` px values
+  for the `@supports not (anchor-name: --a)` block. Without the Popover API (Safari 16) the trigger
+  toggles `isOpen`, `.action-menu-popover-open` shows the menu, outside pointerdown and Escape
+  close it, and `--action-menu-popover-z-index` (default `999999`) applies. See the `select-menu`
+  skill doc for the details and the `:popover-open` selector-list caveat.
+- **`aria-expanded`** on the trigger tracks the open state in every browser (added 2026-10-05).
+- **Auto-close** — clicking any `<li>` row calls the composable's `hide()` (native `hidePopover()`
+  or the fallback). The `ActionMenuItem` emitting `click` triggers normally before the menu closes.
+- **Focus management** — on open (the `toggle` event, or after render in the fallback), focus moves
+  to the first `[role="menuitem"]` inside the popover.
 - **Keyboard navigation `currentIndex === -1` guard** — `handleKeydown` computes the current
   position via `items.indexOf(document.activeElement)`. When focus is outside the menu this returns
   `-1`. Always guard explicitly before applying wrap-around math: `ArrowDown` should focus

package/.claude/skills/components/deep-expanding-menu.md

@@ -13,12 +13,12 @@ type: reference
 anchor-positioning (`anchor-name`/`position-anchor`/`anchor()`) and the native Popover API
 (`popover`/`popovertarget`).
 
-**Browser support caveat:** CSS anchor-positioning and the Popover API are both comparatively
-recent — check current browser support before shipping this on a page that must work everywhere,
-same caution as `ExpandingPanel`'s `::details-content` gap (CLAUDE.md pitfall #19). If broad
-support is a hard requirement, use [`DeepExpandingMenuClassic`](deep-expanding-menu-classic.md)
-instead — same API and visual result, built on `<details>`/`<summary>` +
-`onClickOutside` instead.
+**Browser support:** since 2026-10-05 open/close and positioning go through the shared
+`useAnchoredPopover` composable (see `composable-anchored-popover.md`), so the menu also works
+without anchor positioning (Safari 17–18: JS-measured `position: fixed`) and without the Popover
+API (Safari 16: JS open/close, outside click and Escape). Before that, panels never opened on
+Safari 16. [`DeepExpandingMenuClassic`](deep-expanding-menu-classic.md) is still the alternative
+built on `<details>`/`<summary>`: same API and visual result, with no popover layer involved.
 
 ## Props
 
@@ -82,6 +82,18 @@ See `CONSUMER-STYLING.md` for the full token API and what's not tokenised.
 - Auto-imported in Nuxt — no manual import needed.
 - Anchor names and popover target ids are generated per-instance via `useId()`, so multiple
   instances on one page don't collide.
+- One `useAnchoredPopover` instance serves every group: `activeKey` tracks the open group, and the
+  composable's `triggerRef`/`popoverRef` are computeds over per-group element maps (filled by
+  function refs). Native `toggle` events for two auto popovers can arrive in either order (B opens,
+  then A closes), so a close event is ignored unless it's for the active group.
+- Each group toggle has `aria-expanded`; the caret flip keys off it rather than
+  `:has(:popover-open)`, so it works in the fallback too.
+- Panels have no ARIA role: this is the disclosure-navigation pattern (a toggle with
+  `aria-expanded` revealing ordinary links), not an ARIA menu. `role="menu"` was removed 2026-10-05
+  because it requires `menuitem` children and arrow-key handling the panels don't have, so screen
+  readers announced a menu that didn't behave like one. Don't add it back.
+- 2026-10-05: removed two never-referenced `@position-try` blocks (`--anchor-left`, and an invalid
+  `@position-try-fallbacks --anchor-right` at-rule).
 - 2026-09-07 migration: moved from an unplaced top-level folder into
   `02.molecules/navigation/deep-expanding-menu/`; converted options-style `defineProps` to
   `interface Props` + `withDefaults`; the previous hardcoded `nav-1` anchor/popover id prefix

package/.claude/skills/components/display-tooltip-defined.md

@@ -10,7 +10,8 @@ type: reference
 
 `DisplayTooltipDefined` composes [`DisplayTooltip`](display-tooltip.md), supplying a structured
 title/body/action content shape (each rendered with a consumer-chosen tag) plus a built-in close
-button wired to the popover's `popovertarget`. Use this when you want the standard tooltip content
+button wired to the popover's `popovertarget` and to `DisplayTooltip`'s scoped `close()`, so it also
+closes the tooltip on Safari 16 (no Popover API). Use this when you want the standard tooltip content
 layout without hand-building the `tooltipContent` slot markup each time; use plain `DisplayTooltip`
 directly when you need full control over the popover's content.
 

package/.claude/skills/components/display-tooltip.md

@@ -14,9 +14,11 @@ the native Popover API (`popover`/`popovertarget`) and CSS anchor-positioning
 with a built-in close button, see [`DisplayTooltipDefined`](display-tooltip-defined.md), which
 composes this component.
 
-**Browser support caveat:** CSS anchor-positioning and the Popover API are both comparatively
-recent — check current browser support before relying on this where broad support is a hard
-requirement, same caution as `DeepExpandingMenu`'s equivalent gap.
+**Browser support:** since 2026-10-05 open/close and positioning go through the shared
+`useAnchoredPopover` composable (`side: "right"`, see `composable-anchored-popover.md`). Without
+anchor positioning (Safari 17–18) the panel is placed from the trigger's measured position, flipping
+to the left when there's no room on the right. Without the Popover API (Safari 16) it opens and
+closes in JS, with outside-click and Escape dismissal. The trigger has `aria-expanded`.
 
 ## Props
 
@@ -32,7 +34,7 @@ requirement, same caution as `DeepExpandingMenu`'s equivalent gap.
 | Slot | Description |
 |------|-------------|
 | `triggerContent` | Optional content rendered before the trigger button (e.g. a label the tooltip icon sits next to). |
-| `tooltipContent` | Content rendered inside the popover panel. |
+| `tooltipContent` | Content rendered inside the popover panel. Scoped prop `close()` hides the panel in every browser: wire your own close button to it (`#tooltipContent="{ close }"`), since `popovertargetaction="hide"` alone does nothing without the Popover API. |
 
 ## Basic usage
 
@@ -54,6 +56,10 @@ popover width/colours/radius, and the close-button tokens `DisplayTooltipDefined
 
 ## Notes
 
+- Slotted content: direct children of `tooltipContent` get `margin-block: 0` (in `:where()`, so
+  consumer margins win) and the panel sets `--display-tooltip-popover-font-size` (`1.4rem`) and
+  `-line-height` (`1.4`), so a bare `<p>` reads as tooltip text without extra styling.
+
 - Auto-imported in Nuxt — no manual import needed.
 - `tooltipId` is only reactive at mount — changing it after mount does not regenerate the linked
   `popovertarget`/`id` pair reactively beyond Vue's normal re-render, since both derive from the

package/.claude/skills/components/navigation-items.md

@@ -18,6 +18,7 @@ active-route highlighting, hover indicator).
 | `mainNavigationState` | `ResponsiveHeaderState` | `{ clonedNavLinks: {}, navListVisibility: {}, hasSecondNav: false }` | Shared geometry/visibility state, normally supplied by the parent `ResponsiveHeader` — not something a consumer constructs by hand outside of tests/stories. |
 | `panelVariant` | `"modern" \| "classic"` | `"classic"` | Which panel component renders a dropdown's submenu: `ExpandingPanel` (`"modern"`) or `ExpandingPanelClassic` (`"classic"`, default). `"modern"` is known not to work correctly on WebKit. Normally set via `ResponsiveHeader`'s own `panelVariant` prop rather than directly. See CLAUDE.md pitfall #19. |
 | `ariaLabel` | `string` | `"Overflow navigation menu"` | aria-label on the root `role="menu"` element — override for localisation. Normally set via `ResponsiveHeader`'s own `overflowMenuAriaLabel` prop rather than directly. |
+| `submenuAriaLabel` | `string` | `"{title} submenu"` | aria-label on each submenu summary; `{title}` is replaced with `childLinksTitle` (or `name`). Normally set via `ResponsiveHeader`'s `submenuAriaLabel`. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.overflow-navigation-wrapper` element. |
 
 ---

package/.claude/skills/components/opening-hours.md

@@ -78,6 +78,18 @@ earlier than `opens` means the session runs past midnight and is displayed as gi
 - Grouping compares status, sessions and note; only **consecutive** days (in `week-starts-on`
   order) group. No wrap-around from Sunday to Monday.
 - Exceptions don't alter the weekly table; they are listed separately.
+- **Bad data never throws** (since 2026-10-05): a time that isn't a valid `HH:MM` from `00:00` to
+  `23:59` (e.g. `"abc"`, `"25:99"`, `"24:00"`) and an exception date that isn't a real
+  `YYYY-MM-DD` are shown exactly as written. An invalid `locale` falls back to `en-GB`, and an
+  invalid `timeZone` to the browser's own. An exception whose `to` is before its `from` is shown
+  the right way round, and duplicate exception dates both render. The checks are the
+  auto-imported `parseOpeningTime` and `parseOpeningDate` utils (`app/utils/opening-hours.ts`).
+- A session that closes after midnight (`22:00`–`02:00`) displays as written; schema.org reads
+  `closes` before `opens` as the next day.
+- `status: "open"` with no sessions is treated as closed (since 2026-10-05): the row shows
+  `closedLabel`, gets `data-status="closed"`, and structured data treats it as closed too.
+- Long text wraps rather than overflowing; notes and exception labels have line-clamp tokens
+  (`CONSUMER-STYLING.md`). The `StressTest` story covers the worst-case data.
 - Today's highlight and past-exception hiding run in `onMounted`, never on the server, so cached
   HTML can't carry a stale day. Past exceptions are briefly visible before hydration.
 - **Structured data**: emits `{ "@type": structuredData.type ?? "LocalBusiness", "@id", name,

package/.claude/skills/components/pop-over.md

@@ -15,9 +15,12 @@ with fully consumer-supplied content, built on the native Popover API
 text) or `ActionMenu` (menu semantics with arrow-key navigation), `PopOver` makes no assumption
 about what the trigger or content look like, and always renders its own visible close button.
 
-**Browser support caveat:** CSS anchor-positioning and the Popover API are both comparatively
-recent — check current browser support before relying on this where broad support is a hard
-requirement, same caution as `DisplayTooltip`/`DeepExpandingMenu`'s equivalent gap.
+**Browser support:** since 2026-10-05 open/close and positioning go through the shared
+`useAnchoredPopover` composable, with `side` following the `placement` prop (see
+`composable-anchored-popover.md`). Without anchor positioning (Safari 17–18) the panel is placed
+from the trigger's measured position on the `placement` side, flipping to the opposite side when
+there's no room. Without the Popover API (Safari 16) it opens and closes in JS, with outside-click
+and Escape dismissal.
 
 ## Props
 
@@ -72,11 +75,11 @@ the only source of space above/below the slotted content — a plain `<p>` doesn
 
 ## Behaviour
 
-- Opening/closing is handled natively by the Popover API: clicking the trigger toggles the panel,
-  clicking the close button or pressing Escape hides it, and focus returns to the trigger
-  automatically on close.
-- On open, focus moves to the close button (`handleToggle`, driven by the popover's native
-  `toggle` event) so keyboard users land inside the panel immediately.
+- Clicking the trigger toggles the panel; the close button, Escape or an outside click hides it,
+  and focus returns to the trigger. Natively this is the Popover API; on Safari 16 the composable
+  does the same in JS. The trigger has `aria-expanded` in every browser.
+- On open, focus moves to the close button (the composable's `onOpen`) so keyboard users land
+  inside the panel immediately.
 
 ## CSS custom properties
 

package/.claude/skills/components/price-list.md

@@ -4,7 +4,8 @@
 
 `PriceList` (`app/components/02.molecules/price-list/`) renders a service/menu-style price list:
 one or more columns, each with a heading (optional icon) and a `<dl>` of description/price rows.
-Columns stack below `48em` and sit two-up above it. Not a SaaS plan comparison, use `PricingCard`
+Columns stack in a narrow container and sit two-up once the component itself is wide enough
+(a container-width grid since 2026-10-05, not a viewport media query). Not a SaaS plan comparison, use `PricingCard`
 for that.
 
 ---
@@ -48,6 +49,8 @@ No slots, no events.
 - Column titles are `HeroText` headings at `heading-tag`. Prices are plain `<span>`s inside `<dd>`,
   not headings (before 2026-09-27 each price was an `<h2>`, which flooded the heading outline).
 - Rows are `<div>`-wrapped `<dt>`/`<dd>` pairs, valid inside `<dl>`.
+- A column with an empty `headingtext` renders no heading at all (no empty `<h2>`); its rows still
+  render.
 
 ---
 
@@ -57,6 +60,12 @@ All tokens are `--price-list-*`; full table in `CONSUMER-STYLING.md` next to the
 Common ones: `--price-list-divider-colour`, `--price-list-divider-opacity`,
 `--price-list-price-font-size`, `--price-list-heading-margin-block-end`.
 
+Layout and long data: `--price-list-column-min-inline-size` (`32rem`) and `--price-list-max-columns`
+(`2`) control when columns sit side by side; `--price-list-price-max-inline-size` (`50%`) caps the
+price so a long price wraps instead of crushing the description; `--price-list-description-line-clamp`
+(`none`) caps description lines. Unbroken strings wrap anywhere. The `StressTest` story covers the
+worst-case data.
+
 ---
 
 ## Usage

package/.claude/skills/components/responsive-header.md

@@ -110,8 +110,33 @@ buggy toggle-based version too.
 | `mainNavAriaLabel` | `string` | `"Main navigation"` | aria-label on the primary nav landmark — override for localisation. |
 | `secondaryNavAriaLabel` | `string` | `"Secondary navigation"` | aria-label on the secondary (overflow) nav landmark — override for localisation. |
 | `overflowMenuAriaLabel` | `string` | `"Overflow navigation menu"` | Forwarded to `NavigationItems`' `ariaLabel` — override for localisation. |
+| `overflowButtonLabel` | `string` | `"More navigation"` | Accessible name of the overflow/burger button, which shows only icons. |
+| `submenuAriaLabel` | `string` | `"{title} submenu"` | aria-label on each dropdown summary, top bar and overflow panel; `{title}` is replaced with `childLinksTitle` (or `name`). Forwarded to `NavigationItems`. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra CSS classes applied to the root `.navigation` element. |
 
+## Data edge cases (since 2026-10-05)
+
+- A dropdown with no `childLinksTitle` shows its `name` instead (it used to render an empty
+  summary labelled "undefined submenu").
+- Child links are keyed by index, so duplicate names are fine.
+- The overflow button appears whenever any item is hidden, whatever the group keys are called.
+  It used to read `navListVisibility.firstNav`/`secondNav` only, so a group named anything else
+  (e.g. `main`) kept the burger showing even when everything fitted. Empty nav data never shows
+  it, and still completes the geometry pass.
+- The top-bar dropdown and the overflow panel are capped in width and height (tokens in
+  `CONSUMER-STYLING.md`); long names wrap and long lists scroll inside them.
+- **Fit check (fixed 2026-10-05):** an item is visible when its right edge is at or before the main
+  nav's own measured right edge (which already has the secondary nav and gap reserved as
+  `margin-inline-end`). It used to compare against the wrapper while adding the gap a second time
+  with a strict `<`, so the last item of a flush-right second group (e.g. "Contact") was always
+  sent to the overflow menu, however wide the screen.
+- The component copies `responsiveNavLinks` before measuring. It used to write each item's
+  `config` straight into the consumer's own nav data object.
+- The `StressTest` story covers all of the above.
+- **Alignment (added 2026-10-05):** `--responsive-header-main-nav-justify-content`
+  (default `space-between`) sets how the main nav's groups sit along the bar; use `safe end` /
+  `safe center`, never plain `end`/`center`. The `MainNavAlignment` story shows the options.
+
 ## Slots
 
 | Slot | Purpose |

package/.claude/skills/components/select-menu.md

@@ -171,11 +171,22 @@ Quick reference:
 
 ## Notes
 
-- **Popover API + CSS anchor positioning** — same mechanism as `ActionMenu`. The Popover API is
-  broadly supported (Chrome 114+, Firefox 125+, Safari 17+), but CSS anchor positioning is much
-  newer (Chromium 125+, Safari 26+), and without it the popover isn't placed under the trigger. No
-  polyfill or fallback is included, so check support before using this where older devices
-  matter; a native `<select>` (`InputSelect`) is the safer choice there.
+- **Popover API + CSS anchor positioning, with fallbacks** — same mechanism as `ActionMenu`, both
+  via the shared `useAnchoredPopover` composable (`app/composables/useAnchoredPopover.ts`). The
+  Popover API arrived in Safari 17 and CSS anchor positioning in Safari 26, so:
+  - No anchor positioning (Safari 17–18): JS measures the trigger and writes `--_anchor-*` px values for the
+    `@supports not (anchor-name: --a)` block, re-measuring on scroll/resize and flipping above
+    (`data-placement="top"`) when there's no room below.
+  - No Popover API (Safari 16, e.g. first-generation iPad Pros that can't update): the trigger's
+    `@click` toggles `isOpen`, `.select-menu-popover-open` shows the list, and document listeners
+    close it on outside pointerdown and Escape. Not top-layer here, hence
+    `--select-menu-popover-z-index` (default `999999`).
+  - Detection runs in `onMounted` (`typeof HTMLElement.prototype.showPopover`, `CSS.supports`), so
+    SSR markup is identical everywhere. Every close goes through the composable's `hide()`, never
+    `hidePopover()` directly, so it works in both modes.
+  - Never put `:popover-open` in a selector list with the fallback class: browsers without it
+    drop the whole rule.
+  Confirmed broken on a Safari 16 iPad before this (trigger rendered, menu never opened).
 - **Left-aligned popover** (`left: anchor(left)`) — unlike `ActionMenu` which right-aligns. Matches
   native `<select>` dropdown behaviour. Flips above the trigger near the bottom of the viewport.
 - **Keyboard navigation** follows the WAI-ARIA listbox pattern: `ArrowDown`/`ArrowUp` move between
@@ -198,9 +209,8 @@ Quick reference:
   weight doesn't resize the popover. Hover/focus has `-text-color-hover` and `-border-hover`, which
   fall back to the row's *current* state (selected or resting), not always to resting. There's no
   hover font-weight token on purpose: the width reserve only covers one alternate weight.
-- **Chevron rotation is pure CSS** via `:has(.select-menu-popover:popover-open)` on the root — no
-  JS state drives the visual. `isOpen` is still tracked internally, but only to set `aria-expanded`
-  on the trigger.
+- **Chevron rotation** keys off the trigger's `aria-expanded` (from the composable's `isOpen`), not
+  `:has(...:popover-open)`, so it also works without the Popover API (changed 2026-10-05).
 - **No native `<select>`/`appearance: base-select` involved** — this is a from-scratch popover
   listbox, not a styled native select, so it doesn't inherit `InputSelectCore`'s WebKit
   `appearance: base-select` constraints.

package/.claude/skills/components/site-header.md

@@ -27,6 +27,8 @@ Branding (logo/wordmark) is entirely consumer-authored via the `#branding` slot
 | `mainNavAriaLabel` | `string` | `"Main navigation"` | Forwarded to `ResponsiveHeader`'s `mainNavAriaLabel` — override for localisation. |
 | `secondaryNavAriaLabel` | `string` | `"Secondary navigation"` | Forwarded to `ResponsiveHeader`'s `secondaryNavAriaLabel` — override for localisation. |
 | `overflowMenuAriaLabel` | `string` | `"Overflow navigation menu"` | Forwarded to `ResponsiveHeader`'s `overflowMenuAriaLabel` — override for localisation. |
+| `overflowButtonLabel` | `string` | `"More navigation"` | Forwarded to `ResponsiveHeader`'s `overflowButtonLabel`, the burger button's accessible name. |
+| `submenuAriaLabel` | `string` | `"{title} submenu"` | Forwarded to `ResponsiveHeader`'s `submenuAriaLabel`; `{title}` is replaced with the item's title. |
 
 ---
 

package/.claude/skills/components/ui-block-decorated.md

@@ -42,6 +42,13 @@ short: `--ui-block-decorated-border-1` .. `-6`, `--ui-block-decorated-shadow-1`
 `--ui-block-decorated-inner-shadow-1` .. `-4`, and `--ui-block-decorated-inner-shadow-highlight`
 (layered on top of every inner shadow level).
 
+To recolour every level at once (added 2026-10-05): `--ui-block-decorated-border-colour` (default
+`var(--theme-border)`), `--ui-block-decorated-shadow-colour` (default `#000`) and
+`--ui-block-decorated-inner-shadow-colour` (default: the shadow colour). Each shadow level mixes the
+colour with its own opacity via `color-mix()` (8% .. 18%), so defaults render exactly as before.
+The per-level tokens still override the whole value. The story has colour pickers for all three,
+plus story-only background and text colour controls for checking contrast.
+
 ## Notes
 
 - 2026-09-16 migration: previously used options-style `defineProps` and referenced six families of

package/.claude/skills/composable-anchored-popover.md

@@ -0,0 +1,108 @@
+# useAnchoredPopover
+
+`app/composables/useAnchoredPopover.ts`. Open/close state and positioning for a trigger + `popover`
+element anchored with CSS anchor positioning, with fallbacks for browsers that lack either
+feature. Used by `ActionMenu`, `SelectMenu`, `DeepExpandingMenu` (all `side: "bottom"`, the default)
+`DisplayTooltip` (`side: "right"`) and `PopOver` (`side: () => props.placement`). Use it for any new anchored popover instead of calling `showPopover()`/`hidePopover()`
+directly.
+
+Several popovers where only one is open at a time (e.g. `DeepExpandingMenu`'s groups) can share
+one instance: keep an `activeKey`, pass computeds over per-item element maps as `triggerRef`/
+`popoverRef` (the options accept readonly refs), and ignore a `toggle` close event that isn't for
+the active item, since auto popovers' open and close events can arrive in either order.
+
+## Why
+
+- The Popover API arrived in Safari 17; CSS anchor positioning only in Safari 26.
+- Safari 16 (e.g. first-generation iPad Pros, which can't update past iPadOS 16) has neither: the
+  trigger renders but the menu never opens.
+- Safari 17–18 has the Popover API but no anchor positioning: the menu opens in the wrong place.
+
+## Modes (detected in `onMounted`, so SSR markup is the same everywhere)
+
+| Support | Behaviour |
+|---|---|
+| Popover API + anchor positioning | Fully native. The composable only tracks `isOpen` from `toggle`. |
+| Popover API, no anchor positioning | JS measures the trigger on `beforetoggle`/`toggle` and on scroll/resize, and writes the trigger's edges as `--_anchor-*` px values (see below); flips to the opposite side (`data-placement`) when the preferred side has no room and the opposite side does. |
+| No Popover API | Also opens/closes in JS: trigger `@click` toggles `isOpen`, document `pointerdown` outside the root and `Escape` close it, and `hide()` returns focus to the trigger when focus was inside the popover, as native popovers do. The component shows the popover from a fallback class. |
+
+## API
+
+```ts
+const {
+  isOpen,              // Ref<boolean>, accurate in every mode; bind to aria-expanded
+  usesFallbackPopover, // Ref<boolean>, true without the Popover API
+  needsPositioning,    // Ref<boolean>, true without anchor positioning
+  positionStyle,       // bind to the popover's :style (undefined when not needed)
+  popoverPlacement,    // bind to :data-placement: the resolved side, or undefined when native
+  show, hide,          // always use these, never showPopover()/hidePopover() directly
+  handleTriggerClick,  // trigger @click (no-op where popovertarget works)
+  handleBeforeToggle,  // popover @beforetoggle
+  handleToggle,        // popover @toggle
+} = useAnchoredPopover({ rootRef, triggerRef, popoverRef, side: "bottom", onOpen: focusFirstItem });
+```
+
+`rootRef` must contain both the trigger and the popover (outside-click detection). `onOpen` runs
+after the popover is visible, so it can move focus into it.
+
+`side` (`"bottom"` default, `"top"`, `"right"`, `"left"`, or a ref/getter of one, e.g. `() => props.placement`) is the preferred side for the fallback
+flip; it doesn't affect native anchor positioning, which the component's own CSS controls.
+
+### Fallback position variables
+
+They mirror `anchor()`: `--_anchor-{top|bottom|left|right}` is the trigger edge in viewport px, for
+the `top`/`left` properties (`top: anchor(bottom)` becomes `top: var(--_anchor-bottom)`).
+`--_anchor-{edge}-inverse` is the same edge measured from the viewport's bottom/right, for the
+`bottom`/`right` properties (`right: anchor(left)` becomes `right: var(--_anchor-left-inverse)`).
+All eight are always written, so CSS picks what each side needs.
+
+## Component wiring
+
+```vue
+<div ref="rootRef" class="x-menu">
+  <button ref="triggerRef" :popovertarget="id" :aria-expanded="isOpen" @click="handleTriggerClick">…</button>
+  <div
+    :id="id"
+    ref="popoverRef"
+    popover
+    class="x-menu-popover"
+    :class="{ 'x-menu-popover-open': usesFallbackPopover && isOpen }"
+    :style="positionStyle"
+    :data-placement="popoverPlacement"
+    @beforetoggle="handleBeforeToggle"
+    @toggle="handleToggle"
+  >…</div>
+</div>
+```
+
+```css
+.x-menu-popover {
+  &:popover-open { display: block; }
+  /* Separate rule: a selector list containing :popover-open is dropped whole where unsupported. */
+  &.x-menu-popover-open { display: block; }
+
+  @supports not (anchor-name: --a) {
+    position: fixed;
+    top: calc(var(--_anchor-bottom, 0px) + var(--x-menu-block-distance, 0.4rem));
+    left: var(--_anchor-left, 0px);
+    z-index: var(--x-menu-popover-z-index, 999999);
+
+    &[data-placement="top"] {
+      top: auto;
+      bottom: calc(var(--_anchor-top-inverse, 0px) + var(--x-menu-block-distance, 0.4rem));
+    }
+  }
+}
+```
+
+Drive any "open" visuals (e.g. a chevron) from `[aria-expanded="true"]` on the trigger, not
+`:has(:popover-open)`.
+
+## Caveats
+
+- In the no-Popover-API mode the popover isn't in the top layer: give it a public z-index token
+  (default `999999`, pitfall #17), and an ancestor with `transform`/`filter`/`contain` becomes its
+  containing block and can misplace it.
+- Tests: happy-dom has no Popover API and its `CSS.supports` can't be spied on. Define/undefine
+  `HTMLElement.prototype.showPopover` and swap `globalThis.CSS` (restore it in `afterEach`); see
+  `app/composables/tests/useAnchoredPopover.spec.ts`.

package/.claude/skills/composable-tooltips-guide.md

@@ -8,7 +8,7 @@
 
 ## Prerequisites
 
-- Uses the native HTML Popover API — supported in all modern browsers (Chrome 114+, Firefox 125+, Safari 17+)
+- Built around the native Popover API (Chrome 114+, Firefox 125+, Safari 17+). With `DisplayTooltip`/`DisplayTooltipDefined` it also works on Safari 16, because those components fall back to JS open/close (`useAnchoredPopover`) and the guide drives them through their trigger buttons. Hand-written raw `[popover]` markup like the example below still needs the Popover API.
 - Popovers must have `id` attributes and corresponding trigger buttons with `popovertarget` and `popovertargetaction="toggle"` attributes
 - Close buttons inside each popover must have `popovertargetaction="hide"`
 
@@ -74,6 +74,8 @@ await startGuide()
 2. If `autoStart` is `true`, calls `startGuide()` which iterates the popovers in DOM order.
 3. For each popover: finds the `[popovertarget][popovertargetaction="toggle"]` trigger button and clicks it to open the popover, then waits for the `[popovertargetaction="hide"]` button to be clicked before advancing.
 4. After the last popover is dismissed, `autoRunGuide` is set to `false` and `isGuideRunning` becomes `false`.
+5. With no close button, a step ends when the trigger's `aria-expanded` turns `"false"` (a `MutationObserver`), or on the popover's `toggle` event with `newState: "closed"` when there's no trigger either.
+6. `stopGuide()`/`restartGuide()` close an open step by clicking its trigger when `aria-expanded="true"`, or with `hidePopover()` where `:popover-open` is supported. They never call `togglePopover()` or match `:popover-open` unguarded, both of which throw on Safari 16.
 
 ## API reference
 

package/.claude/skills/index.md

@@ -66,6 +66,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
 ├── composable-tooltips-guide.md      — useTooltipsGuide: sequential popover guide with auto-start, dismiss-to-advance, manual controls
 ├── composable-cookie-consent.md      — useCookieConsent: unset/granted/denied state, cookie persistence, wraps @nuxt/scripts' useScriptTriggerConsent
 ├── composable-analytics.md           — useAnalytics: provider-agnostic trackEvent/page-view tracking (google-analytics only implemented), consent-gated, single call site for setup + firing events
+├── composable-anchored-popover.md    — useAnchoredPopover: popover + anchor positioning with JS fallbacks for Safari 16 (no Popover API) and 17–18 (no anchor positioning); used by ActionMenu/SelectMenu/DeepExpandingMenu/DisplayTooltip/PopOver
 └── components/
     ├── alert-content.md          — AlertContent + AlertContentInner: themed alert panel (icon/title/content/actions/dismiss) under DisplayToast, DisplayPrompt and AlertMaskedContent; showIcon, #actions row, --alert-content-* tokens, app.config icon map
     ├── alert-mask-core.md      — AlertMaskCore: SVG border/background mask sized to slotted content via ResizeObserver, config-prop-driven geometry/colour (no CSS token API)

package/.claude/skills/storybook-add-story.md

@@ -271,6 +271,20 @@ Key points:
 - Extra args must be stripped before `v-bind` — spreading unknown keys onto a component makes them unknown HTML attributes.
 - CSS custom properties set via `:style` on the component root are picked up by `var()` in the component's scoped CSS.
 
+### Label token controls as story-only
+
+A control that drives a CSS token (a line clamp, a colour) looks exactly like a prop in the
+Controls panel and the generated docs table, so a developer reading the story can assume it's a
+prop and try to pass it. Make it unmistakable:
+
+- Put it in the category `"CSS tokens (story only, set in your CSS)"`.
+- Start the description with `**Story control, not a prop.**`, name the token, and show the CSS a
+  consumer would write instead, e.g.
+  `` `.salon-menu { --price-list-description-line-clamp: 2; }` ``.
+- If a story's docs text tells people to try the control, say there too that it's a CSS token.
+
+`PriceList.stories.ts` and `GoogleReviews.stories.ts` (line-clamp controls) follow this.
+
 ## Notes
 
 - **Colour scheme:** `.storybook/preview.ts` pins every story to the light scheme

package/.vscode/srcdev-component-responsive-header.code-snippets

@@ -24,7 +24,9 @@
       "  main-nav-aria-label=\"${2:Main navigation}\"",
       "  secondary-nav-aria-label=\"${3:Secondary navigation}\"",
       "  overflow-menu-aria-label=\"${4:Overflow navigation menu}\"",
-      "/>"
+      "  overflow-button-label=\"${5:More navigation}\"",
+      "  submenu-aria-label=\"${6:{title\\} submenu}\"",
+      "></ResponsiveHeader>"
     ]
   },
   "SRCDEV ResponsiveHeader Nav Data (with dropdown)": {

package/.vscode/srcdev-component-site-header.code-snippets

@@ -40,9 +40,11 @@
       "  main-nav-aria-label=\"${3:Main navigation}\"",
       "  secondary-nav-aria-label=\"${4:Secondary navigation}\"",
       "  overflow-menu-aria-label=\"${5:Overflow navigation menu}\"",
+      "  overflow-button-label=\"${6:More navigation}\"",
+      "  submenu-aria-label=\"${7:{title\\} submenu}\"",
       ">",
       "  <template #branding>",
-      "    <NuxtLink to=\"/\" class=\"home-link\">$6Brand</NuxtLink>",
+      "    <NuxtLink to=\"/\" class=\"home-link\">$8Brand</NuxtLink>",
       "  </template>",
       "</SiteHeader>"
     ]

package/app/assets/styles/setup/06.utility-classes/animations/_animation-scroller-x.css

@@ -14,8 +14,10 @@
 /* Used to scroll scale elements when scrolling x-axis like a carousel. */
 
 @media (prefers-reduced-motion: no-preference) {
-  .animation-scroller-x {
-    animation: scroller linear both;
-    animation-timeline: view(x);
+  @supports (animation-timeline: view()) {
+    .animation-scroller-x {
+      animation: scroller linear both;
+      animation-timeline: view(x);
+    }
   }
 }

package/app/assets/styles/setup/06.utility-classes/animations/_auto-rotate.css

@@ -8,8 +8,10 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .auto-rotate {
-    animation: autoRotateAnimation;
-    animation-timeline: view();
+  @supports (animation-timeline: view()) {
+    .auto-rotate {
+      animation: autoRotateAnimation;
+      animation-timeline: view();
+    }
   }
 }