vectis-ui 0.11.0 → 0.13.0

package/dist/components/VListbox/VListboxPanel.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y\n/**\n * Render the floating listbox of VCombobox and VSelect from the rows `useListbox` works out. The\n * panel carries both the listbox role and the scrolling: the virtual window, the scrolling of the\n * highlighted option and the observer watching for the end of the list all rely on it, so no\n * wrapper may come between them.\n */\nimport { computed, ref } from 'vue'\n\nimport type { Listbox, ListboxBlock, ListboxRenderedOption } from '../../composables/useListbox'\nimport type { ListboxOption, ListboxOptionSlotProps } from '../../types'\nimport VPopover, { type PopoverPlacement } from '../VPopover/VPopover.vue'\nimport VListboxGroup from './VListboxGroup.vue'\nimport VListboxOption from './VListboxOption.vue'\nimport VListboxSeparator from './VListboxSeparator.vue'\n\ninterface ListboxPanelProps {\n  /** The panel's id, which the field points at through `aria-controls`. */\n  id: string\n  /** The CSS anchor name the owner sets on its field, which the panel opens against. */\n  anchor: string\n  /** Where the panel opens relative to the field. */\n  placement: PopoverPlacement\n  /** The size the options take, the field's own. */\n  size: 'sm' | 'md' | 'lg'\n  /** The field's reduced density. */\n  compact?: boolean\n  /** Several options can be chosen. */\n  multiple?: boolean\n  /** Only the rows near the visible part of the panel are rendered. */\n  virtual?: boolean\n  /** The rows to render. */\n  blocks: ListboxBlock[]\n  /** Measures a rendered row, in the virtual mode. */\n  measure: Listbox['measureRow']\n}\n\nwithDefaults(defineProps<ListboxPanelProps>(), {\n  compact: false,\n  multiple: false,\n  virtual: false,\n})\n\n/** Whether the panel is showing. */\nconst open = defineModel<boolean>('open', { default: false })\n\nconst emit = defineEmits<{\n  /** An option was clicked. What that does to the selection is the field's business. */\n  select: [option: ListboxOption]\n  /** The pointer moved over an option, which should become the highlighted one. */\n  highlight: [row: ListboxRenderedOption]\n}>()\n\ndefineSlots<{\n  /** What a row shows, in place of the plain label. */\n  option?(props: ListboxOptionSlotProps): unknown\n  /** Rows of the owner's own after the options: an empty state, a loading foot. */\n  default?(): unknown\n}>()\n\nconst popoverRef = ref<InstanceType<typeof VPopover> | null>(null)\n\n// @a11y\n/*\n * The focus must never leave the field. Without cancelling the press, clicking an option takes\n * the focus off the field, the field's focusout closes the panel before the click is turned into\n * a selection, and choosing with the mouse stops working entirely.\n */\nfunction onMousedown(event: MouseEvent) {\n  event.preventDefault()\n}\n\ndefineExpose({\n  /** The panel element, which scrolls. */\n  el: computed(() => popoverRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VPopover\n    :id=\"id\"\n    ref=\"popoverRef\"\n    v-model:open=\"open\"\n    mode=\"manual\"\n    :anchor=\"anchor\"\n    match-trigger\n    :placement=\"placement\"\n    role=\"listbox\"\n    class=\"v-listbox-panel v-control\"\n    :data-size=\"size\"\n    :data-compact=\"compact ? '' : undefined\"\n    :aria-multiselectable=\"multiple ? 'true' : undefined\"\n    :data-virtual=\"virtual ? '' : undefined\"\n    @mousedown=\"onMousedown\"\n  >\n    <template v-for=\"block in blocks\" :key=\"block.key\">\n      <div\n        v-if=\"block.kind === 'spacer'\"\n        class=\"v-listbox-spacer\"\n        aria-hidden=\"true\"\n        :style=\"{ blockSize: `${block.size}px` }\"\n      />\n\n      <VListboxSeparator\n        v-else-if=\"block.kind === 'separator'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n      />\n\n      <VListboxGroup\n        v-else-if=\"block.kind === 'group'\"\n        :label=\"block.label\"\n        :label-id=\"block.labelId\"\n      >\n        <template v-for=\"child in block.children\" :key=\"child.key\">\n          <div\n            v-if=\"child.kind === 'spacer'\"\n            class=\"v-listbox-spacer\"\n            aria-hidden=\"true\"\n            :style=\"{ blockSize: `${child.size}px` }\"\n          />\n          <span\n            v-else-if=\"child.kind === 'heading'\"\n            :id=\"child.id\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            class=\"v-listbox-group-label\"\n            >{{ child.label }}</span\n          >\n          <VListboxOption\n            v-else-if=\"child.kind === 'option'\"\n            :ref=\"virtual ? (el) => measure(el, child.at) : undefined\"\n            v-bind=\"child.row\"\n            @select=\"emit('select', child.option)\"\n            @pointermove=\"emit('highlight', child)\"\n          >\n            <slot name=\"option\" v-bind=\"child.slot\">{{ child.option.label }}</slot>\n          </VListboxOption>\n        </template>\n      </VListboxGroup>\n\n      <VListboxOption\n        v-else-if=\"block.kind === 'option'\"\n        :ref=\"virtual ? (el) => measure(el, block.at) : undefined\"\n        v-bind=\"block.row\"\n        @select=\"emit('select', block.option)\"\n        @pointermove=\"emit('highlight', block)\"\n      >\n        <slot name=\"option\" v-bind=\"block.slot\">{{ block.option.label }}</slot>\n      </VListboxOption>\n    </template>\n\n    <slot />\n  </VPopover>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * VPopover brings the floating element, its open state, its anchoring, its placement and its\n   * surface. The shared size class lets the options and the owner's state rows read their\n   * dimensions from the panel with no size table here; the owner sets the maximum height.\n   */\n  .v-listbox-panel {\n    overflow: auto;\n  }\n\n  /* The virtual mode corrects the scroll itself when a row above the view changes height. */\n  .v-listbox-panel[data-virtual] {\n    overflow-anchor: none;\n  }\n\n  .v-listbox-spacer {\n    flex: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,IAAM,IAAO,EAAoB,GAAC,MAA0B,GAEtD,IAAO,GAcP,IAAa,EAA0C,IAAI;EAQjE,SAAS,EAAY,GAAmB;GACtC,EAAM,eAAe;EACvB;SAEA,EAAa,EAEX,IAAI,QAAe,EAAW,OAAO,MAAM,IAAI,EACjD,CAAC,mBAIC,EAwEW,GAAA;GAvER,IAAI,EAAA;YACD;GAAJ,KAAI;GACI,MAAM,EAAA;sCAAI,QAAA;GAClB,MAAK;GACJ,QAAQ,EAAA;GACT,iBAAA;GACC,WAAW,EAAA;GACZ,MAAK;GACL,OAAM;GACL,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,wBAAsB,EAAA,WAAQ,SAAY,KAAA;GAC1C,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAClB;;oBAEqB,EAAA,EAAA,EAAA,GAAjC,EAqDW,GAAA,MAAA,EArDe,EAAA,SAAT,wBAAuB,EAAM,IAAA,GAAA,CAEpC,EAAM,SAAI,YAAA,EAAA,GADlB,EAKE,OAAA;;IAHA,OAAM;IACN,eAAY;IACX,OAAK,EAAA,EAAA,WAAA,GAAkB,EAAM,KAAI,IAAA,CAAA;kBAIvB,EAAM,SAAI,eAAA,EAAA,GADvB,EAGE,GAAA;;;IADC,KAAK,EAAA,WAAW,MAAO,EAAA,QAAQ,GAAI,EAAM,EAAE,IAAI,KAAA;oBAIrC,EAAM,SAAI,WAAA,EAAA,GADvB,EA6BgB,GAAA;;IA3Bb,OAAO,EAAM;IACb,YAAU,EAAM;;qBAEwB,EAAA,EAAA,EAAA,GAAzC,EAuBW,GAAA,MAAA,EAvBe,EAAM,WAAf,wBAA+B,EAAM,IAAA,GAAA,CAE5C,EAAM,SAAI,YAAA,EAAA,GADlB,EAKE,OAAA;;KAHA,OAAM;KACN,eAAY;KACX,OAAK,EAAA,EAAA,WAAA,GAAkB,EAAM,KAAI,IAAA,CAAA;mBAGvB,EAAM,SAAI,aAAA,EAAA,GADvB,EAMC,QAAA;;KAJE,IAAI,EAAM;;KACV,KAAK,EAAA,WAAW,MAAO,EAAA,QAAQ,GAAI,EAAM,EAAE,IAAI,KAAA;KAChD,OAAM;SACF,EAAM,KAAK,GAAA,GAAA,CAAA,KAGJ,EAAM,SAAI,YAAA,EAAA,GADvB,EAQiB,GARjB,EAQiB;;;KANd,KAAK,EAAA,WAAW,MAAO,EAAA,QAAQ,GAAI,EAAM,EAAE,IAAI,KAAA;wBACxC,EAAM,KAAG;KAChB,WAAM,MAAE,EAAI,UAAW,EAAM,MAAM;KACnC,gBAAW,MAAE,EAAI,aAAc,CAAK;;sBAEkC,CAAvE,EAAuE,EAAA,QAAA,UAAvE,EAAuE,EAAA,SAAA,GAAA,GAA3C,EAAM,IAAI,SAAiC,CAAA,EAAA,EAA5B,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;;;sCAMtD,EAAM,SAAI,YAAA,EAAA,GADvB,EAQiB,GARjB,EAQiB;;;IANd,KAAK,EAAA,WAAW,MAAO,EAAA,QAAQ,GAAI,EAAM,EAAE,IAAI,KAAA;uBACxC,EAAM,KAAG;IAChB,WAAM,MAAE,EAAI,UAAW,EAAM,MAAM;IACnC,gBAAW,MAAE,EAAI,aAAc,CAAK;;qBAEkC,CAAvE,EAAuE,EAAA,QAAA,UAAvE,EAAuE,EAAA,SAAA,GAAA,GAA3C,EAAM,IAAI,SAAiC,CAAA,EAAA,EAA5B,EAAM,OAAO,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;wEAIjE,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/components/VListbox/VListboxSeparator.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-separator.v-listbox-separator{margin-inline:calc(-1 * var(--vectis-space-1))}}

