vectis-ui 0.1.0 → 0.8.0

package/dist/components/VMenu/VMenu.d.ts

@@ -1,24 +1,4 @@
-import { MenuPlacement } from './context.js';
-/**
- * A menu of actions, opened by a button and closed as soon as one is chosen. It
- * follows the ARIA menu pattern, which is what tells a screen reader that these are
- * commands rather than links or options in a list.
- *
- * It rests on the browser's own popover support: the panel closes on a click outside
- * or on Escape without a line of code, and it positions itself in CSS against the
- * button that opened it — the browser knows which one, since that button names the
- * panel it opens.
- *
- * The JavaScript here is limited to what the platform does not do: keeping
- * `v-model:open` and the browser's own state in step, moving the focus into the panel
- * when it opens, and giving it back to the trigger when it closes. The keyboard inside
- * the panel — the arrows moving from one command to the next — lives in VMenuPanel.
- *
- * How far the focus goes in depends on how the menu was opened. Opened from the
- * keyboard it settles on the first command, ready to be chosen; opened with a mouse or
- * a finger it stops at the panel, so that nothing is picked out for someone who has
- * not asked for a choice yet — the arrows still enter the list from there.
- */
+import { MenuPlacement, MenuSize } from './context.js';
 interface MenuProps {
     /**
      * Where the panel opens relative to its trigger. The browser moves it to another
@@ -29,14 +9,15 @@ interface MenuProps {
      * How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it, so it is set
      * once on the menu as a whole.
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: MenuSize;
     /** Takes 4px off the height of every row, submenus included. */
     compact?: boolean;
     /**
-     * A width for the panel, given as any CSS length or keyword — `16rem`,
-     * `max-content`. It applies to the menu itself; submenus keep the default width.
+     * A width for the panel: a number is read as pixels, a string as any CSS length or
+     * keyword — `16rem`, `max-content`. It applies to the menu itself; submenus keep the
+     * default width.
      */
-    width?: string;
+    width?: number | string;
     /**
      * Stops the panel from being narrower than the button that opened it, while leaving
      * it free to grow wider for its content. Submenus are unaffected.
@@ -49,7 +30,7 @@ type __VLS_Props = MenuProps;
  * attributes telling assistive technology that a menu is attached to this button and
  * whether it is currently open.
  */
-type MenuTriggerProps = {
+export type MenuTriggerProps = {
     popovertarget: string;
     'aria-haspopup': 'menu';
     'aria-expanded': boolean;
@@ -66,20 +47,32 @@ type __VLS_Slots = {
     /** The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. */
     default(): unknown;
 };
+declare function openAtTrigger(): void;
 type __VLS_ModelProps = {
+    /**
+     * Whether the menu is showing. It starts closed and is fed BY the panel, so the browser's
+     * own dismissal — a click outside, Escape, choosing a command — writes back to it.
+     */
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Opens the menu at once, without waiting for the model to come round. */
+    show: typeof openAtTrigger;
+    /** Closes it at once, submenus included. */
+    close: () => void | undefined;
+    /** The panel element, for what neither of the two above covers. */
+    el: import('vue').ComputedRef<HTMLElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-    size: "sm" | "md" | "lg";
+    size: MenuSize;
     placement: MenuPlacement;
-    compact: boolean;
-    width: string;
     matchTrigger: boolean;
+    compact: boolean;
+    width: number | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/VMenu/VMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"VMenu.js","names":[],"sources":["../../../src/components/VMenu/VMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, provide, ref, useId, watch } from 'vue'\n\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuInvoker, menuKey } from './context'\nimport type { MenuPlacement } from './context'\nimport { isKeyboardFocus } from '../../utils/focus'\n\n// @a11y @core\n/**\n * A menu of actions, opened by a button and closed as soon as one is chosen. It\n * follows the ARIA menu pattern, which is what tells a screen reader that these are\n * commands rather than links or options in a list.\n *\n * It rests on the browser's own popover support: the panel closes on a click outside\n * or on Escape without a line of code, and it positions itself in CSS against the\n * button that opened it — the browser knows which one, since that button names the\n * panel it opens.\n *\n * The JavaScript here is limited to what the platform does not do: keeping\n * `v-model:open` and the browser's own state in step, moving the focus into the panel\n * when it opens, and giving it back to the trigger when it closes. The keyboard inside\n * the panel — the arrows moving from one command to the next — lives in VMenuPanel.\n *\n * How far the focus goes in depends on how the menu was opened. Opened from the\n * keyboard it settles on the first command, ready to be chosen; opened with a mouse or\n * a finger it stops at the panel, so that nothing is picked out for someone who has\n * not asked for a choice yet — the arrows still enter the list from there.\n */\ninterface MenuProps {\n  /**\n   * Where the panel opens relative to its trigger. The browser moves it to another\n   * side by itself when there is not enough room.\n   */\n  placement?: MenuPlacement\n  /**\n   * How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it, so it is set\n   * once on the menu as a whole.\n   */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height of every row, submenus included. */\n  compact?: boolean\n  /**\n   * A width for the panel, given as any CSS length or keyword — `16rem`,\n   * `max-content`. It applies to the menu itself; submenus keep the default width.\n   */\n  width?: string\n  /**\n   * Stops the panel from being narrower than the button that opened it, while leaving\n   * it free to grow wider for its content. Submenus are unaffected.\n   */\n  matchTrigger?: boolean\n}\n\n// Deliberately not assigned to a variable: the template reads the props directly.\nwithDefaults(defineProps<MenuProps>(), {\n  placement: 'bottom-start',\n  size: 'sm',\n  compact: false,\n  width: undefined,\n  matchTrigger: false,\n})\n\nconst open = defineModel<boolean>('open', { default: false })\n\n/**\n * What the trigger has to carry: the link to the panel it opens, and the two\n * attributes telling assistive technology that a menu is attached to this button and\n * whether it is currently open.\n */\ntype MenuTriggerProps = {\n  popovertarget: string\n  'aria-haspopup': 'menu'\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\ndefineSlots<{\n  /**\n   * The button that opens the menu. Bind the `triggerProps` it receives onto it —\n   * that is what wires the two together.\n   */\n  trigger(props: { triggerProps: MenuTriggerProps }): unknown\n  /** The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. */\n  default(): unknown\n}>()\n\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\nconst shown = ref(false)\n\nconst triggerProps = computed<MenuTriggerProps>(() => ({\n  popovertarget: menuId,\n  'aria-haspopup': 'menu',\n  'aria-expanded': open.value,\n  'aria-controls': menuId,\n}))\n\n// Closing this panel closes every submenu with it: they are rendered inside it, and\n// the browser closes a stack of popovers from the outside in.\nprovide(menuKey, { closeAll: () => panelRef.value?.hide() })\n\n// @a11y — the focus half of the bridge: into the panel when it opens, back to the\n// trigger when it closes. Keeping the state in step alone would leave a keyboard user\n// stranded at the top of the page every time a menu opened or closed.\n//\n// WHERE it lands in the panel is the whole question, and the browser is the one that\n// answers it. In a menu the focus IS the highlight (see the rule in VMenuItem), so\n// taking the first item singles out a command — which is what someone arriving on the\n// arrows wants, and what someone who has just clicked never asked for. `:focus-visible`\n// is exactly that distinction, read off whatever holds the focus at this instant: the\n// trigger, since opening a popover through `popovertarget` does not move the focus.\n//\n// The pointer branch focuses the PANEL rather than nothing at all, and that is\n// structural: every key the menu answers to is listened for on the panel element, so\n// focus left outside it — on a trigger that is a DOM sibling — would silence the arrows,\n// Home/End and the Tab that closes the menu. Both ways of being wrong are mild and\n// symmetric: a misread pointer costs one extra keystroke, a misread keyboard gives back\n// the older behaviour.\nfunction onToggle(value: boolean) {\n  shown.value = value\n  open.value = value\n  if (value) {\n    if (isKeyboardFocus(document.activeElement)) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n  } else {\n    // The browser's own dismissal — a click outside, Escape — leaves the focus\n    // nowhere, on the page body. Only then is it handed back to the trigger: if the\n    // focus has already moved somewhere else deliberately, it must be left alone.\n    const active = document.activeElement\n    if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n      menuInvoker(menuId)?.focus()\n    }\n  }\n}\n\n// Opening and closing from the model. The guard is what keeps the two directions from\n// chasing each other: a menu the browser has just closed already reports it here.\nwatch(open, (value) => {\n  if (value === shown.value) return\n  if (value) panelRef.value?.show()\n  else panelRef.value?.hide()\n})\n\n// @ssr — a watcher does not run during the server render, so a menu asked to be open\n// from the start would never be told to open. Replaying the initial state on mount is\n// what covers that case.\nonMounted(() => {\n  if (open.value) panelRef.value?.show()\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    :placement=\"placement\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :width=\"width\"\n    :match-trigger=\"matchTrigger\"\n    @toggle=\"onToggle\"\n  >\n    <slot />\n  </VMenuPanel>\n</template>\n"],"mappings":""}
+{"version":3,"file":"VMenu.js","names":[],"sources":["../../../src/components/VMenu/VMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A menu of actions, opened by a button and closed as soon as one is chosen. It follows the\n * ARIA menu pattern, which is what tells a screen reader these are commands rather than\n * links or options.\n *\n * It rests on `popover=\"auto\"`: the panel light-dismisses without a line of code and\n * positions itself in CSS against its `popovertarget` invoker, which is its implicit anchor.\n *\n * The JS covers only what the platform does not — keeping `v-model:open` in step, moving\n * focus into the panel and handing it back to the trigger. The keyboard inside the panel\n * lives in VMenuPanel.\n *\n * HOW FAR the focus goes in depends on how the menu was opened: from the keyboard it settles\n * on the first command, ready to be chosen; by pointer it stops at the panel, so nothing is\n * singled out for someone who has not asked for a choice yet. The arrows still enter the\n * list from there.\n */\n\nimport { computed, provide, ref, useId } from 'vue'\n\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuInvoker, menuKey } from './context'\nimport type { MenuPlacement, MenuSize } from './context'\nimport { usePopoverModel } from '../../composables/usePopover'\nimport { isKeyboardFocus } from '../../utils/focus'\n\ninterface MenuProps {\n  /**\n   * Where the panel opens relative to its trigger. The browser moves it to another\n   * side by itself when there is not enough room.\n   */\n  placement?: MenuPlacement\n  /**\n   * How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it, so it is set\n   * once on the menu as a whole.\n   */\n  size?: MenuSize\n  /** Takes 4px off the height of every row, submenus included. */\n  compact?: boolean\n  /**\n   * A width for the panel: a number is read as pixels, a string as any CSS length or\n   * keyword — `16rem`, `max-content`. It applies to the menu itself; submenus keep the\n   * default width.\n   */\n  width?: number | string\n  /**\n   * Stops the panel from being narrower than the button that opened it, while leaving\n   * it free to grow wider for its content. Submenus are unaffected.\n   */\n  matchTrigger?: boolean\n}\n\n// Deliberately not assigned to a variable: the template reads the props directly.\nwithDefaults(defineProps<MenuProps>(), {\n  placement: 'bottom-start',\n  size: 'sm',\n  compact: false,\n  width: undefined,\n  matchTrigger: false,\n})\n\n/**\n * Whether the menu is showing. It starts closed and is fed BY the panel, so the browser's\n * own dismissal — a click outside, Escape, choosing a command — writes back to it.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\n/**\n * What the trigger has to carry: the link to the panel it opens, and the two\n * attributes telling assistive technology that a menu is attached to this button and\n * whether it is currently open.\n */\nexport type MenuTriggerProps = {\n  popovertarget: string\n  'aria-haspopup': 'menu'\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\ndefineSlots<{\n  /**\n   * The button that opens the menu. Bind the `triggerProps` it receives onto it —\n   * that is what wires the two together.\n   */\n  trigger(props: { triggerProps: MenuTriggerProps }): unknown\n  /** The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. */\n  default(): unknown\n}>()\n\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\n\nconst triggerProps = computed<MenuTriggerProps>(() => ({\n  popovertarget: menuId,\n  'aria-haspopup': 'menu',\n  'aria-expanded': open.value,\n  'aria-controls': menuId,\n}))\n\n// Closing this panel closes every submenu with it: they are rendered inside it, and\n// the browser closes a stack of popovers from the outside in.\nprovide(menuKey, { closeAll: () => panelRef.value?.close() })\n\n// @a11y — the focus half of the bridge: into the panel when it opens, back to the\n// trigger when it closes. Keeping the state in step alone would leave a keyboard user\n// stranded at the top of the page every time a menu opened or closed.\n//\n// WHERE it lands in the panel is the whole question, and the browser is the one that\n// answers it. In a menu the focus IS the highlight (see the rule in VMenuItem), so\n// taking the first item singles out a command — which is what someone arriving on the\n// arrows wants, and what someone who has just clicked never asked for. `:focus-visible`\n// is exactly that distinction, read off whatever holds the focus at this instant: the\n// trigger, since opening a popover through `popovertarget` does not move the focus.\n//\n// The pointer branch focuses the PANEL rather than nothing at all, and that is\n// structural: every key the menu answers to is listened for on the panel element, so\n// focus left outside it — on a trigger that is a DOM sibling — would silence the arrows,\n// Home/End and the Tab that closes the menu. Both ways of being wrong are mild and\n// symmetric: a misread pointer costs one extra keystroke, a misread keyboard gives back\n// the older behaviour.\nfunction onToggle(value: boolean) {\n  open.value = value\n  if (value) {\n    if (isKeyboardFocus(document.activeElement)) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n  } else {\n    // The browser's own dismissal — a click outside, Escape — leaves the focus\n    // nowhere, on the page body. Only then is it handed back to the trigger: if the\n    // focus has already moved somewhere else deliberately, it must be left alone.\n    const active = document.activeElement\n    if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n      menuInvoker(menuId)?.focus()\n    }\n  }\n}\n\n/*\n * TRAP — every opening that does not come from a click on the trigger has to NAME that\n * trigger. A popover opened through `popovertarget` takes its invoker as its implicit\n * anchor; opened from code with no `source`, it has no anchor at all and the browser\n * paints it at the corner of the viewport. Nothing errors, and the panel is otherwise\n * perfectly functional there.\n *\n * The invoker is searched for rather than held: it is rendered by the consumer, in a\n * slot this component cannot reach into.\n */\nfunction openAtTrigger() {\n  panelRef.value?.show(menuInvoker(menuId) ?? undefined)\n}\n\n// The open state is the panel's, read back from it rather than copied here: the panel has\n// already recorded the browser's answer by the time it reports the toggle.\nusePopoverModel(\n  open,\n  () => panelRef.value?.shown ?? false,\n  openAtTrigger,\n  () => panelRef.value?.close(),\n)\n\n/*\n * The same trio VDialog, VDialogAlert and VPopover answer. It is a relay onto the panel,\n * which has held it all along: opening a menu from code was otherwise only possible through\n * the model, which inserts a tick where a focus move cannot afford one.\n */\ndefineExpose({\n  /** Opens the menu at once, without waiting for the model to come round. */\n  show: openAtTrigger,\n  /** Closes it at once, submenus included. */\n  close: () => panelRef.value?.close(),\n  /** The panel element, for what neither of the two above covers. */\n  el: computed(() => panelRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    :placement=\"placement\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :width=\"width\"\n    :match-trigger=\"matchTrigger\"\n    @toggle=\"onToggle\"\n  >\n    <slot />\n  </VMenuPanel>\n</template>\n"],"mappings":""}

package/dist/components/VMenu/VMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,12 @@
-import { menuInvoker as e, menuKey as t } from "./context.js";
-import n from "./VMenuPanel.js";
-import { isKeyboardFocus as r } from "../../utils/focus.js";
-import { Fragment as i, computed as a, createElementBlock as o, createVNode as s, defineComponent as c, mergeModels as l, onMounted as u, openBlock as d, provide as f, ref as p, renderSlot as m, unref as h, useId as g, useModel as _, watch as v, withCtx as y } from "vue";
+import { usePopoverModel as e } from "../../composables/usePopover.js";
+import { isKeyboardFocus as t } from "../../utils/focus.js";
+import { menuInvoker as n, menuKey as r } from "./context.js";
+import i from "./VMenuPanel.js";
+import { Fragment as a, computed as o, createElementBlock as s, createVNode as c, defineComponent as l, mergeModels as u, openBlock as d, provide as f, ref as p, renderSlot as m, unref as h, useId as g, useModel as _, withCtx as v } from "vue";
 //#region src/components/VMenu/VMenu.vue?vue&type=script&setup=true&lang.ts
-var b = /*@__PURE__*/ c({
+var y = /*@__PURE__*/ l({
 	__name: "VMenu",
-	props: /*@__PURE__*/ l({
+	props: /*@__PURE__*/ u({
 		placement: { default: "bottom-start" },
 		size: { default: "sm" },
 		compact: {
@@ -25,37 +26,40 @@ var b = /*@__PURE__*/ c({
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(c) {
-		let l = _(c, "open"), b = p(null), x = g(), S = p(!1), C = a(() => ({
+	setup(l, { expose: u }) {
+		let y = _(l, "open"), b = p(null), x = g(), S = o(() => ({
 			popovertarget: x,
 			"aria-haspopup": "menu",
-			"aria-expanded": l.value,
+			"aria-expanded": y.value,
 			"aria-controls": x
 		}));
-		f(t, { closeAll: () => b.value?.hide() });
-		function w(t) {
-			if (S.value = t, l.value = t, t) r(document.activeElement) ? b.value?.focusFirst() : b.value?.focusPanel();
+		f(r, { closeAll: () => b.value?.close() });
+		function C(e) {
+			if (y.value = e, e) t(document.activeElement) ? b.value?.focusFirst() : b.value?.focusPanel();
 			else {
-				let t = document.activeElement;
-				(!t || t === document.body || b.value?.el?.contains(t)) && e(x)?.focus();
+				let e = document.activeElement;
+				(!e || e === document.body || b.value?.el?.contains(e)) && n(x)?.focus();
 			}
 		}
-		return v(l, (e) => {
-			e !== S.value && (e ? b.value?.show() : b.value?.hide());
-		}), u(() => {
-			l.value && b.value?.show();
-		}), (e, t) => (d(), o(i, null, [m(e.$slots, "trigger", { triggerProps: C.value }), s(n, {
+		function w() {
+			b.value?.show(n(x) ?? void 0);
+		}
+		return e(y, () => b.value?.shown ?? !1, w, () => b.value?.close()), u({
+			show: w,
+			close: () => b.value?.close(),
+			el: o(() => b.value?.el ?? null)
+		}), (e, t) => (d(), s(a, null, [m(e.$slots, "trigger", { triggerProps: S.value }), c(i, {
 			id: h(x),
 			ref_key: "panelRef",
 			ref: b,
-			placement: c.placement,
-			size: c.size,
-			compact: c.compact,
-			width: c.width,
-			"match-trigger": c.matchTrigger,
-			onToggle: w
+			placement: l.placement,
+			size: l.size,
+			compact: l.compact,
+			width: l.width,
+			"match-trigger": l.matchTrigger,
+			onToggle: C
 		}, {
-			default: y(() => [m(e.$slots, "default")]),
+			default: v(() => [m(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
@@ -68,6 +72,6 @@ var b = /*@__PURE__*/ c({
 	}
 });
 //#endregion
-export { b as default };
+export { y as default };
 
 //# sourceMappingURL=VMenu.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VMenu/VMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMenu/VMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, provide, ref, useId, watch } from 'vue'\n\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuInvoker, menuKey } from './context'\nimport type { MenuPlacement } from './context'\nimport { isKeyboardFocus } from '../../utils/focus'\n\n// @a11y @core\n/**\n * A menu of actions, opened by a button and closed as soon as one is chosen. It\n * follows the ARIA menu pattern, which is what tells a screen reader that these are\n * commands rather than links or options in a list.\n *\n * It rests on the browser's own popover support: the panel closes on a click outside\n * or on Escape without a line of code, and it positions itself in CSS against the\n * button that opened it — the browser knows which one, since that button names the\n * panel it opens.\n *\n * The JavaScript here is limited to what the platform does not do: keeping\n * `v-model:open` and the browser's own state in step, moving the focus into the panel\n * when it opens, and giving it back to the trigger when it closes. The keyboard inside\n * the panel — the arrows moving from one command to the next — lives in VMenuPanel.\n *\n * How far the focus goes in depends on how the menu was opened. Opened from the\n * keyboard it settles on the first command, ready to be chosen; opened with a mouse or\n * a finger it stops at the panel, so that nothing is picked out for someone who has\n * not asked for a choice yet — the arrows still enter the list from there.\n */\ninterface MenuProps {\n  /**\n   * Where the panel opens relative to its trigger. The browser moves it to another\n   * side by itself when there is not enough room.\n   */\n  placement?: MenuPlacement\n  /**\n   * How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it, so it is set\n   * once on the menu as a whole.\n   */\n  size?: 'sm' | 'md' | 'lg'\n  /** Takes 4px off the height of every row, submenus included. */\n  compact?: boolean\n  /**\n   * A width for the panel, given as any CSS length or keyword — `16rem`,\n   * `max-content`. It applies to the menu itself; submenus keep the default width.\n   */\n  width?: string\n  /**\n   * Stops the panel from being narrower than the button that opened it, while leaving\n   * it free to grow wider for its content. Submenus are unaffected.\n   */\n  matchTrigger?: boolean\n}\n\n// Deliberately not assigned to a variable: the template reads the props directly.\nwithDefaults(defineProps<MenuProps>(), {\n  placement: 'bottom-start',\n  size: 'sm',\n  compact: false,\n  width: undefined,\n  matchTrigger: false,\n})\n\nconst open = defineModel<boolean>('open', { default: false })\n\n/**\n * What the trigger has to carry: the link to the panel it opens, and the two\n * attributes telling assistive technology that a menu is attached to this button and\n * whether it is currently open.\n */\ntype MenuTriggerProps = {\n  popovertarget: string\n  'aria-haspopup': 'menu'\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\ndefineSlots<{\n  /**\n   * The button that opens the menu. Bind the `triggerProps` it receives onto it —\n   * that is what wires the two together.\n   */\n  trigger(props: { triggerProps: MenuTriggerProps }): unknown\n  /** The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. */\n  default(): unknown\n}>()\n\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\nconst shown = ref(false)\n\nconst triggerProps = computed<MenuTriggerProps>(() => ({\n  popovertarget: menuId,\n  'aria-haspopup': 'menu',\n  'aria-expanded': open.value,\n  'aria-controls': menuId,\n}))\n\n// Closing this panel closes every submenu with it: they are rendered inside it, and\n// the browser closes a stack of popovers from the outside in.\nprovide(menuKey, { closeAll: () => panelRef.value?.hide() })\n\n// @a11y — the focus half of the bridge: into the panel when it opens, back to the\n// trigger when it closes. Keeping the state in step alone would leave a keyboard user\n// stranded at the top of the page every time a menu opened or closed.\n//\n// WHERE it lands in the panel is the whole question, and the browser is the one that\n// answers it. In a menu the focus IS the highlight (see the rule in VMenuItem), so\n// taking the first item singles out a command — which is what someone arriving on the\n// arrows wants, and what someone who has just clicked never asked for. `:focus-visible`\n// is exactly that distinction, read off whatever holds the focus at this instant: the\n// trigger, since opening a popover through `popovertarget` does not move the focus.\n//\n// The pointer branch focuses the PANEL rather than nothing at all, and that is\n// structural: every key the menu answers to is listened for on the panel element, so\n// focus left outside it — on a trigger that is a DOM sibling — would silence the arrows,\n// Home/End and the Tab that closes the menu. Both ways of being wrong are mild and\n// symmetric: a misread pointer costs one extra keystroke, a misread keyboard gives back\n// the older behaviour.\nfunction onToggle(value: boolean) {\n  shown.value = value\n  open.value = value\n  if (value) {\n    if (isKeyboardFocus(document.activeElement)) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n  } else {\n    // The browser's own dismissal — a click outside, Escape — leaves the focus\n    // nowhere, on the page body. Only then is it handed back to the trigger: if the\n    // focus has already moved somewhere else deliberately, it must be left alone.\n    const active = document.activeElement\n    if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n      menuInvoker(menuId)?.focus()\n    }\n  }\n}\n\n// Opening and closing from the model. The guard is what keeps the two directions from\n// chasing each other: a menu the browser has just closed already reports it here.\nwatch(open, (value) => {\n  if (value === shown.value) return\n  if (value) panelRef.value?.show()\n  else panelRef.value?.hide()\n})\n\n// @ssr — a watcher does not run during the server render, so a menu asked to be open\n// from the start would never be told to open. Replaying the initial state on mount is\n// what covers that case.\nonMounted(() => {\n  if (open.value) panelRef.value?.show()\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    :placement=\"placement\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :width=\"width\"\n    :match-trigger=\"matchTrigger\"\n    @toggle=\"onToggle\"\n  >\n    <slot />\n  </VMenuPanel>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DA,IAAM,IAAO,EAAoB,GAAC,MAA0B,GAwBtD,IAAW,EAA4C,IAAI,GAC3D,IAAS,EAAM,GACf,IAAQ,EAAI,EAAK,GAEjB,IAAe,SAAkC;GACrD,eAAe;GACf,iBAAiB;GACjB,iBAAiB,EAAK;GACtB,iBAAiB;EACnB,EAAE;EAIF,EAAQ,GAAS,EAAE,gBAAgB,EAAS,OAAO,KAAK,EAAE,CAAC;EAmB3D,SAAS,EAAS,GAAgB;GAGhC,IAFA,EAAM,QAAQ,GACd,EAAK,QAAQ,GACT,GACF,AAAI,EAAgB,SAAS,aAAa,IAAG,EAAS,OAAO,WAAW,IACnE,EAAS,OAAO,WAAW;QAC3B;IAIL,IAAM,IAAS,SAAS;IACxB,CAAI,CAAC,KAAU,MAAW,SAAS,QAAQ,EAAS,OAAO,IAAI,SAAS,CAAM,MAC5E,EAAY,CAAM,CAAC,EAAE,MAAM;GAE/B;EACF;SAIA,EAAM,IAAO,MAAU;GACjB,MAAU,EAAM,UAChB,IAAO,EAAS,OAAO,KAAK,IAC3B,EAAS,OAAO,KAAK;EAC5B,CAAC,GAKD,QAAgB;GACd,AAAI,EAAK,SAAO,EAAS,OAAO,KAAK;EACvC,CAAC,+BAIC,EAAqD,EAAA,QAAA,WAAA,EAA/B,cAAe,EAAA,MAAY,CAAA,GACjD,EAWa,GAAA;GAVV,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACH,WAAW,EAAA;GACX,MAAM,EAAA;GACN,SAAS,EAAA;GACT,OAAO,EAAA;GACP,iBAAe,EAAA;GACP;;oBAED,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"VMenu.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMenu/VMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A menu of actions, opened by a button and closed as soon as one is chosen. It follows the\n * ARIA menu pattern, which is what tells a screen reader these are commands rather than\n * links or options.\n *\n * It rests on `popover=\"auto\"`: the panel light-dismisses without a line of code and\n * positions itself in CSS against its `popovertarget` invoker, which is its implicit anchor.\n *\n * The JS covers only what the platform does not — keeping `v-model:open` in step, moving\n * focus into the panel and handing it back to the trigger. The keyboard inside the panel\n * lives in VMenuPanel.\n *\n * HOW FAR the focus goes in depends on how the menu was opened: from the keyboard it settles\n * on the first command, ready to be chosen; by pointer it stops at the panel, so nothing is\n * singled out for someone who has not asked for a choice yet. The arrows still enter the\n * list from there.\n */\n\nimport { computed, provide, ref, useId } from 'vue'\n\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuInvoker, menuKey } from './context'\nimport type { MenuPlacement, MenuSize } from './context'\nimport { usePopoverModel } from '../../composables/usePopover'\nimport { isKeyboardFocus } from '../../utils/focus'\n\ninterface MenuProps {\n  /**\n   * Where the panel opens relative to its trigger. The browser moves it to another\n   * side by itself when there is not enough room.\n   */\n  placement?: MenuPlacement\n  /**\n   * How tall the rows are: 32, 40 or 48 pixels. Submenus inherit it, so it is set\n   * once on the menu as a whole.\n   */\n  size?: MenuSize\n  /** Takes 4px off the height of every row, submenus included. */\n  compact?: boolean\n  /**\n   * A width for the panel: a number is read as pixels, a string as any CSS length or\n   * keyword — `16rem`, `max-content`. It applies to the menu itself; submenus keep the\n   * default width.\n   */\n  width?: number | string\n  /**\n   * Stops the panel from being narrower than the button that opened it, while leaving\n   * it free to grow wider for its content. Submenus are unaffected.\n   */\n  matchTrigger?: boolean\n}\n\n// Deliberately not assigned to a variable: the template reads the props directly.\nwithDefaults(defineProps<MenuProps>(), {\n  placement: 'bottom-start',\n  size: 'sm',\n  compact: false,\n  width: undefined,\n  matchTrigger: false,\n})\n\n/**\n * Whether the menu is showing. It starts closed and is fed BY the panel, so the browser's\n * own dismissal — a click outside, Escape, choosing a command — writes back to it.\n */\nconst open = defineModel<boolean>('open', { default: false })\n\n/**\n * What the trigger has to carry: the link to the panel it opens, and the two\n * attributes telling assistive technology that a menu is attached to this button and\n * whether it is currently open.\n */\nexport type MenuTriggerProps = {\n  popovertarget: string\n  'aria-haspopup': 'menu'\n  'aria-expanded': boolean\n  'aria-controls': string\n}\n\ndefineSlots<{\n  /**\n   * The button that opens the menu. Bind the `triggerProps` it receives onto it —\n   * that is what wires the two together.\n   */\n  trigger(props: { triggerProps: MenuTriggerProps }): unknown\n  /** The contents of the menu: VMenuItem, VMenuGroup and VMenuSeparator. */\n  default(): unknown\n}>()\n\nconst panelRef = ref<InstanceType<typeof VMenuPanel> | null>(null)\nconst menuId = useId()\n\nconst triggerProps = computed<MenuTriggerProps>(() => ({\n  popovertarget: menuId,\n  'aria-haspopup': 'menu',\n  'aria-expanded': open.value,\n  'aria-controls': menuId,\n}))\n\n// Closing this panel closes every submenu with it: they are rendered inside it, and\n// the browser closes a stack of popovers from the outside in.\nprovide(menuKey, { closeAll: () => panelRef.value?.close() })\n\n// @a11y — the focus half of the bridge: into the panel when it opens, back to the\n// trigger when it closes. Keeping the state in step alone would leave a keyboard user\n// stranded at the top of the page every time a menu opened or closed.\n//\n// WHERE it lands in the panel is the whole question, and the browser is the one that\n// answers it. In a menu the focus IS the highlight (see the rule in VMenuItem), so\n// taking the first item singles out a command — which is what someone arriving on the\n// arrows wants, and what someone who has just clicked never asked for. `:focus-visible`\n// is exactly that distinction, read off whatever holds the focus at this instant: the\n// trigger, since opening a popover through `popovertarget` does not move the focus.\n//\n// The pointer branch focuses the PANEL rather than nothing at all, and that is\n// structural: every key the menu answers to is listened for on the panel element, so\n// focus left outside it — on a trigger that is a DOM sibling — would silence the arrows,\n// Home/End and the Tab that closes the menu. Both ways of being wrong are mild and\n// symmetric: a misread pointer costs one extra keystroke, a misread keyboard gives back\n// the older behaviour.\nfunction onToggle(value: boolean) {\n  open.value = value\n  if (value) {\n    if (isKeyboardFocus(document.activeElement)) panelRef.value?.focusFirst()\n    else panelRef.value?.focusPanel()\n  } else {\n    // The browser's own dismissal — a click outside, Escape — leaves the focus\n    // nowhere, on the page body. Only then is it handed back to the trigger: if the\n    // focus has already moved somewhere else deliberately, it must be left alone.\n    const active = document.activeElement\n    if (!active || active === document.body || panelRef.value?.el?.contains(active)) {\n      menuInvoker(menuId)?.focus()\n    }\n  }\n}\n\n/*\n * TRAP — every opening that does not come from a click on the trigger has to NAME that\n * trigger. A popover opened through `popovertarget` takes its invoker as its implicit\n * anchor; opened from code with no `source`, it has no anchor at all and the browser\n * paints it at the corner of the viewport. Nothing errors, and the panel is otherwise\n * perfectly functional there.\n *\n * The invoker is searched for rather than held: it is rendered by the consumer, in a\n * slot this component cannot reach into.\n */\nfunction openAtTrigger() {\n  panelRef.value?.show(menuInvoker(menuId) ?? undefined)\n}\n\n// The open state is the panel's, read back from it rather than copied here: the panel has\n// already recorded the browser's answer by the time it reports the toggle.\nusePopoverModel(\n  open,\n  () => panelRef.value?.shown ?? false,\n  openAtTrigger,\n  () => panelRef.value?.close(),\n)\n\n/*\n * The same trio VDialog, VDialogAlert and VPopover answer. It is a relay onto the panel,\n * which has held it all along: opening a menu from code was otherwise only possible through\n * the model, which inserts a tick where a focus move cannot afford one.\n */\ndefineExpose({\n  /** Opens the menu at once, without waiting for the model to come round. */\n  show: openAtTrigger,\n  /** Closes it at once, submenus included. */\n  close: () => panelRef.value?.close(),\n  /** The panel element, for what neither of the two above covers. */\n  el: computed(() => panelRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <slot name=\"trigger\" :trigger-props=\"triggerProps\" />\n  <VMenuPanel\n    :id=\"menuId\"\n    ref=\"panelRef\"\n    :placement=\"placement\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :width=\"width\"\n    :match-trigger=\"matchTrigger\"\n    @toggle=\"onToggle\"\n  >\n    <slot />\n  </VMenuPanel>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEA,IAAM,IAAO,EAAoB,GAAC,MAA0B,GAwBtD,IAAW,EAA4C,IAAI,GAC3D,IAAS,EAAM,GAEf,IAAe,SAAkC;GACrD,eAAe;GACf,iBAAiB;GACjB,iBAAiB,EAAK;GACtB,iBAAiB;EACnB,EAAE;EAIF,EAAQ,GAAS,EAAE,gBAAgB,EAAS,OAAO,MAAM,EAAE,CAAC;EAmB5D,SAAS,EAAS,GAAgB;GAEhC,IADA,EAAK,QAAQ,GACT,GACF,AAAI,EAAgB,SAAS,aAAa,IAAG,EAAS,OAAO,WAAW,IACnE,EAAS,OAAO,WAAW;QAC3B;IAIL,IAAM,IAAS,SAAS;IACxB,CAAI,CAAC,KAAU,MAAW,SAAS,QAAQ,EAAS,OAAO,IAAI,SAAS,CAAM,MAC5E,EAAY,CAAM,CAAC,EAAE,MAAM;GAE/B;EACF;EAYA,SAAS,IAAgB;GACvB,EAAS,OAAO,KAAK,EAAY,CAAM,KAAK,KAAA,CAAS;EACvD;SAIA,EACE,SACM,EAAS,OAAO,SAAS,IAC/B,SACM,EAAS,OAAO,MAAM,CAC9B,GAOA,EAAa;GAEX,MAAM;GAEN,aAAa,EAAS,OAAO,MAAM;GAEnC,IAAI,QAAe,EAAS,OAAO,MAAM,IAAI;EAC/C,CAAC,+BAIC,EAAqD,EAAA,QAAA,WAAA,EAA/B,cAAe,EAAA,MAAY,CAAA,GACjD,EAWa,GAAA;GAVV,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACH,WAAW,EAAA;GACX,MAAM,EAAA;GACN,SAAS,EAAA;GACT,OAAO,EAAA;GACP,iBAAe,EAAA;GACP;;oBAED,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/VMenu/VMenuGroup.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-menu-group{gap:var(--vectis-space-1);flex-direction:column;display:flex}.v-menu-group-label{min-height:var(--control-height);padding:var(--vectis-space-1) var(--control-padding-inline);font-size:var(--vectis-text-overline-size);font-weight:var(--vectis-text-overline-weight);letter-spacing:var(--vectis-text-overline-tracking);color:var(--vectis-color-text-muted);align-items:center;display:flex}}
+@layer vectis.components{.v-menu-group{gap:var(--vectis-space-1);flex-direction:column;display:flex}}

package/dist/components/VMenu/VMenuGroup.d.ts

@@ -1,17 +1,21 @@
-/**
- * A named section inside a menu — "Sort by", "Recent files". The name is announced as
- * the group's label rather than being read as one more item, and it is plain text: it
- * cannot be chosen, and the arrow keys walk straight past it.
- */
 interface MenuGroupProps {
-    /** The name of the section. It is a heading, not a command: nothing happens on click. */
-    label: string;
+    /**
+     * The name of the section, replaced by the `#label` slot. One of the two is REQUIRED:
+     * it is what names the group, and a section named by neither points its
+     * `aria-labelledby` at an empty element. It is a heading, not a command: nothing
+     * happens on click.
+     */
+    label?: string;
 }
 type __VLS_Slots = {
     /** The commands belonging to this section. */
     default(): unknown;
+    /** A name made of markup, replacing the `label` prop. */
+    label?(): unknown;
 };
-declare const __VLS_base: import('vue').DefineComponent<MenuGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MenuGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import('vue').DefineComponent<MenuGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MenuGroupProps> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/VMenu/VMenuGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"VMenuGroup.js","names":[],"sources":["../../../src/components/VMenu/VMenuGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n// @a11y @ssr — the whole script is a single generated id, and it exists only to tie\n// the group to its own label. It matches between server and client by construction,\n// Vue's `useId` guaranteeing exactly that.\n/**\n * A named section inside a menu — \"Sort by\", \"Recent files\". The name is announced as\n * the group's label rather than being read as one more item, and it is plain text: it\n * cannot be chosen, and the arrow keys walk straight past it.\n */\ninterface MenuGroupProps {\n  /** The name of the section. It is a heading, not a command: nothing happens on click. */\n  label: string\n}\n\ndefineProps<MenuGroupProps>()\n\ndefineSlots<{\n  /** The commands belonging to this section. */\n  default(): unknown\n}>()\n\nconst labelId = useId()\n</script>\n\n<template>\n  <div role=\"group\" class=\"v-menu-group\" :aria-labelledby=\"labelId\">\n    <span :id=\"labelId\" class=\"v-menu-group-label\">{{ label }}</span>\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-menu-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  /* The section heading takes the overline type role, without forcing capitals: how\n     the label is written is the consumer's decision.\n\n     Its indent and its height are the rows' own recipe, read from the same inherited\n     variables, so a heading occupies exactly the height of a row — compact included —\n     and the vertical rhythm of the list is not broken by it. The type is the one thing\n     staying outside that scale, which is why the text has to be centred vertically by\n     hand. */\n  .v-menu-group-label {\n    display: flex;\n    align-items: center;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VMenuGroup.js","names":[],"sources":["../../../src/components/VMenu/VMenuGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @ssr — the whole script is a single generated id, and it exists only to tie\n// the group to its own label. It matches between server and client by construction,\n// Vue's `useId` guaranteeing exactly that.\n/**\n * A named section inside a menu — \"Sort by\", \"Recent files\". The name is announced as\n * the group's label rather than being read as one more item, and it is plain text: it\n * cannot be chosen, and the arrow keys walk straight past it.\n */\n\nimport { useId } from 'vue'\n\ninterface MenuGroupProps {\n  /**\n   * The name of the section, replaced by the `#label` slot. One of the two is REQUIRED:\n   * it is what names the group, and a section named by neither points its\n   * `aria-labelledby` at an empty element. It is a heading, not a command: nothing\n   * happens on click.\n   */\n  label?: string\n}\n\nwithDefaults(defineProps<MenuGroupProps>(), {\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The commands belonging to this section. */\n  default(): unknown\n  /** A name made of markup, replacing the `label` prop. */\n  label?(): unknown\n}>()\n\nconst labelId = useId()\n</script>\n\n<template>\n  <div role=\"group\" class=\"v-menu-group\" :aria-labelledby=\"labelId\">\n    <span :id=\"labelId\" class=\"v-menu-group-label v-group-label\"\n      ><slot name=\"label\">{{ label }}</slot></span\n    >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-menu-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VMenu/VMenuGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,21 +1,21 @@
-import { createElementBlock as e, createElementVNode as t, defineComponent as n, openBlock as r, renderSlot as i, toDisplayString as a, unref as o, useId as s } from "vue";
+import { createElementBlock as e, createElementVNode as t, createTextVNode as n, defineComponent as r, openBlock as i, renderSlot as a, toDisplayString as o, unref as s, useId as c } from "vue";
 //#region src/components/VMenu/VMenuGroup.vue?vue&type=script&setup=true&lang.ts
-var c = ["aria-labelledby"], l = ["id"], u = /*@__PURE__*/ n({
+var l = ["aria-labelledby"], u = ["id"], d = /*@__PURE__*/ r({
 	__name: "VMenuGroup",
-	props: { label: {} },
-	setup(n) {
-		let u = s();
-		return (s, d) => (r(), e("div", {
+	props: { label: { default: void 0 } },
+	setup(r) {
+		let d = c();
+		return (c, f) => (i(), e("div", {
 			role: "group",
 			class: "v-menu-group",
-			"aria-labelledby": o(u)
+			"aria-labelledby": s(d)
 		}, [t("span", {
-			id: o(u),
-			class: "v-menu-group-label"
-		}, a(n.label), 9, l), i(s.$slots, "default")], 8, c));
+			id: s(d),
+			class: "v-menu-group-label v-group-label"
+		}, [a(c.$slots, "label", {}, () => [n(o(r.label), 1)])], 8, u), a(c.$slots, "default")], 8, l));
 	}
 });
 //#endregion
-export { u as default };
+export { d as default };
 
 //# sourceMappingURL=VMenuGroup.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VMenu/VMenuGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"VMenuGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMenu/VMenuGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n// @a11y @ssr — the whole script is a single generated id, and it exists only to tie\n// the group to its own label. It matches between server and client by construction,\n// Vue's `useId` guaranteeing exactly that.\n/**\n * A named section inside a menu — \"Sort by\", \"Recent files\". The name is announced as\n * the group's label rather than being read as one more item, and it is plain text: it\n * cannot be chosen, and the arrow keys walk straight past it.\n */\ninterface MenuGroupProps {\n  /** The name of the section. It is a heading, not a command: nothing happens on click. */\n  label: string\n}\n\ndefineProps<MenuGroupProps>()\n\ndefineSlots<{\n  /** The commands belonging to this section. */\n  default(): unknown\n}>()\n\nconst labelId = useId()\n</script>\n\n<template>\n  <div role=\"group\" class=\"v-menu-group\" :aria-labelledby=\"labelId\">\n    <span :id=\"labelId\" class=\"v-menu-group-label\">{{ label }}</span>\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-menu-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  /* The section heading takes the overline type role, without forcing capitals: how\n     the label is written is the consumer's decision.\n\n     Its indent and its height are the rows' own recipe, read from the same inherited\n     variables, so a heading occupies exactly the height of a row — compact included —\n     and the vertical rhythm of the list is not broken by it. The type is the one thing\n     staying outside that scale, which is why the text has to be centred vertically by\n     hand. */\n  .v-menu-group-label {\n    display: flex;\n    align-items: center;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;EAuBA,IAAM,IAAU,EAAM;yBAIpB,EAGM,OAAA;GAHD,MAAK;GAAQ,OAAM;GAAgB,mBAAiB,EAAA,CAAA;MACvD,EAAiE,QAAA;GAA1D,IAAI,EAAA,CAAA;GAAS,OAAM;OAAwB,EAAA,KAAK,GAAA,GAAA,CAAA,GACvD,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VMenuGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMenu/VMenuGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @ssr — the whole script is a single generated id, and it exists only to tie\n// the group to its own label. It matches between server and client by construction,\n// Vue's `useId` guaranteeing exactly that.\n/**\n * A named section inside a menu — \"Sort by\", \"Recent files\". The name is announced as\n * the group's label rather than being read as one more item, and it is plain text: it\n * cannot be chosen, and the arrow keys walk straight past it.\n */\n\nimport { useId } from 'vue'\n\ninterface MenuGroupProps {\n  /**\n   * The name of the section, replaced by the `#label` slot. One of the two is REQUIRED:\n   * it is what names the group, and a section named by neither points its\n   * `aria-labelledby` at an empty element. It is a heading, not a command: nothing\n   * happens on click.\n   */\n  label?: string\n}\n\nwithDefaults(defineProps<MenuGroupProps>(), {\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The commands belonging to this section. */\n  default(): unknown\n  /** A name made of markup, replacing the `label` prop. */\n  label?(): unknown\n}>()\n\nconst labelId = useId()\n</script>\n\n<template>\n  <div role=\"group\" class=\"v-menu-group\" :aria-labelledby=\"labelId\">\n    <span :id=\"labelId\" class=\"v-menu-group-label v-group-label\"\n      ><slot name=\"label\">{{ label }}</slot></span\n    >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-menu-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n}\n</style>\n"],"mappings":";;;;;;EAiCA,IAAM,IAAU,EAAM;yBAIpB,EAKM,OAAA;GALD,MAAK;GAAQ,OAAM;GAAgB,mBAAiB,EAAA,CAAA;MACvD,EAEC,QAAA;GAFM,IAAI,EAAA,CAAA;GAAS,OAAM;MACvB,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,GAE9B,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA"}

package/dist/components/VMenu/VMenuItem.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-menu-item{align-items:center;gap:var(--control-gap);width:100%;min-height:var(--control-height);padding:var(--vectis-space-1) var(--control-padding-inline);color:var(--vectis-color-text);border-radius:var(--vectis-radius-sm);font-family:inherit;font-size:var(--control-font-size);line-height:var(--vectis-text-body-md-leading);text-align:start;cursor:pointer;background:0 0;border:none;text-decoration:none;display:flex}.v-menu-item-content{flex-direction:column;flex:1;min-width:0;display:flex}.v-menu-item-sublabel{font-size:var(--vectis-text-caption-size);color:var(--vectis-color-text-muted)}.v-menu-item-chevron{color:var(--vectis-color-text-muted)}.v-menu-item-chevron:dir(rtl){transform:scaleX(-1)}.v-menu-item:hover:not(:disabled,[aria-disabled=true]),.v-menu-item:focus{background:var(--vectis-color-surface-muted);outline:none}.v-menu-item[aria-expanded=true]{background:var(--vectis-color-surface-muted)}.v-menu-item[data-selected]{background:var(--vectis-color-accent-surface);color:var(--vectis-color-accent-text)}.v-menu-item[data-selected] .v-menu-item-sublabel{color:inherit}.v-menu-item[data-selected]:hover:not(:disabled,[aria-disabled=true]),.v-menu-item[data-selected]:focus,.v-menu-item[data-selected][aria-expanded=true]{background:color-mix(in oklab, var(--vectis-color-accent-surface), var(--vectis-color-accent-text) 8%)}.v-menu-item[data-danger]{color:var(--vectis-color-danger-text)}.v-menu-item[data-danger] .v-menu-item-sublabel{color:inherit}.v-menu-item[data-danger]:hover:not(:disabled,[aria-disabled=true]),.v-menu-item[data-danger]:focus,.v-menu-item[data-danger][aria-expanded=true]{background:var(--vectis-color-danger-surface)}.v-menu-item:disabled,.v-menu-item[aria-disabled=true]{color:var(--vectis-color-text-subtle);cursor:not-allowed;background:0 0}.v-menu-item:disabled .v-menu-item-sublabel,.v-menu-item[aria-disabled=true] .v-menu-item-sublabel{color:inherit}}
+@layer vectis.components{.v-menu-item{align-items:center;gap:var(--control-gap);inline-size:100%;min-block-size:var(--control-height);padding-block:var(--vectis-space-1);padding-inline:var(--control-padding-inline);color:var(--vectis-color-text);border-radius:min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));font-family:inherit;font-size:var(--control-font-size);line-height:var(--vectis-text-body-md-leading);text-align:start;cursor:pointer;background:0 0;border:none;text-decoration:none;display:flex}.v-menu-item-content{flex-direction:column;flex:1;min-inline-size:0;display:flex}.v-menu-item-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v-menu-item-sublabel{font-size:var(--vectis-text-caption-size);color:var(--vectis-color-text-muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.v-menu-item-icon,.v-menu-item-chevron{color:var(--vectis-color-text-muted);flex:none}.v-menu-item:hover:not(:disabled,[aria-disabled=true]),.v-menu-item:focus,.v-menu-item[aria-expanded=true]{background:var(--vectis-color-surface-muted);outline:none}.v-menu-item[data-selected]{background:var(--vectis-color-accent-surface);color:var(--vectis-color-accent-text)}.v-menu-item[data-selected]:hover:not(:disabled,[aria-disabled=true]),.v-menu-item[data-selected]:focus,.v-menu-item[data-selected][aria-expanded=true]{background:color-mix(in oklab, var(--vectis-color-accent-surface), var(--vectis-color-accent-text) 8%)}.v-menu-item[data-tone=danger]{color:var(--vectis-color-danger-text)}.v-menu-item[data-tone=danger]:hover:not(:disabled,[aria-disabled=true]),.v-menu-item[data-tone=danger]:focus,.v-menu-item[data-tone=danger][aria-expanded=true]{background:var(--vectis-color-danger-surface)}.v-menu-item:disabled,.v-menu-item[aria-disabled=true]{color:var(--vectis-color-text-subtle);cursor:not-allowed;background:0 0}.v-menu-item:is([data-selected],[data-tone=danger],:disabled,[aria-disabled=true]) :is(.v-menu-item-icon,.v-menu-item-sublabel){color:inherit}}

package/dist/components/VMenu/VMenuItem.d.ts

@@ -1,21 +1,9 @@
 import { IconSource } from '../VIcon/types.js';
 /**
- * One command in a menu. The panel is what moves the focus between items, and
- * choosing one closes the whole menu, submenus included.
- *
- * Given an `href` the item becomes a link. A link has no `disabled` attribute of its
- * own, so a disabled one is made inert by hand: its address is removed, and
- * `aria-disabled` tells assistive technology why it no longer responds.
- *
- * Given the `#submenu` slot it becomes the trigger of a nested panel, which is
- * rendered INSIDE the parent one. That nesting is what buys the whole submenu
- * behaviour from the browser: the panels form a stack, clicking outside closes all of
- * them, and opening one branch closes its sibling.
- *
- * The JavaScript is limited to the two ways of opening a submenu the browser does not
- * cover: the keyboard, and hovering long enough to show it was meant. A click already
- * opens it natively.
+ * What a command means, in colour. It is the subset of VButton's tones a menu row can
+ * carry: an ordinary command, or a destructive one.
  */
+export type MenuItemTone = 'neutral' | 'danger';
 interface MenuItemProps {
     /** What the command says. The default slot replaces it. */
     label?: string;
@@ -34,10 +22,14 @@ interface MenuItemProps {
      */
     selected?: boolean;
     /**
-     * Marks the command as destructive, which colours it accordingly. Deleting
-     * something belongs here.
+     * What the command means, in colour. `danger` marks it destructive — deleting
+     * something belongs there — and `neutral`, the default, is every other command.
+     *
+     * A row is an action, so it takes the vocabulary of one: the same word on the same
+     * prop as a VButton, rather than a boolean of its own. There is no `accent` here,
+     * a menu having no primary command among its rows.
      */
-    danger?: boolean;
+    tone?: MenuItemTone;
     /** Makes the item unusable: it no longer responds and the arrows skip over it. */
     disabled?: boolean;
     /**
@@ -67,7 +59,7 @@ declare const __VLS_base: import('vue').DefineComponent<MenuItemProps, {}, {}, {
     onSelect?: (() => any) | undefined;
 }>, {
     label: string;
-    danger: boolean;
+    tone: MenuItemTone;
     href: string;
     disabled: boolean;
     iconStart: IconSource;

package/dist/components/VMenu/VMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"VMenuItem.js","names":[],"sources":["../../../src/components/VMenu/VMenuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, ref, useId, useSlots } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport type { IconSource } from '../VIcon/types'\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuKey, SUBMENU_HOVER_DELAY } from './context'\n\nimport { useTimer } from '../../composables/useTimer'\n\n/**\n * One command in a menu. The panel is what moves the focus between items, and\n * choosing one closes the whole menu, submenus included.\n *\n * Given an `href` the item becomes a link. A link has no `disabled` attribute of its\n * own, so a disabled one is made inert by hand: its address is removed, and\n * `aria-disabled` tells assistive technology why it no longer responds.\n *\n * Given the `#submenu` slot it becomes the trigger of a nested panel, which is\n * rendered INSIDE the parent one. That nesting is what buys the whole submenu\n * behaviour from the browser: the panels form a stack, clicking outside closes all of\n * them, and opening one branch closes its sibling.\n *\n * The JavaScript is limited to the two ways of opening a submenu the browser does not\n * cover: the keyboard, and hovering long enough to show it was meant. A click already\n * opens it natively.\n */\ninterface MenuItemProps {\n  /** What the command says. The default slot replaces it. */\n  label?: string\n  /** A second line under the label, for a shortcut or a short explanation. */\n  sublabel?: string\n  /**\n   * An icon before the label: an icon name, an image address, or an explicit render.\n   * The `#start` slot replaces it.\n   */\n  iconStart?: IconSource\n  /** An icon after the label, in the same forms. The `#end` slot replaces it. */\n  iconEnd?: IconSource\n  /**\n   * Marks this item as the one currently in effect — the chosen sort order, the\n   * active view. It is coloured and announced as such.\n   */\n  selected?: boolean\n  /**\n   * Marks the command as destructive, which colours it accordingly. Deleting\n   * something belongs here.\n   */\n  danger?: boolean\n  /** Makes the item unusable: it no longer responds and the arrows skip over it. */\n  disabled?: boolean\n  /**\n   * Turns the item into a link pointing at this address, for a menu that navigates\n   * rather than acts. A disabled link is made inert by hand.\n   */\n  href?: string\n}\n\n// With a submenu this component renders two elements — the item and the nested panel\n// — so there is no single root for Vue to put the consumer's attributes on. They are\n// placed on the item explicitly.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<MenuItemProps>(), {\n  label: undefined,\n  sublabel: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  selected: false,\n  danger: false,\n  disabled: false,\n  href: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * The command was chosen, by click or by keyboard. It is emitted before the menu\n   * closes, so the handler runs while the menu is still open.\n   */\n  select: []\n}>()\n\ndefineSlots<{\n  /** The label, replacing the `label` prop. */\n  default?(): unknown\n  /** The second line, replacing the `sublabel` prop. */\n  sublabel?(): unknown\n  /** Free content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Free content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n  /**\n   * The contents of a submenu — items, groups and separators, this component\n   * included, so menus may nest as deep as needed.\n   */\n  submenu?(): unknown\n}>()\n\nconst slots = useSlots()\nconst hasSubmenu = computed(() => !!slots.submenu)\nconst tag = computed(() =>\n  !hasSubmenu.value && props.href !== undefined ? ('a' as const) : ('button' as const),\n)\n\nconst menu = inject(menuKey, null)\n\nfunction onClick() {\n  if (props.disabled || hasSubmenu.value) return\n  emit('select')\n  menu?.closeAll()\n}\n\nconst subId = useId()\nconst subOpen = ref(false)\nconst subPanel = ref<InstanceType<typeof VMenuPanel> | null>(null)\n// TRAP — when a submenu is opened from code rather than by a click, the item must be\n// handed to the browser as the source of that opening. The implicit anchor is only\n// established natively, on click; without it the panel has nothing to position itself\n// against and lands at the corner of the viewport, with no error anywhere.\nconst itemEl = ref<HTMLElement | null>(null)\n\n// @keyboard\n// Opening a submenu from the keyboard, which the browser's own toggle does not cover\n// — it only reacts to a click.\nfunction onKeydown(event: KeyboardEvent) {\n  if (!hasSubmenu.value || props.disabled) return\n  if (!['ArrowRight', 'Enter', ' '].includes(event.key)) return\n  // The button's native activation has to be stopped: it would fire a click of its\n  // own, and that click would toggle the panel shut again right behind the opening\n  // below.\n  event.preventDefault()\n  subPanel.value?.show(itemEl.value ?? undefined)\n  subPanel.value?.focusFirst()\n}\n\n// A submenu opens on hover, but only once the pointer has stayed long enough to show\n// it was meant — otherwise every panel crossed on the way to another one would flash\n// open. ONE timer serves both directions, since opening and closing are mutually\n// exclusive: arming either always cancels the other.\nconst hoverTimer = useTimer()\n\n// @a11y @core\nfunction onPointerEnter() {\n  if (props.disabled) return\n  // Hovering also moves the focus, so that the mouse and the keyboard never highlight\n  // two different items at once — in a menu there is only ever one current item.\n  itemEl.value?.focus({ preventScroll: true })\n  if (!hasSubmenu.value) return\n  hoverTimer.start(() => subPanel.value?.show(itemEl.value ?? undefined), SUBMENU_HOVER_DELAY)\n}\n\n// @a11y @core — the test on where the focus currently is, is the accessibility half:\n// a pointer drifting off the item must not close a submenu a keyboard user is\n// standing inside.\nfunction onPointerLeave() {\n  if (!hasSubmenu.value) return\n  hoverTimer.start(() => {\n    if (subPanel.value?.el?.contains(document.activeElement)) return\n    subPanel.value?.hide()\n  }, SUBMENU_HOVER_DELAY)\n}\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    ref=\"itemEl\"\n    v-bind=\"$attrs\"\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    class=\"v-menu-item\"\n    :type=\"tag === 'button' ? 'button' : undefined\"\n    :disabled=\"tag === 'button' ? disabled : undefined\"\n    :href=\"tag === 'a' && !disabled ? href : undefined\"\n    :aria-disabled=\"tag === 'a' && disabled ? 'true' : undefined\"\n    :data-danger=\"danger ? '' : undefined\"\n    :data-selected=\"selected ? '' : undefined\"\n    :aria-current=\"selected ? 'true' : undefined\"\n    :aria-haspopup=\"hasSubmenu ? 'menu' : undefined\"\n    :aria-expanded=\"hasSubmenu ? subOpen : undefined\"\n    :aria-controls=\"hasSubmenu ? subId : undefined\"\n    :popovertarget=\"hasSubmenu ? subId : undefined\"\n    @click=\"onClick\"\n    @keydown=\"onKeydown\"\n    @pointerenter=\"onPointerEnter\"\n    @pointerleave=\"onPointerLeave\"\n  >\n    <slot name=\"start\">\n      <VIcon v-if=\"iconStart\" v-bind=\"iconProps(iconStart)\" />\n    </slot>\n    <span class=\"v-menu-item-content\">\n      <span class=\"v-menu-item-label\"\n        ><slot>{{ label }}</slot></span\n      >\n      <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-menu-item-sublabel\">\n        <slot name=\"sublabel\">{{ sublabel }}</slot>\n      </span>\n    </span>\n    <!-- An item opening a submenu always shows the chevron announcing it, and never\n         the end icon: the sideways opening is what the reader needs to be told -->\n    <VIcon v-if=\"hasSubmenu\" :name=\"chevronRightIcon\" class=\"v-menu-item-chevron\" />\n    <slot v-else name=\"end\">\n      <VIcon v-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" />\n    </slot>\n  </component>\n  <VMenuPanel\n    v-if=\"hasSubmenu\"\n    :id=\"subId\"\n    ref=\"subPanel\"\n    placement=\"right-start\"\n    submenu\n    @toggle=\"subOpen = $event\"\n    @pointerenter=\"hoverTimer.cancel()\"\n    @pointerleave=\"onPointerLeave\"\n  >\n    <slot name=\"submenu\" />\n  </VMenuPanel>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-menu-item {\n    /*\n     * Every dimension comes from the `--control-*` variables the root panel sets and\n     * this row inherits — one size table for the whole design system. The icons follow\n     * with nothing written for them, their own variables belonging to that same block.\n     *\n     * The type is the one composite part: the SIZE comes from the scale, but the line\n     * height stays that of body text — a unitless ratio, so it still follows the size\n     * — and the weight stays regular. The full `control` type role would mean a medium\n     * weight and lines set tight against each other, which suits a single-line label\n     * and not a row that may wrap and carry a second line under it.\n     */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    width: 100%;\n    min-height: var(--control-height);\n    padding: var(--vectis-space-1) var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: var(--vectis-radius-sm);\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  .v-menu-item-content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .v-menu-item-sublabel {\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-menu-item-chevron {\n    color: var(--vectis-color-text-muted);\n  }\n\n  .v-menu-item-chevron:dir(rtl) {\n    transform: scaleX(-1);\n  }\n\n  /* In a menu the focus IS the highlight, so it is drawn on `:focus` and not on\n     `:focus-visible`: the focus is moved from code — by the arrows, and by hovering —\n     and the browser would not call that a keyboard focus worth showing. */\n  .v-menu-item:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item:focus {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  /* While a submenu is open its parent item keeps the highlight, so the path followed\n     through the levels stays visible. */\n  .v-menu-item[aria-expanded='true'] {\n    background: var(--vectis-color-surface-muted);\n  }\n\n  .v-menu-item[data-selected] {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-menu-item[data-selected] .v-menu-item-sublabel {\n    color: inherit;\n  }\n\n  .v-menu-item[data-selected]:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item[data-selected]:focus,\n  .v-menu-item[data-selected][aria-expanded='true'] {\n    /* The selected row is already tinted, so its hover deepens that tint rather than\n       replacing it with the neutral highlight. */\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  .v-menu-item[data-danger] {\n    color: var(--vectis-color-danger-text);\n  }\n\n  .v-menu-item[data-danger] .v-menu-item-sublabel {\n    color: inherit;\n  }\n\n  .v-menu-item[data-danger]:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item[data-danger]:focus,\n  .v-menu-item[data-danger][aria-expanded='true'] {\n    background: var(--vectis-color-danger-surface);\n  }\n\n  /* Both forms have to be matched: `:disabled` only ever applies to a `<button>`, and\n     an item rendered as a link is made inert through `aria-disabled` instead. */\n  .v-menu-item:disabled,\n  .v-menu-item[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  .v-menu-item:disabled .v-menu-item-sublabel,\n  .v-menu-item[aria-disabled='true'] .v-menu-item-sublabel {\n    color: inherit;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VMenuItem.js","names":[],"sources":["../../../src/components/VMenu/VMenuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One command in a menu. The panel moves the focus between items, and choosing one closes\n * the whole menu, submenus included.\n *\n * With an `href` it becomes a link, made inert by hand when disabled — a link has no\n * `disabled` attribute, so the address is removed and `aria-disabled` says why.\n *\n * With the `#submenu` slot it becomes the trigger of a nested panel rendered INSIDE the\n * parent one. That nesting is what buys the submenu behaviour from the browser: the panels\n * form a native stack, a click outside closes all of them, and opening one branch closes its\n * sibling.\n *\n * The JS covers only the two openings the browser does not: the keyboard, and a hover held\n * long enough to show it was meant. A click already opens it natively.\n */\n\nimport { inject, ref, useId } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport type { IconSource } from '../VIcon/types'\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuKey, SUBMENU_HOVER_DELAY } from './context'\n\nimport { useTimer } from '../../composables/useTimer'\n\n/**\n * What a command means, in colour. It is the subset of VButton's tones a menu row can\n * carry: an ordinary command, or a destructive one.\n */\nexport type MenuItemTone = 'neutral' | 'danger'\n\ninterface MenuItemProps {\n  /** What the command says. The default slot replaces it. */\n  label?: string\n  /** A second line under the label, for a shortcut or a short explanation. */\n  sublabel?: string\n  /**\n   * An icon before the label: an icon name, an image address, or an explicit render.\n   * The `#start` slot replaces it.\n   */\n  iconStart?: IconSource\n  /** An icon after the label, in the same forms. The `#end` slot replaces it. */\n  iconEnd?: IconSource\n  /**\n   * Marks this item as the one currently in effect — the chosen sort order, the\n   * active view. It is coloured and announced as such.\n   */\n  selected?: boolean\n  /**\n   * What the command means, in colour. `danger` marks it destructive — deleting\n   * something belongs there — and `neutral`, the default, is every other command.\n   *\n   * A row is an action, so it takes the vocabulary of one: the same word on the same\n   * prop as a VButton, rather than a boolean of its own. There is no `accent` here,\n   * a menu having no primary command among its rows.\n   */\n  tone?: MenuItemTone\n  /** Makes the item unusable: it no longer responds and the arrows skip over it. */\n  disabled?: boolean\n  /**\n   * Turns the item into a link pointing at this address, for a menu that navigates\n   * rather than acts. A disabled link is made inert by hand.\n   */\n  href?: string\n}\n\n// With a submenu this component renders two elements — the item and the nested panel\n// — so there is no single root for Vue to put the consumer's attributes on. They are\n// placed on the item explicitly.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<MenuItemProps>(), {\n  label: undefined,\n  sublabel: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  selected: false,\n  tone: 'neutral',\n  disabled: false,\n  href: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * The command was chosen, by click or by keyboard. It is emitted before the menu\n   * closes, so the handler runs while the menu is still open.\n   */\n  select: []\n}>()\n\nconst slots = defineSlots<{\n  /** The label, replacing the `label` prop. */\n  default?(): unknown\n  /** The second line, replacing the `sublabel` prop. */\n  sublabel?(): unknown\n  /** Free content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Free content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n  /**\n   * The contents of a submenu — items, groups and separators, this component\n   * included, so menus may nest as deep as needed.\n   */\n  submenu?(): unknown\n}>()\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed would keep its first answer while a slot behind a `v-if` comes and goes.\nfunction hasSubmenu() {\n  return !!slots.submenu\n}\nfunction tag() {\n  return !hasSubmenu() && props.href !== undefined ? ('a' as const) : ('button' as const)\n}\n\nconst menu = inject(menuKey, null)\n\nfunction onClick() {\n  if (props.disabled || hasSubmenu()) return\n  emit('select')\n  menu?.closeAll()\n}\n\nconst subId = useId()\nconst subOpen = ref(false)\nconst subPanel = ref<InstanceType<typeof VMenuPanel> | null>(null)\n// TRAP — when a submenu is opened from code rather than by a click, the item must be\n// handed to the browser as the source of that opening. The implicit anchor is only\n// established natively, on click; without it the panel has nothing to position itself\n// against and lands at the corner of the viewport, with no error anywhere.\nconst itemEl = ref<HTMLElement | null>(null)\n\n// @keyboard\n// Opening a submenu from the keyboard, which the browser's own toggle does not cover\n// — it only reacts to a click.\nfunction onKeydown(event: KeyboardEvent) {\n  if (!hasSubmenu() || props.disabled) return\n  if (!['ArrowRight', 'Enter', ' '].includes(event.key)) return\n  // The button's native activation has to be stopped: it would fire a click of its\n  // own, and that click would toggle the panel shut again right behind the opening\n  // below.\n  event.preventDefault()\n  subPanel.value?.show(itemEl.value ?? undefined)\n  subPanel.value?.focusFirst()\n}\n\n// A submenu opens on hover, but only once the pointer has stayed long enough to show\n// it was meant — otherwise every panel crossed on the way to another one would flash\n// open. ONE timer serves both directions, since opening and closing are mutually\n// exclusive: arming either always cancels the other.\nconst hoverTimer = useTimer()\n\n// @a11y @core\nfunction onPointerEnter() {\n  if (props.disabled) return\n  // Hovering also moves the focus, so that the mouse and the keyboard never highlight\n  // two different items at once — in a menu there is only ever one current item.\n  itemEl.value?.focus({ preventScroll: true })\n  if (!hasSubmenu()) return\n  hoverTimer.start(() => subPanel.value?.show(itemEl.value ?? undefined), SUBMENU_HOVER_DELAY)\n}\n\n// @a11y @core — the test on where the focus currently is, is the accessibility half:\n// a pointer drifting off the item must not close a submenu a keyboard user is\n// standing inside.\nfunction onPointerLeave() {\n  if (!hasSubmenu()) return\n  hoverTimer.start(() => {\n    if (subPanel.value?.el?.contains(document.activeElement)) return\n    subPanel.value?.close()\n  }, SUBMENU_HOVER_DELAY)\n}\n</script>\n\n<template>\n  <component\n    :is=\"tag()\"\n    ref=\"itemEl\"\n    v-bind=\"$attrs\"\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    class=\"v-menu-item\"\n    :type=\"tag() === 'button' ? 'button' : undefined\"\n    :disabled=\"tag() === 'button' ? disabled : undefined\"\n    :href=\"tag() === 'a' && !disabled ? href : undefined\"\n    :aria-disabled=\"tag() === 'a' && disabled ? 'true' : undefined\"\n    :data-tone=\"tone\"\n    :data-selected=\"selected ? '' : undefined\"\n    :aria-current=\"selected ? 'true' : undefined\"\n    :aria-haspopup=\"hasSubmenu() ? 'menu' : undefined\"\n    :aria-expanded=\"hasSubmenu() ? subOpen : undefined\"\n    :aria-controls=\"hasSubmenu() ? subId : undefined\"\n    :popovertarget=\"hasSubmenu() ? subId : undefined\"\n    @click=\"onClick\"\n    @keydown=\"onKeydown\"\n    @pointerenter=\"onPointerEnter\"\n    @pointerleave=\"onPointerLeave\"\n  >\n    <slot name=\"start\">\n      <VIcon v-if=\"iconStart\" class=\"v-menu-item-icon\" v-bind=\"iconProps(iconStart)\" />\n    </slot>\n    <span class=\"v-menu-item-content\">\n      <span class=\"v-menu-item-label\"\n        ><slot>{{ label }}</slot></span\n      >\n      <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-menu-item-sublabel\">\n        <slot name=\"sublabel\">{{ sublabel }}</slot>\n      </span>\n    </span>\n    <!-- An item opening a submenu always shows the chevron announcing it, and never\n         the end icon: the sideways opening is what the reader needs to be told -->\n    <VIcon v-if=\"hasSubmenu()\" :name=\"chevronRightIcon\" class=\"v-menu-item-chevron\" mirrored />\n    <slot v-else name=\"end\">\n      <VIcon v-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" />\n    </slot>\n  </component>\n  <VMenuPanel\n    v-if=\"hasSubmenu()\"\n    :id=\"subId\"\n    ref=\"subPanel\"\n    placement=\"right-start\"\n    submenu\n    @toggle=\"subOpen = $event\"\n    @pointerenter=\"hoverTimer.cancel()\"\n    @pointerleave=\"onPointerLeave\"\n  >\n    <slot name=\"submenu\" />\n  </VMenuPanel>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-menu-item {\n    /*\n     * Every dimension comes from the `--control-*` variables the root panel sets and\n     * this row inherits — one size table for the whole design system. The icons follow\n     * with nothing written for them, their own variables belonging to that same block.\n     *\n     * The type is the one composite part: the SIZE comes from the scale, but the line\n     * height stays that of body text — a unitless ratio, so it still follows the size\n     * — and the weight stays regular. The full `control` type role would mean a medium\n     * weight and lines set tight against each other, and a row may carry a second line\n     * under its label.\n     *\n     * The label and that second line TRUNCATE rather than wrap, the VSideNavigationItem\n     * recipe: the panel has a ceiling, and a command that grew a line would break the\n     * rhythm of the list. `width` on VMenu is the way to give long labels more room.\n     *\n     * The corner is VSideNavigationItem's: the control radius capped at half a control\n     * height, so a pill override paints every row of a menu alike, a row carrying a\n     * sublabel included, instead of rounding each one to half of its own height.\n     */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    inline-size: 100%;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  .v-menu-item-content {\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .v-menu-item-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-menu-item-sublabel {\n    overflow: hidden;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* The start icon is muted, as on every row of the design system (VSideNavigationItem,\n     VAccordionItem): the label carries the command, the icon only helps find it. */\n  .v-menu-item-icon,\n  .v-menu-item-chevron {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* In a menu the focus IS the highlight, so it is drawn on `:focus` and not on\n     `:focus-visible`: the focus is moved from code — by the arrows, and by hovering —\n     and the browser would not call that a keyboard focus worth showing. While a submenu is\n     open its parent item keeps the highlight too, so the path followed through the levels\n     stays visible. */\n  .v-menu-item:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item:focus,\n  .v-menu-item[aria-expanded='true'] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-menu-item[data-selected] {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-menu-item[data-selected]:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item[data-selected]:focus,\n  .v-menu-item[data-selected][aria-expanded='true'] {\n    /* The selected row is already tinted, so its hover deepens that tint rather than\n       replacing it with the neutral highlight. */\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  .v-menu-item[data-tone='danger'] {\n    color: var(--vectis-color-danger-text);\n  }\n\n  .v-menu-item[data-tone='danger']:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item[data-tone='danger']:focus,\n  .v-menu-item[data-tone='danger'][aria-expanded='true'] {\n    background: var(--vectis-color-danger-surface);\n  }\n\n  /* Both forms have to be matched: `:disabled` only ever applies to a `<button>`, and\n     an item rendered as a link is made inert through `aria-disabled` instead. */\n  .v-menu-item:disabled,\n  .v-menu-item[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* On a row painted in a colour of its own, the start icon and the second line take the\n     label's colour rather than the muted grey: muted would clash with the selected and the\n     danger tints, and on a disabled row it is DARKER than the subtle grey the label takes,\n     so they would outshine it. Each `:is()` counts for its most specific member, which\n     keeps the rule at (0,3,0), above the two (0,1,0) base rules. */\n  .v-menu-item:is([data-selected], [data-tone='danger'], :disabled, [aria-disabled='true'])\n    :is(.v-menu-item-icon, .v-menu-item-sublabel) {\n    color: inherit;\n  }\n}\n</style>\n"],"mappings":""}