vectis-ui 0.10.3 → 0.11.0

package/dist/components/VIcon/icons/names.js.map

@@ -1 +1 @@
-{"version":3,"file":"names.js","names":[],"sources":["../../../../src/components/VIcon/icons/names.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\n\nconst NAMES = [\n  'arrow_downward',\n  'arrow_downward_alt',\n  'arrow_drop_down',\n  'arrow_drop_up',\n  'arrow_left_alt',\n  'arrow_right_alt',\n  'arrow_upward',\n  'arrow_upward_alt',\n  'attach_file',\n  'audio_file',\n  'calendar_today',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'close',\n  'cloud_upload',\n  'code',\n  'description',\n  'error',\n  'expand_less',\n  'expand_more',\n  'folder_zip',\n  'image',\n  'info',\n  'more_horiz',\n  'notifications',\n  'picture_as_pdf',\n  'schedule',\n  'search',\n  'swap_vert',\n  'table_chart',\n  'video_file',\n  'warning',\n] as const\n\n/** The icon names the DS renders itself: the contract of a consumer resolver. */\nexport type IconName = (typeof NAMES)[number]\n\n/**\n * The names alone, carrying no drawing at all. `classIconResolver` in `strict` mode\n * asks nothing more than \"does the design system ship this name?\", and a module of\n * its own is what stops a consumer who wired in their OWN icon library from\n * downloading 34 Material paths to answer that one question.\n */\nexport const builtinIconNames: ReadonlySet<string> = /* @__PURE__ */ new Set(NAMES)\n"],"mappings":"AAuDA,IAAa,oBAAwD,IAAI,IAAI,gBA9C/D,qZA8C+D,CAAK"}
+{"version":3,"file":"names.js","names":[],"sources":["../../../../src/components/VIcon/icons/names.ts"],"sourcesContent":["/*\n * GENERATED FILE — do not edit by hand.\n * Regenerate: pnpm icons  ·  Source: scripts/build-icons.ts\n *\n * Material Symbols Rounded (wght 400 · GRAD 0 · opsz 24)\n * google/material-design-icons @ 528cb964c01fb2b09bc3b9208f82b6d8f8c1c1e2\n * Apache-2.0 licence © Google.\n */\n\nconst NAMES = [\n  'arrow_downward',\n  'arrow_downward_alt',\n  'arrow_drop_down',\n  'arrow_drop_up',\n  'arrow_left_alt',\n  'arrow_right_alt',\n  'arrow_upward',\n  'arrow_upward_alt',\n  'attach_file',\n  'audio_file',\n  'calendar_today',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'close',\n  'cloud_upload',\n  'code',\n  'description',\n  'error',\n  'expand_less',\n  'expand_more',\n  'first_page',\n  'folder_zip',\n  'image',\n  'info',\n  'last_page',\n  'more_horiz',\n  'notifications',\n  'picture_as_pdf',\n  'schedule',\n  'search',\n  'swap_vert',\n  'table_chart',\n  'video_file',\n  'warning',\n] as const\n\n/** The icon names the DS renders itself: the contract of a consumer resolver. */\nexport type IconName = (typeof NAMES)[number]\n\n/**\n * The names alone, carrying no drawing at all. `classIconResolver` in `strict` mode\n * asks nothing more than \"does the design system ship this name?\", and a module of\n * its own is what stops a consumer who wired in their OWN icon library from\n * downloading 36 Material paths to answer that one question.\n */\nexport const builtinIconNames: ReadonlySet<string> = /* @__PURE__ */ new Set(NAMES)\n"],"mappings":"AAyDA,IAAa,oBAAwD,IAAI,IAAI,gBAhD/D,0aAgD+D,CAAK"}

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