package/dist/components/VListbox/VListboxSeparator.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/VListbox/VListboxSeparator.js

@@ -0,0 +1,9 @@
+import './VListboxSeparator.css';
+import e from "./VListboxSeparator.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                  */
+//#region src/components/VListbox/VListboxSeparator.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VListboxSeparator.js.map

package/dist/components/VListbox/VListboxSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxSeparator.js","names":[],"sources":["../../../src/components/VListbox/VListboxSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Use presentation semantics for separators: a listbox owns only options and groups, unlike a\n * menu.\n */\nimport VSeparator from '../VSeparator/VSeparator.vue'\n</script>\n\n<template>\n  <VSeparator role=\"presentation\" class=\"v-listbox-separator\" />\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The selector compounds both classes because `.v-separator` sets `margin: 0` from a sheet of\n   * its own: at equal specificity the winner would be whichever of the two the consumer's\n   * bundler happens to put last. The space above and below comes from the panel's own gap, so\n   * no margin is added here.\n   */\n  .v-separator.v-listbox-separator {\n    margin-inline: calc(-1 * var(--vectis-space-1));\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/{VCombobox/VComboboxSeparator.vue_vue_type_script_setup_true_lang.js → VListbox/VListboxSeparator.vue_vue_type_script_setup_true_lang.js}

@@ -1,16 +1,16 @@
 import e from "../VSeparator/VSeparator.js";
 import { createBlock as t, defineComponent as n, openBlock as r } from "vue";
-//#region src/components/VCombobox/VComboboxSeparator.vue?vue&type=script&setup=true&lang.ts
+//#region src/components/VListbox/VListboxSeparator.vue?vue&type=script&setup=true&lang.ts
 var i = /*@__PURE__*/ n({
-	__name: "VComboboxSeparator",
+	__name: "VListboxSeparator",
 	setup(n) {
 		return (n, i) => (r(), t(e, {
 			role: "presentation",
-			class: "v-combobox-separator"
+			class: "v-listbox-separator"
 		}));
 	}
 });
 //#endregion
 export { i as default };
 
-//# sourceMappingURL=VComboboxSeparator.vue_vue_type_script_setup_true_lang.js.map
+//# sourceMappingURL=VListboxSeparator.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VListbox/VListboxSeparator.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxSeparator.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxSeparator.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Use presentation semantics for separators: a listbox owns only options and groups, unlike a\n * menu.\n */\nimport VSeparator from '../VSeparator/VSeparator.vue'\n</script>\n\n<template>\n  <VSeparator role=\"presentation\" class=\"v-listbox-separator\" />\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The selector compounds both classes because `.v-separator` sets `margin: 0` from a sheet of\n   * its own: at equal specificity the winner would be whichever of the two the consumer's\n   * bundler happens to put last. The space above and below comes from the panel's own gap, so\n   * no margin is added here.\n   */\n  .v-separator.v-listbox-separator {\n    margin-inline: calc(-1 * var(--vectis-space-1));\n  }\n}\n</style>\n"],"mappings":";;;;;;yBASE,EAA8D,GAAA;GAAlD,MAAK;GAAe,OAAM"}

package/dist/components/VListbox/VListboxValues.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-listbox-text{text-overflow:ellipsis;white-space:nowrap;flex:0 auto;min-width:0;overflow:hidden}.v-listbox-overflow{white-space:nowrap;color:var(--vectis-color-text-muted);flex:none}}

package/dist/components/VListbox/VListboxValues.d.ts

