srcdev-nuxt-components 9.4.12 → 9.5.1

package/app/components/02.molecules/action-menu/ActionMenu.vue

@@ -9,7 +9,7 @@
       :aria-label="label"
       aria-haspopup="menu"
     >
-      <Icon name="lucide:ellipsis" class="action-menu-trigger-icon" aria-hidden="true" />
+      <Icon :name="triggerIcon" class="action-menu-trigger-icon" aria-hidden="true" />
     </button>
 
     <div
@@ -21,7 +21,7 @@
       @keydown="handleKeydown"
     >
       <ul class="action-menu-list" role="menu" :aria-label="label">
-        <li v-for="n in itemCount" :key="n - 1" class="action-menu-list-item" role="none" @click="closeMenu">
+        <li v-for="n in itemCount()" :key="n - 1" class="action-menu-list-item" role="none" @click="closeMenu">
           <slot :name="`item-${n - 1}`"></slot>
         </li>
       </ul>
@@ -32,16 +32,18 @@
 <script setup lang="ts">
 interface Props {
   label?: string;
+  triggerIcon?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   label: "Open actions menu",
+  triggerIcon: "lucide:ellipsis",
   styleClassPassthrough: () => [],
 });
 
 const slots = useSlots();
-const itemCount = computed(() => Object.keys(slots).filter((name) => /^item-\d+$/.test(name)).length);
+const itemCount = () => Object.keys(slots).filter((name) => /^item-\d+$/.test(name)).length;
 
 const id = useId();
 const menuId = `action-menu-${id}`;
@@ -111,27 +113,19 @@ const handleKeydown = (event: KeyboardEvent) => {
   }
 };
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
 </script>
 
 <style lang="css">
 @layer components {
   .action-menu {
-    --_block-distance: var(--action-menu-block-distance, 0.4rem);
     --_trigger-size: var(--action-menu-trigger-size, 3.2rem);
-    --_trigger-border-radius: var(--action-menu-trigger-border-radius, var(--button-border-radius-icon-only, 50%));
-    --_trigger-surface: var(--action-menu-trigger-surface, transparent);
-    --_trigger-surface-hover: var(--action-menu-trigger-surface-hover, var(--slate-01));
-    --_trigger-icon-size: var(--action-menu-trigger-icon-size, 2rem);
-    --_trigger-icon-color: var(--action-menu-trigger-icon-color, var(--slate-07));
-
-    --_popover-background: var(--action-menu-popover-background, var(--slate-00));
-    --_popover-border: var(--action-menu-popover-border, 0.1rem solid var(--slate-03));
-    --_popover-border-radius: var(--action-menu-popover-border-radius, 0.8rem);
-    --_popover-min-width: var(--action-menu-popover-min-width, 20rem);
-    --_popover-shadow: var(--action-menu-popover-shadow, 0 0.4rem 1.6rem rgba(0, 0, 0, 0.1));
     --_popover-transition-duration: var(--action-menu-popover-transition-duration, 200ms);
-    --_item-divider: var(--action-menu-item-divider, 0.1rem solid var(--slate-02));
 
     position: relative;
     display: inline-block;
@@ -143,15 +137,15 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       place-items: center;
       width: var(--_trigger-size);
       height: var(--_trigger-size);
-      border-radius: var(--_trigger-border-radius);
-      background-color: var(--_trigger-surface);
-      color: var(--_trigger-icon-color);
+      border-radius: var(--action-menu-trigger-border-radius, var(--button-border-radius-icon-only, 50%));
+      background-color: var(--action-menu-trigger-surface, transparent);
+      color: var(--action-menu-trigger-icon-color, var(--slate-07));
       anchor-name: var(--_anchor-name);
       transition: background-color var(--control-transition-duration, 200ms) var(--control-transition-ease, ease);
 
       &:hover,
       &:focus-visible {
-        background-color: var(--_trigger-surface-hover);
+        background-color: var(--action-menu-trigger-surface-hover, var(--slate-01));
       }
 
       &:focus-visible {
@@ -161,24 +155,23 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
       .action-menu-trigger-icon {
         display: block;
-        width: var(--_trigger-icon-size);
-        height: var(--_trigger-icon-size);
+        font-size: var(--action-menu-trigger-icon-size, 2rem);
       }
     }
 
     .action-menu-popover {
-      border: var(--_popover-border);
+      border: var(--action-menu-popover-border, 0.1rem solid var(--slate-03));
       margin: 0;
       padding: 0;
       inset: auto;
-      background-color: var(--_popover-background);
-      border-radius: var(--_popover-border-radius);
-      min-width: var(--_popover-min-width);
-      box-shadow: var(--_popover-shadow);
+      background-color: var(--action-menu-popover-background, var(--slate-00));
+      border-radius: var(--action-menu-popover-border-radius, 0.8rem);
+      min-width: var(--action-menu-popover-min-width, 20rem);
+      box-shadow: var(--action-menu-popover-shadow, 0 0.4rem 1.6rem rgba(0, 0, 0, 0.1));
       overflow: hidden;
 
       position-anchor: var(--_anchor-name);
-      top: calc(anchor(bottom) + var(--_block-distance));
+      top: calc(anchor(bottom) + var(--action-menu-block-distance, 0.4rem));
       right: anchor(right);
       left: auto;
       position-try-fallbacks: flip-block;
@@ -215,7 +208,12 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
           grid-template-columns: subgrid;
 
           &:not(:last-child) {
-            border-bottom: var(--_item-divider);
+            border-bottom: var(--action-menu-item-divider, 0.1rem solid var(--slate-02));
+          }
+
+          > .action-menu-item {
+            grid-column: 1 / -1;
+            grid-template-columns: subgrid;
           }
         }
       }

package/app/components/02.molecules/action-menu/{ActionMenuItemCore.vue → ActionMenuItem.vue}

@@ -3,7 +3,7 @@
     :is="tag"
     :type="!isLink ? 'button' : undefined"
     :href="isLink ? href : undefined"
-    class="action-menu-item-core"
+    class="action-menu-item"
     :class="[elementClasses]"
     role="menuitem"
     @click="emit('click', $event)"
@@ -13,7 +13,7 @@
     </span>
     <span class="action-menu-item-label">{{ label }}</span>
     <span class="action-menu-item-arrow" aria-hidden="true">
-      <Icon name="lucide:arrow-right" class="action-menu-item-arrow-icon" />
+      <Icon :name="arrowIcon" class="action-menu-item-arrow-icon" />
     </span>
   </component>
 </template>
@@ -22,11 +22,13 @@
 interface Props {
   label: string;
   href?: string;
+  arrowIcon?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   href: undefined,
+  arrowIcon: "lucide:arrow-right",
   styleClassPassthrough: () => [],
 });
 
