vectis-ui 0.8.1 → 0.9.1

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

@@ -1 +1 @@
-{"version":3,"file":"VMenuGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMenu/VMenuGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @ssr — the whole script is a single generated id, and it exists only to tie\n// the group to its own label. It matches between server and client by construction,\n// Vue's `useId` guaranteeing exactly that.\n/**\n * A named section inside a menu — \"Sort by\", \"Recent files\". The name is announced as\n * the group's label rather than being read as one more item, and it is plain text: it\n * cannot be chosen, and the arrow keys walk straight past it.\n */\n\nimport { useId } from 'vue'\n\ninterface MenuGroupProps {\n  /**\n   * The name of the section, replaced by the `#label` slot. One of the two is REQUIRED:\n   * it is what names the group, and a section named by neither points its\n   * `aria-labelledby` at an empty element. It is a heading, not a command: nothing\n   * happens on click.\n   */\n  label?: string\n}\n\nwithDefaults(defineProps<MenuGroupProps>(), {\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The commands belonging to this section. */\n  default(): unknown\n  /** A name made of markup, replacing the `label` prop. */\n  label?(): unknown\n}>()\n\nconst labelId = useId()\n</script>\n\n<template>\n  <div role=\"group\" class=\"v-menu-group\" :aria-labelledby=\"labelId\">\n    <span :id=\"labelId\" class=\"v-menu-group-label v-group-label\"\n      ><slot name=\"label\">{{ label }}</slot></span\n    >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-menu-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n}\n</style>\n"],"mappings":";;;;;;EAiCA,IAAM,IAAU,EAAM;yBAIpB,EAKM,OAAA;GALD,MAAK;GAAQ,OAAM;GAAgB,mBAAiB,EAAA,CAAA;MACvD,EAEC,QAAA;GAFM,IAAI,EAAA,CAAA;GAAS,OAAM;MACvB,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,GAE9B,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA"}
+{"version":3,"file":"VMenuGroup.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMenu/VMenuGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * A named section inside a menu: \"Sort by\", \"Recent files\". The name is announced as\n * the group's label rather than being read as one more item, and it is plain text: it\n * cannot be chosen, and the arrow keys walk straight past it.\n */\n\nimport { useId, useSlots, watchEffect } from 'vue'\n\nimport { isDev } from '../../utils/env'\n\ninterface MenuGroupProps {\n  /**\n   * The name of the section, replaced by the `#label` slot. One of the two is REQUIRED:\n   * it is what names the group, and a section named by neither points its\n   * `aria-labelledby` at an empty element. It is a heading, not a command: nothing\n   * happens on click.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<MenuGroupProps>(), {\n  label: undefined,\n})\n\ndefineSlots<{\n  /** The commands belonging to this section. */\n  default(): unknown\n  /** A name made of markup, replacing the `label` prop. */\n  label?(): unknown\n}>()\n\n// @a11y @ssr\n// The generated id ties the group to its own label, and matches between server and\n// client by construction, Vue's `useId` guaranteeing exactly that.\nconst labelId = useId()\n\n// @devwarn\n// A group named by neither points its `aria-labelledby` at an empty element, and a\n// screen reader announces an unnamed group with nothing on screen to say so.\nif (isDev) {\n  const slots = useSlots()\n  watchEffect(() => {\n    if (!props.label && !slots.label)\n      console.warn('[VMenuGroup] needs a name: give it a `label` or a `#label` slot.')\n  })\n}\n</script>\n\n<template>\n  <div role=\"group\" class=\"v-menu-group\" :aria-labelledby=\"labelId\">\n    <span :id=\"labelId\" class=\"v-menu-group-label\"\n      ><slot name=\"label\">{{ label }}</slot></span\n    >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-menu-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--vectis-space-1);\n  }\n\n  .v-menu-group-label {\n    display: flex;\n    align-items: center;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: var(--control-padding-inline);\n    font-size: var(--vectis-text-overline-size);\n    font-weight: var(--vectis-text-overline-weight);\n    letter-spacing: var(--vectis-text-overline-tracking);\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;EAqBA,IAAM,IAAQ,GAcR,IAAU,EAAM;EAKtB,IAAI,GAAO;GACT,IAAM,IAAQ,EAAS;GACvB,QAAkB;IAChB,AAAI,CAAC,EAAM,SAAS,CAAC,EAAM,SACzB,QAAQ,KAAK,kEAAkE;GACnF,CAAC;EACH;yBAIE,EAKM,OAAA;GALD,MAAK;GAAQ,OAAM;GAAgB,mBAAiB,EAAA,CAAA;MACvD,EAEC,QAAA;GAFM,IAAI,EAAA,CAAA;GAAS,OAAM;MACvB,EAAqC,EAAA,QAAA,SAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,GAE9B,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,GAAA,CAAA"}

package/dist/components/VMenu/VMenuItem.css

@@ -1,2 +1,2 @@
 @layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
-@layer vectis.components{.v-menu-item{align-items:center;gap:var(--control-gap);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}}
+@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}}}

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

@@ -17,13 +17,13 @@ interface MenuItemProps {
     /** An icon after the label, in the same forms. The `#end` slot replaces it. */
     iconEnd?: IconSource;
     /**
-     * Marks this item as the one currently in effect — the chosen sort order, the
-     * active view. It is coloured and announced as such.
+     * Marks this item as the one currently in effect: the chosen sort order, the active
+     * view. It is coloured and announced as such.
      */
     selected?: boolean;
     /**
-     * What the command means, in colour. `danger` marks it destructive — deleting
-     * something belongs there — and `neutral`, the default, is every other command.
+     * What the command means, in colour. `danger` marks it destructive (deleting something
+     * belongs there), and `neutral`, the default, is every other command.
      *
      * A row is an action, so it takes the vocabulary of one: the same word on the same
      * prop as a VButton, rather than a boolean of its own. There is no `accent` here,
@@ -48,8 +48,8 @@ type __VLS_Slots = {
     /** Free content after the label, which takes the place of `iconEnd`. */
     end?(): unknown;
     /**
-     * The contents of a submenu — items, groups and separators, this component
-     * included, so menus may nest as deep as needed.
+     * The contents of a submenu: items, groups and separators, this component included,
+     * so menus may nest as deep as needed.
      */
     submenu?(): unknown;
 };

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

@@ -1,15 +1,17 @@
 import { iconProps as e } from "../VIcon/iconProps.js";
 import t from "../VIcon/VIcon.js";
-import { chevron_right as n } from "../VIcon/icons/chevron_right.js";
-import { useTimer as r } from "../../composables/useTimer.js";
-import { menuKey as i } from "./context.js";
-import a from "./VMenuPanel.js";
-import { Fragment as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, defineComponent as f, inject as p, mergeProps as m, normalizeProps as h, openBlock as g, ref as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useId as S, useSlots as C, withCtx as w } from "vue";
+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";
 //#region src/components/VMenu/VMenuItem.vue?vue&type=script&setup=true&lang.ts
