vectis-ui 0.12.0 → 0.13.0

package/dist/components/VResizable/VResizablePanel.d.ts

@@ -0,0 +1,60 @@
+import { ResizableLength } from './VResizable.js';
+interface ResizablePanelProps {
+    /** Which panel this is among its siblings, set by VResizable. Do not set it yourself. */
+    index?: number;
+    /**
+     * The starting size in percent, used when the group's v-model gives none. Panels without one
+     * share what is left equally.
+     */
+    defaultSize?: number;
+    /** The smallest size: a number in percent, or a CSS length such as `200px` or `12rem`. */
+    minSize?: ResizableLength;
+    /** The largest size: a number in percent, or a CSS length. */
+    maxSize?: ResizableLength;
+    /**
+     * Lets the panel collapse: dragged past the middle of its minimum, or with Enter on its
+     * handle.
+     */
+    collapsible?: boolean;
+    /**
+     * The size of the collapsed panel, in percent or as a CSS length such as the width of an icon
+     * rail. At 0, the default, its content is hidden.
+     */
+    collapsedSize?: ResizableLength;
+    /**
+     * What the panel is called. It names the handle that resizes it; the dictionary's "Panel 2"
+     * otherwise.
+     */
+    label?: string;
+}
+type __VLS_Props = ResizablePanelProps;
+type __VLS_Slots = {
+    /** The panel's content. */
+    default(): unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the panel is collapsed. It only takes effect on a `collapsible` panel. */
+    'collapsed'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:collapsed": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    index: number;
+    defaultSize: number;
+    minSize: ResizableLength;
+    maxSize: ResizableLength;
+    collapsible: boolean;
+    collapsedSize: ResizableLength;
+}, {}, {}, {}, 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/VResizable/VResizablePanel.js

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