@@ -56,25 +58,21 @@ watch(
 
 <style lang="css">
 @layer components {
-  .action-menu-item-core {
+  .action-menu-item {
     --_gap: var(--action-menu-item-gap, 1.2rem);
-    --_surface-hover: var(--action-menu-item-surface-hover, light-dark(var(--slate-01), var(--slate-09)));
-    --_text-color: var(--action-menu-item-text-color, light-dark(var(--slate-09), var(--slate-01)));
     --_icon-size: var(--action-menu-item-icon-size, 2rem);
-    --_padding-inline: var(--action-menu-item-padding-inline, 1.6rem);
-    --_padding-block: var(--action-menu-item-padding-block, 1.2rem);
 
     all: unset;
     box-sizing: border-box;
     cursor: pointer;
     display: grid;
-    grid-template-columns: subgrid;
+    grid-template-columns: auto 1fr auto;
     align-items: center;
 
     width: 100%;
-    padding-inline: var(--_padding-inline);
-    padding-block: var(--_padding-block);
-    color: var(--_text-color);
+    padding-inline: var(--action-menu-item-padding-inline, 1.6rem);
+    padding-block: var(--action-menu-item-padding-block, 1.2rem);
+    color: var(--action-menu-item-text-color, var(--slate-09));
     font-family: var(--font-family);
     font-size: var(--button-font-size, 1.4rem);
     font-weight: var(--button-font-weight, 500);
@@ -84,7 +82,7 @@ watch(
 
     &:hover,
     &:focus-visible {
-      background-color: var(--_surface-hover);
+      background-color: var(--action-menu-item-surface-hover, var(--slate-01));
     }
 
     &:focus-visible {
@@ -101,6 +99,7 @@ watch(
       justify-content: center;
       width: var(--_icon-size);
       height: var(--_icon-size);
+      font-size: var(--_icon-size);
       flex-shrink: 0;
     }
 
@@ -122,8 +121,7 @@ watch(
 
       .action-menu-item-arrow-icon {
         display: block;
-        width: 1.6rem;
-        height: 1.6rem;
+        font-size: var(--action-menu-item-arrow-size, 1.6rem);
       }
     }
   }

package/app/components/02.molecules/action-menu/CONSUMER-STYLING.md

@@ -2,124 +2,138 @@
 
 ## 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`.
+All `--action-menu-*` tokens are the stable override surface. Action menus repeat across the UI
+(tables, cards, list rows), so setting them once globally is usually the right scope.
 
-### Trigger button
+> Changed 2026-09-27: this table previously listed `light-dark()` defaults that the component
+> never actually used. The values below are the real ones. The menu is a fixed light panel in
+> both colour schemes; give it a dark variant by overriding the tokens (see **Recipe** below).
+
+### Trigger button (resolved on `.action-menu`)
 
 | 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 |
+| `--action-menu-trigger-surface` | `transparent` | Trigger background (rest) |
+| `--action-menu-trigger-surface-hover` | `var(--slate-01)` | Trigger background on hover/focus |
+| `--action-menu-trigger-icon-size` | `2rem` | Trigger icon size (applied as `font-size`) |
+| `--action-menu-trigger-icon-color` | `var(--slate-07)` | Trigger icon colour |
 
-### Menu popover
+### Menu popover (resolved on `.action-menu`)
 
 | 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-block-distance` | `0.4rem` | Gap between trigger and menu |
+| `--action-menu-popover-background` | `var(--slate-00)` | Menu panel background |
+| `--action-menu-popover-border` | `0.1rem solid var(--slate-03)` | 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-shadow` | `0 0.4rem 1.6rem rgba(0, 0, 0, 0.1)` | Menu panel drop shadow |
 | `--action-menu-popover-transition-duration` | `200ms` | Open/close fade duration |
+| `--action-menu-item-divider` | `0.1rem solid var(--slate-02)` | Divider between list rows |
 
-### Menu items (`ActionMenuItemCore`)
+### Menu items (`ActionMenuItem`, resolved on `.action-menu-item`)
 
 | 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 |
+| `--action-menu-item-surface-hover` | `var(--slate-01)` | Row background on hover/focus |
+| `--action-menu-item-text-color` | `var(--slate-09)` | Label and icon colour |
+| `--action-menu-item-icon-size` | `2rem` | Leading icon box size; also its `font-size`, so a slotted `<Icon>` fills it |
+| `--action-menu-item-arrow-size` | `1.6rem` | Trailing arrow icon size |
+| `--action-menu-item-gap` | `1.2rem` | Space between icon, label and arrow |
+| `--action-menu-item-padding-inline` | `1.6rem` | Row horizontal padding |
+| `--action-menu-item-padding-block` | `1.2rem` | Row vertical padding |
+
+> Changed 2026-09-27: item `light-dark()` defaults replaced by their light values (older iPad
+> Safari lacks `light-dark()`), matching the already-light panel. Icon sizes are applied as
+> `font-size`; the old `width`/`height` on the trigger and arrow icons was silently overridden by
+> `@nuxt/icon`. `--action-menu-item-arrow-size` is new.
+
+Private (not public API): `--_trigger-size`, `--_popover-transition-duration`, `--_gap` and
+`--_icon-size` (each reused across several declarations; set the public token instead), and
+`--_anchor-name` (the per-instance CSS anchor set inline on the root).
 
 ---
 
-## 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.
+## State hooks
 
-```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);
+| Hook | When |
+|---|---|
+| `.action-menu-popover:popover-open` | Menu is open |
 
-  --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);
+Inner classes: `.action-menu-trigger`, `.action-menu-trigger-icon`, `.action-menu-popover`,
+`.action-menu-list`, `.action-menu-list-item`; on each item `.action-menu-item`,
+`.action-menu-item-icon`, `.action-menu-item-label`, `.action-menu-item-arrow`,
+`.action-menu-item-arrow-icon`.
 
-  --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;
-}
-```
+> Changed 2026-09-27: the item root class is `.action-menu-item` (was `.action-menu-item-core`,
+> renamed with the component).
 
 ---
 
-## Page-scoped overrides
+## Positioning
+
+The menu uses the Popover API plus CSS anchor positioning: it opens below the trigger,
+right-aligned, and flips above near the bottom of the viewport (`position-try-fallbacks:
+flip-block`). Browsers without anchor positioning still open the popover, but not anchored to the
+trigger.
 
-Override tokens for a specific section by scoping them under the page or layout wrapper.
-No `:deep()` is required (component styles are unscoped).
+---
+
+## Global theming
 
 ```css
-/* In the consuming page's unscoped <style> block */
-.admin-table {
-  .action-menu {
-    --action-menu-trigger-size: 2.8rem;
-    --action-menu-trigger-icon-size: 1.6rem;
-    --action-menu-popover-min-width: 16rem;
-    --action-menu-item-padding-block: 0.8rem;
-  }
+:where(html) {
+  --action-menu-trigger-border-radius: 0.4rem;
+  --action-menu-popover-border-radius: 0.6rem;
+  --action-menu-block-distance: 0.6rem;
 }
 ```
 
 ---
 
-## Per-instance overrides via styleClassPassthrough
+## Local overrides
 
-Use sparingly — prefer global or page-scoped CSS. When a single instance needs a distinct
-visual style, pass a modifier class:
+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`.
 
-```vue
-<ActionMenu
-  :style-class-passthrough="['danger-actions']"
->
-  ...
-</ActionMenu>
-```
+**Caveat:** the popover is a top-layer element, but it's still a DOM descendant of `.action-menu`,
+so tokens set on an ancestor still reach it.
+
+---
+
+## Recipe: dark-scheme menu
 
 ```css
-.action-menu.danger-actions {
-  --action-menu-trigger-icon-color: var(--color-danger);
-  --action-menu-trigger-surface-hover: light-dark(var(--red-01), var(--red-09));
-  --action-menu-item-surface-hover: light-dark(var(--red-01), var(--red-09));
-  --action-menu-item-text-color: light-dark(var(--red-09), var(--red-01));
-  --action-menu-item-divider: 0.1rem solid light-dark(var(--red-02), var(--red-08));
+.my-page {
+  --action-menu-trigger-surface-hover: light-dark(var(--slate-01), var(--slate-09));
+  --action-menu-trigger-icon-color: light-dark(var(--slate-07), var(--slate-03));
+  --action-menu-popover-background: light-dark(var(--slate-00), var(--slate-10));
+  --action-menu-popover-border: 0.1rem solid light-dark(var(--slate-03), var(--slate-07));
+  --action-menu-item-divider: 0.1rem solid light-dark(var(--slate-02), var(--slate-08));
+  --action-menu-item-surface-hover: light-dark(var(--slate-01), var(--slate-09));
+  --action-menu-item-text-color: light-dark(var(--slate-09), var(--slate-01));
 }
 ```
 
+`light-dark()` is fine in your own CSS if your supported browsers have it; the library just
+doesn't rely on it for its defaults.
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` on `ActionMenu` adds classes to the root `.action-menu`; on
+`ActionMenuItem` it adds them to the item root. Both are reactive after mount.
+
 ---
 
 ## Notes
 
-- `--action-menu-block-distance` accepts any valid `<length>`. Negative values will cause the
-  menu to overlap the trigger.
-- The menu opens **below** the trigger and right-aligns with it by default. It flips above
-  when near the bottom of the viewport (`position-try-fallbacks: flip-block`).
-- `--action-menu-popover-min-width` sets the floor — long labels will naturally expand the
-  menu wider. Set `width: max-content` on `.action-menu-popover` in a consumer override if
-  you want to suppress that.
-- The `--action-menu-item-*` tokens resolve on `.action-menu-item-core` elements, so they
-  take effect even when items are used in other contexts.
+- Negative `--action-menu-block-distance` values make the menu overlap the trigger.
+- `--action-menu-popover-min-width` is a floor; long labels widen the menu. Set
+  `width: max-content` on `.action-menu-popover` to change that.