-var T = { class: "v-menu-item-content" }, E = { class: "v-menu-item-label" }, D = {
+var O = { class: "v-menu-item-content" }, k = { class: "v-menu-item-label" }, A = {
 	key: 0,
 	class: "v-menu-item-sublabel"
-}, O = /*@__PURE__*/ f({
+}, j = /*@__PURE__*/ m({
 	inheritAttrs: !1,
 	__name: "VMenuItem",
 	props: {
@@ -29,101 +31,113 @@ var T = { class: "v-menu-item-content" }, E = { class: "v-menu-item-label" }, D
 		href: { default: void 0 }
 	},
 	emits: ["select"],
-	setup(f, { emit: O }) {
-		let k = f, A = O, j = C();
-		function M() {
-			return !!j.submenu;
+	setup(m, { emit: j }) {
+		let M = m, N = j, P = E();
+		function F() {
+			return !!P.submenu;
 		}
-		function N() {
-			return !M() && k.href !== void 0 ? "a" : "button";
+		function I() {
+			return !F() && M.href !== void 0 ? "a" : "button";
 		}
-		let P = p(i, null);
-		function F() {
-			k.disabled || M() || (A("select"), P?.closeAll());
+		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 I = S(), L = _(!1), R = _(null), z = _(null);
-		function B(e) {
-			!M() || k.disabled || [
-				"ArrowRight",
-				"Enter",
-				" "
-			].includes(e.key) && (e.preventDefault(), R.value?.show(z.value ?? void 0), R.value?.focusFirst());
+		let V = T(), H = y(!1), U = y(null), W = y(null);
+		function G(e) {
+			if (!(e.altKey || e.ctrlKey || e.metaKey)) {
+				if (!F()) {
+					e.key === " " && I() === "a" && (e.preventDefault(), W.value?.click());
+					return;
+				}
+				M.disabled || [
+					i(W.value) ? "ArrowLeft" : "ArrowRight",
+					"Enter",
+					" "
+				].includes(e.key) && (e.preventDefault(), U.value?.show(W.value ?? void 0), U.value?.focusFirst());
+			}
 		}
-		let V = r();
-		function H() {
-			k.disabled || (z.value?.focus({ preventScroll: !0 }), M() && V.start(() => R.value?.show(z.value ?? void 0), 150));
+		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));
 		}
-		function U() {
-			M() && V.start(() => {
-				R.value?.el?.contains(document.activeElement) || R.value?.close();
+		function J(e) {
+			!F() || e.pointerType === "touch" || K.start(() => {
+				U.value?.el?.contains(document.activeElement) || U.value?.close();
 			}, 150);
 		}
-		return (r, i) => (g(), l(o, null, [(g(), s(y(N()), m({
+		return (n, i) => (v(), d(c, null, [(v(), l(x(I()), g({
 			ref_key: "itemEl",
-			ref: z
-		}, r.$attrs, {
+			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, {
 			role: "menuitem",
 			tabindex: "-1",
 			class: "v-menu-item",
-			type: N() === "button" ? "button" : void 0,
-			disabled: N() === "button" ? f.disabled : void 0,
-			href: N() === "a" && !f.disabled ? f.href : void 0,
-			"aria-disabled": N() === "a" && f.disabled ? "true" : void 0,
-			"data-tone": f.tone,
-			"data-selected": f.selected ? "" : void 0,
-			"aria-current": f.selected ? "true" : void 0,
-			"aria-haspopup": M() ? "menu" : void 0,
-			"aria-expanded": M() ? L.value : void 0,
-			"aria-controls": M() ? x(I) : void 0,
-			popovertarget: M() ? x(I) : void 0,
-			onClick: F,
-			onKeydown: B,
-			onPointerenter: H,
-			onPointerleave: U
+			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
 		}), {
-			default: w(() => [
-				v(r.$slots, "start", {}, () => [f.iconStart ? (g(), s(t, m({
+			default: D(() => [
+				b(n.$slots, "start", {}, () => [m.iconStart ? (v(), l(t, g({
 					key: 0,
 					class: "v-menu-item-icon"
-				}, x(e)(f.iconStart)), null, 16)) : c("", !0)]),
-				u("span", T, [u("span", E, [v(r.$slots, "default", {}, () => [d(b(f.label), 1)])]), f.sublabel !== void 0 || r.$slots.sublabel ? (g(), l("span", D, [v(r.$slots, "sublabel", {}, () => [d(b(f.sublabel), 1)])])) : c("", !0)]),
-				M() ? (g(), s(t, {
+				}, 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, {
 					key: 0,
-					name: x(n),
+					name: C(r),
 					class: "v-menu-item-chevron",
 					mirrored: ""
-				}, null, 8, ["name"])) : v(r.$slots, "end", {}, () => [f.iconEnd ? (g(), s(t, h(m({ key: 0 }, x(e)(f.iconEnd))), null, 16)) : c("", !0)], void 0, 1)
+				}, 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)
 			]),
 			_: 3
 		}, 16, [
-			"type",
-			"disabled",
-			"href",
 			"aria-disabled",
-			"data-tone",
-			"data-selected",
 			"aria-current",
 			"aria-haspopup",
 			"aria-expanded",
 			"aria-controls",
-			"popovertarget"
-		])), M() ? (g(), s(a, {
+			"type",
+			"disabled",
+			"href",
+			"data-tone",
+			"data-selected",
+			"popovertarget",
+			"popovertargetaction"
+		])), F() ? (v(), l(s, {
 			key: 0,
-			id: x(I),
+			id: C(V),
 			ref_key: "subPanel",
-			ref: R,
+			ref: U,
 			placement: "right-start",
 			submenu: "",
-			onToggle: i[0] ||= (e) => L.value = e,
-			onPointerenter: i[1] ||= (e) => x(V).cancel(),
-			onPointerleave: U
+			onToggle: i[0] ||= (e) => H.value = e,
+			onPointerenter: i[1] ||= (e) => C(K).cancel(),
+			onPointerleave: J
 		}, {
-			default: w(() => [v(r.$slots, "submenu")]),
+			default: D(() => [b(n.$slots, "submenu")]),
 			_: 3
-		}, 8, ["id"])) : c("", !0)], 64));
+		}, 8, ["id"])) : u("", !0)], 64));
 	}
 });
 //#endregion
-export { O as default };
+export { j 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":["$attrs","$slots"],"sources":["../../../src/components/VMenu/VMenuItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One command in a menu. The panel moves the focus between items, and choosing one closes\n * the whole menu, submenus included.\n *\n * With an `href` it becomes a link, made inert by hand when disabled — a link has no\n * `disabled` attribute, so the address is removed and `aria-disabled` says why.\n *\n * With the `#submenu` slot it becomes the trigger of a nested panel rendered INSIDE the\n * parent one. That nesting is what buys the submenu behaviour from the browser: the panels\n * form a native stack, a click outside closes all of them, and opening one branch closes its\n * sibling.\n *\n * The JS covers only the two openings the browser does not: the keyboard, and a hover held\n * long enough to show it was meant. A click already opens it natively.\n */\n\nimport { inject, ref, useId } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport { chevron_right as chevronRightIcon } from '../VIcon/icons/chevron_right'\nimport type { IconSource } from '../VIcon/types'\nimport VMenuPanel from './VMenuPanel.vue'\nimport { menuKey, SUBMENU_HOVER_DELAY } from './context'\n\nimport { useTimer } from '../../composables/useTimer'\n\n/**\n * What a command means, in colour. It is the subset of VButton's tones a menu row can\n * carry: an ordinary command, or a destructive one.\n */\nexport type MenuItemTone = 'neutral' | 'danger'\n\ninterface MenuItemProps {\n  /** What the command says. The default slot replaces it. */\n  label?: string\n  /** A second line under the label, for a shortcut or a short explanation. */\n  sublabel?: string\n  /**\n   * An icon before the label: an icon name, an image address, or an explicit render.\n   * The `#start` slot replaces it.\n   */\n  iconStart?: IconSource\n  /** An icon after the label, in the same forms. The `#end` slot replaces it. */\n  iconEnd?: IconSource\n  /**\n   * Marks this item as the one currently in effect — the chosen sort order, the\n   * active view. It is coloured and announced as such.\n   */\n  selected?: boolean\n  /**\n   * What the command means, in colour. `danger` marks it destructive — deleting\n   * something belongs there — and `neutral`, the default, is every other command.\n   *\n   * A row is an action, so it takes the vocabulary of one: the same word on the same\n   * prop as a VButton, rather than a boolean of its own. There is no `accent` here,\n   * a menu having no primary command among its rows.\n   */\n  tone?: MenuItemTone\n  /** Makes the item unusable: it no longer responds and the arrows skip over it. */\n  disabled?: boolean\n  /**\n   * Turns the item into a link pointing at this address, for a menu that navigates\n   * rather than acts. A disabled link is made inert by hand.\n   */\n  href?: string\n}\n\n// With a submenu this component renders two elements — the item and the nested panel\n// — so there is no single root for Vue to put the consumer's attributes on. They are\n// placed on the item explicitly.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<MenuItemProps>(), {\n  label: undefined,\n  sublabel: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  selected: false,\n  tone: 'neutral',\n  disabled: false,\n  href: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * The command was chosen, by click or by keyboard. It is emitted before the menu\n   * closes, so the handler runs while the menu is still open.\n   */\n  select: []\n}>()\n\nconst slots = defineSlots<{\n  /** The label, replacing the `label` prop. */\n  default?(): unknown\n  /** The second line, replacing the `sublabel` prop. */\n  sublabel?(): unknown\n  /** Free content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Free content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n  /**\n   * The contents of a submenu — items, groups and separators, this component\n   * included, so menus may nest as deep as needed.\n   */\n  submenu?(): unknown\n}>()\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed would keep its first answer while a slot behind a `v-if` comes and goes.\nfunction hasSubmenu() {\n  return !!slots.submenu\n}\nfunction tag() {\n  return !hasSubmenu() && props.href !== undefined ? ('a' as const) : ('button' as const)\n}\n\nconst menu = inject(menuKey, null)\n\nfunction onClick() {\n  if (props.disabled || hasSubmenu()) return\n  emit('select')\n  menu?.closeAll()\n}\n\nconst subId = useId()\nconst subOpen = ref(false)\nconst subPanel = ref<InstanceType<typeof VMenuPanel> | null>(null)\n// TRAP — when a submenu is opened from code rather than by a click, the item must be\n// handed to the browser as the source of that opening. The implicit anchor is only\n// established natively, on click; without it the panel has nothing to position itself\n// against and lands at the corner of the viewport, with no error anywhere.\nconst itemEl = ref<HTMLElement | null>(null)\n\n// @keyboard\n// Opening a submenu from the keyboard, which the browser's own toggle does not cover\n// — it only reacts to a click.\nfunction onKeydown(event: KeyboardEvent) {\n  if (!hasSubmenu() || props.disabled) return\n  if (!['ArrowRight', 'Enter', ' '].includes(event.key)) return\n  // The button's native activation has to be stopped: it would fire a click of its\n  // own, and that click would toggle the panel shut again right behind the opening\n  // below.\n  event.preventDefault()\n  subPanel.value?.show(itemEl.value ?? undefined)\n  subPanel.value?.focusFirst()\n}\n\n// A submenu opens on hover, but only once the pointer has stayed long enough to show\n// it was meant — otherwise every panel crossed on the way to another one would flash\n// open. ONE timer serves both directions, since opening and closing are mutually\n// exclusive: arming either always cancels the other.\nconst hoverTimer = useTimer()\n\n// @a11y @core\nfunction onPointerEnter() {\n  if (props.disabled) return\n  // Hovering also moves the focus, so that the mouse and the keyboard never highlight\n  // two different items at once — in a menu there is only ever one current item.\n  itemEl.value?.focus({ preventScroll: true })\n  if (!hasSubmenu()) return\n  hoverTimer.start(() => subPanel.value?.show(itemEl.value ?? undefined), SUBMENU_HOVER_DELAY)\n}\n\n// @a11y @core — the test on where the focus currently is, is the accessibility half:\n// a pointer drifting off the item must not close a submenu a keyboard user is\n// standing inside.\nfunction onPointerLeave() {\n  if (!hasSubmenu()) return\n  hoverTimer.start(() => {\n    if (subPanel.value?.el?.contains(document.activeElement)) return\n    subPanel.value?.close()\n  }, SUBMENU_HOVER_DELAY)\n}\n</script>\n\n<template>\n  <component\n    :is=\"tag()\"\n    ref=\"itemEl\"\n    v-bind=\"$attrs\"\n    role=\"menuitem\"\n    tabindex=\"-1\"\n    class=\"v-menu-item\"\n    :type=\"tag() === 'button' ? 'button' : undefined\"\n    :disabled=\"tag() === 'button' ? disabled : undefined\"\n    :href=\"tag() === 'a' && !disabled ? href : undefined\"\n    :aria-disabled=\"tag() === 'a' && disabled ? 'true' : undefined\"\n    :data-tone=\"tone\"\n    :data-selected=\"selected ? '' : undefined\"\n    :aria-current=\"selected ? 'true' : undefined\"\n    :aria-haspopup=\"hasSubmenu() ? 'menu' : undefined\"\n    :aria-expanded=\"hasSubmenu() ? subOpen : undefined\"\n    :aria-controls=\"hasSubmenu() ? subId : undefined\"\n    :popovertarget=\"hasSubmenu() ? subId : undefined\"\n    @click=\"onClick\"\n    @keydown=\"onKeydown\"\n    @pointerenter=\"onPointerEnter\"\n    @pointerleave=\"onPointerLeave\"\n  >\n    <slot name=\"start\">\n      <VIcon v-if=\"iconStart\" class=\"v-menu-item-icon\" v-bind=\"iconProps(iconStart)\" />\n    </slot>\n    <span class=\"v-menu-item-content\">\n      <span class=\"v-menu-item-label\"\n        ><slot>{{ label }}</slot></span\n      >\n      <span v-if=\"sublabel !== undefined || $slots.sublabel\" class=\"v-menu-item-sublabel\">\n        <slot name=\"sublabel\">{{ sublabel }}</slot>\n      </span>\n    </span>\n    <!-- An item opening a submenu always shows the chevron announcing it, and never\n         the end icon: the sideways opening is what the reader needs to be told -->\n    <VIcon v-if=\"hasSubmenu()\" :name=\"chevronRightIcon\" class=\"v-menu-item-chevron\" mirrored />\n    <slot v-else name=\"end\">\n      <VIcon v-if=\"iconEnd\" v-bind=\"iconProps(iconEnd)\" />\n    </slot>\n  </component>\n  <VMenuPanel\n    v-if=\"hasSubmenu()\"\n    :id=\"subId\"\n    ref=\"subPanel\"\n    placement=\"right-start\"\n    submenu\n    @toggle=\"subOpen = $event\"\n    @pointerenter=\"hoverTimer.cancel()\"\n    @pointerleave=\"onPointerLeave\"\n  >\n    <slot name=\"submenu\" />\n  </VMenuPanel>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-menu-item {\n    /*\n     * Every dimension comes from the `--control-*` variables the root panel sets and\n     * this row inherits — one size table for the whole design system. The icons follow\n     * with nothing written for them, their own variables belonging to that same block.\n     *\n     * The type is the one composite part: the SIZE comes from the scale, but the line\n     * height stays that of body text — a unitless ratio, so it still follows the size\n     * — and the weight stays regular. The full `control` type role would mean a medium\n     * weight and lines set tight against each other, and a row may carry a second line\n     * under its label.\n     *\n     * The label and that second line TRUNCATE rather than wrap, the VSideNavigationItem\n     * recipe: the panel has a ceiling, and a command that grew a line would break the\n     * rhythm of the list. `width` on VMenu is the way to give long labels more room.\n     *\n     * The corner is VSideNavigationItem's: the control radius capped at half a control\n     * height, so a pill override paints every row of a menu alike, a row carrying a\n     * sublabel included, instead of rounding each one to half of its own height.\n     */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    inline-size: 100%;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  .v-menu-item-content {\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .v-menu-item-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-menu-item-sublabel {\n    overflow: hidden;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* The start icon is muted, as on every row of the design system (VSideNavigationItem,\n     VAccordionItem): the label carries the command, the icon only helps find it. */\n  .v-menu-item-icon,\n  .v-menu-item-chevron {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* In a menu the focus IS the highlight, so it is drawn on `:focus` and not on\n     `:focus-visible`: the focus is moved from code — by the arrows, and by hovering —\n     and the browser would not call that a keyboard focus worth showing. While a submenu is\n     open its parent item keeps the highlight too, so the path followed through the levels\n     stays visible. */\n  .v-menu-item:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item:focus,\n  .v-menu-item[aria-expanded='true'] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-menu-item[data-selected] {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-menu-item[data-selected]:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item[data-selected]:focus,\n  .v-menu-item[data-selected][aria-expanded='true'] {\n    /* The selected row is already tinted, so its hover deepens that tint rather than\n       replacing it with the neutral highlight. */\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  .v-menu-item[data-tone='danger'] {\n    color: var(--vectis-color-danger-text);\n  }\n\n  .v-menu-item[data-tone='danger']:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item[data-tone='danger']:focus,\n  .v-menu-item[data-tone='danger'][aria-expanded='true'] {\n    background: var(--vectis-color-danger-surface);\n  }\n\n  /* Both forms have to be matched: `:disabled` only ever applies to a `<button>`, and\n     an item rendered as a link is made inert through `aria-disabled` instead. */\n  .v-menu-item:disabled,\n  .v-menu-item[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* On a row painted in a colour of its own, the start icon and the second line take the\n     label's colour rather than the muted grey: muted would clash with the selected and the\n     danger tints, and on a disabled row it is DARKER than the subtle grey the label takes,\n     so they would outshine it. Each `:is()` counts for its most specific member, which\n     keeps the rule at (0,3,0), above the two (0,1,0) base rules. */\n  .v-menu-item:is([data-selected], [data-tone='danger'], :disabled, [aria-disabled='true'])\n    :is(.v-menu-item-icon, .v-menu-item-sublabel) {\n    color: inherit;\n  }\n}\n</style>\n"],"mappings":"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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 * One command in a menu. The panel moves the focus between items, and choosing one closes\n * the whole menu, submenus included.\n *\n * With an `href` it becomes a link, made inert through `useInertLink` when disabled: a\n * link has no `disabled` attribute, so the address is removed, `aria-disabled` says why\n * and the consumer's click listeners are dropped (an `<a>` without `href` still clicks).\n *\n * With the `#submenu` slot it becomes the trigger of a nested panel rendered INSIDE the\n * parent one. That nesting is what buys the submenu behaviour from the browser: the panels\n * form a native stack, a click outside closes all of them, and opening one branch closes its\n * sibling.\n *\n * The JS covers only the two openings the browser does not: the keyboard, and a hover held\n * long enough to show it was meant. A click already opens it natively, and ONLY opens it\n * (`popovertargetaction=\"show\"`): the hover has usually opened it a moment before the\n * click lands, and the default toggle would shut what the reader was reaching for.\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   * A row is an action, so it takes the vocabulary of one: the same word on the same\n   * prop as a VButton, rather than a boolean of its own. There is no `accent` here,\n   * a menu having no primary command among its rows.\n   */\n  tone?: MenuItemTone\n  /** Makes the item unusable: it no longer responds and the arrows skip over it. */\n  disabled?: boolean\n  /**\n   * Turns the item into a link pointing at this address, for a menu that navigates\n   * rather than acts. A disabled link is made inert by hand.\n   */\n  href?: string\n}\n\n// With a submenu this component renders two elements — the item and the nested panel\n// — so there is no single root for Vue to put the consumer's attributes on. They are\n// placed on the item explicitly.\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<MenuItemProps>(), {\n  label: undefined,\n  sublabel: undefined,\n  iconStart: undefined,\n  iconEnd: undefined,\n  selected: false,\n  tone: 'neutral',\n  disabled: false,\n  href: undefined,\n})\n\nconst emit = defineEmits<{\n  /**\n   * The command was chosen, by click or by keyboard. It is emitted before the menu\n   * closes, so the handler runs while the menu is still open.\n   */\n  select: []\n}>()\n\nconst slots = defineSlots<{\n  /** The label, replacing the `label` prop. */\n  default?(): unknown\n  /** The second line, replacing the `sublabel` prop. */\n  sublabel?(): unknown\n  /** Free content before the label, which takes the place of `iconStart`. */\n  start?(): unknown\n  /** Free content after the label, which takes the place of `iconEnd`. */\n  end?(): unknown\n  /**\n   * The contents of a submenu: items, groups and separators, this component included,\n   * so menus may nest as deep as needed.\n   */\n  submenu?(): unknown\n}>()\n\n// TRAP — a function read by the template, never a `computed`: `slots` is not reactive, so a\n// computed would keep its first answer while a slot behind a `v-if` comes and goes.\nfunction hasSubmenu() {\n  return !!slots.submenu\n}\nfunction tag() {\n  return !hasSubmenu() && props.href !== undefined ? ('a' as const) : ('button' as const)\n}\n\nconst 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// TRAP — when a submenu is opened from code rather than by a click, the item must be\n// handed to the browser as the source of that opening. The implicit anchor is only\n// established natively, on click; without it the panel has nothing to position itself\n// against and lands at the corner of the viewport, with no error anywhere.\nconst itemEl = ref<HTMLElement | null>(null)\n\n// @keyboard\n// Opening a submenu from the keyboard, which the browser's own toggle does not cover\n// — it only reacts to a click.\nfunction onKeydown(event: KeyboardEvent) {\n  // A key held with a modifier is the browser's: Alt+Right is Forward.\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\n// it was meant — otherwise every panel crossed on the way to another one would flash\n// open. ONE timer serves both directions, since opening and closing are mutually\n// exclusive: arming either always cancels the other.\nconst hoverTimer = useTimer()\n\n// @a11y @core\n// TRAP — a TOUCH tap sends `pointerenter` and `pointerleave` before its `click`, so the\n// leave below armed the close and the submenu the tap opened shut 150 ms later. Hover\n// intent means nothing to a finger: only a pointer that can hover takes this route, the\n// tap opening the submenu 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\n  // two different items at once — in a menu there is only ever one current item.\n  itemEl.value?.focus({ preventScroll: true })\n  if (!hasSubmenu()) return\n  hoverTimer.start(() => subPanel.value?.show(itemEl.value ?? undefined), SUBMENU_HOVER_DELAY)\n}\n\n// @a11y @core\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\n     * this row inherits — one size table for the whole design system. The icons follow\n     * with nothing written for them, their own variables belonging to that same block.\n     *\n     * The type is the one composite part: the SIZE comes from the scale, but the line\n     * height stays that of body text — a unitless ratio, so it still follows the size\n     * — and the weight stays regular. The full `control` type role would mean a medium\n     * weight and lines set tight against each other, and a row may carry a second line\n     * under its label.\n     *\n     * The label and that second line TRUNCATE rather than wrap, the VSideNavigationItem\n     * recipe: the panel has a ceiling, and a command that grew a line would break the\n     * rhythm of the list. `width` on VMenu is the way to give long labels more room.\n     *\n     * The corner is VSideNavigationItem's: the control radius capped at half a control\n     * height, so a pill override paints every row of a menu alike, a row carrying a\n     * sublabel included, instead of rounding each one to half of its own height.\n     */\n    display: flex;\n    align-items: center;\n    gap: var(--control-gap);\n    inline-size: 100%;\n    min-block-size: var(--control-height);\n    padding-block: var(--vectis-space-1);\n    padding-inline: var(--control-padding-inline);\n    border: none;\n    background: transparent;\n    color: var(--vectis-color-text);\n    border-radius: min(var(--vectis-radius-interactive), calc(var(--control-height) / 2));\n    font-family: inherit;\n    font-size: var(--control-font-size);\n    line-height: var(--vectis-text-body-md-leading);\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  .v-menu-item-content {\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .v-menu-item-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-menu-item-sublabel {\n    overflow: hidden;\n    font-size: var(--vectis-text-caption-size);\n    color: var(--vectis-color-text-muted);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* The start icon is muted, as on every row of the design system (VSideNavigationItem,\n     VAccordionItem): the label carries the command, the icon only helps find it. */\n  .v-menu-item-icon,\n  .v-menu-item-chevron {\n    flex: none;\n    color: var(--vectis-color-text-muted);\n  }\n\n  /* In a menu the focus IS the highlight, so it is drawn on `:focus` and not on\n     `:focus-visible`: the focus is moved from code — by the arrows, and by hovering —\n     and the browser would not call that a keyboard focus worth showing. While a submenu is\n     open its parent item keeps the highlight too, so the path followed through the levels\n     stays visible. */\n  .v-menu-item:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item:focus,\n  .v-menu-item[aria-expanded='true'] {\n    background: var(--vectis-color-surface-muted);\n    outline: none;\n  }\n\n  .v-menu-item[data-selected] {\n    background: var(--vectis-color-accent-surface);\n    color: var(--vectis-color-accent-text);\n  }\n\n  .v-menu-item[data-selected]:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item[data-selected]:focus,\n  .v-menu-item[data-selected][aria-expanded='true'] {\n    /* The selected row is already tinted, so its hover deepens that tint rather than\n       replacing it with the neutral highlight. */\n    background: color-mix(\n      in oklab,\n      var(--vectis-color-accent-surface),\n      var(--vectis-color-accent-text) 8%\n    );\n  }\n\n  .v-menu-item[data-tone='danger'] {\n    color: var(--vectis-color-danger-text);\n  }\n\n  .v-menu-item[data-tone='danger']:hover:not(:disabled, [aria-disabled='true']),\n  .v-menu-item[data-tone='danger']:focus,\n  .v-menu-item[data-tone='danger'][aria-expanded='true'] {\n    background: var(--vectis-color-danger-surface);\n  }\n\n  /* Both forms have to be matched: `:disabled` only ever applies to a `<button>`, and\n     an item rendered as a link is made inert through `aria-disabled` instead. */\n  .v-menu-item:disabled,\n  .v-menu-item[aria-disabled='true'] {\n    background: transparent;\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /* On a row painted in a colour of its own, the start icon and the second line take the\n     label's colour rather than the muted grey: muted would clash with the selected and the\n     danger tints, and on a disabled row it is DARKER than the subtle grey the label takes,\n     so they would outshine it. Each `:is()` counts for its most specific member, which\n     keeps the rule at (0,3,0), above the two (0,1,0) base rules. */\n  .v-menu-item:is([data-selected], [data-tone='danger'], :disabled, [aria-disabled='true'])\n    :is(.v-menu-item-icon, .v-menu-item-sublabel) {\n    color: inherit;\n  }\n\n  /* Windows forced colors. The highlight is a background, which the mode forces to Canvas:\n     the row under the focus would look exactly like the others, and a keyboard user would\n     lose their place (WCAG 2.4.7). An outline inside the row takes its place. The selected\n     row, also drawn by its tint alone, takes the system selection pair, the rule the\n     selected controls of the actions family follow; the class is doubled to stay above\n     its (0,3,0) hover and focus rules. */\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(100vw - 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{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

@@ -47,9 +47,9 @@ declare const __VLS_base: import('vue').DefineComponent<MenuPanelProps, {
     close: () => void;
     /** Whether it is open, as the browser last reported it. VMenu's model is checked against it. */
     shown: import('vue').Ref<boolean, boolean>;
-    /** Puts the focus on the first reachable item — the keyboard's way in. */
+    /** Puts the focus on the first reachable item: the keyboard's way in. */
     focusFirst: typeof focusFirst;
-    /** Puts the focus on the panel itself — the pointer's way in, singling out no command. */
+    /** Puts the focus on the panel itself: the pointer's way in, singling out no command. */
     focusPanel: typeof focusPanel;
     /** The panel element, which is the popover. */
     el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;

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

@@ -1 +1 @@
-{"version":3,"file":"VMenuPanel.js","names":[],"sources":["../../../src/components/VMenu/VMenuPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @keyboard @core\n/**\n * The panel a menu is drawn in. Internal to VMenu, and the same component serves both\n * levels — the root menu and every submenu.\n *\n * It rests on `popover=\"auto\"`, which gives it light dismiss, positioning against its\n * invoker, and — a submenu being rendered inside its parent panel — a native stack the\n * browser closes from the outside in. Its look comes from the shared `.v-panel`.\n *\n * It carries `tabindex=\"-1\"` so it can hold the focus itself, which it does whenever the\n * menu was opened by POINTER: no command is singled out, but the keyboard still has\n * somewhere to arrive, everything below being listened for on this element.\n *\n * The JS is the ARIA menu keyboard, which the platform does not provide:\n *\n * - arrows and Home/End move focus item to item, CONFINED to the panel the focus is in — a\n *   keystroke inside a submenu also bubbles through every panel containing it, hence the\n *   guard on where the event came from;\n * - Escape closes the CURRENT LEVEL only, as does ArrowLeft in a submenu, handing focus\n *   back to the item that opened it;\n * - Tab closes the whole menu, a menu not being something one tabs through.\n */\n\nimport { computed, inject, ref } from 'vue'\n\nimport { usePopover } from '../../composables/usePopover'\nimport { menuInvoker, menuKey } from './context'\nimport type { MenuPanelPlacement, MenuSize } from './context'\nimport { arrowNavigate } from '../../utils/arrowNav'\nimport { cssSize } from '../../utils/css'\n\ninterface MenuPanelProps {\n  /** The panel's id, set by whoever owns it. It is what the trigger points at. */\n  id: string\n  /** Where the panel opens relative to whatever opened it. */\n  placement?: MenuPanelPlacement\n  /**\n   * Marks this panel as a submenu, which enables the left arrow as a way back and keeps\n   * the row-height settings off it, so that it inherits its parent's instead.\n   */\n  submenu?: boolean\n  /**\n   * The row height, set by the ROOT panel only. Submenus receive no value and inherit\n   * it through CSS instead.\n   */\n  size?: MenuSize\n  /** The reduced density, again set by the ROOT panel only and inherited through CSS. */\n  compact?: boolean\n  /**\n   * An explicit width, set by the ROOT panel only. Submenus render no width attribute\n   * and keep the default one, so an inherited value cannot reach them.\n   */\n  width?: number | string\n  /**\n   * Stops the panel from being narrower than its trigger, set by the ROOT panel only:\n   * a submenu's trigger is a menu item, not a control worth matching.\n   */\n  matchTrigger?: boolean\n}\n\nconst props = withDefaults(defineProps<MenuPanelProps>(), {\n  placement: 'bottom-start',\n  submenu: false,\n  size: undefined,\n  compact: false,\n  width: undefined,\n  matchTrigger: false,\n})\n\nconst emit = defineEmits<{\n  /**\n   * The panel opened or closed. It is reported by the browser, so it also covers a\n   * dismissal nobody asked for in code.\n   */\n  toggle: [open: boolean]\n}>()\n\ndefineSlots<{\n  /** The contents of the panel: VMenuItem, VMenuGroup and VMenuSeparator. */\n  default(): unknown\n}>()\n\nconst panelEl = ref<HTMLElement | null>(null)\n// The open state, the guards keeping the calls idempotent, and the option that gives\n// a programmatically opened submenu its anchor, all live in usePopover.\nconst { shown, syncShown, show, hide } = usePopover(panelEl)\n\n// Never absent: this panel is internal, rendered only by VMenu and by the VMenuItems inside\n// one, and VMenu provides the key before either exists.\nconst menu = inject(menuKey)!\n\nfunction onToggle(event: Event) {\n  syncShown(event)\n  emit('toggle', shown.value)\n}\n\n// @a11y @keyboard\n/**\n * The items the keyboard may move to. Two exclusions matter: `:disabled` only ever\n * matches a `<button>`, so an inert link is recognized by its `aria-disabled`\n * instead; and the final filter keeps only the items of THIS panel, since an open\n * submenu's items are DOM descendants of it and would otherwise join the list.\n */\nfunction items(): HTMLElement[] {\n  const panel = panelEl.value\n  if (!panel) return []\n  return [\n    ...panel.querySelectorAll<HTMLElement>(\n      '[role=\"menuitem\"]:not(:disabled):not([aria-disabled=\"true\"])',\n    ),\n  ].filter((el) => el.closest('[role=\"menu\"]') === panel)\n}\n\n// @a11y\n/** Puts the focus on the first item the keyboard can reach, when the menu opens. */\nfunction focusFirst() {\n  items()[0]?.focus()\n}\n\n// @a11y\n/**\n * Puts the focus on the panel itself, singling out no command. This is where a menu\n * opened with a pointer lands: the reader has not asked for a first choice, but the\n * keyboard still has to work from the very next keystroke — and every key below is\n * listened for on this element, so leaving the focus outside would silence all of them.\n */\nfunction focusPanel() {\n  panelEl.value?.focus()\n}\n\n// @keyboard @a11y\nfunction onKeydown(event: KeyboardEvent) {\n  const panel = panelEl.value\n  // A keystroke inside a submenu passes through every panel containing it on its way\n  // up, so only the panel the focused item DIRECTLY belongs to acts on it.\n  if (!panel || (event.target as Element).closest('[role=\"menu\"]') !== panel) return\n\n  if (event.key === 'Tab') {\n    menu.closeAll()\n    return\n  }\n  if (event.key === 'Escape' || (props.submenu && event.key === 'ArrowLeft')) {\n    // Escape closes THIS level and no more. The `preventDefault` matters: left to\n    // itself the browser would close the popover on its own, without handing the\n    // focus back to the item that opened it — and our own hide() would already have\n    // closed it anyway. At the top level, VMenu is what returns the focus to the\n    // trigger.\n    event.preventDefault()\n    hide()\n    if (props.submenu) menuInvoker(props.id)?.focus()\n    return\n  }\n  // Coming from the panel itself — a menu opened with a pointer, where no command is\n  // singled out — the up arrow goes to the LAST item, entering the list from its far\n  // end the way a menu is expected to. `utils/arrowNav` starts any arrow at the\n  // beginning when nothing in the list has the focus, which is the right answer for the\n  // tabs, the pages and the toggle group it also serves: it is this menu that has a\n  // convention of its own, so it is handled here rather than in the shared helper.\n  // The case only exists BECAUSE of the pointer opening: reached from an item, the\n  // arrow never lands here.\n  if (event.key === 'ArrowUp' && document.activeElement === panel) {\n    const list = items()\n    if (list.length > 0) {\n      event.preventDefault()\n      list[list.length - 1]?.focus()\n      return\n    }\n  }\n  // The movement itself is the shared one from `utils/arrowNav`, but it is handed OUR\n  // list rather than letting it discover the items: ours also drops the disabled\n  // links and stays inside this panel, neither of which the generic selector does.\n  arrowNavigate(event, panel, items, { vertical: true })\n}\n\n// The only thing set inline is an explicit width, when the prop asks for one.\nconst resolvedWidth = computed(() => cssSize(props.width) || undefined)\nconst panelStyle = computed(() =>\n  resolvedWidth.value ? { '--menu-width': resolvedWidth.value } : undefined,\n)\n\n// Internal to VMenu, which drives the panel from outside: opening has to be synchronous,\n// and where the focus lands depends on whether a pointer or the keyboard asked.\ndefineExpose({\n  /** Opens the panel. Pass the invoker, or the popover has no anchor to position against. */\n  show,\n  /** Closes it. */\n  close: hide,\n  /** Whether it is open, as the browser last reported it. VMenu's model is checked against it. */\n  shown,\n  /** Puts the focus on the first reachable item — the keyboard's way in. */\n  focusFirst,\n  /** Puts the focus on the panel itself — the pointer's way in, singling out no command. */\n  focusPanel,\n  /** The panel element, which is the popover. */\n  el: panelEl,\n})\n</script>\n\n<template>\n  <div\n    :id=\"id\"\n    ref=\"panelEl\"\n    popover=\"auto\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    class=\"v-overlay v-panel v-menu v-floating\"\n    :class=\"{\n      /*\n       * The size class goes on the ROOT panel only. It sets the whole `--control-*`\n       * family — height, paddings, gap, type, icon context — and the submenus, being\n       * DOM descendants, inherit every one of them.\n       *\n       * Adding it to the submenus as well would BREAK them: the class recomputes the\n       * height from the base one without knowing about the compact attribute, which\n       * submenus do not carry, so a compact menu's submenus would silently snap back\n       * to full height.\n       */\n      'v-control': !submenu,\n    }\"\n    :data-placement=\"placement\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-width=\"resolvedWidth ? '' : undefined\"\n    :data-match-trigger=\"matchTrigger ? '' : undefined\"\n    :style=\"panelStyle\"\n    @beforetoggle=\"syncShown\"\n    @toggle=\"onToggle\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The panel's surface, border, shadow and inner rhythm come from the shared\n     `.v-panel` class, and its dimensions from the `v-control` class the template sets\n     on the root panel — there is no size table here, the rows reading the inherited\n     variables directly. Only what is specific to a dropdown menu stays below. */\n  .v-menu {\n    min-inline-size: var(--vectis-control-size-menu-min);\n    max-inline-size: min(var(--vectis-control-size-menu-max), calc(100vw - var(--vectis-space-8)));\n  }\n\n  /* The panel is focusable, but only ever from code — its `tabindex` is -1, so the Tab\n     key never brings anyone here. It holds the focus when the menu was opened with a\n     pointer, and a ring drawn around the whole panel would then read as the reader\n     having landed on something, which is the opposite of what that state means: no\n     command is singled out. The rows keep their own highlight, `.v-menu-item:focus`. */\n  .v-menu:focus {\n    outline: none;\n  }\n\n  /* Pulls a submenu up so that its first item lines up with the item that opened it,\n     by exactly the panel's own padding plus its border. */\n  .v-menu .v-menu[data-placement='right-start'] {\n    margin-block-start: calc(-1 * (var(--vectis-space-1) + 1px));\n  }\n\n  /* An explicit width, which only the ROOT panel ever renders: a submenu sets no such\n     attribute, so the variable it inherits stays inert there. The ceiling that keeps\n     a panel inside the viewport is untouched. */\n  .v-menu[data-width] {\n    min-inline-size: 0;\n    inline-size: var(--menu-width);\n  }\n\n  /* The panel may not be narrower than its trigger. This works with no anchor name of\n     any kind, because the button that opened the panel is already its implicit anchor\n     — VCombobox and VTimeInput, anchored to a text input, have to name theirs. Like\n     the width above, only the ROOT panel renders it.\n\n     It is placed AFTER the width rule, at equal specificity, so that when both are\n     given the floor wins. A trigger wider than the ceiling therefore widens the panel\n     past it, a minimum width beating a maximum one — which is intended. */\n  .v-menu[data-match-trigger] {\n    min-inline-size: anchor-size(width);\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"VMenuPanel.js","names":[],"sources":["../../../src/components/VMenu/VMenuPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @keyboard @core\n/**\n * The panel a menu is drawn in. Internal to VMenu, and the same component serves both\n * levels — the root menu and every submenu.\n *\n * It rests on `popover=\"auto\"`, which gives it light dismiss, positioning against its\n * invoker, and — a submenu being rendered inside its parent panel — a native stack the\n * browser closes from the outside in. Its look comes from the shared `.v-panel`.\n *\n * It carries `tabindex=\"-1\"` so it can hold the focus itself, which it does whenever the\n * menu was opened by POINTER: no command is singled out, but the keyboard still has\n * somewhere to arrive, everything below being listened for on this element.\n *\n * The JS is the ARIA menu keyboard, which the platform does not provide:\n *\n * - arrows and Home/End move focus item to item, CONFINED to the panel the focus is in — a\n *   keystroke inside a submenu also bubbles through every panel containing it, hence the\n *   guard on where the event came from;\n * - Escape closes the CURRENT LEVEL only, as does ArrowLeft in a submenu, handing focus\n *   back to the item that opened it;\n * - Tab closes the whole menu, a menu not being something one tabs through.\n */\n\nimport { computed, inject, ref } from 'vue'\n\nimport { usePopover } from '../../composables/usePopover'\nimport { menuInvoker, menuKey } from './context'\nimport type { MenuPanelPlacement, MenuSize } from './context'\nimport { arrowNavigate } from '../../utils/arrowNav'\nimport { isRtl } from '../../utils/direction'\nimport { cssSize } from '../../utils/css'\n\ninterface MenuPanelProps {\n  /** The panel's id, set by whoever owns it. It is what the trigger points at. */\n  id: string\n  /** Where the panel opens relative to whatever opened it. */\n  placement?: MenuPanelPlacement\n  /**\n   * Marks this panel as a submenu, which enables the left arrow as a way back and keeps\n   * the row-height settings off it, so that it inherits its parent's instead.\n   */\n  submenu?: boolean\n  /**\n   * The row height, set by the ROOT panel only. Submenus receive no value and inherit\n   * it through CSS instead.\n   */\n  size?: MenuSize\n  /** The reduced density, again set by the ROOT panel only and inherited through CSS. */\n  compact?: boolean\n  /**\n   * An explicit width, set by the ROOT panel only. Submenus render no width attribute\n   * and keep the default one, so an inherited value cannot reach them.\n   */\n  width?: number | string\n  /**\n   * Stops the panel from being narrower than its trigger, set by the ROOT panel only:\n   * a submenu's trigger is a menu item, not a control worth matching.\n   */\n  matchTrigger?: boolean\n}\n\nconst props = withDefaults(defineProps<MenuPanelProps>(), {\n  placement: 'bottom-start',\n  submenu: false,\n  size: undefined,\n  compact: false,\n  width: undefined,\n  matchTrigger: false,\n})\n\nconst emit = defineEmits<{\n  /**\n   * The panel opened or closed. It is reported by the browser, so it also covers a\n   * dismissal nobody asked for in code.\n   */\n  toggle: [open: boolean]\n}>()\n\ndefineSlots<{\n  /** The contents of the panel: VMenuItem, VMenuGroup and VMenuSeparator. */\n  default(): unknown\n}>()\n\nconst panelEl = ref<HTMLElement | null>(null)\n// The open state, the guards keeping the calls idempotent, and the option that gives\n// a programmatically opened submenu its anchor, all live in usePopover.\nconst { shown, syncShown, show, hide } = usePopover(panelEl)\n\n// Never absent: this panel is internal, rendered only by VMenu and by the VMenuItems inside\n// one, and VMenu provides the key before either exists.\nconst menu = inject(menuKey)!\n\nfunction onToggle(event: Event) {\n  syncShown(event)\n  emit('toggle', shown.value)\n}\n\n// @a11y @keyboard\n/**\n * The items the keyboard may move to. Two exclusions matter: `:disabled` only ever\n * matches a `<button>`, so an inert link is recognized by its `aria-disabled`\n * instead; and the final filter keeps only the items of THIS panel, since an open\n * submenu's items are DOM descendants of it and would otherwise join the list.\n */\nfunction items(): HTMLElement[] {\n  const panel = panelEl.value\n  if (!panel) return []\n  return [\n    ...panel.querySelectorAll<HTMLElement>(\n      '[role=\"menuitem\"]:not(:disabled):not([aria-disabled=\"true\"])',\n    ),\n  ].filter((el) => el.closest('[role=\"menu\"]') === panel)\n}\n\n// @a11y\n/** Puts the focus on the first item the keyboard can reach, when the menu opens. */\nfunction focusFirst() {\n  items()[0]?.focus()\n}\n\n// @a11y\n/**\n * Puts the focus on the panel itself, singling out no command. This is where a menu\n * opened with a pointer lands: the reader has not asked for a first choice, but the\n * keyboard still has to work from the very next keystroke — and every key below is\n * listened for on this element, so leaving the focus outside would silence all of them.\n */\nfunction focusPanel() {\n  panelEl.value?.focus()\n}\n\n// @keyboard @a11y\nfunction onKeydown(event: KeyboardEvent) {\n  const panel = panelEl.value\n  // A keystroke inside a submenu passes through every panel containing it on its way\n  // up, so only the panel the focused item DIRECTLY belongs to acts on it.\n  if (!panel || (event.target as Element).closest('[role=\"menu\"]') !== panel) return\n  // A key held with a modifier is the browser's: Alt+Left is Back.\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n\n  if (event.key === 'Tab') {\n    menu.closeAll()\n    return\n  }\n  // The arrow pointing BACK at the parent closes a submenu: the right one in a\n  // right-to-left page, where the submenu opened on the left.\n  const back = isRtl(panel) ? 'ArrowRight' : 'ArrowLeft'\n  if (event.key === 'Escape' || (props.submenu && event.key === back)) {\n    // Escape closes THIS level and no more. The `preventDefault` matters: left to\n    // itself the browser would close the popover on its own, without handing the\n    // focus back to the item that opened it — and our own hide() would already have\n    // closed it anyway. At the top level, VMenu is what returns the focus to the\n    // trigger.\n    event.preventDefault()\n    hide()\n    if (props.submenu) menuInvoker(props.id)?.focus()\n    return\n  }\n  // Coming from the panel itself — a menu opened with a pointer, where no command is\n  // singled out — the up arrow goes to the LAST item, entering the list from its far\n  // end the way a menu is expected to. `utils/arrowNav` starts any arrow at the\n  // beginning when nothing in the list has the focus, which is the right answer for the\n  // tabs, the pages and the toggle group it also serves: it is this menu that has a\n  // convention of its own, so it is handled here rather than in the shared helper.\n  // The case only exists BECAUSE of the pointer opening: reached from an item, the\n  // arrow never lands here.\n  if (event.key === 'ArrowUp' && document.activeElement === panel) {\n    const list = items()\n    if (list.length > 0) {\n      event.preventDefault()\n      list[list.length - 1]?.focus()\n      return\n    }\n  }\n  // The movement itself is the shared one from `utils/arrowNav`, but it is handed OUR\n  // list rather than letting it discover the items: ours also drops the disabled\n  // links and stays inside this panel, neither of which the generic selector does.\n  arrowNavigate(event, panel, items, { vertical: true })\n}\n\n// The only thing set inline is an explicit width, when the prop asks for one.\nconst resolvedWidth = computed(() => cssSize(props.width) || undefined)\nconst panelStyle = computed(() =>\n  resolvedWidth.value ? { '--menu-width': resolvedWidth.value } : undefined,\n)\n\n// Internal to VMenu, which drives the panel from outside: opening has to be synchronous,\n// and where the focus lands depends on whether a pointer or the keyboard asked.\ndefineExpose({\n  /** Opens the panel. Pass the invoker, or the popover has no anchor to position against. */\n  show,\n  /** Closes it. */\n  close: hide,\n  /** Whether it is open, as the browser last reported it. VMenu's model is checked against it. */\n  shown,\n  /** Puts the focus on the first reachable item: the keyboard's way in. */\n  focusFirst,\n  /** Puts the focus on the panel itself: the pointer's way in, singling out no command. */\n  focusPanel,\n  /** The panel element, which is the popover. */\n  el: panelEl,\n})\n</script>\n\n<template>\n  <div\n    :id=\"id\"\n    ref=\"panelEl\"\n    popover=\"auto\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    class=\"v-overlay v-panel v-menu v-floating\"\n    :class=\"{\n      /*\n       * The size class goes on the ROOT panel only. It sets the whole `--control-*`\n       * family — height, paddings, gap, type, icon context — and the submenus, being\n       * DOM descendants, inherit every one of them.\n       *\n       * Adding it to the submenus as well would BREAK them: the class recomputes the\n       * height from the base one without knowing about the compact attribute, which\n       * submenus do not carry, so a compact menu's submenus would silently snap back\n       * to full height.\n       */\n      'v-control': !submenu,\n    }\"\n    :data-placement=\"placement\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :data-width=\"resolvedWidth ? '' : undefined\"\n    :data-match-trigger=\"matchTrigger ? '' : undefined\"\n    :style=\"panelStyle\"\n    @beforetoggle=\"syncShown\"\n    @toggle=\"onToggle\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The panel's surface, border, shadow and inner rhythm come from the shared\n     `.v-panel` class, and its dimensions from the `v-control` class the template sets\n     on the root panel — there is no size table here, the rows reading the inherited\n     variables directly. Only what is specific to a dropdown menu stays below. */\n  .v-menu {\n    min-inline-size: var(--vectis-control-size-menu-min);\n    max-inline-size: min(var(--vectis-control-size-menu-max), calc(100dvi - var(--vectis-space-8)));\n  }\n\n  /* The panel is focusable, but only ever from code — its `tabindex` is -1, so the Tab\n     key never brings anyone here. It holds the focus when the menu was opened with a\n     pointer, and a ring drawn around the whole panel would then read as the reader\n     having landed on something, which is the opposite of what that state means: no\n     command is singled out. The rows keep their own highlight, `.v-menu-item:focus`. */\n  .v-menu:focus {\n    outline: none;\n  }\n\n  /* Pulls a submenu up so that its first item lines up with the item that opened it,\n     by exactly the panel's own padding plus its border. */\n  .v-menu .v-menu[data-placement='right-start'] {\n    margin-block-start: calc(-1 * (var(--vectis-space-1) + 1px));\n  }\n\n  /* An explicit width, which only the ROOT panel ever renders: a submenu sets no such\n     attribute, so the variable it inherits stays inert there. The ceiling that keeps\n     a panel inside the viewport is untouched. */\n  .v-menu[data-width] {\n    min-inline-size: 0;\n    inline-size: var(--menu-width);\n  }\n\n  /* The panel may not be narrower than its trigger. This works with no anchor name of\n     any kind, because the button that opened the panel is already its implicit anchor\n     — VCombobox and VTimeInput, anchored to a text input, have to name theirs. Like\n     the width above, only the ROOT panel renders it.\n\n     It is placed AFTER the width rule, at equal specificity, so that when both are\n     given the floor wins. A trigger wider than the ceiling therefore widens the panel\n     past it, a minimum width beating a maximum one — which is intended. */\n  .v-menu[data-match-trigger] {\n    min-inline-size: anchor-size(width);\n  }\n}\n</style>\n"],"mappings":""}