@@ -26,15 +26,18 @@ interface MenuProps {
 }
 type __VLS_Props = MenuProps;
 /**
- * What the trigger has to carry: the link to the panel it opens, and the two
- * attributes telling assistive technology that a menu is attached to this button and
- * whether it is currently open.
+ * What the trigger has to carry: the link to the panel it opens, the attributes telling
+ * assistive technology that a menu is attached to this button and whether it is currently
+ * open, and the anchor name the panel is positioned against.
  */
 export type MenuTriggerProps = {
     popovertarget: string;
     'aria-haspopup': 'menu';
     'aria-expanded': boolean;
     'aria-controls': string;
+    style: {
+        'anchor-name': string;
+    };
 };
 type __VLS_Slots = {
     /**

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\">\n// @a11y @core\n/**\n * Native auto popovers own light dismissal and anchoring. JavaScript supplies the model bridge\n * and ARIA menu focus management.\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\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: that\n   * 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\n// The focus half of the bridge: into the panel when it opens, back to the trigger when it\n// closes. Keeping the state in step alone would leave a keyboard user stranded at the top of\n// the page every time a menu opened or closed.\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 nowhere, on the\n    // page body. Only then is it handed back to the trigger: if the focus has already moved\n    // 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 * Every opening that does not come from a click on the trigger has to NAME that trigger. A\n * popover opened through `popovertarget` takes its invoker as its implicit anchor; opened from\n * code with no `source`, it has no anchor at all and the browser paints it at the corner of the\n * viewport.\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 * Relay the imperative panel API so programmatic opening can move focus immediately without\n * waiting for a model render.\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":""}
+{"version":3,"file":"VMenu.js","names":[],"sources":["../../../src/components/VMenu/VMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * Native auto popovers own light dismissal, and CSS anchoring places them. JavaScript supplies\n * the model bridge and ARIA menu focus management.\n */\n\nimport { computed, provide, ref, useId } from 'vue'\n\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuAnchor, 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\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, the attributes telling\n * assistive technology that a menu is attached to this button and whether it is currently\n * open, and the anchor name the panel is positioned against.\n */\nexport type MenuTriggerProps = {\n  popovertarget: string\n  'aria-haspopup': 'menu'\n  'aria-expanded': boolean\n  'aria-controls': string\n  style: { 'anchor-name': string }\n}\n\ndefineSlots<{\n  /**\n   * The button that opens the menu. Bind the `triggerProps` it receives onto it: that\n   * 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 anchor = menuAnchor(menuId)\n\nconst triggerProps = computed<MenuTriggerProps>(() => ({\n  popovertarget: menuId,\n  'aria-haspopup': 'menu',\n  'aria-expanded': open.value,\n  'aria-controls': menuId,\n  style: { 'anchor-name': anchor },\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\n// The focus half of the bridge: into the panel when it opens, back to the trigger when it\n// closes. Keeping the state in step alone would leave a keyboard user stranded at the top of\n// the page every time a menu opened or closed.\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 nowhere, on the\n    // page body. Only then is it handed back to the trigger: if the focus has already moved\n    // 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 * The position comes from the trigger's anchor name. Naming the trigger as `source` still gives\n * the opening the same invoker a click would.\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 * Relay the imperative panel API so programmatic opening can move focus immediately without\n * waiting for a model render.\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    :anchor=\"anchor\"\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,12 +1,12 @@
 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";
+import { menuAnchor as n, menuInvoker as r, menuKey as i } from "./context.js";
+import a from "./VMenuPanel.js";
+import { Fragment as o, computed as s, createElementBlock as c, createVNode as l, defineComponent as u, mergeModels as d, openBlock as f, provide as p, ref as m, renderSlot as h, unref as g, useId as _, useModel as v, withCtx as y } from "vue";
 //#region src/components/VMenu/VMenu.vue?vue&type=script&setup=true&lang.ts
-var y = /*@__PURE__*/ l({
+var b = /*@__PURE__*/ u({
 	__name: "VMenu",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ d({
 		placement: { default: "bottom-start" },
 		size: { default: "sm" },
 		compact: {
@@ -26,43 +26,46 @@ var y = /*@__PURE__*/ l({
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(l, { expose: u }) {
-		let y = _(l, "open"), b = p(null), x = g(), S = o(() => ({
-			popovertarget: x,
+	setup(u, { expose: d }) {
+		let b = v(u, "open"), x = m(null), S = _(), C = n(S), w = s(() => ({
+			popovertarget: S,
 			"aria-haspopup": "menu",
-			"aria-expanded": y.value,
-			"aria-controls": x
+			"aria-expanded": b.value,
+			"aria-controls": S,
+			style: { "anchor-name": C }
 		}));
-		f(r, { closeAll: () => b.value?.close() });
-		function C(e) {
-			if (y.value = e, e) t(document.activeElement) ? b.value?.focusFirst() : b.value?.focusPanel();
+		p(i, { closeAll: () => x.value?.close() });
+		function T(e) {
+			if (b.value = e, e) t(document.activeElement) ? x.value?.focusFirst() : x.value?.focusPanel();
 			else {
 				let e = document.activeElement;
-				(!e || e === document.body || b.value?.el?.contains(e)) && n(x)?.focus();
+				(!e || e === document.body || x.value?.el?.contains(e)) && r(S)?.focus();
 			}
 		}
-		function w() {
-			b.value?.show(n(x) ?? void 0);
+		function E() {
+			x.value?.show(r(S) ?? 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),
+		return e(b, () => x.value?.shown ?? !1, E, () => x.value?.close()), d({
+			show: E,
+			close: () => x.value?.close(),
+			el: s(() => x.value?.el ?? null)
+		}), (e, t) => (f(), c(o, null, [h(e.$slots, "trigger", { triggerProps: w.value }), l(a, {
+			id: g(S),
 			ref_key: "panelRef",
-			ref: b,
-			placement: l.placement,
-			size: l.size,
-			compact: l.compact,
-			width: l.width,
-			"match-trigger": l.matchTrigger,
-			onToggle: C
+			ref: x,
+			anchor: g(C),
+			placement: u.placement,
+			size: u.size,
+			compact: u.compact,
+			width: u.width,
+			"match-trigger": u.matchTrigger,
+			onToggle: T
 		}, {
-			default: v(() => [m(e.$slots, "default")]),
+			default: y(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"id",
+			"anchor",
 			"placement",
 			"size",
 			"compact",
@@ -72,6 +75,6 @@ var y = /*@__PURE__*/ l({
 	}
 });
 //#endregion
-export { y as default };
+export { b 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\">\n// @a11y @core\n/**\n * Native auto popovers own light dismissal and anchoring. JavaScript supplies the model bridge\n * and ARIA menu focus management.\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\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: that\n   * 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\n// The focus half of the bridge: into the panel when it opens, back to the trigger when it\n// closes. Keeping the state in step alone would leave a keyboard user stranded at the top of\n// the page every time a menu opened or closed.\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 nowhere, on the\n    // page body. Only then is it handed back to the trigger: if the focus has already moved\n    // 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 * Every opening that does not come from a click on the trigger has to NAME that trigger. A\n * popover opened through `popovertarget` takes its invoker as its implicit anchor; opened from\n * code with no `source`, it has no anchor at all and the browser paints it at the corner of the\n * viewport.\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 * Relay the imperative panel API so programmatic opening can move focus immediately without\n * waiting for a model render.\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,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;EAM5D,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;EAQA,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,GAMA,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"}
+{"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 * Native auto popovers own light dismissal, and CSS anchoring places them. JavaScript supplies\n * the model bridge and ARIA menu focus management.\n */\n\nimport { computed, provide, ref, useId } from 'vue'\n\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuAnchor, 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\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, the attributes telling\n * assistive technology that a menu is attached to this button and whether it is currently\n * open, and the anchor name the panel is positioned against.\n */\nexport type MenuTriggerProps = {\n  popovertarget: string\n  'aria-haspopup': 'menu'\n  'aria-expanded': boolean\n  'aria-controls': string\n  style: { 'anchor-name': string }\n}\n\ndefineSlots<{\n  /**\n   * The button that opens the menu. Bind the `triggerProps` it receives onto it: that\n   * 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 anchor = menuAnchor(menuId)\n\nconst triggerProps = computed<MenuTriggerProps>(() => ({\n  popovertarget: menuId,\n  'aria-haspopup': 'menu',\n  'aria-expanded': open.value,\n  'aria-controls': menuId,\n  style: { 'anchor-name': anchor },\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\n// The focus half of the bridge: into the panel when it opens, back to the trigger when it\n// closes. Keeping the state in step alone would leave a keyboard user stranded at the top of\n// the page every time a menu opened or closed.\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 nowhere, on the\n    // page body. Only then is it handed back to the trigger: if the focus has already moved\n    // 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 * The position comes from the trigger's anchor name. Naming the trigger as `source` still gives\n * the opening the same invoker a click would.\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 * Relay the imperative panel API so programmatic opening can move focus immediately without\n * waiting for a model render.\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    :anchor=\"anchor\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAM,IAAO,EAAoB,GAAC,MAA0B,GAyBtD,IAAW,EAA4C,IAAI,GAC3D,IAAS,EAAM,GACf,IAAS,EAAW,CAAM,GAE1B,IAAe,SAAkC;GACrD,eAAe;GACf,iBAAiB;GACjB,iBAAiB,EAAK;GACtB,iBAAiB;GACjB,OAAO,EAAE,eAAe,EAAO;EACjC,EAAE;EAIF,EAAQ,GAAS,EAAE,gBAAgB,EAAS,OAAO,MAAM,EAAE,CAAC;EAM5D,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;EAMA,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,GAMA,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,EAYa,GAAA;GAXV,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACH,QAAQ,EAAA,CAAA;GACR,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/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);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}@media (forced-colors:active){.v-menu-item:focus,.v-menu-item[aria-expanded=true]{outline:var(--vectis-focus-ring-width) solid Highlight;outline-offset:calc(-1 * var(--vectis-focus-ring-width))}.v-menu-item.v-menu-item[data-selected]{forced-color-adjust:none;color:highlighttext;background-color:highlight}}}
+@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[aria-haspopup]{anchor-name:var(--menu-anchor)}.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}@media (forced-colors:active){.v-menu-item:focus,.v-menu-item[aria-expanded=true]{outline:var(--vectis-focus-ring-width) solid Highlight;outline-offset:calc(-1 * var(--vectis-focus-ring-width))}.v-menu-item.v-menu-item[data-selected]{forced-color-adjust:none;color:highlighttext;background-color:highlight}}}

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\">\n/**\n * Menu commands use native buttons or links. JavaScript handles inert anchors and submenu hover\n * intent; the panel owns roving focus and dismissal.\n */\n\nimport { inject, ref, useAttrs, useId } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { isRtl } from '../../utils/direction'\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 active\n   * 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 something\n   * belongs there), and `neutral`, the default, is every other command.\n   */\n  tone?: MenuItemTone\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; so there\n// is no single root for Vue to put the consumer's attributes on. They are placed on the item\n// 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 included,\n   * so menus may nest as deep as needed.\n   */\n  submenu?(): unknown\n}>()\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// 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 attrs = useAttrs()\nconst link = useInertLink({\n  href: () => (hasSubmenu() ? undefined : props.href),\n  inert: () => props.disabled,\n  attrs: () => attrs,\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// When a submenu is opened from code rather than by a click, the item must be handed to the\n// browser as the source of that opening. The implicit anchor is only established natively, on\n// click; without it the panel has nothing to position itself against and lands at the corner of\n// 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; it only\n// reacts to a click.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  // @keyboard @a11y\n  // A menu item is activated by Space as well as Enter, and a LINK answers Enter alone:\n  // Space would scroll the page instead.\n  if (!hasSubmenu()) {\n    if (event.key === ' ' && tag() === 'a') {\n      event.preventDefault()\n      itemEl.value?.click()\n    }\n    return\n  }\n  if (props.disabled) return\n  // The submenu opens towards the end of the line, so the arrow that points at it is the\n  // one that opens it: the left one in a right-to-left page.\n  const toward = isRtl(itemEl.value) ? 'ArrowLeft' : 'ArrowRight'\n  if (![toward, '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 it was\n// meant; otherwise every panel crossed on the way to another one would flash open. ONE timer\n// serves both directions, since opening and closing are mutually exclusive: arming either\n// always cancels the other.\nconst hoverTimer = useTimer()\n\n// @a11y @core\n// A TOUCH tap sends `pointerenter` and `pointerleave` before its `click`, so the leave below\n// armed the close and the submenu the tap opened shut 150 ms later. Hover intent means nothing\n// to a finger: only a pointer that can hover takes this route, the tap opening the submenu\n// natively through the click.\nfunction onPointerEnter(event: PointerEvent) {\n  if (props.disabled || event.pointerType === 'touch') return\n  // Hovering also moves the focus, so that the mouse and the keyboard never highlight two\n  // 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\n// 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(event: PointerEvent) {\n  if (!hasSubmenu() || event.pointerType === 'touch') 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    :aria-disabled=\"link.isInertLink.value ? 'true' : 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    v-bind=\"link.attrs.value\"\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=\"link.linkHref.value\"\n    :data-tone=\"tone\"\n    :data-selected=\"selected ? '' : undefined\"\n    :popovertarget=\"hasSubmenu() ? subId : undefined\"\n    :popovertargetaction=\"hasSubmenu() ? 'show' : 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 this row\n     * inherits; one size table for the whole design system. The icons follow with nothing\n     * written for them, their own variables belonging to that same block.\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  /*\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; and the\n   * browser would not call that a keyboard focus worth showing. While a submenu is open its\n   * parent item keeps the highlight too, so the path followed through the levels stays visible.\n   */\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  /*\n   * The highlight is a background, which the mode forces to Canvas: the row under the focus\n   * would look exactly like the others, and a keyboard user would lose their place (WCAG\n   * 2.4.7). An outline inside the row takes its place.\n   */\n  @media (forced-colors: active) {\n    .v-menu-item:focus,\n    .v-menu-item[aria-expanded='true'] {\n      outline: var(--vectis-focus-ring-width) solid Highlight;\n      outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n    }\n\n    .v-menu-item.v-menu-item[data-selected] {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n    }\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 * Menu commands use native buttons or links. JavaScript handles inert anchors and submenu hover\n * intent; the panel owns roving focus and dismissal.\n */\n\nimport { inject, ref, useAttrs, useId } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { isRtl } from '../../utils/direction'\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 { menuAnchor, 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 active\n   * 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 something\n   * belongs there), and `neutral`, the default, is every other command.\n   */\n  tone?: MenuItemTone\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; so there\n// is no single root for Vue to put the consumer's attributes on. They are placed on the item\n// 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 included,\n   * so menus may nest as deep as needed.\n   */\n  submenu?(): unknown\n}>()\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// 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 attrs = useAttrs()\nconst link = useInertLink({\n  href: () => (hasSubmenu() ? undefined : props.href),\n  inert: () => props.disabled,\n  attrs: () => attrs,\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()\n// Hover and the keyboard open the submenu from code: see the `anchor` prop of VMenuPanel.\nconst subAnchor = menuAnchor(subId)\nconst subOpen = ref(false)\nconst subPanel = ref<InstanceType<typeof VMenuPanel> | null>(null)\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; it only\n// reacts to a click.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  // @keyboard @a11y\n  // A menu item is activated by Space as well as Enter, and a LINK answers Enter alone:\n  // Space would scroll the page instead.\n  if (!hasSubmenu()) {\n    if (event.key === ' ' && tag() === 'a') {\n      event.preventDefault()\n      itemEl.value?.click()\n    }\n    return\n  }\n  if (props.disabled) return\n  // The submenu opens towards the end of the line, so the arrow that points at it is the\n  // one that opens it: the left one in a right-to-left page.\n  const toward = isRtl(itemEl.value) ? 'ArrowLeft' : 'ArrowRight'\n  if (![toward, '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 it was\n// meant; otherwise every panel crossed on the way to another one would flash open. ONE timer\n// serves both directions, since opening and closing are mutually exclusive: arming either\n// always cancels the other.\nconst hoverTimer = useTimer()\n\n// @a11y @core\n// A TOUCH tap sends `pointerenter` and `pointerleave` before its `click`, so the leave below\n// armed the close and the submenu the tap opened shut 150 ms later. Hover intent means nothing\n// to a finger: only a pointer that can hover takes this route, the tap opening the submenu\n// natively through the click.\nfunction onPointerEnter(event: PointerEvent) {\n  if (props.disabled || event.pointerType === 'touch') return\n  // Hovering also moves the focus, so that the mouse and the keyboard never highlight two\n  // 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\n// 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(event: PointerEvent) {\n  if (!hasSubmenu() || event.pointerType === 'touch') 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    :aria-disabled=\"link.isInertLink.value ? 'true' : 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    v-bind=\"link.attrs.value\"\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=\"link.linkHref.value\"\n    :data-tone=\"tone\"\n    :data-selected=\"selected ? '' : undefined\"\n    :popovertarget=\"hasSubmenu() ? subId : undefined\"\n    :popovertargetaction=\"hasSubmenu() ? 'show' : undefined\"\n    :style=\"hasSubmenu() ? { '--menu-anchor': subAnchor } : 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    :anchor=\"subAnchor\"\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 this row\n     * inherits; one size table for the whole design system. The icons follow with nothing\n     * written for them, their own variables belonging to that same block.\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  /* The name is unique per item and read by the submenu panel's `position-anchor`. */\n  .v-menu-item[aria-haspopup] {\n    anchor-name: var(--menu-anchor);\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  /*\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; and the\n   * browser would not call that a keyboard focus worth showing. While a submenu is open its\n   * parent item keeps the highlight too, so the path followed through the levels stays visible.\n   */\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  /*\n   * The highlight is a background, which the mode forces to Canvas: the row under the focus\n   * would look exactly like the others, and a keyboard user would lose their place (WCAG\n   * 2.4.7). An outline inside the row takes its place.\n   */\n  @media (forced-colors: active) {\n    .v-menu-item:focus,\n    .v-menu-item[aria-expanded='true'] {\n      outline: var(--vectis-focus-ring-width) solid Highlight;\n      outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n    }\n\n    .v-menu-item.v-menu-item[data-selected] {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -4,14 +4,14 @@ import { useInertLink as n } from "../../composables/useInertLink.js";
 import { chevron_right as r } from "../VIcon/icons/chevron_right.js";
 import { isRtl as i } from "../../utils/direction.js";
 import { useTimer as a } from "../../composables/useTimer.js";
-import { menuKey as o } from "./context.js";
-import s from "./VMenuPanel.js";
-import { Fragment as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, defineComponent as m, inject as h, mergeProps as g, normalizeProps as _, openBlock as v, ref as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useAttrs as w, useId as T, useSlots as E, withCtx as D } from "vue";
+import { menuAnchor as o, menuKey as s } from "./context.js";
+import c from "./VMenuPanel.js";
+import { Fragment as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, defineComponent as h, inject as g, mergeProps as _, normalizeProps as v, openBlock as y, ref as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useAttrs as T, useId as E, useSlots as D, withCtx as O } from "vue";
 //#region src/components/VMenu/VMenuItem.vue?vue&type=script&setup=true&lang.ts
-var O = { class: "v-menu-item-content" }, k = { class: "v-menu-item-label" }, A = {
+var k = { class: "v-menu-item-content" }, A = { class: "v-menu-item-label" }, j = {
 	key: 0,
 	class: "v-menu-item-sublabel"
-}, j = /*@__PURE__*/ m({
+}, M = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "VMenuItem",
 	props: {
@@ -31,81 +31,82 @@ var O = { class: "v-menu-item-content" }, k = { class: "v-menu-item-label" }, A
 		href: { default: void 0 }
 	},
 	emits: ["select"],
-	setup(m, { emit: j }) {
-		let M = m, N = j, P = E();
-		function F() {
-			return !!P.submenu;
-		}
+	setup(h, { emit: M }) {
+		let N = h, P = M, F = D();
 		function I() {
-			return !F() && M.href !== void 0 ? "a" : "button";
+			return !!F.submenu;
+		}
+		function L() {
+			return !I() && N.href !== void 0 ? "a" : "button";
 		}
-		let L = w(), R = n({
-			href: () => F() ? void 0 : M.href,
-			inert: () => M.disabled,
-			attrs: () => L
-		}), z = h(o, null);
-		function B() {
-			M.disabled || F() || (N("select"), z?.closeAll());
+		let R = T(), z = n({
+			href: () => I() ? void 0 : N.href,
+			inert: () => N.disabled,
+			attrs: () => R
+		}), B = g(s, null);
+		function V() {
+			N.disabled || I() || (P("select"), B?.closeAll());
 		}
-		let V = T(), H = y(!1), U = y(null), W = y(null);
-		function G(e) {
+		let H = E(), U = o(H), W = b(!1), G = b(null), K = b(null);
+		function q(e) {
 			if (!(e.altKey || e.ctrlKey || e.metaKey)) {
-				if (!F()) {
-					e.key === " " && I() === "a" && (e.preventDefault(), W.value?.click());
+				if (!I()) {
+					e.key === " " && L() === "a" && (e.preventDefault(), K.value?.click());
 					return;
 				}
-				M.disabled || [
-					i(W.value) ? "ArrowLeft" : "ArrowRight",
+				N.disabled || [
+					i(K.value) ? "ArrowLeft" : "ArrowRight",
 					"Enter",
 					" "
-				].includes(e.key) && (e.preventDefault(), U.value?.show(W.value ?? void 0), U.value?.focusFirst());
+				].includes(e.key) && (e.preventDefault(), G.value?.show(K.value ?? void 0), G.value?.focusFirst());
 			}
 		}
-		let K = a();
-		function q(e) {
-			M.disabled || e.pointerType === "touch" || (W.value?.focus({ preventScroll: !0 }), F() && K.start(() => U.value?.show(W.value ?? void 0), 150));
+		let J = a();
+		function Y(e) {
+			N.disabled || e.pointerType === "touch" || (K.value?.focus({ preventScroll: !0 }), I() && J.start(() => G.value?.show(K.value ?? void 0), 150));
 		}
-		function J(e) {
-			!F() || e.pointerType === "touch" || K.start(() => {
-				U.value?.el?.contains(document.activeElement) || U.value?.close();
+		function X(e) {
+			!I() || e.pointerType === "touch" || J.start(() => {
+				G.value?.el?.contains(document.activeElement) || G.value?.close();
 			}, 150);
 		}
-		return (n, i) => (v(), d(c, null, [(v(), l(x(I()), g({
+		return (n, i) => (y(), f(l, null, [(y(), u(S(L()), _({
 			ref_key: "itemEl",
-			ref: W,
-			"aria-disabled": C(R).isInertLink.value ? "true" : void 0,
-			"aria-current": m.selected ? "true" : void 0,
-			"aria-haspopup": F() ? "menu" : void 0,
-			"aria-expanded": F() ? H.value : void 0,
-			"aria-controls": F() ? C(V) : void 0
-		}, C(R).attrs.value, {
+			ref: K,
+			"aria-disabled": w(z).isInertLink.value ? "true" : void 0,
+			"aria-current": h.selected ? "true" : void 0,
+			"aria-haspopup": I() ? "menu" : void 0,
+			"aria-expanded": I() ? W.value : void 0,
+			"aria-controls": I() ? w(H) : void 0
+		}, w(z).attrs.value, {
 			role: "menuitem",
 			tabindex: "-1",
 			class: "v-menu-item",
-			type: I() === "button" ? "button" : void 0,
-			disabled: I() === "button" ? m.disabled : void 0,
-			href: C(R).linkHref.value,
-			"data-tone": m.tone,
-			"data-selected": m.selected ? "" : void 0,
-			popovertarget: F() ? C(V) : void 0,
-			popovertargetaction: F() ? "show" : void 0,
-			onClick: B,
-			onKeydown: G,
-			onPointerenter: q,
-			onPointerleave: J
+			type: L() === "button" ? "button" : void 0,
+			disabled: L() === "button" ? h.disabled : void 0,
+			href: w(z).linkHref.value,
+			"data-tone": h.tone,
+			"data-selected": h.selected ? "" : void 0,
+			popovertarget: I() ? w(H) : void 0,
+			popovertargetaction: I() ? "show" : void 0,
+			style: I() ? { "--menu-anchor": w(U) } : void 0,
+			onClick: V,
+			onKeydown: q,
+			onPointerenter: Y,
+			onPointerleave: X
 		}), {
-			default: D(() => [
-				b(n.$slots, "start", {}, () => [m.iconStart ? (v(), l(t, g({
+			default: O(() => [
+				x(n.$slots, "start", {}, () => [h.iconStart ? (y(), u(t, _({
 					key: 0,
 					class: "v-menu-item-icon"
-				}, C(e)(m.iconStart)), null, 16)) : u("", !0)]),
-				f("span", O, [f("span", k, [b(n.$slots, "default", {}, () => [p(S(m.label), 1)])]), m.sublabel !== void 0 || n.$slots.sublabel ? (v(), d("span", A, [b(n.$slots, "sublabel", {}, () => [p(S(m.sublabel), 1)])])) : u("", !0)]),
-				F() ? (v(), l(t, {
+				}, w(e)(h.iconStart)), null, 16)) : d("", !0)]),
+				p("span", k, [p("span", A, [x(n.$slots, "default", {}, () => [m(C(h.label), 1)])]), h.sublabel !== void 0 || n.$slots.sublabel ? (y(), f("span", j, [x(n.$slots, "sublabel", {}, () => [m(C(h.sublabel), 1)])])) : d("", !0)]),
+				I() ? (y(), u(t, {
 					key: 0,
-					name: C(r),
+					name: w(r),
 					class: "v-menu-item-chevron",
 					mirrored: ""
-				}, null, 8, ["name"])) : b(n.$slots, "end", {}, () => [m.iconEnd ? (v(), l(t, _(g({ key: 0 }, C(e)(m.iconEnd))), null, 16)) : u("", !0)], void 0, 1)
+				}, null, 8, ["name"])) : x(n.$slots, "end", {}, () => [h.iconEnd ? (y(), u(t, v(_({ key: 0 }, w(e)(h.iconEnd))), null, 16)) : d("", !0)], void 0, 1)
 			]),
 			_: 3
 		}, 16, [
@@ -120,24 +121,26 @@ var O = { class: "v-menu-item-content" }, k = { class: "v-menu-item-label" }, A
 			"data-tone",
 			"data-selected",
 			"popovertarget",
-			"popovertargetaction"
-		])), F() ? (v(), l(s, {
+			"popovertargetaction",
+			"style"
+		])), I() ? (y(), u(c, {
 			key: 0,
-			id: C(V),
+			id: w(H),
 			ref_key: "subPanel",
-			ref: U,
+			ref: G,
 			placement: "right-start",
+			anchor: w(U),
 			submenu: "",
-			onToggle: i[0] ||= (e) => H.value = e,
-			onPointerenter: i[1] ||= (e) => C(K).cancel(),
-			onPointerleave: J
+			onToggle: i[0] ||= (e) => W.value = e,
+			onPointerenter: i[1] ||= (e) => w(J).cancel(),
+			onPointerleave: X
 		}, {
-			default: D(() => [b(n.$slots, "submenu")]),
+			default: O(() => [x(n.$slots, "submenu")]),
 			_: 3
-		}, 8, ["id"])) : u("", !0)], 64));
+		}, 8, ["id", "anchor"])) : d("", !0)], 64));
 	}
 });
 //#endregion
-export { j as default };
+export { M as default };
 
 //# sourceMappingURL=VMenuItem.vue_vue_type_script_setup_true_lang.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"VMenuItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VMenu/VMenuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Menu commands use native buttons or links. JavaScript handles inert anchors and submenu hover\n * intent; the panel owns roving focus and dismissal.\n */\n\nimport { inject, ref, useAttrs, useId } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { isRtl } from '../../utils/direction'\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 active\n   * 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 something\n   * belongs there), and `neutral`, the default, is every other command.\n   */\n  tone?: MenuItemTone\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; so there\n// is no single root for Vue to put the consumer's attributes on. They are placed on the item\n// 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 included,\n   * so menus may nest as deep as needed.\n   */\n  submenu?(): unknown\n}>()\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// 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 attrs = useAttrs()\nconst link = useInertLink({\n  href: () => (hasSubmenu() ? undefined : props.href),\n  inert: () => props.disabled,\n  attrs: () => attrs,\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// When a submenu is opened from code rather than by a click, the item must be handed to the\n// browser as the source of that opening. The implicit anchor is only established natively, on\n// click; without it the panel has nothing to position itself against and lands at the corner of\n// 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; it only\n// reacts to a click.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  // @keyboard @a11y\n  // A menu item is activated by Space as well as Enter, and a LINK answers Enter alone:\n  // Space would scroll the page instead.\n  if (!hasSubmenu()) {\n    if (event.key === ' ' && tag() === 'a') {\n      event.preventDefault()\n      itemEl.value?.click()\n    }\n    return\n  }\n  if (props.disabled) return\n  // The submenu opens towards the end of the line, so the arrow that points at it is the\n  // one that opens it: the left one in a right-to-left page.\n  const toward = isRtl(itemEl.value) ? 'ArrowLeft' : 'ArrowRight'\n  if (![toward, '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 it was\n// meant; otherwise every panel crossed on the way to another one would flash open. ONE timer\n// serves both directions, since opening and closing are mutually exclusive: arming either\n// always cancels the other.\nconst hoverTimer = useTimer()\n\n// @a11y @core\n// A TOUCH tap sends `pointerenter` and `pointerleave` before its `click`, so the leave below\n// armed the close and the submenu the tap opened shut 150 ms later. Hover intent means nothing\n// to a finger: only a pointer that can hover takes this route, the tap opening the submenu\n// natively through the click.\nfunction onPointerEnter(event: PointerEvent) {\n  if (props.disabled || event.pointerType === 'touch') return\n  // Hovering also moves the focus, so that the mouse and the keyboard never highlight two\n  // 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\n// 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(event: PointerEvent) {\n  if (!hasSubmenu() || event.pointerType === 'touch') 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    :aria-disabled=\"link.isInertLink.value ? 'true' : 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    v-bind=\"link.attrs.value\"\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=\"link.linkHref.value\"\n    :data-tone=\"tone\"\n    :data-selected=\"selected ? '' : undefined\"\n    :popovertarget=\"hasSubmenu() ? subId : undefined\"\n    :popovertargetaction=\"hasSubmenu() ? 'show' : 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 this row\n     * inherits; one size table for the whole design system. The icons follow with nothing\n     * written for them, their own variables belonging to that same block.\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  /*\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; and the\n   * browser would not call that a keyboard focus worth showing. While a submenu is open its\n   * parent item keeps the highlight too, so the path followed through the levels stays visible.\n   */\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  /*\n   * The highlight is a background, which the mode forces to Canvas: the row under the focus\n   * would look exactly like the others, and a keyboard user would lose their place (WCAG\n   * 2.4.7). An outline inside the row takes its place.\n   */\n  @media (forced-colors: active) {\n    .v-menu-item:focus,\n    .v-menu-item[aria-expanded='true'] {\n      outline: var(--vectis-focus-ring-width) solid Highlight;\n      outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n    }\n\n    .v-menu-item.v-menu-item[data-selected] {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"VMenuItem.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/VMenu/VMenuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Menu commands use native buttons or links. JavaScript handles inert anchors and submenu hover\n * intent; the panel owns roving focus and dismissal.\n */\n\nimport { inject, ref, useAttrs, useId } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { useInertLink } from '../../composables/useInertLink'\nimport { isRtl } from '../../utils/direction'\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 { menuAnchor, 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 active\n   * 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 something\n   * belongs there), and `neutral`, the default, is every other command.\n   */\n  tone?: MenuItemTone\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; so there\n// is no single root for Vue to put the consumer's attributes on. They are placed on the item\n// 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 included,\n   * so menus may nest as deep as needed.\n   */\n  submenu?(): unknown\n}>()\n\n// A function read by the template, never a `computed`: `slots` is not reactive, so a computed\n// 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 attrs = useAttrs()\nconst link = useInertLink({\n  href: () => (hasSubmenu() ? undefined : props.href),\n  inert: () => props.disabled,\n  attrs: () => attrs,\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()\n// Hover and the keyboard open the submenu from code: see the `anchor` prop of VMenuPanel.\nconst subAnchor = menuAnchor(subId)\nconst subOpen = ref(false)\nconst subPanel = ref<InstanceType<typeof VMenuPanel> | null>(null)\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; it only\n// reacts to a click.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  // @keyboard @a11y\n  // A menu item is activated by Space as well as Enter, and a LINK answers Enter alone:\n  // Space would scroll the page instead.\n  if (!hasSubmenu()) {\n    if (event.key === ' ' && tag() === 'a') {\n      event.preventDefault()\n      itemEl.value?.click()\n    }\n    return\n  }\n  if (props.disabled) return\n  // The submenu opens towards the end of the line, so the arrow that points at it is the\n  // one that opens it: the left one in a right-to-left page.\n  const toward = isRtl(itemEl.value) ? 'ArrowLeft' : 'ArrowRight'\n  if (![toward, '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 it was\n// meant; otherwise every panel crossed on the way to another one would flash open. ONE timer\n// serves both directions, since opening and closing are mutually exclusive: arming either\n// always cancels the other.\nconst hoverTimer = useTimer()\n\n// @a11y @core\n// A TOUCH tap sends `pointerenter` and `pointerleave` before its `click`, so the leave below\n// armed the close and the submenu the tap opened shut 150 ms later. Hover intent means nothing\n// to a finger: only a pointer that can hover takes this route, the tap opening the submenu\n// natively through the click.\nfunction onPointerEnter(event: PointerEvent) {\n  if (props.disabled || event.pointerType === 'touch') return\n  // Hovering also moves the focus, so that the mouse and the keyboard never highlight two\n  // 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\n// 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(event: PointerEvent) {\n  if (!hasSubmenu() || event.pointerType === 'touch') 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    :aria-disabled=\"link.isInertLink.value ? 'true' : 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    v-bind=\"link.attrs.value\"\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=\"link.linkHref.value\"\n    :data-tone=\"tone\"\n    :data-selected=\"selected ? '' : undefined\"\n    :popovertarget=\"hasSubmenu() ? subId : undefined\"\n    :popovertargetaction=\"hasSubmenu() ? 'show' : undefined\"\n    :style=\"hasSubmenu() ? { '--menu-anchor': subAnchor } : 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    :anchor=\"subAnchor\"\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 this row\n     * inherits; one size table for the whole design system. The icons follow with nothing\n     * written for them, their own variables belonging to that same block.\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  /* The name is unique per item and read by the submenu panel's `position-anchor`. */\n  .v-menu-item[aria-haspopup] {\n    anchor-name: var(--menu-anchor);\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  /*\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; and the\n   * browser would not call that a keyboard focus worth showing. While a submenu is open its\n   * parent item keeps the highlight too, so the path followed through the levels stays visible.\n   */\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  /*\n   * The highlight is a background, which the mode forces to Canvas: the row under the focus\n   * would look exactly like the others, and a keyboard user would lose their place (WCAG\n   * 2.4.7). An outline inside the row takes its place.\n   */\n  @media (forced-colors: active) {\n    .v-menu-item:focus,\n    .v-menu-item[aria-expanded='true'] {\n      outline: var(--vectis-focus-ring-width) solid Highlight;\n      outline-offset: calc(-1 * var(--vectis-focus-ring-width));\n    }\n\n    .v-menu-item.v-menu-item[data-selected] {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VMenu/VMenuPanel.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-menu{min-inline-size:var(--vectis-control-size-menu-min);max-inline-size:min(var(--vectis-control-size-menu-max), calc(100dvi - var(--vectis-space-8)))}.v-menu:focus{outline:none}.v-menu .v-menu[data-placement=right-start]{margin-block-start:calc(-1 * (var(--vectis-space-1) + 1px))}.v-menu[data-width]{min-inline-size:0;inline-size:var(--menu-width)}.v-menu[data-match-trigger]{min-inline-size:anchor-size(width)}}
+@layer vectis.components{.v-menu{position-anchor:var(--menu-anchor);min-inline-size:var(--vectis-control-size-menu-min);max-inline-size:min(var(--vectis-control-size-menu-max), calc(100dvi - var(--vectis-space-8)))}.v-menu:focus{outline:none}.v-menu .v-menu[data-placement=right-start]{margin-block-start:calc(-1 * (var(--vectis-space-1) + 1px))}.v-menu[data-width]{min-inline-size:0;inline-size:var(--menu-width)}.v-menu[data-match-trigger]{min-inline-size:anchor-size(width)}}

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

@@ -9,6 +9,13 @@ interface MenuPanelProps {
      * the row-height settings off it, so that it inherits its parent's instead.
      */
     submenu?: boolean;
+    /**
+     * The anchor name carried by whatever opens the panel: the trigger, or the parent item.
+     * The implicit anchor is not enough: an opening from code relies on `showPopover({ source })`,
+     * and browser extensions that wrap `showPopover` (password managers do) drop that option,
+     * leaving the panel at the corner of the viewport.
+     */
+    anchor: string;
     /**
      * The row height, set by the ROOT panel only. Submenus receive no value and inherit
      * it through CSS instead.