From bc72da3fa9d9a097ca02b30360fd69a9bda3606f Mon Sep 17 00:00:00 2001 From: Simon Cornforth Date: Wed, 20 May 2026 17:02:44 +0100 Subject: [PATCH 1/7] Chore - Package updates --- .claude/settings.json | 6 +- .../05.forms/input-button/InputButtonCore.vue | 2 +- modules/colour-scheme.ts | 2 +- nuxt.config.ts | 4 +- package-lock.json | 12437 +++++++++------- package.json | 31 +- 6 files changed, 6939 insertions(+), 5543 deletions(-) diff --git a/.claude/settings.json b/.claude/settings.json index 0d57f361..ba7be3cb 100644 --- a/.claude/settings.json +++ b/.claude/settings.json @@ -27,7 +27,11 @@ "Bash(git ls-tree *)", "Bash(node -p \"require\\('./package.json'\\).version\")", "Bash(git status *)", - "Bash(xargs ls -1)" + "Bash(xargs ls -1)", + "Bash(npm audit *)", + "Bash(node -e \"const p=require\\('./package.json'\\); console.log\\('DEPS:', JSON.stringify\\(p.dependencies||{}, null, 2\\)\\); console.log\\('PEER:', JSON.stringify\\(p.peerDependencies||{}, null, 2\\)\\);\")", + "Bash(npm ls *)", + "Bash(SRCDEV_STANDALONE=true npx vitest run app/components/05.forms/input-button --reporter=verbose)" ] } } diff --git a/app/components/05.forms/input-button/InputButtonCore.vue b/app/components/05.forms/input-button/InputButtonCore.vue index 88156aef..572e30b1 100644 --- a/app/components/05.forms/input-button/InputButtonCore.vue +++ b/app/components/05.forms/input-button/InputButtonCore.vue @@ -27,7 +27,6 @@ + + diff --git a/app/components/02.molecules/action-menu/ActionMenuItemCore.vue b/app/components/02.molecules/action-menu/ActionMenuItemCore.vue new file mode 100644 index 00000000..53425609 --- /dev/null +++ b/app/components/02.molecules/action-menu/ActionMenuItemCore.vue @@ -0,0 +1,123 @@ + + + + + diff --git a/app/components/02.molecules/action-menu/CONSUMER-STYLING.md b/app/components/02.molecules/action-menu/CONSUMER-STYLING.md new file mode 100644 index 00000000..f796a2d9 --- /dev/null +++ b/app/components/02.molecules/action-menu/CONSUMER-STYLING.md @@ -0,0 +1,126 @@ +# ActionMenu — Consumer Styling Guide + +## Public token API + +All `--action-menu-*` tokens are the stable override surface. Because action menus appear +repeatedly across the UI (tables, cards, list rows) the recommended approach is to set tokens +once in a **global CSS file** rather than per-instance via `styleClassPassthrough`. + +### Trigger button + +| Token | Default | Controls | +|---|---|---| +| `--action-menu-trigger-size` | `3.2rem` | Trigger button width and height | +| `--action-menu-trigger-border-radius` | `var(--button-border-radius-icon-only, 50%)` | Trigger corner rounding | +| `--action-menu-trigger-surface` | `transparent` | Trigger background (rest state) | +| `--action-menu-trigger-surface-hover` | `light-dark(var(--slate-01), var(--slate-09))` | Trigger background on hover/focus | +| `--action-menu-trigger-icon-size` | `2rem` | Ellipsis icon size | +| `--action-menu-trigger-icon-color` | `light-dark(var(--slate-07), var(--slate-03))` | Ellipsis icon colour | + +### Menu popover + +| Token | Default | Controls | +|---|---|---| +| `--action-menu-block-distance` | `0.4rem` | Gap between trigger bottom and menu top | +| `--action-menu-popover-background` | `light-dark(var(--slate-00), var(--slate-10))` | Menu panel background | +| `--action-menu-popover-border` | `0.1rem solid light-dark(var(--slate-03), var(--slate-07))` | Menu panel border shorthand | +| `--action-menu-popover-border-radius` | `0.8rem` | Menu panel corner rounding | +| `--action-menu-popover-min-width` | `20rem` | Minimum menu width | +| `--action-menu-popover-shadow` | `0 0.4rem 1.6rem light-dark(rgba(0,0,0,0.1), rgba(0,0,0,0.4))` | Menu panel drop shadow | +| `--action-menu-popover-transition-duration` | `200ms` | Open/close fade duration | + +### Menu items (`ActionMenuItemCore`) + +| Token | Default | Controls | +|---|---|---| +| `--action-menu-item-divider` | `0.1rem solid light-dark(var(--slate-02), var(--slate-08))` | Divider line between items | +| `--action-menu-item-surface-hover` | `light-dark(var(--slate-01), var(--slate-09))` | Item row background on hover/focus | +| `--action-menu-item-text-color` | `light-dark(var(--slate-09), var(--slate-01))` | Item label and icon colour | +| `--action-menu-item-icon-size` | `2rem` | Left icon container size | +| `--action-menu-item-padding-inline` | `1.6rem` | Item horizontal padding | +| `--action-menu-item-padding-block` | `1.2rem` | Item vertical padding | + +--- + +## Global theming — recommended approach + +Create `assets/styles/setup/07.components/action-menu.css` in the consuming app and set tokens +on `:root`. This applies to every `ActionMenu` across the site. + +```css +/* assets/styles/setup/07.components/action-menu.css */ +:root { + --action-menu-trigger-border-radius: 0.4rem; + --action-menu-trigger-surface-hover: var(--brand-surface-subtle); + --action-menu-trigger-icon-color: var(--brand-text-muted); + + --action-menu-popover-background: var(--brand-surface); + --action-menu-popover-border: 0.1rem solid var(--brand-border); + --action-menu-popover-border-radius: 0.6rem; + --action-menu-popover-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.15); + + --action-menu-item-surface-hover: var(--brand-surface-subtle); + --action-menu-item-text-color: var(--brand-text); + --action-menu-item-divider: 0.1rem solid var(--brand-border); + --action-menu-block-distance: 0.6rem; +} +``` + +--- + +## Page-scoped overrides + +Override tokens for a specific section by scoping them under the page or layout wrapper. +No `:deep()` is required (component styles are unscoped). + +```css +/* In the consuming page's unscoped