@@ -0,0 +1,52 @@
+import { ChipScale } from '../../utils/chip.js';
+import { ItemValue, ListboxChipSlotProps, ListboxOption, ListboxOverflowSlotProps } from '../../types.js';
+interface ListboxValuesProps {
+    /** Every chosen value, in order. */
+    values: ItemValue[];
+    /** One chip per value, or the labels joined by commas. */
+    display: 'chip' | 'text';
+    /** How many values to show while folded; 0 or none shows them all. */
+    max?: number;
+    /** Whether the field is folded, the only state in which `max` applies. */
+    collapsed?: boolean;
+    /** Rephrases the "+X". */
+    overflowText?: (count: number) => string;
+    /** The chips' scale inside the field. */
+    scale: ChipScale;
+    /** Whether each chip offers a cross. */
+    removable?: boolean;
+    /** Greys the chips out. */
+    disabled?: boolean;
+    /** Hides the line of labels from assistive technology, for a field that speaks its value. */
+    hideText?: boolean;
+    /** The label of a value. */
+    labelOf: (value: ItemValue) => string;
+    /** The option holding a value. */
+    optionOf: (value: ItemValue) => ListboxOption | undefined;
+}
+type __VLS_Slots = {
+    /** Replaces the chip standing for one value. */
+    chip?(props: ListboxChipSlotProps): unknown;
+    /** Replaces the "+X" standing for the values beyond `max`. */
+    overflow?(props: ListboxOverflowSlotProps): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<ListboxValuesProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    remove: (value: ItemValue) => any;
+}, string, import('vue').PublicProps, Readonly<ListboxValuesProps> & Readonly<{
+    onRemove?: ((value: ItemValue) => any) | undefined;
+}>, {
+    disabled: boolean;
+    collapsed: boolean;
+    max: number;
+    overflowText: (count: number) => string;
+    removable: boolean;
+    hideText: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VListbox/VListboxValues.js

@@ -0,0 +1,9 @@
+import './VListboxValues.css';
+import e from "./VListboxValues.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                               */
+//#region src/components/VListbox/VListboxValues.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=VListboxValues.js.map

package/dist/components/VListbox/VListboxValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxValues.js","names":[],"sources":["../../../src/components/VListbox/VListboxValues.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Render the values of a multiple VCombobox or VSelect inside its field: one chip each, or their\n * labels on one line, with the values beyond `max` summed up as \"+X\" while the field is folded.\n * It renders siblings rather than a wrapper, so the chips wrap as items of the field itself.\n */\nimport { computed } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport type { ChipScale } from '../../utils/chip'\nimport type {\n  ItemValue,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOverflowSlotProps,\n} from '../../types'\nimport { useMessages } from '../../i18n/state'\n\ninterface ListboxValuesProps {\n  /** Every chosen value, in order. */\n  values: ItemValue[]\n  /** One chip per value, or the labels joined by commas. */\n  display: 'chip' | 'text'\n  /** How many values to show while folded; 0 or none shows them all. */\n  max?: number\n  /** Whether the field is folded, the only state in which `max` applies. */\n  collapsed?: boolean\n  /** Rephrases the \"+X\". */\n  overflowText?: (count: number) => string\n  /** The chips' scale inside the field. */\n  scale: ChipScale\n  /** Whether each chip offers a cross. */\n  removable?: boolean\n  /** Greys the chips out. */\n  disabled?: boolean\n  /** Hides the line of labels from assistive technology, for a field that speaks its value. */\n  hideText?: boolean\n  /** The label of a value. */\n  labelOf: (value: ItemValue) => string\n  /** The option holding a value. */\n  optionOf: (value: ItemValue) => ListboxOption | undefined\n}\n\nconst props = withDefaults(defineProps<ListboxValuesProps>(), {\n  max: undefined,\n  collapsed: false,\n  overflowText: undefined,\n  removable: false,\n  disabled: false,\n  hideText: false,\n})\n\nconst emit = defineEmits<{\n  /** A chip's cross was pressed. */\n  remove: [value: ItemValue]\n}>()\n\ndefineSlots<{\n  /** Replaces the chip standing for one value. */\n  chip?(props: ListboxChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: ListboxOverflowSlotProps): unknown\n}>()\n\nconst m = useMessages()\n\n// Unfolded, the reader is working on the selection, and every value must be there to be seen\n// and taken back. `max: 0` means no limit, as on VAvatarGroup: a truthiness test, never\n// `!= null`, which would hide every value.\nconst shown = computed(() =>\n  props.collapsed && props.max ? props.values.slice(0, props.max) : props.values,\n)\nconst overflowCount = computed(() => props.values.length - shown.value.length)\n\n// Digits and a plus sign stay out of the dictionary, as VAvatarGroup's \"+N\" does: rephrasing\n// goes through `overflowText` or the `#overflow` slot.\nconst overflowLabel = computed(() =>\n  props.overflowText ? props.overflowText(overflowCount.value) : `+${overflowCount.value}`,\n)\n\n// The comma is universal punctuation rather than a word, so it stays out of the dictionary,\n// as in VFileInput's own text display.\nconst text = computed(() =>\n  props.display === 'text' ? shown.value.map(props.labelOf).join(', ') : '',\n)\n</script>\n\n<template>\n  <span v-if=\"text\" class=\"v-listbox-text\" :aria-hidden=\"hideText ? 'true' : undefined\">{{\n    text\n  }}</span>\n  <!-- A box of its own beside the line rather than the end of it: the labels are what the\n       ellipsis cuts, and the count of what they do not show must survive it. -->\n  <span\n    v-if=\"display === 'text' && overflowCount > 0\"\n    class=\"v-listbox-overflow\"\n    :aria-hidden=\"hideText ? 'true' : undefined\"\n  >\n    <slot name=\"overflow\" :count=\"overflowCount\" :size=\"scale.size\" :compact=\"scale.compact\">{{\n      overflowLabel\n    }}</slot>\n  </span>\n  <template v-for=\"value in display === 'chip' ? shown : []\" :key=\"value\">\n    <slot\n      name=\"chip\"\n      :value=\"value\"\n      :option=\"optionOf(value)\"\n      :label=\"labelOf(value)\"\n      :remove=\"() => emit('remove', value)\"\n      :size=\"scale.size\"\n      :compact=\"scale.compact\"\n    >\n      <VChip\n        tone=\"accent\"\n        :size=\"scale.size\"\n        :compact=\"scale.compact\"\n        :dismissible=\"removable && !disabled\"\n        :dismiss-label=\"m.common.remove(labelOf(value))\"\n        :disabled=\"disabled\"\n        @dismiss=\"emit('remove', value)\"\n        >{{ labelOf(value) }}</VChip\n      >\n    </slot>\n  </template>\n  <!-- Not wrapped, unlike the text display's counter: a box around an inline-flex chip opens a\n       line box, whose strut makes the field taller than its chips. Neutral and not dismissible,\n       so it reads as a summary rather than one more value. -->\n  <slot\n    v-if=\"display === 'chip' && overflowCount > 0\"\n    name=\"overflow\"\n    :count=\"overflowCount\"\n    :size=\"scale.size\"\n    :compact=\"scale.compact\"\n  >\n    <VChip\n      class=\"v-listbox-overflow-chip\"\n      tone=\"neutral\"\n      :size=\"scale.size\"\n      :compact=\"scale.compact\"\n      :disabled=\"disabled\"\n      >{{ overflowLabel }}</VChip\n    >\n  </slot>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The line shrinks before anything else in the field, and the zero minimum is what lets it:\n   * an unbroken line otherwise has the whole of its text as its minimum width.\n   */\n  .v-listbox-text {\n    flex: 0 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* The \"+X\" after a line of text never shrinks: the line gives way instead. */\n  .v-listbox-overflow {\n    flex: none;\n    white-space: nowrap;\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VListbox/VListboxValues.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,103 @@
+import { useMessages as e } from "../../i18n/state.js";
+import t from "../VChip/VChip.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, openBlock as l, renderList as u, renderSlot as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
+//#region src/components/VListbox/VListboxValues.vue?vue&type=script&setup=true&lang.ts
+var h = ["aria-hidden"], g = ["aria-hidden"], _ = /*@__PURE__*/ c({
+	__name: "VListboxValues",
+	props: {
+		values: {},
+		display: {},
+		max: { default: void 0 },
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		overflowText: {
+			type: Function,
+			default: void 0
+		},
+		scale: {},
+		removable: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		hideText: {
+			type: Boolean,
+			default: !1
+		},
+		labelOf: {},
+		optionOf: {}
+	},
+	emits: ["remove"],
+	setup(c, { emit: _ }) {
+		let v = c, y = _, b = e(), x = r(() => v.collapsed && v.max ? v.values.slice(0, v.max) : v.values), S = r(() => v.values.length - x.value.length), C = r(() => v.overflowText ? v.overflowText(S.value) : `+${S.value}`), w = r(() => v.display === "text" ? x.value.map(v.labelOf).join(", ") : "");
+		return (e, r) => (l(), a(n, null, [
+			w.value ? (l(), a("span", {
+				key: 0,
+				class: "v-listbox-text",
+				"aria-hidden": c.hideText ? "true" : void 0
+			}, f(w.value), 9, h)) : i("", !0),
+			c.display === "text" && S.value > 0 ? (l(), a("span", {
+				key: 1,
+				class: "v-listbox-overflow",
+				"aria-hidden": c.hideText ? "true" : void 0
+			}, [d(e.$slots, "overflow", {
+				count: S.value,
+				size: c.scale.size,
+				compact: c.scale.compact
+			}, () => [o(f(C.value), 1)])], 8, g)) : i("", !0),
+			(l(!0), a(n, null, u(c.display === "chip" ? x.value : [], (n) => d(e.$slots, "chip", {
+				value: n,
+				option: c.optionOf(n),
+				label: c.labelOf(n),
+				remove: () => y("remove", n),
+				size: c.scale.size,
+				compact: c.scale.compact
+			}, () => [s(t, {
+				tone: "accent",
+				size: c.scale.size,
+				compact: c.scale.compact,
+				dismissible: c.removable && !c.disabled,
+				"dismiss-label": p(b).common.remove(c.labelOf(n)),
+				disabled: c.disabled,
+				onDismiss: (e) => y("remove", n)
+			}, {
+				default: m(() => [o(f(c.labelOf(n)), 1)]),
+				_: 2
+			}, 1032, [
+				"size",
+				"compact",
+				"dismissible",
+				"dismiss-label",
+				"disabled",
+				"onDismiss"
+			])], void 0, n)), 128)),
+			c.display === "chip" && S.value > 0 ? d(e.$slots, "overflow", {
+				count: S.value,
+				size: c.scale.size,
+				compact: c.scale.compact
+			}, () => [s(t, {
+				class: "v-listbox-overflow-chip",
+				tone: "neutral",
+				size: c.scale.size,
+				compact: c.scale.compact,
+				disabled: c.disabled
+			}, {
+				default: m(() => [o(f(C.value), 1)]),
+				_: 1
+			}, 8, [
+				"size",
+				"compact",
+				"disabled"
+			])], void 0, 2) : i("", !0)
+		], 64));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=VListboxValues.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VListbox/VListboxValues.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VListboxValues.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VListbox/VListboxValues.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Render the values of a multiple VCombobox or VSelect inside its field: one chip each, or their\n * labels on one line, with the values beyond `max` summed up as \"+X\" while the field is folded.\n * It renders siblings rather than a wrapper, so the chips wrap as items of the field itself.\n */\nimport { computed } from 'vue'\n\nimport VChip from '../VChip/VChip.vue'\nimport type { ChipScale } from '../../utils/chip'\nimport type {\n  ItemValue,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOverflowSlotProps,\n} from '../../types'\nimport { useMessages } from '../../i18n/state'\n\ninterface ListboxValuesProps {\n  /** Every chosen value, in order. */\n  values: ItemValue[]\n  /** One chip per value, or the labels joined by commas. */\n  display: 'chip' | 'text'\n  /** How many values to show while folded; 0 or none shows them all. */\n  max?: number\n  /** Whether the field is folded, the only state in which `max` applies. */\n  collapsed?: boolean\n  /** Rephrases the \"+X\". */\n  overflowText?: (count: number) => string\n  /** The chips' scale inside the field. */\n  scale: ChipScale\n  /** Whether each chip offers a cross. */\n  removable?: boolean\n  /** Greys the chips out. */\n  disabled?: boolean\n  /** Hides the line of labels from assistive technology, for a field that speaks its value. */\n  hideText?: boolean\n  /** The label of a value. */\n  labelOf: (value: ItemValue) => string\n  /** The option holding a value. */\n  optionOf: (value: ItemValue) => ListboxOption | undefined\n}\n\nconst props = withDefaults(defineProps<ListboxValuesProps>(), {\n  max: undefined,\n  collapsed: false,\n  overflowText: undefined,\n  removable: false,\n  disabled: false,\n  hideText: false,\n})\n\nconst emit = defineEmits<{\n  /** A chip's cross was pressed. */\n  remove: [value: ItemValue]\n}>()\n\ndefineSlots<{\n  /** Replaces the chip standing for one value. */\n  chip?(props: ListboxChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: ListboxOverflowSlotProps): unknown\n}>()\n\nconst m = useMessages()\n\n// Unfolded, the reader is working on the selection, and every value must be there to be seen\n// and taken back. `max: 0` means no limit, as on VAvatarGroup: a truthiness test, never\n// `!= null`, which would hide every value.\nconst shown = computed(() =>\n  props.collapsed && props.max ? props.values.slice(0, props.max) : props.values,\n)\nconst overflowCount = computed(() => props.values.length - shown.value.length)\n\n// Digits and a plus sign stay out of the dictionary, as VAvatarGroup's \"+N\" does: rephrasing\n// goes through `overflowText` or the `#overflow` slot.\nconst overflowLabel = computed(() =>\n  props.overflowText ? props.overflowText(overflowCount.value) : `+${overflowCount.value}`,\n)\n\n// The comma is universal punctuation rather than a word, so it stays out of the dictionary,\n// as in VFileInput's own text display.\nconst text = computed(() =>\n  props.display === 'text' ? shown.value.map(props.labelOf).join(', ') : '',\n)\n</script>\n\n<template>\n  <span v-if=\"text\" class=\"v-listbox-text\" :aria-hidden=\"hideText ? 'true' : undefined\">{{\n    text\n  }}</span>\n  <!-- A box of its own beside the line rather than the end of it: the labels are what the\n       ellipsis cuts, and the count of what they do not show must survive it. -->\n  <span\n    v-if=\"display === 'text' && overflowCount > 0\"\n    class=\"v-listbox-overflow\"\n    :aria-hidden=\"hideText ? 'true' : undefined\"\n  >\n    <slot name=\"overflow\" :count=\"overflowCount\" :size=\"scale.size\" :compact=\"scale.compact\">{{\n      overflowLabel\n    }}</slot>\n  </span>\n  <template v-for=\"value in display === 'chip' ? shown : []\" :key=\"value\">\n    <slot\n      name=\"chip\"\n      :value=\"value\"\n      :option=\"optionOf(value)\"\n      :label=\"labelOf(value)\"\n      :remove=\"() => emit('remove', value)\"\n      :size=\"scale.size\"\n      :compact=\"scale.compact\"\n    >\n      <VChip\n        tone=\"accent\"\n        :size=\"scale.size\"\n        :compact=\"scale.compact\"\n        :dismissible=\"removable && !disabled\"\n        :dismiss-label=\"m.common.remove(labelOf(value))\"\n        :disabled=\"disabled\"\n        @dismiss=\"emit('remove', value)\"\n        >{{ labelOf(value) }}</VChip\n      >\n    </slot>\n  </template>\n  <!-- Not wrapped, unlike the text display's counter: a box around an inline-flex chip opens a\n       line box, whose strut makes the field taller than its chips. Neutral and not dismissible,\n       so it reads as a summary rather than one more value. -->\n  <slot\n    v-if=\"display === 'chip' && overflowCount > 0\"\n    name=\"overflow\"\n    :count=\"overflowCount\"\n    :size=\"scale.size\"\n    :compact=\"scale.compact\"\n  >\n    <VChip\n      class=\"v-listbox-overflow-chip\"\n      tone=\"neutral\"\n      :size=\"scale.size\"\n      :compact=\"scale.compact\"\n      :disabled=\"disabled\"\n      >{{ overflowLabel }}</VChip\n    >\n  </slot>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The line shrinks before anything else in the field, and the zero minimum is what lets it:\n   * an unbroken line otherwise has the whole of its text as its minimum width.\n   */\n  .v-listbox-text {\n    flex: 0 1 auto;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* The \"+X\" after a line of text never shrinks: the line gives way instead. */\n  .v-listbox-overflow {\n    flex: none;\n    white-space: nowrap;\n    color: var(--vectis-color-text-muted);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2CA,IAAM,IAAQ,GASR,IAAO,GAYP,IAAI,EAAY,GAKhB,IAAQ,QACZ,EAAM,aAAa,EAAM,MAAM,EAAM,OAAO,MAAM,GAAG,EAAM,GAAG,IAAI,EAAM,MAC1E,GACM,IAAgB,QAAe,EAAM,OAAO,SAAS,EAAM,MAAM,MAAM,GAIvE,IAAgB,QACpB,EAAM,eAAe,EAAM,aAAa,EAAc,KAAK,IAAI,IAAI,EAAc,OACnF,GAIM,IAAO,QACX,EAAM,YAAY,SAAS,EAAM,MAAM,IAAI,EAAM,OAAO,CAAC,CAAC,KAAK,IAAI,IAAI,EACzE;;GAIc,EAAA,SAAA,EAAA,GAAZ,EAES,QAAA;;IAFS,OAAM;IAAkB,eAAa,EAAA,WAAQ,SAAY,KAAA;QACzE,EAAA,KAAI,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAKE,EAAA,YAAO,UAAe,EAAA,QAAa,KAAA,EAAA,GAD3C,EAQO,QAAA;;IANL,OAAM;IACL,eAAa,EAAA,WAAQ,SAAY,KAAA;OAElC,EAES,EAAA,QAAA,YAAA;IAFc,OAAO,EAAA;IAAgB,MAAM,EAAA,MAAM;IAAO,SAAS,EAAA,MAAM;YAEvE,CAAA,EAAA,EADP,EAAA,KAAa,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;WAGjB,EAqBW,GAAA,MAAA,EArBe,EAAA,YAAO,SAAc,EAAA,QAAK,CAAA,IAAnC,MACf,EAmBO,EAAA,QAAA,QAAA;IAjBG;IACP,QAAQ,EAAA,SAAS,CAAK;IACtB,OAAO,EAAA,QAAQ,CAAK;IACpB,cAAc,EAAI,UAAW,CAAK;IAClC,MAAM,EAAA,MAAM;IACZ,SAAS,EAAA,MAAM;YAYX,CAVL,EASC,GAAA;IARC,MAAK;IACJ,MAAM,EAAA,MAAM;IACZ,SAAS,EAAA,MAAM;IACf,aAAa,EAAA,aAAS,CAAK,EAAA;IAC3B,iBAAe,EAAA,CAAA,CAAC,CAAC,OAAO,OAAO,EAAA,QAAQ,CAAK,CAAA;IAC5C,UAAU,EAAA;IACV,YAAO,MAAE,EAAI,UAAW,CAAK;;qBACT,CAAA,EAAA,EAAjB,EAAA,QAAQ,CAAK,CAAA,GAAA,CAAA,CAAA,CAAA;;;;;;;;;gBAlB0C,CAAK;GA0B9D,EAAA,YAAO,UAAe,EAAA,QAAa,IAD3C,EAeO,EAAA,QAAA,YAAA;IAZJ,OAAO,EAAA;IACP,MAAM,EAAA,MAAM;IACZ,SAAS,EAAA,MAAM;YAUX,CARL,EAOC,GAAA;IANC,OAAM;IACN,MAAK;IACJ,MAAM,EAAA,MAAM;IACZ,SAAS,EAAA,MAAM;IACf,UAAU,EAAA;;qBACS,CAAA,EAAA,EAAhB,EAAA,KAAa,GAAA,CAAA,CAAA,CAAA"}

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

@@ -72,9 +72,9 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     size: MenuSize;
+    compact: boolean;
     placement: MenuPlacement;
     matchTrigger: boolean;
-    compact: boolean;
     width: number | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,7 +1,7 @@
 import { usePopoverModel as e } from "../../composables/usePopover.js";
-import { isKeyboardFocus as t } from "../../utils/focus.js";
-import { menuAnchor as n, menuInvoker as r, menuKey as i } from "./context.js";
-import a from "./VMenuPanel.js";
+import { menuAnchor as t, menuInvoker as n, menuKey as r } from "./context.js";
+import i from "./VMenuPanel.js";
+import { isKeyboardFocus as a } from "../../utils/focus.js";
 import { Fragment as o, computed as s, createElementBlock as c, createVNode as l, defineComponent as u, mergeModels as d, openBlock as f, provide as p, ref as m, renderSlot as h, unref as g, useId as _, useModel as v, withCtx as y } from "vue";
 //#region src/components/VMenu/VMenu.vue?vue&type=script&setup=true&lang.ts
 var b = /*@__PURE__*/ u({
@@ -27,29 +27,29 @@ var b = /*@__PURE__*/ u({
 	}),
 	emits: ["update:open"],
 	setup(u, { expose: d }) {
-		let b = v(u, "open"), x = m(null), S = _(), C = n(S), w = s(() => ({
+		let b = v(u, "open"), x = m(null), S = _(), C = t(S), w = s(() => ({
 			popovertarget: S,
 			"aria-haspopup": "menu",
 			"aria-expanded": b.value,
 			"aria-controls": S,
 			style: { "anchor-name": C }
 		}));
-		p(i, { closeAll: () => x.value?.close() });
+		p(r, { closeAll: () => x.value?.close() });
 		function T(e) {
-			if (b.value = e, e) t(document.activeElement) ? x.value?.focusFirst() : x.value?.focusPanel();
+			if (b.value = e, e) a(document.activeElement) ? x.value?.focusFirst() : x.value?.focusPanel();
 			else {
 				let e = document.activeElement;
-				(!e || e === document.body || x.value?.el?.contains(e)) && r(S)?.focus();
+				(!e || e === document.body || x.value?.el?.contains(e)) && n(S)?.focus();
 			}
 		}
 		function E() {
-			x.value?.show(r(S) ?? void 0);
+			x.value?.show(n(S) ?? void 0);
 		}
 		return e(b, () => x.value?.shown ?? !1, E, () => x.value?.close()), d({
 			show: E,
 			close: () => x.value?.close(),
 			el: s(() => x.value?.el ?? null)
-		}), (e, t) => (f(), c(o, null, [h(e.$slots, "trigger", { triggerProps: w.value }), l(a, {
+		}), (e, t) => (f(), c(o, null, [h(e.$slots, "trigger", { triggerProps: w.value }), l(i, {
 			id: g(S),
 			ref_key: "panelRef",
 			ref: x,

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

@@ -56,9 +56,9 @@ declare const __VLS_base: import('vue').DefineComponent<MenuItemProps, {}, {}, {
     label: string;
     tone: MenuItemTone;
     href: string;
-    disabled: boolean;
     iconStart: IconSource;
     iconEnd: IconSource;
+    disabled: boolean;
     selected: boolean;
     sublabel: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -1,11 +1,11 @@
 import { iconProps as e } from "../VIcon/iconProps.js";
 import t from "../VIcon/VIcon.js";
-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 { menuAnchor as o, menuKey as s } from "./context.js";
-import c from "./VMenuPanel.js";
+import { isRtl as n } from "../../utils/direction.js";
+import { useInertLink as r } from "../../composables/useInertLink.js";
+import { menuAnchor as i, menuKey as a } from "./context.js";
+import o from "./VMenuPanel.js";
+import { chevron_right as s } from "../VIcon/icons/chevron_right.js";
+import { useTimer as c } from "../../composables/useTimer.js";
 import { Fragment as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, defineComponent as h, inject as g, mergeProps as _, normalizeProps as v, openBlock as y, ref as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useAttrs as T, useId as E, useSlots as D, withCtx as O } from "vue";
 //#region src/components/VMenu/VMenuItem.vue?vue&type=script&setup=true&lang.ts
 var k = { class: "v-menu-item-content" }, A = { class: "v-menu-item-label" }, j = {
@@ -39,15 +39,15 @@ var k = { class: "v-menu-item-content" }, A = { class: "v-menu-item-label" }, j
 		function L() {
 			return !I() && N.href !== void 0 ? "a" : "button";
 		}
-		let R = T(), z = n({
+		let R = T(), z = r({
 			href: () => I() ? void 0 : N.href,
 			inert: () => N.disabled,
 			attrs: () => R
-		}), B = g(s, null);
+		}), B = g(a, null);
 		function V() {
 			N.disabled || I() || (P("select"), B?.closeAll());
 		}
-		let H = E(), U = o(H), W = b(!1), G = b(null), K = b(null);
+		let H = E(), U = i(H), W = b(!1), G = b(null), K = b(null);
 		function q(e) {
 			if (!(e.altKey || e.ctrlKey || e.metaKey)) {
 				if (!I()) {
@@ -55,13 +55,13 @@ var k = { class: "v-menu-item-content" }, A = { class: "v-menu-item-label" }, j
 					return;
 				}
 				N.disabled || [
-					i(K.value) ? "ArrowLeft" : "ArrowRight",
+					n(K.value) ? "ArrowLeft" : "ArrowRight",
 					"Enter",
 					" "
 				].includes(e.key) && (e.preventDefault(), G.value?.show(K.value ?? void 0), G.value?.focusFirst());
 			}
 		}
-		let J = a();
+		let J = c();
 		function Y(e) {
 			N.disabled || e.pointerType === "touch" || (K.value?.focus({ preventScroll: !0 }), I() && J.start(() => G.value?.show(K.value ?? void 0), 150));
 		}
@@ -70,7 +70,7 @@ var k = { class: "v-menu-item-content" }, A = { class: "v-menu-item-label" }, j
 				G.value?.el?.contains(document.activeElement) || G.value?.close();
 			}, 150);
 		}
-		return (n, i) => (y(), f(l, null, [(y(), u(S(L()), _({
+		return (n, r) => (y(), f(l, null, [(y(), u(S(L()), _({
 			ref_key: "itemEl",
 			ref: K,
 			"aria-disabled": w(z).isInertLink.value ? "true" : void 0,
@@ -103,7 +103,7 @@ var k = { class: "v-menu-item-content" }, A = { class: "v-menu-item-label" }, j
 				p("span", k, [p("span", A, [x(n.$slots, "default", {}, () => [m(C(h.label), 1)])]), h.sublabel !== void 0 || n.$slots.sublabel ? (y(), f("span", j, [x(n.$slots, "sublabel", {}, () => [m(C(h.sublabel), 1)])])) : d("", !0)]),
 				I() ? (y(), u(t, {
 					key: 0,
-					name: w(r),
+					name: w(s),
 					class: "v-menu-item-chevron",
 					mirrored: ""
 				}, null, 8, ["name"])) : x(n.$slots, "end", {}, () => [h.iconEnd ? (y(), u(t, v(_({ key: 0 }, w(e)(h.iconEnd))), null, 16)) : d("", !0)], void 0, 1)
@@ -123,7 +123,7 @@ var k = { class: "v-menu-item-content" }, A = { class: "v-menu-item-label" }, j
 			"popovertarget",
 			"popovertargetaction",
 			"style"
-		])), I() ? (y(), u(c, {
+		])), I() ? (y(), u(o, {
 			key: 0,
 			id: w(H),
 			ref_key: "subPanel",
@@ -131,8 +131,8 @@ var k = { class: "v-menu-item-content" }, A = { class: "v-menu-item-label" }, j
 			placement: "right-start",
 			anchor: w(U),
 			submenu: "",
-			onToggle: i[0] ||= (e) => W.value = e,
-			onPointerenter: i[1] ||= (e) => w(J).cancel(),
+			onToggle: r[0] ||= (e) => W.value = e,
+			onPointerenter: r[1] ||= (e) => w(J).cancel(),
 			onPointerleave: X
 		}, {
 			default: O(() => [x(n.$slots, "submenu")]),

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

@@ -61,11 +61,11 @@ declare const __VLS_base: import('vue').DefineComponent<MenuPanelProps, {
     onToggle?: ((open: boolean) => any) | undefined;
 }>, {
     size: MenuSize;
+    compact: boolean;
     placement: MenuPanelPlacement;
     matchTrigger: boolean;
-    compact: boolean;
-    submenu: boolean;
     width: number | string;
+    submenu: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/VMenu/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 * Native auto popovers form the submenu stack. JavaScript maintains open models, roving focus\n * and explicit source invokers when opening imperatively.\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 anchor name carried by whatever opens the panel: the trigger, or the parent item.\n   * The implicit anchor is not enough: an opening from code relies on `showPopover({ source })`,\n   * and browser extensions that wrap `showPopover` (password managers do) drop that option,\n   * leaving the panel at the corner of the viewport.\n   */\n  anchor: string\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 matches a\n * `<button>`, so an inert link is recognized by its `aria-disabled` instead; and the final\n * filter keeps only the items of this panel, since an open submenu's items are DOM descendants\n * 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/** Puts the focus on the panel itself, singling out no command. */\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  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    // The `preventDefault` matters: left to itself the browser would close the popover on its\n    // own, without handing the focus back to the item that opened it; and our own hide() would\n    // already have 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  // `utils/arrowNav` starts any arrow at the beginning when nothing in the list has the focus,\n  // which is the right answer for the tabs, the pages and the toggle group it also serves: it\n  // is this menu that has a convention of its own, so it is handled here rather than in the\n  // shared helper. The case only exists BECAUSE of the pointer opening: reached from an item,\n  // the 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\nconst resolvedWidth = computed(() => cssSize(props.width))\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       * It sets the whole `--control-*` family; height, paddings, gap, type, icon context; and\n       * the submenus, being DOM descendants, inherit every one of them. Adding it to the\n       * submenus as well would BREAK them: the class recomputes the height from the base one\n       * without knowing about the compact attribute, which submenus do not carry, so a compact\n       * menu's submenus would silently snap back 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=\"{ '--menu-width': resolvedWidth, '--menu-anchor': anchor }\"\n    @beforetoggle=\"syncShown\"\n    @toggle=\"onToggle\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The panel's surface, border, shadow and inner rhythm come from the shared `.v-panel` class,\n   * and its dimensions from the `v-control` class the template sets on the root panel; there is\n   * no size table here, the rows reading the inherited variables directly. Only what is\n   * specific to a dropdown menu stays below. Every panel sets its own `--menu-anchor`, so none\n   * inherits an enclosing one.\n   */\n  .v-menu {\n    position-anchor: var(--menu-anchor);\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  /*\n   * The panel is focusable, but only ever from code; its `tabindex` is -1, so the Tab key never\n   * brings anyone here. It holds the focus when the menu was opened with a pointer, and a ring\n   * drawn around the whole panel would then read as the reader having landed on something,\n   * which is the opposite of what that state means: no command is singled out.\n   */\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  /* `anchor-size()` measures the trigger through `position-anchor` above. Like the width,\n     only the ROOT panel renders it. */\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// @keyboard @a11y @core\n/**\n * Native auto popovers form the submenu stack. JavaScript maintains open models, roving focus\n * and explicit source invokers when opening imperatively.\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 anchor name carried by whatever opens the panel: the trigger, or the parent item.\n   * The implicit anchor is not enough: an opening from code relies on `showPopover({ source })`,\n   * and browser extensions that wrap `showPopover` (password managers do) drop that option,\n   * leaving the panel at the corner of the viewport.\n   */\n  anchor: string\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// @keyboard @a11y\n/**\n * The items the keyboard may move to. Two exclusions matter: `:disabled` only ever matches a\n * `<button>`, so an inert link is recognized by its `aria-disabled` instead; and the final\n * filter keeps only the items of this panel, since an open submenu's items are DOM descendants\n * 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/** Puts the focus on the panel itself, singling out no command. */\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  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    // The `preventDefault` matters: left to itself the browser would close the popover on its\n    // own, without handing the focus back to the item that opened it; and our own hide() would\n    // already have 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  // `utils/arrowNav` starts any arrow at the beginning when nothing in the list has the focus,\n  // which is the right answer for the tabs, the pages and the toggle group it also serves: it\n  // is this menu that has a convention of its own, so it is handled here rather than in the\n  // shared helper. The case only exists BECAUSE of the pointer opening: reached from an item,\n  // the 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\nconst resolvedWidth = computed(() => cssSize(props.width))\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       * It sets the whole `--control-*` family; height, paddings, gap, type, icon context; and\n       * the submenus, being DOM descendants, inherit every one of them. Adding it to the\n       * submenus as well would BREAK them: the class recomputes the height from the base one\n       * without knowing about the compact attribute, which submenus do not carry, so a compact\n       * menu's submenus would silently snap back 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=\"{ '--menu-width': resolvedWidth, '--menu-anchor': anchor }\"\n    @beforetoggle=\"syncShown\"\n    @toggle=\"onToggle\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The panel's surface, border, shadow and inner rhythm come from the shared `.v-panel` class,\n   * and its dimensions from the `v-control` class the template sets on the root panel; there is\n   * no size table here, the rows reading the inherited variables directly. Only what is\n   * specific to a dropdown menu stays below. Every panel sets its own `--menu-anchor`, so none\n   * inherits an enclosing one.\n   */\n  .v-menu {\n    position-anchor: var(--menu-anchor);\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  /*\n   * The panel is focusable, but only ever from code; its `tabindex` is -1, so the Tab key never\n   * brings anyone here. It holds the focus when the menu was opened with a pointer, and a ring\n   * drawn around the whole panel would then read as the reader having landed on something,\n   * which is the opposite of what that state means: no command is singled out.\n   */\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  /* `anchor-size()` measures the trigger through `position-anchor` above. Like the width,\n     only the ROOT panel renders it. */\n  .v-menu[data-match-trigger] {\n    min-inline-size: anchor-size(width);\n  }\n}\n</style>\n"],"mappings":""}

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

@@ -1,8 +1,8 @@
 import { cssSize as e } from "../../utils/css.js";
 import { usePopover as t } from "../../composables/usePopover.js";
 import { isRtl as n } from "../../utils/direction.js";
-import { arrowNavigate as r } from "../../utils/arrowNav.js";
-import { menuInvoker as i, menuKey as a } from "./context.js";
+import { menuInvoker as r, menuKey as i } from "./context.js";
+import { arrowNavigate as a } from "../../utils/arrowNav.js";
 import { computed as o, createElementBlock as s, defineComponent as c, inject as l, normalizeClass as u, normalizeStyle as d, openBlock as f, ref as p, renderSlot as m, unref as h } from "vue";
 //#region src/components/VMenu/VMenuPanel.vue?vue&type=script&setup=true&lang.ts
 var g = [
@@ -35,7 +35,7 @@ var g = [
 	},
 	emits: ["toggle"],
 	setup(c, { expose: _, emit: v }) {
-		let y = c, b = v, x = p(null), { shown: S, syncShown: C, show: w, hide: T } = t(x), E = l(a);
+		let y = c, b = v, x = p(null), { shown: S, syncShown: C, show: w, hide: T } = t(x), E = l(i);
 		function D(e) {
 			C(e), b("toggle", S.value);
 		}
@@ -56,9 +56,9 @@ var g = [
 				E.closeAll();
 				return;
 			}
-			let a = n(t) ? "ArrowRight" : "ArrowLeft";
-			if (e.key === "Escape" || y.submenu && e.key === a) {
-				e.preventDefault(), T(), y.submenu && i(y.id)?.focus();
+			let i = n(t) ? "ArrowRight" : "ArrowLeft";
+			if (e.key === "Escape" || y.submenu && e.key === i) {
+				e.preventDefault(), T(), y.submenu && r(y.id)?.focus();
 				return;
 			}
 			if (e.key === "ArrowUp" && document.activeElement === t) {
@@ -68,7 +68,7 @@ var g = [
 					return;
 				}
 			}
-			r(e, t, O, { vertical: !0 });
+			a(e, t, O, { vertical: !0 });
 		}
 		let M = o(() => e(y.width));
 		return _({

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

@@ -1 +1 @@
-{"version":3,"file":"VMenuPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMenu/VMenuPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @keyboard @core\n/**\n * Native auto popovers form the submenu stack. JavaScript maintains open models, roving focus\n * and explicit source invokers when opening imperatively.\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 anchor name carried by whatever opens the panel: the trigger, or the parent item.\n   * The implicit anchor is not enough: an opening from code relies on `showPopover({ source })`,\n   * and browser extensions that wrap `showPopover` (password managers do) drop that option,\n   * leaving the panel at the corner of the viewport.\n   */\n  anchor: string\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 matches a\n * `<button>`, so an inert link is recognized by its `aria-disabled` instead; and the final\n * filter keeps only the items of this panel, since an open submenu's items are DOM descendants\n * 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/** Puts the focus on the panel itself, singling out no command. */\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  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    // The `preventDefault` matters: left to itself the browser would close the popover on its\n    // own, without handing the focus back to the item that opened it; and our own hide() would\n    // already have 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  // `utils/arrowNav` starts any arrow at the beginning when nothing in the list has the focus,\n  // which is the right answer for the tabs, the pages and the toggle group it also serves: it\n  // is this menu that has a convention of its own, so it is handled here rather than in the\n  // shared helper. The case only exists BECAUSE of the pointer opening: reached from an item,\n  // the 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\nconst resolvedWidth = computed(() => cssSize(props.width))\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       * It sets the whole `--control-*` family; height, paddings, gap, type, icon context; and\n       * the submenus, being DOM descendants, inherit every one of them. Adding it to the\n       * submenus as well would BREAK them: the class recomputes the height from the base one\n       * without knowing about the compact attribute, which submenus do not carry, so a compact\n       * menu's submenus would silently snap back 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=\"{ '--menu-width': resolvedWidth, '--menu-anchor': anchor }\"\n    @beforetoggle=\"syncShown\"\n    @toggle=\"onToggle\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The panel's surface, border, shadow and inner rhythm come from the shared `.v-panel` class,\n   * and its dimensions from the `v-control` class the template sets on the root panel; there is\n   * no size table here, the rows reading the inherited variables directly. Only what is\n   * specific to a dropdown menu stays below. Every panel sets its own `--menu-anchor`, so none\n   * inherits an enclosing one.\n   */\n  .v-menu {\n    position-anchor: var(--menu-anchor);\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  /*\n   * The panel is focusable, but only ever from code; its `tabindex` is -1, so the Tab key never\n   * brings anyone here. It holds the focus when the menu was opened with a pointer, and a ring\n   * drawn around the whole panel would then read as the reader having landed on something,\n   * which is the opposite of what that state means: no command is singled out.\n   */\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  /* `anchor-size()` measures the trigger through `position-anchor` above. Like the width,\n     only the ROOT panel renders it. */\n  .v-menu[data-match-trigger] {\n    min-inline-size: anchor-size(width);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDA,IAAM,IAAQ,GASR,IAAO,GAaP,IAAU,EAAwB,IAAI,GAGtC,EAAE,UAAO,cAAW,SAAM,YAAS,EAAW,CAAO,GAIrD,IAAO,EAAO,CAAO;EAE3B,SAAS,EAAS,GAAc;GAE9B,AADA,EAAU,CAAK,GACf,EAAK,UAAU,EAAM,KAAK;EAC5B;EASA,SAAS,IAAuB;GAC9B,IAAM,IAAQ,EAAQ;GAEtB,OADK,IACE,CACL,GAAG,EAAM,iBACP,kEACF,CACF,CAAC,CAAC,QAAQ,MAAO,EAAG,QAAQ,iBAAe,MAAM,CAAK,IALnC,CAAC;EAMtB;EAIA,SAAS,IAAa;GACpB,EAAM,CAAC,CAAC,EAAE,EAAE,MAAM;EACpB;EAIA,SAAS,IAAa;GACpB,EAAQ,OAAO,MAAM;EACvB;EAGA,SAAS,EAAU,GAAsB;GACvC,IAAM,IAAQ,EAAQ;GAItB,IADI,CAAC,KAAU,EAAM,OAAmB,QAAQ,iBAAe,MAAM,KACjE,EAAM,UAAU,EAAM,WAAW,EAAM,SAAS;GAEpD,IAAI,EAAM,QAAQ,OAAO;IACvB,EAAK,SAAS;IACd;GACF;GAGA,IAAM,IAAO,EAAM,CAAK,IAAI,eAAe;GAC3C,IAAI,EAAM,QAAQ,YAAa,EAAM,WAAW,EAAM,QAAQ,GAAO;IAOnE,AAFA,EAAM,eAAe,GACrB,EAAK,GACD,EAAM,WAAS,EAAY,EAAM,EAAE,CAAC,EAAE,MAAM;IAChD;GACF;GAMA,IAAI,EAAM,QAAQ,aAAa,SAAS,kBAAkB,GAAO;IAC/D,IAAM,IAAO,EAAM;IACnB,IAAI,EAAK,SAAS,GAAG;KAEnB,AADA,EAAM,eAAe,GACrB,EAAK,EAAK,SAAS,EAAE,EAAE,MAAM;KAC7B;IACF;GACF;GAIA,EAAc,GAAO,GAAO,GAAO,EAAE,UAAU,GAAK,CAAC;EACvD;EAEA,IAAM,IAAgB,QAAe,EAAQ,EAAM,KAAK,CAAC;SAIzD,EAAa;GAEX;GAEA,OAAO;GAEP;GAEA;GAEA;GAEA,IAAI;EACN,CAAC,mBAIC,EA4BM,OAAA;GA3BH,IAAI,EAAA;YACD;GAAJ,KAAI;GACJ,SAAQ;GACR,MAAK;GACL,UAAS;GACT,OAAK,EAAA,CAAC,uCAAqC,EAAA,aAAA,CACgc,EAAA,QAAA,CAAA,CAAA;GAU1e,kBAAgB,EAAA;GAChB,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,cAAY,EAAA,QAAa,KAAQ,KAAA;GACjC,sBAAoB,EAAA,eAAY,KAAQ,KAAA;GACxC,OAAK,EAAA;IAAA,gBAAoB,EAAA;IAAa,iBAAmB,EAAA;GAAM,CAAA;GAC/D,gBAAY,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACN;GACC;MAEV,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA,CAAA"}
+{"version":3,"file":"VMenuPanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VMenu/VMenuPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * Native auto popovers form the submenu stack. JavaScript maintains open models, roving focus\n * and explicit source invokers when opening imperatively.\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 anchor name carried by whatever opens the panel: the trigger, or the parent item.\n   * The implicit anchor is not enough: an opening from code relies on `showPopover({ source })`,\n   * and browser extensions that wrap `showPopover` (password managers do) drop that option,\n   * leaving the panel at the corner of the viewport.\n   */\n  anchor: string\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// @keyboard @a11y\n/**\n * The items the keyboard may move to. Two exclusions matter: `:disabled` only ever matches a\n * `<button>`, so an inert link is recognized by its `aria-disabled` instead; and the final\n * filter keeps only the items of this panel, since an open submenu's items are DOM descendants\n * 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/** Puts the focus on the panel itself, singling out no command. */\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  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    // The `preventDefault` matters: left to itself the browser would close the popover on its\n    // own, without handing the focus back to the item that opened it; and our own hide() would\n    // already have 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  // `utils/arrowNav` starts any arrow at the beginning when nothing in the list has the focus,\n  // which is the right answer for the tabs, the pages and the toggle group it also serves: it\n  // is this menu that has a convention of its own, so it is handled here rather than in the\n  // shared helper. The case only exists BECAUSE of the pointer opening: reached from an item,\n  // the 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\nconst resolvedWidth = computed(() => cssSize(props.width))\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       * It sets the whole `--control-*` family; height, paddings, gap, type, icon context; and\n       * the submenus, being DOM descendants, inherit every one of them. Adding it to the\n       * submenus as well would BREAK them: the class recomputes the height from the base one\n       * without knowing about the compact attribute, which submenus do not carry, so a compact\n       * menu's submenus would silently snap back 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=\"{ '--menu-width': resolvedWidth, '--menu-anchor': anchor }\"\n    @beforetoggle=\"syncShown\"\n    @toggle=\"onToggle\"\n    @keydown=\"onKeydown\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The panel's surface, border, shadow and inner rhythm come from the shared `.v-panel` class,\n   * and its dimensions from the `v-control` class the template sets on the root panel; there is\n   * no size table here, the rows reading the inherited variables directly. Only what is\n   * specific to a dropdown menu stays below. Every panel sets its own `--menu-anchor`, so none\n   * inherits an enclosing one.\n   */\n  .v-menu {\n    position-anchor: var(--menu-anchor);\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  /*\n   * The panel is focusable, but only ever from code; its `tabindex` is -1, so the Tab key never\n   * brings anyone here. It holds the focus when the menu was opened with a pointer, and a ring\n   * drawn around the whole panel would then read as the reader having landed on something,\n   * which is the opposite of what that state means: no command is singled out.\n   */\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  /* `anchor-size()` measures the trigger through `position-anchor` above. Like the width,\n     only the ROOT panel renders it. */\n  .v-menu[data-match-trigger] {\n    min-inline-size: anchor-size(width);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDA,IAAM,IAAQ,GASR,IAAO,GAaP,IAAU,EAAwB,IAAI,GAGtC,EAAE,UAAO,cAAW,SAAM,YAAS,EAAW,CAAO,GAIrD,IAAO,EAAO,CAAO;EAE3B,SAAS,EAAS,GAAc;GAE9B,AADA,EAAU,CAAK,GACf,EAAK,UAAU,EAAM,KAAK;EAC5B;EASA,SAAS,IAAuB;GAC9B,IAAM,IAAQ,EAAQ;GAEtB,OADK,IACE,CACL,GAAG,EAAM,iBACP,kEACF,CACF,CAAC,CAAC,QAAQ,MAAO,EAAG,QAAQ,iBAAe,MAAM,CAAK,IALnC,CAAC;EAMtB;EAIA,SAAS,IAAa;GACpB,EAAM,CAAC,CAAC,EAAE,EAAE,MAAM;EACpB;EAIA,SAAS,IAAa;GACpB,EAAQ,OAAO,MAAM;EACvB;EAGA,SAAS,EAAU,GAAsB;GACvC,IAAM,IAAQ,EAAQ;GAItB,IADI,CAAC,KAAU,EAAM,OAAmB,QAAQ,iBAAe,MAAM,KACjE,EAAM,UAAU,EAAM,WAAW,EAAM,SAAS;GAEpD,IAAI,EAAM,QAAQ,OAAO;IACvB,EAAK,SAAS;IACd;GACF;GAGA,IAAM,IAAO,EAAM,CAAK,IAAI,eAAe;GAC3C,IAAI,EAAM,QAAQ,YAAa,EAAM,WAAW,EAAM,QAAQ,GAAO;IAOnE,AAFA,EAAM,eAAe,GACrB,EAAK,GACD,EAAM,WAAS,EAAY,EAAM,EAAE,CAAC,EAAE,MAAM;IAChD;GACF;GAMA,IAAI,EAAM,QAAQ,aAAa,SAAS,kBAAkB,GAAO;IAC/D,IAAM,IAAO,EAAM;IACnB,IAAI,EAAK,SAAS,GAAG;KAEnB,AADA,EAAM,eAAe,GACrB,EAAK,EAAK,SAAS,EAAE,EAAE,MAAM;KAC7B;IACF;GACF;GAIA,EAAc,GAAO,GAAO,GAAO,EAAE,UAAU,GAAK,CAAC;EACvD;EAEA,IAAM,IAAgB,QAAe,EAAQ,EAAM,KAAK,CAAC;SAIzD,EAAa;GAEX;GAEA,OAAO;GAEP;GAEA;GAEA;GAEA,IAAI;EACN,CAAC,mBAIC,EA4BM,OAAA;GA3BH,IAAI,EAAA;YACD;GAAJ,KAAI;GACJ,SAAQ;GACR,MAAK;GACL,UAAS;GACT,OAAK,EAAA,CAAC,uCAAqC,EAAA,aAAA,CACgc,EAAA,QAAA,CAAA,CAAA;GAU1e,kBAAgB,EAAA;GAChB,aAAW,EAAA;GACX,gBAAc,EAAA,UAAO,KAAQ,KAAA;GAC7B,cAAY,EAAA,QAAa,KAAQ,KAAA;GACjC,sBAAoB,EAAA,eAAY,KAAQ,KAAA;GACxC,OAAK,EAAA;IAAA,gBAAoB,EAAA;IAAa,iBAAmB,EAAA;GAAM,CAAA;GAC/D,gBAAY,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,GAAA,CAAA;GACN;GACC;MAEV,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA,CAAA"}