package/dist/components/VResizable/VResizablePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VResizablePanel.js","names":[],"sources":["../../../src/components/VResizable/VResizablePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The group hands each panel its share of the space as a `flex-grow` weight. The panel writes its\n * own limits in CSS as well, so a length limit holds before any script runs and while the window\n * is resized.\n */\n\nimport { computed, inject, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport { isDev } from '../../utils/env'\nimport { resizableKey } from './context'\nimport type { ResizableLength } from './VResizable.vue'\n\ninterface ResizablePanelProps {\n  /** Which panel this is among its siblings, set by VResizable. Do not set it yourself. */\n  index?: number\n  /**\n   * The starting size in percent, used when the group's v-model gives none. Panels without one\n   * share what is left equally.\n   */\n  defaultSize?: number\n  /** The smallest size: a number in percent, or a CSS length such as `200px` or `12rem`. */\n  minSize?: ResizableLength\n  /** The largest size: a number in percent, or a CSS length. */\n  maxSize?: ResizableLength\n  /**\n   * Lets the panel collapse: dragged past the middle of its minimum, or with Enter on its\n   * handle.\n   */\n  collapsible?: boolean\n  /**\n   * The size of the collapsed panel, in percent or as a CSS length such as the width of an icon\n   * rail. At 0, the default, its content is hidden.\n   */\n  collapsedSize?: ResizableLength\n  /**\n   * What the panel is called. It names the handle that resizes it; the dictionary's \"Panel 2\"\n   * otherwise.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ResizablePanelProps>(), {\n  index: 0,\n  defaultSize: undefined,\n  minSize: 0,\n  maxSize: undefined,\n  collapsible: false,\n  collapsedSize: 0,\n  label: undefined,\n})\n\n/** Whether the panel is collapsed. It only takes effect on a `collapsible` panel. */\nconst collapsed = defineModel<boolean>('collapsed', { default: false })\n\ndefineSlots<{\n  /** The panel's content. */\n  default(): unknown\n}>()\n\nconst group = inject(resizableKey, null)\nconst attrs = useAttrs()\nconst id = useId()\nconst el = ref<HTMLElement | null>(null)\n\nconst isCollapsed = computed(() => props.collapsible && collapsed.value)\n\nconst cssLength = (length: ResizableLength) => (typeof length === 'number' ? `${length}%` : length)\n\n/** A collapsed size of zero leaves nothing to read, so the content is hidden, focus included. */\nconst hidesContent = computed(\n  () => isCollapsed.value && Number.parseFloat(String(props.collapsedSize)) === 0,\n)\n\n// @core\n/*\n * The value the group last wrote, so the watcher below tells the group's own writes from the\n * consumer's. Only the consumer's ask the group to make room.\n */\nlet fromGroup: boolean | undefined\n\ngroup?.register(id, {\n  get index() {\n    return props.index\n  },\n  get el() {\n    return el.value\n  },\n  get minSize() {\n    return props.minSize\n  },\n  get maxSize() {\n    return props.maxSize\n  },\n  get collapsible() {\n    return props.collapsible\n  },\n  get collapsedSize() {\n    return props.collapsedSize\n  },\n  get collapsed() {\n    return isCollapsed.value\n  },\n  setCollapsed(value) {\n    if (collapsed.value === value) return\n    fromGroup = value\n    collapsed.value = value\n  },\n})\nonBeforeUnmount(() => group?.unregister(id))\n\nwatch(collapsed, (value) => {\n  const own = value === fromGroup\n  fromGroup = undefined\n  if (!own && props.collapsible) group?.toggle(props.index, value)\n})\n\n// @devwarn\nif (isDev) {\n  if (!group) console.warn('[VResizablePanel] Place it directly inside a VResizable.')\n  watch(\n    () => collapsed.value && !props.collapsible,\n    (wrong) => {\n      if (wrong) console.warn('[VResizablePanel] `collapsed` has no effect without `collapsible`.')\n    },\n    { immediate: true },\n  )\n}\n\n// Every variable is set, even to its default, so that a nested group's panel never inherits\n// the limits of the panel it sits in.\nconst style = computed(() => ({\n  '--resizable-panel-size': String(group?.sizeAt(props.index) ?? 1),\n  '--resizable-panel-min': cssLength(props.minSize),\n  '--resizable-panel-max': props.maxSize === undefined ? 'none' : cssLength(props.maxSize),\n  '--resizable-panel-collapsed': cssLength(props.collapsedSize),\n}))\n</script>\n\n<template>\n  <div\n    :id=\"(attrs.id as string | undefined) ?? id\"\n    ref=\"el\"\n    class=\"v-resizable-panel\"\n    :data-collapsed=\"isCollapsed ? '' : undefined\"\n    :data-hidden=\"hidesContent ? '' : undefined\"\n    :style=\"style\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The basis is the size itself, padding and border included, so a padded panel still takes its\n   * exact share. Growing by the same weight spreads any space left over, such as that of a\n   * collapsed sibling, in proportion; the 1px handles are shrunk off the same way.\n   */\n  .v-resizable-panel {\n    box-sizing: border-box;\n    flex: var(--resizable-panel-size) var(--resizable-panel-size)\n      calc(var(--resizable-panel-size) * 1%);\n    overflow: auto;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-panel {\n    min-inline-size: var(--resizable-panel-min);\n    max-inline-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-panel {\n    min-block-size: var(--resizable-panel-min);\n    max-block-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation] > .v-resizable-panel[data-collapsed] {\n    flex: 0 0 var(--resizable-panel-collapsed);\n    min-inline-size: 0;\n    max-inline-size: none;\n    min-block-size: 0;\n    max-block-size: none;\n  }\n\n  /* Removed from the layout as well, or its padding would keep the panel open. */\n  .v-resizable-panel[data-hidden] {\n    display: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VResizable/VResizablePanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,83 @@
+import { isDev as e } from "../../utils/env.js";
+import { resizableKey as t } from "./context.js";
+import { computed as n, createElementBlock as r, defineComponent as i, inject as a, mergeModels as o, normalizeStyle as s, onBeforeUnmount as c, openBlock as l, ref as u, renderSlot as d, unref as f, useAttrs as p, useId as m, useModel as h, watch as g } from "vue";
+//#region src/components/VResizable/VResizablePanel.vue?vue&type=script&setup=true&lang.ts
+var _ = [
+	"id",
+	"data-collapsed",
+	"data-hidden"
+], v = /*@__PURE__*/ i({
+	__name: "VResizablePanel",
+	props: /*@__PURE__*/ o({
+		index: { default: 0 },
+		defaultSize: { default: void 0 },
+		minSize: { default: 0 },
+		maxSize: { default: void 0 },
+		collapsible: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedSize: { default: 0 },
+		label: { default: void 0 }
+	}, {
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedModifiers: {}
+	}),
+	emits: ["update:collapsed"],
+	setup(i) {
+		let o = i, v = h(i, "collapsed"), y = a(t, null), b = p(), x = m(), S = u(null), C = n(() => o.collapsible && v.value), w = (e) => typeof e == "number" ? `${e}%` : e, T = n(() => C.value && Number.parseFloat(String(o.collapsedSize)) === 0), E;
+		y?.register(x, {
+			get index() {
+				return o.index;
+			},
+			get el() {
+				return S.value;
+			},
+			get minSize() {
+				return o.minSize;
+			},
+			get maxSize() {
+				return o.maxSize;
+			},
+			get collapsible() {
+				return o.collapsible;
+			},
+			get collapsedSize() {
+				return o.collapsedSize;
+			},
+			get collapsed() {
+				return C.value;
+			},
+			setCollapsed(e) {
+				v.value !== e && (E = e, v.value = e);
+			}
+		}), c(() => y?.unregister(x)), g(v, (e) => {
+			let t = e === E;
+			E = void 0, !t && o.collapsible && y?.toggle(o.index, e);
+		}), e && (y || console.warn("[VResizablePanel] Place it directly inside a VResizable."), g(() => v.value && !o.collapsible, (e) => {
+			e && console.warn("[VResizablePanel] `collapsed` has no effect without `collapsible`.");
+		}, { immediate: !0 }));
+		let D = n(() => ({
+			"--resizable-panel-size": String(y?.sizeAt(o.index) ?? 1),
+			"--resizable-panel-min": w(o.minSize),
+			"--resizable-panel-max": o.maxSize === void 0 ? "none" : w(o.maxSize),
+			"--resizable-panel-collapsed": w(o.collapsedSize)
+		}));
+		return (e, t) => (l(), r("div", {
+			id: f(b).id ?? f(x),
+			ref_key: "el",
+			ref: S,
+			class: "v-resizable-panel",
+			"data-collapsed": C.value ? "" : void 0,
+			"data-hidden": T.value ? "" : void 0,
+			style: s(D.value)
+		}, [d(e.$slots, "default")], 12, _));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=VResizablePanel.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VResizable/VResizablePanel.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VResizablePanel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VResizable/VResizablePanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The group hands each panel its share of the space as a `flex-grow` weight. The panel writes its\n * own limits in CSS as well, so a length limit holds before any script runs and while the window\n * is resized.\n */\n\nimport { computed, inject, onBeforeUnmount, ref, useAttrs, useId, watch } from 'vue'\n\nimport { isDev } from '../../utils/env'\nimport { resizableKey } from './context'\nimport type { ResizableLength } from './VResizable.vue'\n\ninterface ResizablePanelProps {\n  /** Which panel this is among its siblings, set by VResizable. Do not set it yourself. */\n  index?: number\n  /**\n   * The starting size in percent, used when the group's v-model gives none. Panels without one\n   * share what is left equally.\n   */\n  defaultSize?: number\n  /** The smallest size: a number in percent, or a CSS length such as `200px` or `12rem`. */\n  minSize?: ResizableLength\n  /** The largest size: a number in percent, or a CSS length. */\n  maxSize?: ResizableLength\n  /**\n   * Lets the panel collapse: dragged past the middle of its minimum, or with Enter on its\n   * handle.\n   */\n  collapsible?: boolean\n  /**\n   * The size of the collapsed panel, in percent or as a CSS length such as the width of an icon\n   * rail. At 0, the default, its content is hidden.\n   */\n  collapsedSize?: ResizableLength\n  /**\n   * What the panel is called. It names the handle that resizes it; the dictionary's \"Panel 2\"\n   * otherwise.\n   */\n  label?: string\n}\n\nconst props = withDefaults(defineProps<ResizablePanelProps>(), {\n  index: 0,\n  defaultSize: undefined,\n  minSize: 0,\n  maxSize: undefined,\n  collapsible: false,\n  collapsedSize: 0,\n  label: undefined,\n})\n\n/** Whether the panel is collapsed. It only takes effect on a `collapsible` panel. */\nconst collapsed = defineModel<boolean>('collapsed', { default: false })\n\ndefineSlots<{\n  /** The panel's content. */\n  default(): unknown\n}>()\n\nconst group = inject(resizableKey, null)\nconst attrs = useAttrs()\nconst id = useId()\nconst el = ref<HTMLElement | null>(null)\n\nconst isCollapsed = computed(() => props.collapsible && collapsed.value)\n\nconst cssLength = (length: ResizableLength) => (typeof length === 'number' ? `${length}%` : length)\n\n/** A collapsed size of zero leaves nothing to read, so the content is hidden, focus included. */\nconst hidesContent = computed(\n  () => isCollapsed.value && Number.parseFloat(String(props.collapsedSize)) === 0,\n)\n\n// @core\n/*\n * The value the group last wrote, so the watcher below tells the group's own writes from the\n * consumer's. Only the consumer's ask the group to make room.\n */\nlet fromGroup: boolean | undefined\n\ngroup?.register(id, {\n  get index() {\n    return props.index\n  },\n  get el() {\n    return el.value\n  },\n  get minSize() {\n    return props.minSize\n  },\n  get maxSize() {\n    return props.maxSize\n  },\n  get collapsible() {\n    return props.collapsible\n  },\n  get collapsedSize() {\n    return props.collapsedSize\n  },\n  get collapsed() {\n    return isCollapsed.value\n  },\n  setCollapsed(value) {\n    if (collapsed.value === value) return\n    fromGroup = value\n    collapsed.value = value\n  },\n})\nonBeforeUnmount(() => group?.unregister(id))\n\nwatch(collapsed, (value) => {\n  const own = value === fromGroup\n  fromGroup = undefined\n  if (!own && props.collapsible) group?.toggle(props.index, value)\n})\n\n// @devwarn\nif (isDev) {\n  if (!group) console.warn('[VResizablePanel] Place it directly inside a VResizable.')\n  watch(\n    () => collapsed.value && !props.collapsible,\n    (wrong) => {\n      if (wrong) console.warn('[VResizablePanel] `collapsed` has no effect without `collapsible`.')\n    },\n    { immediate: true },\n  )\n}\n\n// Every variable is set, even to its default, so that a nested group's panel never inherits\n// the limits of the panel it sits in.\nconst style = computed(() => ({\n  '--resizable-panel-size': String(group?.sizeAt(props.index) ?? 1),\n  '--resizable-panel-min': cssLength(props.minSize),\n  '--resizable-panel-max': props.maxSize === undefined ? 'none' : cssLength(props.maxSize),\n  '--resizable-panel-collapsed': cssLength(props.collapsedSize),\n}))\n</script>\n\n<template>\n  <div\n    :id=\"(attrs.id as string | undefined) ?? id\"\n    ref=\"el\"\n    class=\"v-resizable-panel\"\n    :data-collapsed=\"isCollapsed ? '' : undefined\"\n    :data-hidden=\"hidesContent ? '' : undefined\"\n    :style=\"style\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * The basis is the size itself, padding and border included, so a padded panel still takes its\n   * exact share. Growing by the same weight spreads any space left over, such as that of a\n   * collapsed sibling, in proportion; the 1px handles are shrunk off the same way.\n   */\n  .v-resizable-panel {\n    box-sizing: border-box;\n    flex: var(--resizable-panel-size) var(--resizable-panel-size)\n      calc(var(--resizable-panel-size) * 1%);\n    overflow: auto;\n  }\n\n  .v-resizable[data-orientation='horizontal'] > .v-resizable-panel {\n    min-inline-size: var(--resizable-panel-min);\n    max-inline-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation='vertical'] > .v-resizable-panel {\n    min-block-size: var(--resizable-panel-min);\n    max-block-size: var(--resizable-panel-max);\n  }\n\n  .v-resizable[data-orientation] > .v-resizable-panel[data-collapsed] {\n    flex: 0 0 var(--resizable-panel-collapsed);\n    min-inline-size: 0;\n    max-inline-size: none;\n    min-block-size: 0;\n    max-block-size: none;\n  }\n\n  /* Removed from the layout as well, or its padding would keep the panel open. */\n  .v-resizable-panel[data-hidden] {\n    display: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GAWR,IAAY,EAAoB,GAAC,WAA+B,GAOhE,IAAQ,EAAO,GAAc,IAAI,GACjC,IAAQ,EAAS,GACjB,IAAK,EAAM,GACX,IAAK,EAAwB,IAAI,GAEjC,IAAc,QAAe,EAAM,eAAe,EAAU,KAAK,GAEjE,KAAa,MAA6B,OAAO,KAAW,WAAW,GAAG,EAAO,KAAK,GAGtF,IAAe,QACb,EAAY,SAAS,OAAO,WAAW,OAAO,EAAM,aAAa,CAAC,MAAM,CAChF,GAOI;EAuCJ,AArCA,GAAO,SAAS,GAAI;GAClB,IAAI,QAAQ;IACV,OAAO,EAAM;GACf;GACA,IAAI,KAAK;IACP,OAAO,EAAG;GACZ;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;GACA,IAAI,UAAU;IACZ,OAAO,EAAM;GACf;GACA,IAAI,cAAc;IAChB,OAAO,EAAM;GACf;GACA,IAAI,gBAAgB;IAClB,OAAO,EAAM;GACf;GACA,IAAI,YAAY;IACd,OAAO,EAAY;GACrB;GACA,aAAa,GAAO;IACd,EAAU,UAAU,MACxB,IAAY,GACZ,EAAU,QAAQ;GACpB;EACF,CAAC,GACD,QAAsB,GAAO,WAAW,CAAE,CAAC,GAE3C,EAAM,IAAY,MAAU;GAC1B,IAAM,IAAM,MAAU;GAEtB,AADA,IAAY,KAAA,GACR,CAAC,KAAO,EAAM,eAAa,GAAO,OAAO,EAAM,OAAO,CAAK;EACjE,CAAC,GAGG,MACG,KAAO,QAAQ,KAAK,0DAA0D,GACnF,QACQ,EAAU,SAAS,CAAC,EAAM,cAC/B,MAAU;GACT,AAAI,KAAO,QAAQ,KAAK,oEAAoE;EAC9F,GACA,EAAE,WAAW,GAAK,CACpB;EAKF,IAAM,IAAQ,SAAgB;GAC5B,0BAA0B,OAAO,GAAO,OAAO,EAAM,KAAK,KAAK,CAAC;GAChE,yBAAyB,EAAU,EAAM,OAAO;GAChD,yBAAyB,EAAM,YAAY,KAAA,IAAY,SAAS,EAAU,EAAM,OAAO;GACvF,+BAA+B,EAAU,EAAM,aAAa;EAC9D,EAAE;yBAIA,EASM,OAAA;GARH,IAAK,EAAA,CAAA,CAAK,CAAC,MAA6B,EAAA,CAAA;YACrC;GAAJ,KAAI;GACJ,OAAM;GACL,kBAAgB,EAAA,QAAW,KAAQ,KAAA;GACnC,eAAa,EAAA,QAAY,KAAQ,KAAA;GACjC,OAAK,EAAE,EAAA,KAAK;MAEb,EAAQ,EAAA,QAAA,SAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/components/VResizable/context.d.ts

@@ -0,0 +1,24 @@
+import { InjectionKey } from 'vue';
+import { ResizableOrientation, ResizableLength } from './VResizable.js';
+export interface ResizablePanelEntry {
+    /** Which panel this is among its siblings. */
+    readonly index: number;
+    readonly el: HTMLElement | null;
+    readonly minSize: ResizableLength;
+    readonly maxSize: ResizableLength | undefined;
+    readonly collapsible: boolean;
+    readonly collapsedSize: ResizableLength;
+    readonly collapsed: boolean;
+    /** Writes the panel's collapsed model on behalf of the group. */
+    setCollapsed: (value: boolean) => void;
+}
+export interface ResizableContext {
+    readonly orientation: ResizableOrientation;
+    /** The size of a panel in percent, used as its `flex-grow` weight. */
+    sizeAt: (index: number) => number;
+    register: (id: string, entry: ResizablePanelEntry) => void;
+    unregister: (id: string) => void;
+    /** Collapses or reopens a panel whose collapsed model was changed from outside the group. */
+    toggle: (index: number, collapsed: boolean) => void;
+}
+export declare const resizableKey: InjectionKey<ResizableContext>;

package/dist/components/VResizable/context.js

@@ -0,0 +1,6 @@
+//#region src/components/VResizable/context.ts
+var e = Symbol("v-resizable");
+//#endregion
+export { e as resizableKey };
+
+//# sourceMappingURL=context.js.map

package/dist/components/VResizable/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VResizable/context.ts"],"sourcesContent":["/**\n * Panels register what the group needs when it measures and moves them: their element, their\n * limits and their collapsed model. Positions come from the group, which clones each panel's\n * VNode with its `index` while rendering.\n */\n\nimport type { InjectionKey } from 'vue'\n\nimport type { ResizableOrientation, ResizableLength } from './VResizable.vue'\n\nexport interface ResizablePanelEntry {\n  /** Which panel this is among its siblings. */\n  readonly index: number\n  readonly el: HTMLElement | null\n  readonly minSize: ResizableLength\n  readonly maxSize: ResizableLength | undefined\n  readonly collapsible: boolean\n  readonly collapsedSize: ResizableLength\n  readonly collapsed: boolean\n  /** Writes the panel's collapsed model on behalf of the group. */\n  setCollapsed: (value: boolean) => void\n}\n\nexport interface ResizableContext {\n  readonly orientation: ResizableOrientation\n  /** The size of a panel in percent, used as its `flex-grow` weight. */\n  sizeAt: (index: number) => number\n  register: (id: string, entry: ResizablePanelEntry) => void\n  unregister: (id: string) => void\n  /** Collapses or reopens a panel whose collapsed model was changed from outside the group. */\n  toggle: (index: number, collapsed: boolean) => void\n}\n\nexport const resizableKey: InjectionKey<ResizableContext> = Symbol('v-resizable')\n"],"mappings":";AAiCA,IAAa,IAA+C,OAAO,aAAa"}

package/dist/components/VResizable/layout.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Panel sizes are percentages of the space the panels share, summing to 100. These functions are
+ * pure: the component measures the DOM and converts CSS lengths before calling them.
+ */
+/** The limits of one panel, already converted to percentages. */
+export interface PanelLimits {
+    min: number;
+    max: number;
+    collapsible: boolean;
+    collapsedSize: number;
+}
+export declare const isCollapsedAt: (size: number, limits: PanelLimits) => boolean;
+/**
+ * The starting sizes: each panel's `defaultSize` where given, the rest shared equally. Sizes that
+ * do not add up to 100 are scaled to.
+ */
+export declare function defaultSizes(defaults: (number | undefined)[]): number[];
+/**
+ * Moves handle `handle`, which sits between panels `handle` and `handle + 1`, so that the panel
+ * before it grows by `delta` (or shrinks, when negative). The space is taken from the panels on
+ * the other side, nearest first, each down to its minimum; and given to the panels on this side,
+ * nearest first, each up to its maximum.
+ *
+ * `snap` places the collapse point of the two neighbours between their collapsed size and their
+ * minimum: 0.5 for a pointer, which must travel half that distance, 1 for the keyboard, which
+ * collapses or reopens on the first press.
+ */
+export declare function resizeAt(base: readonly number[], handle: number, delta: number, limits: readonly PanelLimits[], snap?: number): number[];

package/dist/components/VResizable/layout.js

@@ -0,0 +1,41 @@
+//#region src/components/VResizable/layout.ts
+var e = .01, t = (t, n) => n.collapsible && t <= n.collapsedSize + e, n = (e) => Math.round(e * 1e3) / 1e3;
+function r(e) {
+	let t = e.reduce((e, t) => e + (t ?? 0), 0), r = e.filter((e) => e === void 0).length, i = r ? Math.max(0, 100 - t) / r : 0, a = e.map((e) => e ?? i), o = a.reduce((e, t) => e + t, 0);
+	return o ? a.map((e) => n(e / o * 100)) : e.map(() => n(100 / (e.length || 1)));
+}
+function i(r, i, a, o, s = .5) {
+	if (Math.abs(a) < e) return [...r];
+	let c = a > 0, l = c ? i : i + 1, u = c ? -1 : 1, d = c ? i + 1 : i, f = c ? 1 : -1, p = (e) => e >= 0 && e < r.length, m = Math.abs(a), h = o[l], g = t(r[l], h), _ = Math.max(0, h.min - h.collapsedSize);
+	if (g) {
+		if (m < _ * (1 - s) - e) return [...r];
+		m = Math.max(m, _);
+	}
+	let v = 0;
+	for (let e = l; p(e); e += u) e !== l && t(r[e], o[e]) || (v += Math.max(0, o[e].max - r[e]));
+	m = Math.min(m, v);
+	let y = [...r], b = 0;
+	for (let n = d; p(n) && m - b > e; n += f) {
+		let i = o[n], a = r[n];
+		if (t(a, i)) continue;
+		let c = a - (m - b);
+		if (c < i.min) {
+			let t = i.collapsedSize + (i.min - i.collapsedSize) * s;
+			c = i.collapsible && n === d && c < t - e && b + a - i.collapsedSize <= v + e ? i.collapsedSize : i.min;
+		}
+		c = Math.min(c, a), b += a - c, y[n] = c;
+	}
+	if (g && b < _ - e) return [...r];
+	let x = b;
+	for (let n = l; p(n) && x > e; n += u) {
+		let e = o[n];
+		if (n !== l && t(r[n], e)) continue;
+		let i = y[n], a = Math.min(e.max, i + x);
+		x -= a - i, y[n] = a;
+	}
+	return x > e ? [...r] : y.map(n);
+}
+//#endregion
+export { r as defaultSizes, t as isCollapsedAt, i as resizeAt };
+
+//# sourceMappingURL=layout.js.map

package/dist/components/VResizable/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":[],"sources":["../../../src/components/VResizable/layout.ts"],"sourcesContent":["// @core\n/**\n * Panel sizes are percentages of the space the panels share, summing to 100. These functions are\n * pure: the component measures the DOM and converts CSS lengths before calling them.\n */\n\n/** The limits of one panel, already converted to percentages. */\nexport interface PanelLimits {\n  min: number\n  max: number\n  collapsible: boolean\n  collapsedSize: number\n}\n\n/** Below this difference two sizes are equal, which absorbs the rounding of written sizes. */\nconst EPSILON = 0.01\n\nexport const isCollapsedAt = (size: number, limits: PanelLimits) =>\n  limits.collapsible && size <= limits.collapsedSize + EPSILON\n\n/** Rounds a written size so the model does not carry floating-point noise. */\nconst roundSize = (size: number) => Math.round(size * 1000) / 1000\n\n/**\n * The starting sizes: each panel's `defaultSize` where given, the rest shared equally. Sizes that\n * do not add up to 100 are scaled to.\n */\nexport function defaultSizes(defaults: (number | undefined)[]): number[] {\n  const given = defaults.reduce<number>((sum, size) => sum + (size ?? 0), 0)\n  const free = defaults.filter((size) => size === undefined).length\n  const share = free ? Math.max(0, 100 - given) / free : 0\n  const sizes = defaults.map((size) => size ?? share)\n  const total = sizes.reduce((sum, size) => sum + size, 0)\n  if (!total) return defaults.map(() => roundSize(100 / (defaults.length || 1)))\n  return sizes.map((size) => roundSize((size / total) * 100))\n}\n\n/**\n * Moves handle `handle`, which sits between panels `handle` and `handle + 1`, so that the panel\n * before it grows by `delta` (or shrinks, when negative). The space is taken from the panels on\n * the other side, nearest first, each down to its minimum; and given to the panels on this side,\n * nearest first, each up to its maximum.\n *\n * `snap` places the collapse point of the two neighbours between their collapsed size and their\n * minimum: 0.5 for a pointer, which must travel half that distance, 1 for the keyboard, which\n * collapses or reopens on the first press.\n */\nexport function resizeAt(\n  base: readonly number[],\n  handle: number,\n  delta: number,\n  limits: readonly PanelLimits[],\n  snap = 0.5,\n): number[] {\n  if (Math.abs(delta) < EPSILON) return [...base]\n  const growing = delta > 0\n  const growFirst = growing ? handle : handle + 1\n  const growStep = growing ? -1 : 1\n  const shrinkFirst = growing ? handle + 1 : handle\n  const shrinkStep = growing ? 1 : -1\n  const inRange = (i: number) => i >= 0 && i < base.length\n\n  let want = Math.abs(delta)\n\n  // A collapsed neighbour stays shut until the pull passes its collapse point, then opens at\n  // its minimum at once: a panel narrower than its minimum is a state no rule allows.\n  const opener = limits[growFirst]!\n  const opening = isCollapsedAt(base[growFirst]!, opener)\n  const openGap = Math.max(0, opener.min - opener.collapsedSize)\n  if (opening) {\n    if (want < openGap * (1 - snap) - EPSILON) return [...base]\n    want = Math.max(want, openGap)\n  }\n\n  // A collapsed panel further away is not reopened by a drag that only passes by.\n  let room = 0\n  for (let i = growFirst; inRange(i); i += growStep) {\n    if (i !== growFirst && isCollapsedAt(base[i]!, limits[i]!)) continue\n    room += Math.max(0, limits[i]!.max - base[i]!)\n  }\n  want = Math.min(want, room)\n\n  const next = [...base]\n  let taken = 0\n  for (let i = shrinkFirst; inRange(i) && want - taken > EPSILON; i += shrinkStep) {\n    const lim = limits[i]!\n    const size = base[i]!\n    if (isCollapsedAt(size, lim)) continue\n    let target = size - (want - taken)\n    if (target < lim.min) {\n      const collapsePoint = lim.collapsedSize + (lim.min - lim.collapsedSize) * snap\n      const canCollapse =\n        lim.collapsible &&\n        i === shrinkFirst &&\n        target < collapsePoint - EPSILON &&\n        taken + size - lim.collapsedSize <= room + EPSILON\n      target = canCollapse ? lim.collapsedSize : lim.min\n    }\n    target = Math.min(target, size)\n    taken += size - target\n    next[i] = target\n  }\n\n  if (opening && taken < openGap - EPSILON) return [...base]\n\n  let left = taken\n  for (let i = growFirst; inRange(i) && left > EPSILON; i += growStep) {\n    const lim = limits[i]!\n    if (i !== growFirst && isCollapsedAt(base[i]!, lim)) continue\n    const size = next[i]!\n    const target = Math.min(lim.max, size + left)\n    left -= target - size\n    next[i] = target\n  }\n  if (left > EPSILON) return [...base]\n\n  return next.map(roundSize)\n}\n"],"mappings":";AAeA,IAAM,IAAU,KAEH,KAAiB,GAAc,MAC1C,EAAO,eAAe,KAAQ,EAAO,gBAAgB,GAGjD,KAAa,MAAiB,KAAK,MAAM,IAAO,GAAI,IAAI;AAM9D,SAAgB,EAAa,GAA4C;CACvE,IAAM,IAAQ,EAAS,QAAgB,GAAK,MAAS,KAAO,KAAQ,IAAI,CAAC,GACnE,IAAO,EAAS,QAAQ,MAAS,MAAS,KAAA,CAAS,CAAC,CAAC,QACrD,IAAQ,IAAO,KAAK,IAAI,GAAG,MAAM,CAAK,IAAI,IAAO,GACjD,IAAQ,EAAS,KAAK,MAAS,KAAQ,CAAK,GAC5C,IAAQ,EAAM,QAAQ,GAAK,MAAS,IAAM,GAAM,CAAC;CAEvD,OADK,IACE,EAAM,KAAK,MAAS,EAAW,IAAO,IAAS,GAAG,CAAC,IADvC,EAAS,UAAU,EAAU,OAAO,EAAS,UAAU,EAAE,CAAC;AAE/E;AAYA,SAAgB,EACd,GACA,GACA,GACA,GACA,IAAO,IACG;CACV,IAAI,KAAK,IAAI,CAAK,IAAI,GAAS,OAAO,CAAC,GAAG,CAAI;CAC9C,IAAM,IAAU,IAAQ,GAClB,IAAY,IAAU,IAAS,IAAS,GACxC,IAAW,IAAU,KAAK,GAC1B,IAAc,IAAU,IAAS,IAAI,GACrC,IAAa,IAAU,IAAI,IAC3B,KAAW,MAAc,KAAK,KAAK,IAAI,EAAK,QAE9C,IAAO,KAAK,IAAI,CAAK,GAInB,IAAS,EAAO,IAChB,IAAU,EAAc,EAAK,IAAa,CAAM,GAChD,IAAU,KAAK,IAAI,GAAG,EAAO,MAAM,EAAO,aAAa;CAC7D,IAAI,GAAS;EACX,IAAI,IAAO,KAAW,IAAI,KAAQ,GAAS,OAAO,CAAC,GAAG,CAAI;EAC1D,IAAO,KAAK,IAAI,GAAM,CAAO;CAC/B;CAGA,IAAI,IAAO;CACX,KAAK,IAAI,IAAI,GAAW,EAAQ,CAAC,GAAG,KAAK,GACnC,MAAM,KAAa,EAAc,EAAK,IAAK,EAAO,EAAG,MACzD,KAAQ,KAAK,IAAI,GAAG,EAAO,EAAE,CAAE,MAAM,EAAK,EAAG;CAE/C,IAAO,KAAK,IAAI,GAAM,CAAI;CAE1B,IAAM,IAAO,CAAC,GAAG,CAAI,GACjB,IAAQ;CACZ,KAAK,IAAI,IAAI,GAAa,EAAQ,CAAC,KAAK,IAAO,IAAQ,GAAS,KAAK,GAAY;EAC/E,IAAM,IAAM,EAAO,IACb,IAAO,EAAK;EAClB,IAAI,EAAc,GAAM,CAAG,GAAG;EAC9B,IAAI,IAAS,KAAQ,IAAO;EAC5B,IAAI,IAAS,EAAI,KAAK;GACpB,IAAM,IAAgB,EAAI,iBAAiB,EAAI,MAAM,EAAI,iBAAiB;GAM1E,IAJE,EAAI,eACJ,MAAM,KACN,IAAS,IAAgB,KACzB,IAAQ,IAAO,EAAI,iBAAiB,IAAO,IACtB,EAAI,gBAAgB,EAAI;EACjD;EAGA,AAFA,IAAS,KAAK,IAAI,GAAQ,CAAI,GAC9B,KAAS,IAAO,GAChB,EAAK,KAAK;CACZ;CAEA,IAAI,KAAW,IAAQ,IAAU,GAAS,OAAO,CAAC,GAAG,CAAI;CAEzD,IAAI,IAAO;CACX,KAAK,IAAI,IAAI,GAAW,EAAQ,CAAC,KAAK,IAAO,GAAS,KAAK,GAAU;EACnE,IAAM,IAAM,EAAO;EACnB,IAAI,MAAM,KAAa,EAAc,EAAK,IAAK,CAAG,GAAG;EACrD,IAAM,IAAO,EAAK,IACZ,IAAS,KAAK,IAAI,EAAI,KAAK,IAAO,CAAI;EAE5C,AADA,KAAQ,IAAS,GACjB,EAAK,KAAK;CACZ;CAGA,OAFI,IAAO,IAAgB,CAAC,GAAG,CAAI,IAE5B,EAAK,IAAI,CAAS;AAC3B"}

package/dist/components/VSelect/VSelect.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-select{anchor-scope:--select-anchor;width:100%;font-family:var(--vectis-text-family)}.v-select-control{display:block}.v-select-control .v-input-field{anchor-name:--select-anchor}.v-select-panel{max-block-size:var(--vectis-control-size-select-list-max-block)}.v-select-trigger{text-align:start;cursor:pointer;align-items:center;display:flex}.v-select[data-multiple] .v-select-trigger{flex:1 1 0}.v-select-value,.v-select-placeholder{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.v-select-placeholder{color:var(--vectis-color-text-subtle)}.v-select-spinner{color:var(--vectis-color-text-muted)}.v-select:has(.v-listbox-text){min-inline-size:0}}

package/dist/components/VSelect/VSelect.d.ts

@@ -0,0 +1,193 @@
+import { IconSource } from '../VIcon/types.js';
+import { FieldLabelPosition } from '../VField/VField.js';
+import { ItemValue, ListboxGroup, ListboxItem, ListboxChipSlotProps, ListboxOption, ListboxOptionSlotProps, ListboxOverflowSlotProps, ListboxSeparator } from '../../types.js';
+/** One thing that can be chosen. */
+export type SelectOption = ListboxOption;
+/** A named block of options, the equivalent of a native `<optgroup>`. */
+export type SelectGroup = ListboxGroup;
+/** A rule drawn between two blocks of options, purely decorative. */
+export type SelectSeparator = ListboxSeparator;
+/** Anything the list may hold: an option, a named block, or a separator. */
+export type SelectItem = ListboxItem;
+/** Where the list opens relative to the field. */
+export type SelectPlacement = 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';
+/** The height of the field: 32, 40 or 48 pixels. */
+export type SelectSize = 'sm' | 'md' | 'lg';
+/**
+ * How the chosen values are shown in a multiple field: one chip each, or their labels
+ * joined by commas.
+ */
+export type SelectDisplay = 'chip' | 'text';
+/** What the `#option` slot receives. */
+export type SelectOptionSlotProps = ListboxOptionSlotProps;
+/** What the `#chip` slot receives. */
+export type SelectChipSlotProps = ListboxChipSlotProps;
+/** What the `#overflow` slot receives. */
+export type SelectOverflowSlotProps = ListboxOverflowSlotProps;
+interface SelectProps {
+    /**
+     * What the list offers. An entry may be an option, a named block of options, or a
+     * separator; a plain list of options remains perfectly valid.
+     */
+    options: SelectItem[];
+    /**
+     * Allows several values to be chosen, which makes the value a list and shows what has been
+     * chosen inside the field, as chips or as text depending on `display`. The list then stays
+     * open while options are toggled.
+     */
+    multiple?: boolean;
+    /**
+     * How the chosen values are shown when several can be chosen: one dismissible chip each, or
+     * their labels joined by commas on a single line, cut short with an ellipsis when they run
+     * out of room.
+     */
+    display?: SelectDisplay;
+    /**
+     * How many chosen values to show while the field is not focused, before the rest are summed
+     * up as "+X". Left out, or set to 0, every value is shown.
+     */
+    max?: number;
+    /**
+     * Rephrases the "+X" standing for the values beyond `max`, "+5 products" for instance.
+     * It receives the number of values being hidden.
+     */
+    overflowText?: (count: number) => string;
+    /** The label above the field, tied to it so that clicking it focuses the field. */
+    label?: string;
+    /**
+     * A line of help under the field. It is tied to the field for assistive technology,
+     * so it is read out along with the label.
+     */
+    hint?: string;
+    /**
+     * A message saying what is wrong with the value, shown in place of the hint so that the field
+     * does not grow. It marks the field invalid, is read along with it, and is announced when it
+     * appears or changes.
+     */
+    error?: string;
+    /**
+     * Marks the field as required: an asterisk follows the label, the combobox is announced as
+     * required, and the hidden `<select>` a form reads is `required`.
+     */
+    required?: boolean;
+    /** Hides the label visually. It still names the field for assistive technology. */
+    hideLabel?: boolean;
+    /**
+     * Where the label sits: above the field (`top`, the default), or at its start, in a column of
+     * its own, moving back above when there is not room for both.
+     */
+    labelPosition?: FieldLabelPosition;
+    /** The height of the field: 32, 40 or 48 pixels. */
+    size?: SelectSize;
+    /** Takes 4px off the height, as everywhere else in the design system. */
+    compact?: boolean;
+    /** What the field says while nothing is chosen. */
+    placeholder?: string;
+    /** Makes the field unusable, greyed out through the colour tokens. Its value is not submitted. */
+    disabled?: boolean;
+    /**
+     * Shows what has been chosen without letting it be changed: the field stays focusable and its
+     * value is submitted, but the list never opens, the chips lose their crosses and no clear
+     * cross is offered.
+     */
+    readonly?: boolean;
+    /** Marks the field as invalid, for a rule of your own. */
+    invalid?: boolean;
+    /**
+     * An icon inside the field, at the start, before the chips when several values can
+     * be chosen. It is decorative by default and becomes a real button as soon as a
+     * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.
+     */
+    iconStart?: IconSource;
+    /** What the start icon does, in words, once it is clickable. */
+    iconStartLabel?: string;
+    /**
+     * The chevron at the end of the field, which turns as the list opens: an icon name, or an
+     * explicit render.
+     */
+    expandIcon?: IconSource;
+    /**
+     * Says that the options are being loaded: a spinner takes the chevron's place. The list still
+     * opens.
+     */
+    loading?: boolean;
+    /** What the spinner is announced as. It falls back to the design system dictionary. */
+    loadingText?: string;
+    /** Offers a cross that empties the selection. */
+    clearable?: boolean;
+    /** What that cross does, in words. It falls back to the design system dictionary. */
+    clearLabel?: string;
+    /** Where the list opens relative to the field. */
+    placement?: SelectPlacement;
+}
+type __VLS_Props = SelectProps;
+type __VLS_Slots = {
+    /**
+     * Content at the start of the field, rendered after the chips standing for the chosen
+     * values rather than in their place.
+     */
+    start?(): unknown;
+    /**
+     * Controls of your own inside the field, placed before the ones the field owns: the clear
+     * cross and the chevron.
+     */
+    'value-end'?(): unknown;
+    /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */
+    option?(props: SelectOptionSlotProps): unknown;
+    /** Replaces the chip standing for one chosen value. */
+    chip?(props: SelectChipSlotProps): unknown;
+    /** Replaces the "+X" standing for the values beyond `max`. */
+    overflow?(props: SelectOverflowSlotProps): unknown;
+};
+type __VLS_ModelProps = {
+    /** The chosen option's `value`, `''` while nothing is chosen, or the list of them when `multiple` is set. */
+    modelValue?: ItemValue | ItemValue[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** Moves the focus to the field. */
+    focus: (options?: FocusOptions) => void | undefined;
+    /** The button that acts as the combobox. */
+    el: import('vue').Ref<HTMLButtonElement | null, HTMLButtonElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
+    "update:modelValue": (value: ItemValue | ItemValue[]) => any;
+    "click:icon-start": (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: ItemValue | ItemValue[]) => any) | undefined;
+    "onClick:icon-start"?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    loading: boolean;
+    label: string;
+    placeholder: string;
+    error: string;
+    size: SelectSize;
+    compact: boolean;
+    iconStart: IconSource;
+    disabled: boolean;
+    required: boolean;
+    multiple: boolean;
+    display: SelectDisplay;
+    placement: SelectPlacement;
+    invalid: boolean;
+    hint: string;
+    hideLabel: boolean;
+    labelPosition: FieldLabelPosition;
+    readonly: boolean;
+    iconStartLabel: string;
+    loadingText: string;
+    clearable: boolean;
+    clearLabel: string;
+    max: number;
+    expandIcon: IconSource;
+    overflowText: (count: number) => string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/VSelect/VSelect.js

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

package/dist/components/VSelect/VSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VSelect.js","names":[],"sources":["../../../src/components/VSelect/VSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A select-only combobox: a native button keeps DOM focus and moves aria-activedescendant through\n * the options, since a native `<select>` cannot draw its list with the design system on every\n * engine. A hidden native `<select>` carries the value into forms, with its constraint\n * validation, autofill and reset.\n */\n\nimport { computed, inject, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport type { IconSource } from '../VIcon/types'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VListboxChevron from '../VListbox/VListboxChevron.vue'\nimport VListboxPanel from '../VListbox/VListboxPanel.vue'\nimport VListboxValues from '../VListbox/VListboxValues.vue'\nimport VSpinner from '../VSpinner/VSpinner.vue'\n\nimport type {\n  ItemValue,\n  ListboxGroup,\n  ListboxItem,\n  ListboxChipSlotProps,\n  ListboxOption,\n  ListboxOptionSlotProps,\n  ListboxOverflowSlotProps,\n  ListboxSeparator,\n} from '../../types'\nimport { toggleValue } from '../../utils/array'\nimport { partitionAttrs } from '../../utils/attrs'\nimport { chipScaleFor } from '../../utils/chip'\nimport { createNormalizedCache, normalizeText } from '../../utils/text'\n\nimport { canClear } from '../../composables/useClearable'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useFocusoutDismiss } from '../../composables/useFocusoutDismiss'\nimport { iconStartListener } from '../../composables/useIconClickHandlers'\nimport { selectionOf, useListbox } from '../../composables/useListbox'\nimport { useRootAttrs } from '../../composables/useRootAttrs'\nimport { useTimer } from '../../composables/useTimer'\nimport { useMessages } from '../../i18n/state'\n\n/** One thing that can be chosen. */\nexport type SelectOption = ListboxOption\n\n/** A named block of options, the equivalent of a native `<optgroup>`. */\nexport type SelectGroup = ListboxGroup\n\n/** A rule drawn between two blocks of options, purely decorative. */\nexport type SelectSeparator = ListboxSeparator\n\n/** Anything the list may hold: an option, a named block, or a separator. */\nexport type SelectItem = ListboxItem\n\n/** Where the list opens relative to the field. */\nexport type SelectPlacement =\n  'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end'\n\n/** The height of the field: 32, 40 or 48 pixels. */\nexport type SelectSize = 'sm' | 'md' | 'lg'\n\n/**\n * How the chosen values are shown in a multiple field: one chip each, or their labels\n * joined by commas.\n */\nexport type SelectDisplay = 'chip' | 'text'\n\n/** What the `#option` slot receives. */\nexport type SelectOptionSlotProps = ListboxOptionSlotProps\n\n/** What the `#chip` slot receives. */\nexport type SelectChipSlotProps = ListboxChipSlotProps\n\n/** What the `#overflow` slot receives. */\nexport type SelectOverflowSlotProps = ListboxOverflowSlotProps\n\ninterface SelectProps {\n  /**\n   * What the list offers. An entry may be an option, a named block of options, or a\n   * separator; a plain list of options remains perfectly valid.\n   */\n  options: SelectItem[]\n  /**\n   * Allows several values to be chosen, which makes the value a list and shows what has been\n   * chosen inside the field, as chips or as text depending on `display`. The list then stays\n   * open while options are toggled.\n   */\n  multiple?: boolean\n  /**\n   * How the chosen values are shown when several can be chosen: one dismissible chip each, or\n   * their labels joined by commas on a single line, cut short with an ellipsis when they run\n   * out of room.\n   */\n  display?: SelectDisplay\n  /**\n   * How many chosen values to show while the field is not focused, before the rest are summed\n   * up as \"+X\". Left out, or set to 0, every value is shown.\n   */\n  max?: number\n  /**\n   * Rephrases the \"+X\" standing for the values beyond `max`, \"+5 products\" for instance.\n   * It receives the number of values being hidden.\n   */\n  overflowText?: (count: number) => string\n  /** The label above the field, tied to it so that clicking it focuses the field. */\n  label?: string\n  /**\n   * A line of help under the field. It is tied to the field for assistive technology,\n   * so it is read out along with the label.\n   */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint so that the field\n   * does not grow. It marks the field invalid, is read along with it, and is announced when it\n   * appears or changes.\n   */\n  error?: string\n  /**\n   * Marks the field as required: an asterisk follows the label, the combobox is announced as\n   * required, and the hidden `<select>` a form reads is `required`.\n   */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: SelectSize\n  /** Takes 4px off the height, as everywhere else in the design system. */\n  compact?: boolean\n  /** What the field says while nothing is chosen. */\n  placeholder?: string\n  /** Makes the field unusable, greyed out through the colour tokens. Its value is not submitted. */\n  disabled?: boolean\n  /**\n   * Shows what has been chosen without letting it be changed: the field stays focusable and its\n   * value is submitted, but the list never opens, the chips lose their crosses and no clear\n   * cross is offered.\n   */\n  readonly?: boolean\n  /** Marks the field as invalid, for a rule of your own. */\n  invalid?: boolean\n  /**\n   * An icon inside the field, at the start, before the chips when several values can\n   * be chosen. It is decorative by default and becomes a real button as soon as a\n   * `@click:icon-start` listener is attached, in which case it needs `iconStartLabel`.\n   */\n  iconStart?: IconSource\n  /** What the start icon does, in words, once it is clickable. */\n  iconStartLabel?: string\n  /**\n   * The chevron at the end of the field, which turns as the list opens: an icon name, or an\n   * explicit render.\n   */\n  expandIcon?: IconSource\n  /**\n   * Says that the options are being loaded: a spinner takes the chevron's place. The list still\n   * opens.\n   */\n  loading?: boolean\n  /** What the spinner is announced as. It falls back to the design system dictionary. */\n  loadingText?: string\n  /** Offers a cross that empties the selection. */\n  clearable?: boolean\n  /** What that cross does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /** Where the list opens relative to the field. */\n  placement?: SelectPlacement\n}\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n  multiple: false,\n  display: 'chip',\n  max: undefined,\n  overflowText: undefined,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  size: 'md',\n  compact: false,\n  placeholder: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  iconStart: undefined,\n  iconStartLabel: undefined,\n  expandIcon: () => expandMoreIcon,\n  loading: false,\n  loadingText: undefined,\n  clearable: false,\n  clearLabel: undefined,\n  placement: 'bottom-start',\n})\n\nconst m = useMessages()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? m.value.select.clear)\n\nconst emit = defineEmits<{\n  /** The clear cross emptied the selection. */\n  clear: []\n  /** The start icon was clicked. Attaching this listener is what makes it a button. */\n  'click:icon-start': [event: MouseEvent]\n}>()\n\ndefineSlots<{\n  /**\n   * Content at the start of the field, rendered after the chips standing for the chosen\n   * values rather than in their place.\n   */\n  start?(): unknown\n  /**\n   * Controls of your own inside the field, placed before the ones the field owns: the clear\n   * cross and the chevron.\n   */\n  'value-end'?(): unknown\n  /** What a row of the list shows, in place of the plain label: a subtitle, an avatar, a badge. */\n  option?(props: SelectOptionSlotProps): unknown\n  /** Replaces the chip standing for one chosen value. */\n  chip?(props: SelectChipSlotProps): unknown\n  /** Replaces the \"+X\" standing for the values beyond `max`. */\n  overflow?(props: SelectOverflowSlotProps): unknown\n}>()\n\nconst group = inject(inputGroupKey, null)\nconst {\n  size: resolvedSize,\n  compact: resolvedCompact,\n  disabled: resolvedDisabled,\n} = useControlShape(props, group)\n\nconst chipScale = computed(() => chipScaleFor(resolvedSize.value, resolvedCompact.value))\n\n/** The chosen option's `value`, `''` while nothing is chosen, or the list of them when `multiple` is set. */\nconst model = defineModel<ItemValue | ItemValue[]>({ default: '' })\n\n// `class` and `style` stay on the wrapper; the form attributes go to the hidden `<select>`, which\n// is what a form reads; everything else goes down to the button, the element assistive\n// technology treats as the combobox.\ndefineOptions({ inheritAttrs: false })\nconst { rootClass, rootStyle, forwardedAttrs } = useRootAttrs()\n\nconst NATIVE_ONLY = ['name', 'form', 'autocomplete']\nconst split = computed(() => partitionAttrs(forwardedAttrs.value, NATIVE_ONLY))\nconst nativeAttrs = computed(() => split.value.picked)\n\n// Declared as this component's own event, `click:icon-start` is out of `$attrs`, so the\n// listener is relayed to the field by hand; and only when the consumer wrote one.\nconst iconStartClick = iconStartListener((event) => emit('click:icon-start', event))\nconst fieldAttrs = computed(() => ({ ...split.value.rest, ...iconStartClick }))\n\nconst rootEl = ref<HTMLElement | null>(null)\nconst triggerEl = ref<HTMLButtonElement | null>(null)\nconst nativeEl = ref<HTMLSelectElement | null>(null)\nconst panelRef = ref<InstanceType<typeof VListboxPanel> | null>(null)\nconst optionsId = useId()\n\nconst open = ref(false)\nconst focused = ref(false)\n\nconst selectedValues = computed(() => selectionOf(model.value, props.multiple))\n\nconst {\n  allOptions,\n  visible,\n  optionOf,\n  labelOf,\n  remember,\n  activeIndex,\n  optionId,\n  highlightFirst,\n  highlightLast,\n  highlightSelected,\n  move,\n  page,\n  hover,\n  blocks,\n  measureRow,\n} = useListbox({\n  items: () => props.options,\n  selected: () => selectedValues.value,\n  open: () => open.value,\n  id: optionsId,\n  panelEl: () => panelRef.value?.el ?? null,\n  virtual: () => false,\n  size: () => resolvedSize.value,\n  compact: () => resolvedCompact.value,\n})\n\n// @a11y\n// What the button says, which assistive technology reads as the combobox's value: the chosen\n// label, or every chosen label when the chips beside it show them.\nconst valueText = computed(() => selectedValues.value.map(labelOf).join(', '))\n\nconst textDisplay = computed(() => props.multiple && props.display === 'text')\n\n// Folded, the values beyond `max` are summed up; under the focus, every value is there to be\n// seen and taken back.\nconst collapsed = computed(() => props.multiple && !focused.value && !open.value)\n\nconst clearVisible = computed(() =>\n  canClear(props, resolvedDisabled.value, selectedValues.value.length > 0),\n)\n\n/** Whether the hidden `<select>` failed validation since the value last changed. */\nconst nativeInvalid = ref(false)\n\nfunction openPanel() {\n  if (resolvedDisabled.value || props.readonly || open.value) return\n  open.value = true\n  highlightSelected()\n}\n\nfunction closePanel() {\n  if (!open.value) return\n  open.value = false\n  activeIndex.value = -1\n}\n\nfunction togglePanel() {\n  if (open.value) closePanel()\n  else openPanel()\n}\n\nconst onFocusout = useFocusoutDismiss(rootEl, () => {\n  focused.value = false\n  closePanel()\n})\n\nfunction choose(option: SelectOption) {\n  if (option.disabled || props.readonly || resolvedDisabled.value) return\n  remember(option)\n  if (props.multiple) {\n    model.value = toggleValue(selectedValues.value, option.value)\n  } else {\n    // Choosing the option already chosen (Tab without moving, for one) changes nothing.\n    if (model.value !== option.value) model.value = option.value\n    closePanel()\n  }\n}\n\nfunction chooseActive() {\n  const option = visible.value[activeIndex.value]\n  if (option) choose(option)\n}\n\nfunction removeValue(value: ItemValue) {\n  if (!props.multiple || props.readonly || resolvedDisabled.value) return\n  model.value = selectedValues.value.filter((v) => v !== value)\n  // The cross disappears along with its chip, so the focus would fall back to the page.\n  triggerEl.value?.focus()\n}\n\n/** The cross was pressed. It disappears with the selection, so the focus goes back to the button. */\nfunction onClear() {\n  model.value = props.multiple ? [] : ''\n  triggerEl.value?.focus()\n  emit('clear')\n}\n\nconst normalizedOf = createNormalizedCache<SelectOption>()\nlet typed = ''\nconst typeTimer = useTimer()\n\n// @keyboard\n/*\n * Typing a label's first letters highlights it, as a native list does: the letters typed within\n * half a second add up to a prefix, and the same letter repeated cycles through the options it\n * starts.\n */\nfunction typeahead(key: string) {\n  typed += normalizeText(key)\n  typeTimer.start(() => (typed = ''), 500)\n  const list = visible.value\n  if (list.length === 0) return\n  const cycling = [...typed].every((char) => char === typed[0])\n  const needle = cycling ? typed[0]! : typed\n  // A new prefix may match the highlighted option itself; a cycle moves on from it.\n  const from = activeIndex.value + (typed.length === 1 || cycling ? 1 : 0)\n  for (let step = 0; step < list.length; step++) {\n    const index = (Math.max(from, 0) + step) % list.length\n    const option = list[index]!\n    if (!option.disabled && normalizedOf(option, option.label).startsWith(needle)) {\n      activeIndex.value = index\n      return\n    }\n  }\n}\n\nconst printable = (event: KeyboardEvent) =>\n  event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey\n\n// @keyboard\n// The keys of the select-only combobox pattern. Enter and Space are consumed on the closed button\n// too, so the click they would synthesise does not toggle the list a second time.\nfunction onKeydown(event: KeyboardEvent) {\n  if (!open.value) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Enter':\n      case ' ':\n        event.preventDefault()\n        openPanel()\n        return\n      case 'Home':\n        event.preventDefault()\n        openPanel()\n        if (open.value) highlightFirst()\n        return\n      case 'End':\n        event.preventDefault()\n        openPanel()\n        if (open.value) highlightLast()\n        return\n    }\n    if (printable(event)) {\n      openPanel()\n      if (open.value) typeahead(event.key)\n    }\n    return\n  }\n\n  switch (event.key) {\n    case 'ArrowDown':\n      event.preventDefault()\n      move(1)\n      break\n    case 'ArrowUp':\n      event.preventDefault()\n      if (event.altKey) {\n        chooseActive()\n        closePanel()\n      } else move(-1)\n      break\n    case 'Home':\n      event.preventDefault()\n      highlightFirst()\n      break\n    case 'End':\n      event.preventDefault()\n      highlightLast()\n      break\n    case 'PageDown':\n      event.preventDefault()\n      page(10)\n      break\n    case 'PageUp':\n      event.preventDefault()\n      page(-10)\n      break\n    case ' ':\n      event.preventDefault()\n      // While letters are being typed, a space belongs to the prefix: \"New York\".\n      if (typed) typeahead(' ')\n      else chooseActive()\n      break\n    case 'Enter':\n      event.preventDefault()\n      chooseActive()\n      break\n    case 'Escape':\n      // Consumed only when it closes the list, so a surrounding VDialog stays open.\n      event.preventDefault()\n      closePanel()\n      break\n    case 'Tab':\n      // Leaving a single list takes the highlighted option, as the pattern prescribes.\n      if (!props.multiple) chooseActive()\n      closePanel()\n      break\n    default:\n      if (printable(event)) typeahead(event.key)\n  }\n}\n\nconst interactive = 'a, button, input, select, textarea, [tabindex]'\n\n// @core\n/*\n * The rest of the field is not focusable, so pressing it would hand the focus to the page: the\n * root's `focusout` then closes the list, and the click that follows reopens it.\n */\nfunction onControlMousedown(event: MouseEvent) {\n  const target = event.target as Element\n  if (target.closest('.v-input-field') && !target.closest(interactive)) event.preventDefault()\n}\n\n/**\n * A click anywhere in the box of the field toggles the list, as one on the button does. The\n * field's own controls keep their clicks, and the label's reaches the button by itself.\n */\nfunction onControlClick(event: MouseEvent) {\n  const target = event.target as Element\n  if (resolvedDisabled.value || !target.closest('.v-input-field') || target.closest(interactive))\n    return\n  triggerEl.value?.focus()\n  togglePanel()\n}\n\n/*\n * The hidden `<select>` is written by hand rather than through `selected` bindings: a form reset\n * changes it behind the virtual DOM's back, which would then consider unchanged options already\n * in the right state.\n */\nfunction syncNative() {\n  const el = nativeEl.value\n  if (!el) return\n  for (const option of el.options) {\n    option.selected = option.value !== '' && wantedValues.value.has(option.value)\n  }\n  if (!props.multiple && selectedValues.value.length === 0) el.value = ''\n}\n\nconst wantedValues = computed(() => new Set(selectedValues.value.map(String)))\n\nwatch([selectedValues, allOptions], syncNative, { flush: 'post' })\n\n// A choice that satisfies the constraint clears the error the last submission raised; one that\n// does not raises it again, `checkValidity` firing `invalid`.\nwatch(\n  selectedValues,\n  () => {\n    if (nativeInvalid.value) nativeInvalid.value = !nativeEl.value?.checkValidity()\n  },\n  { flush: 'post' },\n)\n\n/** Autofill writes the hidden `<select>`; the strings it holds are read back as option values. */\nfunction onNativeChange() {\n  const el = nativeEl.value\n  if (!el) return\n  const values = [...el.selectedOptions]\n    .map((native) => allOptions.value.find((option) => String(option.value) === native.value))\n    .filter((option): option is SelectOption => option !== undefined)\n    .map((option) => option.value)\n  model.value = props.multiple ? values : (values[0] ?? '')\n}\n\n// @core\n// A form reset restores the value the field was created with. The browser resets the hidden\n// `<select>` after the event, so it is rewritten on the next task.\nlet initial: ItemValue | ItemValue[] = ''\nlet formEl: HTMLFormElement | null = null\n\nfunction onFormReset() {\n  model.value = Array.isArray(initial) ? [...initial] : initial\n  nativeInvalid.value = false\n  setTimeout(syncNative)\n}\n\nonMounted(() => {\n  initial = Array.isArray(model.value) ? [...model.value] : model.value\n  syncNative()\n  formEl = nativeEl.value?.form ?? null\n  formEl?.addEventListener('reset', onFormReset)\n})\n\nonBeforeUnmount(() => formEl?.removeEventListener('reset', onFormReset))\n\ndefineExpose({\n  /** Moves the focus to the field. */\n  focus: (options?: FocusOptions) => triggerEl.value?.focus(options),\n  /** The button that acts as the combobox. */\n  el: triggerEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-select\"\n    :class=\"rootClass\"\n    :style=\"[{ '--chip-height': chipScale.height }, rootStyle]\"\n    :data-size=\"resolvedSize\"\n    :data-multiple=\"multiple ? '' : undefined\"\n    :data-open=\"open ? '' : undefined\"\n    @focusin=\"focused = true\"\n    @focusout=\"onFocusout\"\n  >\n    <div class=\"v-select-control\" @mousedown=\"onControlMousedown\" @click=\"onControlClick\">\n      <VInput\n        class=\"v-input-end-pinned\"\n        :class=\"{ 'v-input-chips': multiple && !textDisplay }\"\n        v-bind=\"fieldAttrs\"\n        :label=\"label\"\n        :hint=\"hint\"\n        :error=\"error\"\n        :required=\"required\"\n        :hide-label=\"hideLabel\"\n        :label-position=\"labelPosition\"\n        :size=\"resolvedSize\"\n        :compact=\"resolvedCompact\"\n        :invalid=\"invalid || nativeInvalid\"\n        :disabled=\"resolvedDisabled\"\n        :readonly=\"readonly\"\n        :icon-start=\"iconStart\"\n        :icon-start-label=\"iconStartLabel\"\n        :clearable=\"clearable\"\n        :clear-visible=\"clearVisible\"\n        :clear-label=\"resolvedClearLabel\"\n        @clear=\"onClear\"\n      >\n        <template v-if=\"multiple || $slots.start\" #start>\n          <VListboxValues\n            v-if=\"multiple\"\n            :values=\"selectedValues\"\n            :display=\"display\"\n            :max=\"max\"\n            :collapsed=\"collapsed\"\n            :overflow-text=\"overflowText\"\n            :scale=\"chipScale\"\n            :removable=\"!readonly\"\n            :disabled=\"resolvedDisabled\"\n            hide-text\n            :label-of=\"labelOf\"\n            :option-of=\"optionOf\"\n            @remove=\"removeValue\"\n          >\n            <template v-if=\"$slots.chip\" #chip=\"chipProps\">\n              <slot name=\"chip\" v-bind=\"chipProps\" />\n            </template>\n            <template v-if=\"$slots.overflow\" #overflow=\"overflowProps\">\n              <slot name=\"overflow\" v-bind=\"overflowProps\" />\n            </template>\n          </VListboxValues>\n          <slot name=\"start\" />\n        </template>\n\n        <template #control=\"{ controlProps }\">\n          <button\n            ref=\"triggerEl\"\n            type=\"button\"\n            role=\"combobox\"\n            :aria-expanded=\"open\"\n            :aria-controls=\"optionsId\"\n            :aria-activedescendant=\"open && activeIndex >= 0 ? optionId(activeIndex) : undefined\"\n            :aria-required=\"required || undefined\"\n            :aria-readonly=\"readonly || undefined\"\n            v-bind=\"controlProps\"\n            class=\"v-select-trigger\"\n            @click=\"togglePanel\"\n            @keydown=\"onKeydown\"\n          >\n            <span\n              v-if=\"valueText\"\n              class=\"v-select-value\"\n              :class=\"{ 'v-visually-hidden': multiple }\"\n              >{{ valueText }}</span\n            >\n            <span v-else-if=\"placeholder\" class=\"v-select-placeholder\">{{ placeholder }}</span>\n          </button>\n          <!--\n            Out of the tab order and hidden from screen readers, it leaves the button as the\n            single stop and the single announcement. Its options mirror the flat list: a form\n            needs no groups.\n          -->\n          <select\n            ref=\"nativeEl\"\n            v-bind=\"nativeAttrs\"\n            class=\"v-select-native v-hidden-input\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            :multiple=\"multiple || undefined\"\n            :required=\"required || undefined\"\n            :disabled=\"resolvedDisabled || undefined\"\n            @change=\"onNativeChange\"\n            @focus=\"triggerEl?.focus()\"\n            @invalid=\"nativeInvalid = true\"\n          >\n            <option v-if=\"!multiple\" value=\"\" />\n            <option\n              v-for=\"(option, index) in allOptions\"\n              :key=\"index\"\n              :value=\"String(option.value)\"\n              :disabled=\"option.disabled\"\n            >\n              {{ option.label }}\n            </option>\n          </select>\n        </template>\n\n        <template v-if=\"$slots['value-end']\" #value-end><slot name=\"value-end\" /></template>\n\n        <!-- The spinner takes the chevron's place: the field sizes either as an icon. -->\n        <template #end>\n          <VSpinner v-if=\"loading\" class=\"v-select-spinner v-input-icon-end\" :label=\"loadingText\" />\n          <VListboxChevron v-else :icon=\"expandIcon\" :open=\"open\" />\n        </template>\n      </VInput>\n    </div>\n\n    <VListboxPanel\n      :id=\"optionsId\"\n      ref=\"panelRef\"\n      v-model:open=\"open\"\n      anchor=\"--select-anchor\"\n      :placement=\"placement\"\n      class=\"v-select-panel\"\n      :size=\"resolvedSize\"\n      :compact=\"resolvedCompact\"\n      :multiple=\"multiple\"\n      :blocks=\"blocks\"\n      :measure=\"measureRow\"\n      @select=\"choose\"\n      @highlight=\"hover\"\n    >\n      <template v-if=\"$slots.option\" #option=\"slotProps\">\n        <slot name=\"option\" v-bind=\"slotProps\" />\n      </template>\n    </VListboxPanel>\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-select {\n    /*\n     * Declared on the root, the common ancestor of the field and the panel; a panel drawn above\n     * the page remains a descendant of it in the document.\n     */\n    anchor-scope: --select-anchor;\n    width: 100%;\n    font-family: var(--vectis-text-family);\n  }\n\n  .v-select-control {\n    display: block;\n  }\n\n  /* The panel opens against the box of the field, not against its label and hint. */\n  .v-select-control .v-input-field {\n    anchor-name: --select-anchor;\n  }\n\n  .v-select-panel {\n    max-block-size: var(--vectis-control-size-select-list-max-block);\n  }\n\n  /*\n   * VInput's `.v-input-control` gives the button the input's box: it fills the field and draws\n   * no border of its own, the field drawing the focus around it.\n   */\n  .v-select-trigger {\n    display: flex;\n    align-items: center;\n    text-align: start;\n    cursor: pointer;\n  }\n\n  /*\n   * Beside chips the button takes what is left of the last row, down to nothing, rather than\n   * wrapping onto a row of its own.\n   */\n  .v-select[data-multiple] .v-select-trigger {\n    flex: 1 1 0;\n  }\n\n  .v-select-value,\n  .v-select-placeholder {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .v-select-placeholder {\n    color: var(--vectis-color-text-subtle);\n  }\n\n  .v-select-spinner {\n    color: var(--vectis-color-text-muted);\n  }\n\n  /*\n   * An unbroken line has the whole of its text as its min-content width; without this, a grid\n   * track or a flex row sized `auto` widens to fit every label and the ellipsis never shows.\n   */\n  .v-select:has(.v-listbox-text) {\n    min-inline-size: 0;\n  }\n}\n</style>\n"],"mappings":""}