vectis-ui 0.1.0

package/dist/components/VToggle/VToggleItem.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VToggleItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VToggle/VToggleItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * One item of a VToggle. It IS a VButton — the colour, the size, the focus ring and\n * the disabled state all come from there — and what this component adds is the one\n * attribute saying whether the button is currently pressed.\n *\n * That button is also this component's own root element, with nothing wrapped around\n * it, which is what lets the group merge the borders of neighbouring items: it only\n * joins its DIRECT children.\n *\n * Used outside a VToggle it still renders perfectly well, simply never selected, the\n * same way a tab does outside its row.\n */\nimport { computed, inject, useSlots } from 'vue'\n\nimport VButton from '../VButton/VButton.vue'\nimport VIcon from '../VIcon/VIcon.vue'\nimport { iconProps } from '../VIcon/iconProps'\nimport type { IconSource } from '../VIcon/types'\nimport { toggleKey } from './context'\nimport type { ToggleValue } from './VToggle.vue'\n\ninterface ToggleItemProps {\n  /**\n   * What choosing this item means. It is what the group's v-model holds when the item\n   * is selected, and it must be unique within the group.\n   */\n  value: ToggleValue\n  /** The visible label. The default slot replaces it. */\n  label?: string\n  /** An icon before the label: an icon name, or an explicit render. */\n  icon?: IconSource\n  /**\n   * Makes this item unusable: it no longer responds, the arrow keys skip over it, and\n   * it greys out through the colour tokens.\n   */\n  disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<ToggleItemProps>(), {\n  label: undefined,\n  icon: undefined,\n  disabled: false,\n})\n\ndefineSlots<{\n  /** The content of the item, replacing the `label` prop. */\n  default?(): unknown\n}>()\n\nconst slots = useSlots()\nconst toggle = inject(toggleKey, null)\n\nconst selected = computed(() => toggle != null && toggle.isSelected(props.value))\n\n/** An icon and no label at all: the item becomes a square, like a VIconButton. */\nconst iconOnly = computed(() => Boolean(props.icon) && !props.label && !slots.default)\n</script>\n\n<template>\n  <!-- The pressed state is always rendered, false included: it is its PRESENCE that\n       makes a screen reader announce the button as one that stays pressed, and an\n       attribute appearing only when true would leave the unselected items announced\n       as ordinary buttons.\n\n       The filled form is asked of the icon directly, because VButton's own icon\n       options have no effect on an icon handed to it through a slot. -->\n  <VButton\n    class=\"v-toggle-item\"\n    :aria-pressed=\"selected ? 'true' : 'false'\"\n    :variant=\"selected ? 'solid' : (toggle?.variant ?? 'ghost')\"\n    :tone=\"selected ? (toggle?.tone ?? 'accent') : 'neutral'\"\n    :size=\"toggle?.size ?? 'md'\"\n    :compact=\"toggle?.compact ?? false\"\n    :disabled=\"disabled || toggle?.disabled\"\n    :data-icon-only=\"iconOnly ? '' : undefined\"\n    @click=\"toggle?.select(value)\"\n  >\n    <template v-if=\"icon\" #start>\n      <VIcon v-bind=\"iconProps(icon)\" :filled=\"selected && (toggle?.selectedIconFilled ?? false)\" />\n    </template>\n    <slot v-if=\"!iconOnly\">{{ label }}</slot>\n  </VButton>\n</template>\n\n<style>\n@layer vectis.components {\n  /*\n   * An item reduced to its icon becomes a square, like a VIconButton. The selector is\n   * qualified by an attribute VButton always renders, which is what makes it beat that\n   * button's own padding whatever order the two sheets end up in.\n   */\n  .v-toggle-item[data-size][data-icon-only] {\n    padding-inline: 0;\n    min-inline-size: var(--control-height);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAuCA,IAAM,IAAQ,GAWR,IAAQ,EAAS,GACjB,IAAS,EAAO,GAAW,IAAI,GAE/B,IAAW,QAAe,KAAU,QAAQ,EAAO,WAAW,EAAM,KAAK,CAAC,GAG1E,IAAW,QAAe,EAAQ,EAAM,QAAS,CAAC,EAAM,SAAS,CAAC,EAAM,OAAO;yBAWnF,EAeU,GAAA;GAdR,OAAM;GACL,gBAAc,EAAA,QAAQ,SAAA;GACtB,SAAS,EAAA,QAAQ,UAAc,EAAA,CAAA,CAAM,EAAE,WAAO;GAC9C,MAAM,EAAA,QAAY,EAAA,CAAA,CAAM,EAAE,QAAI,WAAA;GAC9B,MAAM,EAAA,CAAA,CAAM,EAAE,QAAI;GAClB,SAAS,EAAA,CAAA,CAAM,EAAE,WAAO;GACxB,UAAU,EAAA,YAAY,EAAA,CAAA,CAAM,EAAE;GAC9B,kBAAgB,EAAA,QAAQ,KAAQ,KAAA;GAChC,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,CAAA,CAAM,EAAE,OAAO,EAAA,KAAK;;oBAMtB,CADO,EAAA,QAAkB,EAAA,IAAA,EAAA,IAA/B,EAAyC,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAf,EAAA,KAAK,GAAA,CAAA,CAAA,GAAA,KAAA,GAAA,CAAA,CAAA,CAAA;;MAHf,EAAA,OAAA;SAAO;eACyE,CAA9F,EAA8F,GAA9F,EAAe,EAA+E,CAAA,CAAtE,CAAC,EAAA,IAAI,GAAA,EAAI,QAAQ,EAAA,UAAa,EAAA,CAAA,CAAM,EAAE,sBAAkB,IAAA,CAAA,GAAA,MAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA"}

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

@@ -0,0 +1,37 @@
+import { InjectionKey } from 'vue';
+import { ToggleSize, ToggleTone, ToggleValue, ToggleVariant } from './VToggle.js';
+/**
+ * What a VToggle passes down to the items inside it. Everything is exposed through
+ * getters, which is what keeps the group's props reactive on the other side of the
+ * injection.
+ *
+ * There is no identifier and no registry here, unlike VTabs: nothing in this pattern
+ * points at anything else, and whether an item is selected is a plain comparison of
+ * values — so the server and the browser reach the same answer with nothing exchanged.
+ *
+ * That comparison is offered as a QUESTION rather than as the current value, because
+ * with several choices allowed it is no longer a simple equality, and only the group
+ * knows which of the two it is doing.
+ *
+ * The size travels through here rather than through CSS inheritance, as it does in
+ * VAccordion, because each item renders a button that declares its own size on itself.
+ */
+export interface ToggleContext {
+    /** Whether the item carrying this value is currently selected. */
+    isSelected: (value: ToggleValue) => boolean;
+    /** Reports that an item was clicked; the group decides what it does to the selection. */
+    select: (value: ToggleValue) => void;
+    /** How the unselected items are drawn. */
+    readonly variant: ToggleVariant;
+    /** The colour a selected item takes. */
+    readonly tone: ToggleTone;
+    /** The height of the items. */
+    readonly size: ToggleSize;
+    /** The reduced density. */
+    readonly compact: boolean;
+    /** Whether the whole group is unusable. */
+    readonly disabled: boolean;
+    /** Whether the selected item draws its icon filled. */
+    readonly selectedIconFilled: boolean;
+}
+export declare const toggleKey: InjectionKey<ToggleContext>;

package/dist/components/VToggle/context.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/VToggle/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\nimport type { ToggleSize, ToggleTone, ToggleValue, ToggleVariant } from './VToggle.vue'\n\n/**\n * What a VToggle passes down to the items inside it. Everything is exposed through\n * getters, which is what keeps the group's props reactive on the other side of the\n * injection.\n *\n * There is no identifier and no registry here, unlike VTabs: nothing in this pattern\n * points at anything else, and whether an item is selected is a plain comparison of\n * values — so the server and the browser reach the same answer with nothing exchanged.\n *\n * That comparison is offered as a QUESTION rather than as the current value, because\n * with several choices allowed it is no longer a simple equality, and only the group\n * knows which of the two it is doing.\n *\n * The size travels through here rather than through CSS inheritance, as it does in\n * VAccordion, because each item renders a button that declares its own size on itself.\n */\nexport interface ToggleContext {\n  /** Whether the item carrying this value is currently selected. */\n  isSelected: (value: ToggleValue) => boolean\n  /** Reports that an item was clicked; the group decides what it does to the selection. */\n  select: (value: ToggleValue) => void\n  /** How the unselected items are drawn. */\n  readonly variant: ToggleVariant\n  /** The colour a selected item takes. */\n  readonly tone: ToggleTone\n  /** The height of the items. */\n  readonly size: ToggleSize\n  /** The reduced density. */\n  readonly compact: boolean\n  /** Whether the whole group is unusable. */\n  readonly disabled: boolean\n  /** Whether the selected item draws its icon filled. */\n  readonly selectedIconFilled: boolean\n}\n\nexport const toggleKey: InjectionKey<ToggleContext> = Symbol('v-toggle')\n"],"mappings":";AAuCA,IAAa,IAAyC,OAAO,UAAU"}

package/dist/components/VTooltip/VTooltip.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-tooltip{anchor-name:--tooltip-anchor;anchor-scope:--tooltip-anchor;align-items:center;display:inline-flex}.v-popover-panel.v-tooltip-panel{width:max-content;max-width:min(18rem, calc(100vw - var(--vectis-space-8)));padding:var(--vectis-space-1) var(--vectis-space-2);background:var(--vectis-color-surface-inverse);color:var(--vectis-color-text-on-inverse);border-radius:var(--vectis-radius-sm);box-shadow:var(--vectis-shadow-sm);font-family:var(--vectis-text-family);font-size:var(--vectis-text-caption-size);line-height:var(--vectis-text-caption-leading);border:none}}

package/dist/components/VTooltip/VTooltip.d.ts

@@ -0,0 +1,76 @@
+/**
+ * A short explanation appearing beside an element when the pointer rests on it or
+ * when it takes keyboard focus. It is built on VPopover, in the mode where nothing
+ * closes by itself, since a tooltip has its own rules about when to appear and when
+ * to go.
+ *
+ * Those rules are why there is JavaScript here at all: HTML has no stable way to say
+ * "show this after a short delay on hover or focus" — the proposal for it is still
+ * experimental — so the component handles the delay, the pointer, the focus, the press
+ * on the trigger, and Escape, which must dismiss a tooltip without moving the focus
+ * (WCAG 1.4.13).
+ *
+ * There are four ways out and each covers a case the others do not: the pointer leaves,
+ * the focus leaves, Escape is pressed, or the trigger is PRESSED — that last one for a
+ * trigger which opens a panel, where the tooltip would otherwise stand over what it just
+ * opened. The template says which browser makes it necessary.
+ *
+ * The positioning is pure CSS and needs no generated identifier: the wrapper names
+ * itself as the anchor and confines that name to its own subtree. The confinement is
+ * essential — a visible panel sits in the top layer, which anchor resolution treats
+ * as coming after the whole document, so without it every tooltip on the page would
+ * attach to the last wrapper carrying the name.
+ *
+ * The wrapper stays here rather than being delegated to VPopover's trigger slot,
+ * because a tooltip trigger is not a button that opens a panel — it would then toggle
+ * on click — but an element the panel DESCRIBES.
+ */
+type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+interface TooltipProps {
+    /** What the tooltip says. The `#content` slot replaces it when both are given. */
+    text?: string;
+    /**
+     * Which side of the element the tooltip appears on. The browser flips it to the
+     * opposite side by itself when there is not enough room.
+     */
+    placement?: Placement;
+    /**
+     * How long the pointer must rest on the element before the tooltip appears, in
+     * milliseconds. Keyboard focus opens it at once — the intent is not in doubt there
+     * — and a delay of 0 disables the wait entirely.
+     */
+    delay?: number;
+}
+type __VLS_Slots = {
+    /**
+     * The element the tooltip describes. Bind the `triggerProps` it receives onto it —
+     * that is what ties the two together for assistive technology — and make sure it is
+     * something that can take focus, or keyboard users will never see the tooltip.
+     */
+    default(props: {
+        triggerProps: {
+            'aria-describedby': string;
+        };
+    }): unknown;
+    /**
+     * Content richer than a plain string: formatting, a keyboard shortcut, an icon. It
+     * must stay NON-interactive. The tooltip closes as soon as the pointer leaves the
+     * element, so a link or a button inside could never be reached, and the description
+     * is flattened to plain text for screen readers anyway. Content one can interact
+     * with belongs in a panel that stays open, such as VMenu.
+     */
+    content?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<TooltipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
+    text: string;
+    placement: Placement;
+    delay: number;
+}, {}, {}, {}, 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/VTooltip/VTooltip.js

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

package/dist/components/VTooltip/VTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTooltip.js","names":[],"sources":["../../../src/components/VTooltip/VTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, useId } from 'vue'\n\nimport VPopover from '../VPopover/VPopover.vue'\n\nimport { useTimer } from '../../composables/useTimer'\n\n/**\n * A short explanation appearing beside an element when the pointer rests on it or\n * when it takes keyboard focus. It is built on VPopover, in the mode where nothing\n * closes by itself, since a tooltip has its own rules about when to appear and when\n * to go.\n *\n * Those rules are why there is JavaScript here at all: HTML has no stable way to say\n * \"show this after a short delay on hover or focus\" — the proposal for it is still\n * experimental — so the component handles the delay, the pointer, the focus, the press\n * on the trigger, and Escape, which must dismiss a tooltip without moving the focus\n * (WCAG 1.4.13).\n *\n * There are four ways out and each covers a case the others do not: the pointer leaves,\n * the focus leaves, Escape is pressed, or the trigger is PRESSED — that last one for a\n * trigger which opens a panel, where the tooltip would otherwise stand over what it just\n * opened. The template says which browser makes it necessary.\n *\n * The positioning is pure CSS and needs no generated identifier: the wrapper names\n * itself as the anchor and confines that name to its own subtree. The confinement is\n * essential — a visible panel sits in the top layer, which anchor resolution treats\n * as coming after the whole document, so without it every tooltip on the page would\n * attach to the last wrapper carrying the name.\n *\n * The wrapper stays here rather than being delegated to VPopover's trigger slot,\n * because a tooltip trigger is not a button that opens a panel — it would then toggle\n * on click — but an element the panel DESCRIBES.\n */\ntype Placement =\n  'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'\n\ninterface TooltipProps {\n  /** What the tooltip says. The `#content` slot replaces it when both are given. */\n  text?: string\n  /**\n   * Which side of the element the tooltip appears on. The browser flips it to the\n   * opposite side by itself when there is not enough room.\n   */\n  placement?: Placement\n  /**\n   * How long the pointer must rest on the element before the tooltip appears, in\n   * milliseconds. Keyboard focus opens it at once — the intent is not in doubt there\n   * — and a delay of 0 disables the wait entirely.\n   */\n  delay?: number\n}\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n  text: undefined,\n  placement: 'top',\n  delay: 300,\n})\n\ndefineSlots<{\n  /**\n   * The element the tooltip describes. Bind the `triggerProps` it receives onto it —\n   * that is what ties the two together for assistive technology — and make sure it is\n   * something that can take focus, or keyboard users will never see the tooltip.\n   */\n  default(props: { triggerProps: { 'aria-describedby': string } }): unknown\n  /**\n   * Content richer than a plain string: formatting, a keyboard shortcut, an icon. It\n   * must stay NON-interactive. The tooltip closes as soon as the pointer leaves the\n   * element, so a link or a button inside could never be reached, and the description\n   * is flattened to plain text for screen readers anyway. Content one can interact\n   * with belongs in a panel that stays open, such as VMenu.\n   */\n  content?(): unknown\n}>()\n\nconst tooltipId = useId()\n// @a11y\n/*\n * The panel is opened and closed by calling it directly rather than through\n * `v-model:open`. Keyboard focus has to open it SYNCHRONOUSLY, and a model would go\n * through VPopover's watcher, hence through a tick. There is nothing lost either way:\n * a tooltip publishes no open state anyone needs to read.\n *\n * Calling twice is harmless — the guards for that live upstream in usePopover.\n */\nconst popoverRef = ref<InstanceType<typeof VPopover> | null>(null)\n\n// The delay before appearing. useTimer is what makes it re-armable and cancels it\n// when the component goes away.\nconst timer = useTimer()\n\n// @core\nfunction show(immediate = false) {\n  // A delay of 0 runs the callback synchronously — the design system's convention,\n  // and what lets keyboard focus share this code path without waiting a tick.\n  timer.start(() => popoverRef.value?.show(), immediate ? 0 : props.delay)\n}\n\nfunction hide() {\n  timer.cancel()\n  popoverRef.value?.hide()\n}\n\n// @keyboard @a11y — Escape must dismiss a tooltip opened by hover or focus without\n// moving the focus anywhere (WCAG 1.4.13): content appearing on hover has to be\n// dismissible, for a magnifier user whose view it may be covering.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') hide()\n}\n</script>\n\n<template>\n  <!--\n    TRAP — `pointerdown` is what stops a tooltip from surviving the click that acted on its\n    trigger, and the case it really covers is a trigger that OPENS something: a menu, a\n    dialog, a popover of any kind. The tooltip would then stand over what it opened, and\n    none of the other three exits applies — the pointer has not left, the focus has not\n    moved out on its own, and nobody pressed Escape.\n\n    It looks redundant on Chromium and Firefox, where a click focuses the button and the\n    panel then takes the focus, which fires this wrapper's `focusout`. Safari on macOS does\n    NOT focus a button on click, so nothing leaves the wrapper and the tooltip stays up,\n    behind the panel, until the pointer moves. Delete this line and that is the bug that\n    comes back, on one browser only.\n\n    It is `pointerdown` and not `click`, so the tooltip is gone BEFORE the panel appears\n    rather than overlapping it for a frame. Keyboard activation sends no `pointerdown` at\n    all, and needs none: focus moving into the panel closes the tooltip everywhere.\n  -->\n  <span\n    class=\"v-tooltip\"\n    @pointerenter=\"show()\"\n    @pointerleave=\"hide\"\n    @pointerdown=\"hide\"\n    @focusin=\"show(true)\"\n    @focusout=\"hide\"\n    @keydown=\"onKeydown\"\n  >\n    <slot :trigger-props=\"{ 'aria-describedby': tooltipId }\" />\n    <VPopover\n      :id=\"tooltipId\"\n      ref=\"popoverRef\"\n      mode=\"manual\"\n      anchor=\"--tooltip-anchor\"\n      :placement=\"placement\"\n      :surface=\"false\"\n      role=\"tooltip\"\n      class=\"v-tooltip-panel\"\n    >\n      <slot name=\"content\">{{ text }}</slot>\n    </VPopover>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The wrapper is FLEX and not inline-block, for the same reason as `.v-badge-host`:\n     both are inline-level atomic boxes, so the surrounding text flows identically, but\n     an inline-block establishes an inline formatting context for the trigger — which\n     then sits on a line box and adds the strut's descender to the wrapper's height.\n     That is not only a couple of pixels in a flex row: this wrapper is also the ANCHOR,\n     so the panel is offset by them too.\n\n     `align-items: center` covers what is left. A wrapper stretched by a parent in\n     `align-items: stretch` would otherwise stretch the trigger with it, where the\n     inline-block form left it at its natural height. */\n  .v-tooltip {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --tooltip-anchor;\n    /* Confining the name to this subtree is indispensable: a visible panel moves to\n       the top layer, where anchor resolution treats it as coming after the whole\n       document, so without it every tooltip would attach to the LAST wrapper carrying\n       this name. */\n    anchor-scope: --tooltip-anchor;\n  }\n\n  /* The anchoring itself comes from VPopover, through the `anchor` prop.\n\n     The selector is written as a compound of two classes that both land on this same\n     element, even though the panel class it guards against — `.v-panel` — is never\n     present here, VTooltip asking for no surface. It is written that way so it cannot\n     break the day that prop changes: at equal specificity the winner between two\n     component sheets is decided by the order the consumer's bundler happens to\n     produce, which is nobody's decision. */\n  .v-popover-panel.v-tooltip-panel {\n    width: max-content;\n    max-width: min(18rem, calc(100vw - var(--vectis-space-8)));\n    padding: var(--vectis-space-1) var(--vectis-space-2);\n    /* The tooltip is painted against the page rather than with it: a dark surface in\n       both themes, darker still in the dark one, so it reads as an overlay whatever\n       it happens to cover. */\n    background: var(--vectis-color-surface-inverse);\n    color: var(--vectis-color-text-on-inverse);\n    border: none;\n    border-radius: var(--vectis-radius-sm);\n    box-shadow: var(--vectis-shadow-sm);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    line-height: var(--vectis-text-caption-leading);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VTooltip/VTooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,50 @@
+import e from "../VPopover/VPopover.js";
+import { useTimer as t } from "../../composables/useTimer.js";
+import { createElementBlock as n, createTextVNode as r, createVNode as i, defineComponent as a, openBlock as o, ref as s, renderSlot as c, toDisplayString as l, unref as u, useId as d, withCtx as f } from "vue";
+//#region src/components/VTooltip/VTooltip.vue?vue&type=script&setup=true&lang.ts
+var p = /*@__PURE__*/ a({
+	__name: "VTooltip",
+	props: {
+		text: { default: void 0 },
+		placement: { default: "top" },
+		delay: { default: 300 }
+	},
+	setup(a) {
+		let p = a, m = d(), h = s(null), g = t();
+		function _(e = !1) {
+			g.start(() => h.value?.show(), e ? 0 : p.delay);
+		}
+		function v() {
+			g.cancel(), h.value?.hide();
+		}
+		function y(e) {
+			e.key === "Escape" && v();
+		}
+		return (t, s) => (o(), n("span", {
+			class: "v-tooltip",
+			onPointerenter: s[0] ||= (e) => _(),
+			onPointerleave: v,
+			onPointerdown: v,
+			onFocusin: s[1] ||= (e) => _(!0),
+			onFocusout: v,
+			onKeydown: y
+		}, [c(t.$slots, "default", { triggerProps: { "aria-describedby": u(m) } }), i(e, {
+			id: u(m),
+			ref_key: "popoverRef",
+			ref: h,
+			mode: "manual",
+			anchor: "--tooltip-anchor",
+			placement: a.placement,
+			surface: !1,
+			role: "tooltip",
+			class: "v-tooltip-panel"
+		}, {
+			default: f(() => [c(t.$slots, "content", {}, () => [r(l(a.text), 1)])]),
+			_: 3
+		}, 8, ["id", "placement"])], 32));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=VTooltip.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VTooltip.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTooltip/VTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, useId } from 'vue'\n\nimport VPopover from '../VPopover/VPopover.vue'\n\nimport { useTimer } from '../../composables/useTimer'\n\n/**\n * A short explanation appearing beside an element when the pointer rests on it or\n * when it takes keyboard focus. It is built on VPopover, in the mode where nothing\n * closes by itself, since a tooltip has its own rules about when to appear and when\n * to go.\n *\n * Those rules are why there is JavaScript here at all: HTML has no stable way to say\n * \"show this after a short delay on hover or focus\" — the proposal for it is still\n * experimental — so the component handles the delay, the pointer, the focus, the press\n * on the trigger, and Escape, which must dismiss a tooltip without moving the focus\n * (WCAG 1.4.13).\n *\n * There are four ways out and each covers a case the others do not: the pointer leaves,\n * the focus leaves, Escape is pressed, or the trigger is PRESSED — that last one for a\n * trigger which opens a panel, where the tooltip would otherwise stand over what it just\n * opened. The template says which browser makes it necessary.\n *\n * The positioning is pure CSS and needs no generated identifier: the wrapper names\n * itself as the anchor and confines that name to its own subtree. The confinement is\n * essential — a visible panel sits in the top layer, which anchor resolution treats\n * as coming after the whole document, so without it every tooltip on the page would\n * attach to the last wrapper carrying the name.\n *\n * The wrapper stays here rather than being delegated to VPopover's trigger slot,\n * because a tooltip trigger is not a button that opens a panel — it would then toggle\n * on click — but an element the panel DESCRIBES.\n */\ntype Placement =\n  'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'\n\ninterface TooltipProps {\n  /** What the tooltip says. The `#content` slot replaces it when both are given. */\n  text?: string\n  /**\n   * Which side of the element the tooltip appears on. The browser flips it to the\n   * opposite side by itself when there is not enough room.\n   */\n  placement?: Placement\n  /**\n   * How long the pointer must rest on the element before the tooltip appears, in\n   * milliseconds. Keyboard focus opens it at once — the intent is not in doubt there\n   * — and a delay of 0 disables the wait entirely.\n   */\n  delay?: number\n}\n\nconst props = withDefaults(defineProps<TooltipProps>(), {\n  text: undefined,\n  placement: 'top',\n  delay: 300,\n})\n\ndefineSlots<{\n  /**\n   * The element the tooltip describes. Bind the `triggerProps` it receives onto it —\n   * that is what ties the two together for assistive technology — and make sure it is\n   * something that can take focus, or keyboard users will never see the tooltip.\n   */\n  default(props: { triggerProps: { 'aria-describedby': string } }): unknown\n  /**\n   * Content richer than a plain string: formatting, a keyboard shortcut, an icon. It\n   * must stay NON-interactive. The tooltip closes as soon as the pointer leaves the\n   * element, so a link or a button inside could never be reached, and the description\n   * is flattened to plain text for screen readers anyway. Content one can interact\n   * with belongs in a panel that stays open, such as VMenu.\n   */\n  content?(): unknown\n}>()\n\nconst tooltipId = useId()\n// @a11y\n/*\n * The panel is opened and closed by calling it directly rather than through\n * `v-model:open`. Keyboard focus has to open it SYNCHRONOUSLY, and a model would go\n * through VPopover's watcher, hence through a tick. There is nothing lost either way:\n * a tooltip publishes no open state anyone needs to read.\n *\n * Calling twice is harmless — the guards for that live upstream in usePopover.\n */\nconst popoverRef = ref<InstanceType<typeof VPopover> | null>(null)\n\n// The delay before appearing. useTimer is what makes it re-armable and cancels it\n// when the component goes away.\nconst timer = useTimer()\n\n// @core\nfunction show(immediate = false) {\n  // A delay of 0 runs the callback synchronously — the design system's convention,\n  // and what lets keyboard focus share this code path without waiting a tick.\n  timer.start(() => popoverRef.value?.show(), immediate ? 0 : props.delay)\n}\n\nfunction hide() {\n  timer.cancel()\n  popoverRef.value?.hide()\n}\n\n// @keyboard @a11y — Escape must dismiss a tooltip opened by hover or focus without\n// moving the focus anywhere (WCAG 1.4.13): content appearing on hover has to be\n// dismissible, for a magnifier user whose view it may be covering.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') hide()\n}\n</script>\n\n<template>\n  <!--\n    TRAP — `pointerdown` is what stops a tooltip from surviving the click that acted on its\n    trigger, and the case it really covers is a trigger that OPENS something: a menu, a\n    dialog, a popover of any kind. The tooltip would then stand over what it opened, and\n    none of the other three exits applies — the pointer has not left, the focus has not\n    moved out on its own, and nobody pressed Escape.\n\n    It looks redundant on Chromium and Firefox, where a click focuses the button and the\n    panel then takes the focus, which fires this wrapper's `focusout`. Safari on macOS does\n    NOT focus a button on click, so nothing leaves the wrapper and the tooltip stays up,\n    behind the panel, until the pointer moves. Delete this line and that is the bug that\n    comes back, on one browser only.\n\n    It is `pointerdown` and not `click`, so the tooltip is gone BEFORE the panel appears\n    rather than overlapping it for a frame. Keyboard activation sends no `pointerdown` at\n    all, and needs none: focus moving into the panel closes the tooltip everywhere.\n  -->\n  <span\n    class=\"v-tooltip\"\n    @pointerenter=\"show()\"\n    @pointerleave=\"hide\"\n    @pointerdown=\"hide\"\n    @focusin=\"show(true)\"\n    @focusout=\"hide\"\n    @keydown=\"onKeydown\"\n  >\n    <slot :trigger-props=\"{ 'aria-describedby': tooltipId }\" />\n    <VPopover\n      :id=\"tooltipId\"\n      ref=\"popoverRef\"\n      mode=\"manual\"\n      anchor=\"--tooltip-anchor\"\n      :placement=\"placement\"\n      :surface=\"false\"\n      role=\"tooltip\"\n      class=\"v-tooltip-panel\"\n    >\n      <slot name=\"content\">{{ text }}</slot>\n    </VPopover>\n  </span>\n</template>\n\n<style>\n@layer vectis.components {\n  /* The wrapper is FLEX and not inline-block, for the same reason as `.v-badge-host`:\n     both are inline-level atomic boxes, so the surrounding text flows identically, but\n     an inline-block establishes an inline formatting context for the trigger — which\n     then sits on a line box and adds the strut's descender to the wrapper's height.\n     That is not only a couple of pixels in a flex row: this wrapper is also the ANCHOR,\n     so the panel is offset by them too.\n\n     `align-items: center` covers what is left. A wrapper stretched by a parent in\n     `align-items: stretch` would otherwise stretch the trigger with it, where the\n     inline-block form left it at its natural height. */\n  .v-tooltip {\n    display: inline-flex;\n    align-items: center;\n    anchor-name: --tooltip-anchor;\n    /* Confining the name to this subtree is indispensable: a visible panel moves to\n       the top layer, where anchor resolution treats it as coming after the whole\n       document, so without it every tooltip would attach to the LAST wrapper carrying\n       this name. */\n    anchor-scope: --tooltip-anchor;\n  }\n\n  /* The anchoring itself comes from VPopover, through the `anchor` prop.\n\n     The selector is written as a compound of two classes that both land on this same\n     element, even though the panel class it guards against — `.v-panel` — is never\n     present here, VTooltip asking for no surface. It is written that way so it cannot\n     break the day that prop changes: at equal specificity the winner between two\n     component sheets is decided by the order the consumer's bundler happens to\n     produce, which is nobody's decision. */\n  .v-popover-panel.v-tooltip-panel {\n    width: max-content;\n    max-width: min(18rem, calc(100vw - var(--vectis-space-8)));\n    padding: var(--vectis-space-1) var(--vectis-space-2);\n    /* The tooltip is painted against the page rather than with it: a dark surface in\n       both themes, darker still in the dark one, so it reads as an overlay whatever\n       it happens to cover. */\n    background: var(--vectis-color-surface-inverse);\n    color: var(--vectis-color-text-on-inverse);\n    border: none;\n    border-radius: var(--vectis-radius-sm);\n    box-shadow: var(--vectis-shadow-sm);\n    font-family: var(--vectis-text-family);\n    font-size: var(--vectis-text-caption-size);\n    line-height: var(--vectis-text-caption-leading);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;EAqDA,IAAM,IAAQ,GAuBR,IAAY,EAAM,GAUlB,IAAa,EAA0C,IAAI,GAI3D,IAAQ,EAAS;EAGvB,SAAS,EAAK,IAAY,IAAO;GAG/B,EAAM,YAAY,EAAW,OAAO,KAAK,GAAG,IAAY,IAAI,EAAM,KAAK;EACzE;EAEA,SAAS,IAAO;GAEd,AADA,EAAM,OAAO,GACb,EAAW,OAAO,KAAK;EACzB;EAKA,SAAS,EAAU,GAAsB;GACvC,AAAI,EAAM,QAAQ,YAAU,EAAK;EACnC;yBAqBE,EAsBO,QAAA;GArBL,OAAM;GACL,gBAAY,AAAA,EAAA,QAAA,MAAE,EAAI;GAClB,gBAAc;GACd,eAAa;GACb,WAAO,AAAA,EAAA,QAAA,MAAE,EAAI,EAAA;GACb,YAAU;GACD;MAEV,EAA2D,EAAA,QAAA,WAAA,EAApD,cAAa,EAAA,oBAAwB,EAAA,CAAA,EAAS,EAAA,CAAA,GACrD,EAWW,GAAA;GAVR,IAAI,EAAA,CAAA;YACD;GAAJ,KAAI;GACJ,MAAK;GACL,QAAO;GACN,WAAW,EAAA;GACX,SAAS;GACV,MAAK;GACL,OAAM;;oBAEgC,CAAtC,EAAsC,EAAA,QAAA,WAAA,CAAA,SAAA,CAAA,EAAA,EAAd,EAAA,IAAI,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/VTypography/VTypography.css

@@ -0,0 +1,2 @@
+@layer vectis.reset, vectis.tokens, vectis.components, vectis.utilities;
+@layer vectis.components{.v-typography{--typography-family:var(--vectis-text-family);--typography-tracking:normal;font-family:var(--typography-family);font-size:var(--typography-size);font-weight:var(--typography-weight);line-height:var(--typography-leading);letter-spacing:var(--typography-tracking);color:var(--typography-color,inherit);overflow-wrap:break-word;margin:0}.v-typography[data-variant=display]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-display-size);--typography-weight:var(--vectis-text-display-weight);--typography-leading:var(--vectis-text-display-leading);--typography-tracking:var(--vectis-text-display-tracking)}.v-typography[data-variant=heading-1]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-1-size);--typography-weight:var(--vectis-text-heading-1-weight);--typography-leading:var(--vectis-text-heading-1-leading);--typography-tracking:var(--vectis-text-heading-1-tracking)}.v-typography[data-variant=heading-2]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-2-size);--typography-weight:var(--vectis-text-heading-2-weight);--typography-leading:var(--vectis-text-heading-2-leading);--typography-tracking:var(--vectis-text-heading-2-tracking)}.v-typography[data-variant=heading-3]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-3-size);--typography-weight:var(--vectis-text-heading-3-weight);--typography-leading:var(--vectis-text-heading-3-leading)}.v-typography[data-variant=heading-4]{--typography-family:var(--vectis-text-family-heading);--typography-size:var(--vectis-text-heading-4-size);--typography-weight:var(--vectis-text-heading-4-weight);--typography-leading:var(--vectis-text-heading-4-leading)}.v-typography[data-variant=subtitle]{--typography-size:var(--vectis-text-subtitle-size);--typography-weight:var(--vectis-text-subtitle-weight);--typography-leading:var(--vectis-text-subtitle-leading)}.v-typography[data-variant=body-xl]{--typography-size:var(--vectis-text-body-xl-size);--typography-weight:var(--vectis-text-body-xl-weight);--typography-leading:var(--vectis-text-body-xl-leading)}.v-typography[data-variant=body-lg]{--typography-size:var(--vectis-text-body-lg-size);--typography-weight:var(--vectis-text-body-lg-weight);--typography-leading:var(--vectis-text-body-lg-leading)}.v-typography[data-variant=body-md]{--typography-size:var(--vectis-text-body-md-size);--typography-weight:var(--vectis-text-body-md-weight);--typography-leading:var(--vectis-text-body-md-leading)}.v-typography[data-variant=body-sm]{--typography-size:var(--vectis-text-body-sm-size);--typography-weight:var(--vectis-text-body-sm-weight);--typography-leading:var(--vectis-text-body-sm-leading)}.v-typography[data-variant=label]{--typography-size:var(--vectis-text-label-size);--typography-weight:var(--vectis-text-label-weight);--typography-leading:var(--vectis-text-label-leading)}.v-typography[data-variant=caption]{--typography-size:var(--vectis-text-caption-size);--typography-weight:var(--vectis-text-caption-weight);--typography-leading:var(--vectis-text-caption-leading)}.v-typography[data-variant=overline]{--typography-size:var(--vectis-text-overline-size);--typography-weight:var(--vectis-text-overline-weight);--typography-leading:var(--vectis-text-overline-leading);--typography-tracking:var(--vectis-text-overline-tracking);text-transform:uppercase}.v-typography[data-variant=code]{--typography-family:var(--vectis-text-family-code);--typography-size:var(--vectis-text-code-size);--typography-weight:var(--vectis-text-code-weight);--typography-leading:var(--vectis-text-code-leading)}.v-typography[data-tone=muted]{--typography-color:var(--vectis-color-text-muted)}.v-typography[data-tone=subtle]{--typography-color:var(--vectis-color-text-subtle)}.v-typography[data-tone=accent]{--typography-color:var(--vectis-color-accent-text)}.v-typography[data-tone=danger]{--typography-color:var(--vectis-color-danger-text)}.v-typography[data-tone=success]{--typography-color:var(--vectis-color-success-text)}.v-typography[data-tone=warning]{--typography-color:var(--vectis-color-warning-text)}.v-typography[data-tone=on-inverse]{--typography-color:var(--vectis-color-text-on-inverse)}.v-typography[data-truncate]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}}

package/dist/components/VTypography/VTypography.d.ts

@@ -0,0 +1,46 @@
+export type TypographyVariant = 'display' | 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'subtitle' | 'body-xl' | 'body-lg' | 'body-md' | 'body-sm' | 'label' | 'caption' | 'overline' | 'code';
+export type TypographyTone = 'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse';
+interface TypographyProps {
+    /**
+     * The role this text plays, which selects a complete recipe of typographic
+     * tokens — size, weight, line height and, where the role calls for it, letter
+     * spacing and a monospaced family.
+     */
+    variant?: TypographyVariant;
+    /**
+     * The HTML tag to render. Each variant already has a sensible default (h1 to h4,
+     * p, span, code), so this is for the cases where the meaning and the look differ —
+     * a subtitle that is really an `h2`, or a label attached to a field.
+     */
+    as?: string;
+    /**
+     * The colour of the text. `default` sets none at all, so the text inherits from
+     * whatever surrounds it — which is what lets the same component be used on an
+     * inverted surface or inside a coloured toast.
+     */
+    tone?: TypographyTone;
+    /**
+     * Cuts the text to one line and ends it with an ellipsis. The element needs a
+     * width to be cut against — being a block, or a flex item — otherwise there is
+     * nothing to overflow and the text simply stays whole.
+     */
+    truncate?: boolean;
+}
+type __VLS_Slots = {
+    /** Text content. */
+    default(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<TypographyProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TypographyProps> & Readonly<{}>, {
+    variant: TypographyVariant;
+    as: string;
+    tone: TypographyTone;
+    truncate: 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/VTypography/VTypography.js

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

package/dist/components/VTypography/VTypography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VTypography.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — the only JS is deriving the default tag from the variant.\n/**\n * The design system's text element. Rather than setting a size here and a weight\n * there, the writer names the ROLE the text plays — a heading, a caption, a label —\n * and `variant` applies the complete typographic recipe that goes with it: family,\n * size, weight, line height and letter spacing, all read from the semantic tokens.\n * `tone` does the same for colour.\n *\n * It renders a single element and adds no behaviour, so the attributes it is given\n * (id, for, aria-*…) land straight on that element. This is what lets it serve as a\n * real field label, with `as=\"label\"` and a `for`.\n */\nimport { computed } from 'vue'\n\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens — size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ —\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from\n   * whatever surrounds it — which is what lets the same component be used on an\n   * inverted surface or inside a coloured toast.\n   */\n  tone?: TypographyTone\n  /**\n   * Cuts the text to one line and ends it with an ellipsis. The element needs a\n   * width to be cut against — being a block, or a flex item — otherwise there is\n   * nothing to overflow and the text simply stays whole.\n   */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/**\n * The tag each variant renders when `as` says nothing — the one whose meaning\n * matches the role.\n */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /* These two defaults are re-declared on every instance because custom properties\n       INHERIT: nested inside a variant that sets letter spacing, or inside a `code`,\n       a VTypography would otherwise pick up its ancestor's tracking and monospaced\n       family. The [data-variant] blocks below, being more specific, still win. */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0; /* the space around a text block belongs to the layout holding it */\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /* With the `default` tone no colour variable is set, and the fallback makes the\n       text inherit — which is what allows the component to be dropped inside an\n       already coloured context, an inverted surface or a tinted toast. */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/VTypography/VTypography.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { computed as e, createBlock as t, defineComponent as n, openBlock as r, renderSlot as i, resolveDynamicComponent as a, withCtx as o } from "vue";
+//#region src/components/VTypography/VTypography.vue?vue&type=script&setup=true&lang.ts
+var s = /*@__PURE__*/ n({
+	__name: "VTypography",
+	props: {
+		variant: { default: "body-md" },
+		as: { default: void 0 },
+		tone: { default: "default" },
+		truncate: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(n) {
+		let s = n, c = {
+			display: "p",
+			"heading-1": "h1",
+			"heading-2": "h2",
+			"heading-3": "h3",
+			"heading-4": "h4",
+			subtitle: "p",
+			"body-xl": "p",
+			"body-lg": "p",
+			"body-md": "p",
+			"body-sm": "p",
+			label: "span",
+			caption: "p",
+			overline: "span",
+			code: "code"
+		}, l = e(() => s.as ?? c[s.variant]);
+		return (e, s) => (r(), t(a(l.value), {
+			class: "v-typography",
+			"data-variant": n.variant,
+			"data-tone": n.tone === "default" ? void 0 : n.tone,
+			"data-truncate": n.truncate ? "" : void 0
+		}, {
+			default: o(() => [i(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"data-variant",
+			"data-tone",
+			"data-truncate"
+		]));
+	}
+});
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=VTypography.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VTypography.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VTypography/VTypography.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @core — the only JS is deriving the default tag from the variant.\n/**\n * The design system's text element. Rather than setting a size here and a weight\n * there, the writer names the ROLE the text plays — a heading, a caption, a label —\n * and `variant` applies the complete typographic recipe that goes with it: family,\n * size, weight, line height and letter spacing, all read from the semantic tokens.\n * `tone` does the same for colour.\n *\n * It renders a single element and adds no behaviour, so the attributes it is given\n * (id, for, aria-*…) land straight on that element. This is what lets it serve as a\n * real field label, with `as=\"label\"` and a `for`.\n */\nimport { computed } from 'vue'\n\nexport type TypographyVariant =\n  | 'display'\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'subtitle'\n  | 'body-xl'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'label'\n  | 'caption'\n  | 'overline'\n  | 'code'\n\nexport type TypographyTone =\n  'default' | 'muted' | 'subtle' | 'accent' | 'danger' | 'success' | 'warning' | 'on-inverse'\n\ninterface TypographyProps {\n  /**\n   * The role this text plays, which selects a complete recipe of typographic\n   * tokens — size, weight, line height and, where the role calls for it, letter\n   * spacing and a monospaced family.\n   */\n  variant?: TypographyVariant\n  /**\n   * The HTML tag to render. Each variant already has a sensible default (h1 to h4,\n   * p, span, code), so this is for the cases where the meaning and the look differ —\n   * a subtitle that is really an `h2`, or a label attached to a field.\n   */\n  as?: string\n  /**\n   * The colour of the text. `default` sets none at all, so the text inherits from\n   * whatever surrounds it — which is what lets the same component be used on an\n   * inverted surface or inside a coloured toast.\n   */\n  tone?: TypographyTone\n  /**\n   * Cuts the text to one line and ends it with an ellipsis. The element needs a\n   * width to be cut against — being a block, or a flex item — otherwise there is\n   * nothing to overflow and the text simply stays whole.\n   */\n  truncate?: boolean\n}\n\nconst props = withDefaults(defineProps<TypographyProps>(), {\n  variant: 'body-md',\n  as: undefined,\n  tone: 'default',\n  truncate: false,\n})\n\ndefineSlots<{\n  /** Text content. */\n  default(): unknown\n}>()\n\n/**\n * The tag each variant renders when `as` says nothing — the one whose meaning\n * matches the role.\n */\nconst DEFAULT_TAGS: Record<TypographyVariant, string> = {\n  display: 'p',\n  'heading-1': 'h1',\n  'heading-2': 'h2',\n  'heading-3': 'h3',\n  'heading-4': 'h4',\n  subtitle: 'p',\n  'body-xl': 'p',\n  'body-lg': 'p',\n  'body-md': 'p',\n  'body-sm': 'p',\n  label: 'span',\n  caption: 'p',\n  overline: 'span',\n  code: 'code',\n}\n\nconst tag = computed(() => props.as ?? DEFAULT_TAGS[props.variant])\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    class=\"v-typography\"\n    :data-variant=\"variant\"\n    :data-tone=\"tone === 'default' ? undefined : tone\"\n    :data-truncate=\"truncate ? '' : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-typography {\n    /* These two defaults are re-declared on every instance because custom properties\n       INHERIT: nested inside a variant that sets letter spacing, or inside a `code`,\n       a VTypography would otherwise pick up its ancestor's tracking and monospaced\n       family. The [data-variant] blocks below, being more specific, still win. */\n    --typography-family: var(--vectis-text-family);\n    --typography-tracking: normal;\n\n    margin: 0; /* the space around a text block belongs to the layout holding it */\n    font-family: var(--typography-family);\n    font-size: var(--typography-size);\n    font-weight: var(--typography-weight);\n    line-height: var(--typography-leading);\n    letter-spacing: var(--typography-tracking);\n    /* With the `default` tone no colour variable is set, and the fallback makes the\n       text inherit — which is what allows the component to be dropped inside an\n       already coloured context, an inverted surface or a tinted toast. */\n    color: var(--typography-color, inherit);\n    overflow-wrap: break-word;\n  }\n\n  .v-typography[data-variant='display'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-display-size);\n    --typography-weight: var(--vectis-text-display-weight);\n    --typography-leading: var(--vectis-text-display-leading);\n    --typography-tracking: var(--vectis-text-display-tracking);\n  }\n\n  .v-typography[data-variant='heading-1'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-1-size);\n    --typography-weight: var(--vectis-text-heading-1-weight);\n    --typography-leading: var(--vectis-text-heading-1-leading);\n    --typography-tracking: var(--vectis-text-heading-1-tracking);\n  }\n\n  .v-typography[data-variant='heading-2'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-2-size);\n    --typography-weight: var(--vectis-text-heading-2-weight);\n    --typography-leading: var(--vectis-text-heading-2-leading);\n    --typography-tracking: var(--vectis-text-heading-2-tracking);\n  }\n\n  .v-typography[data-variant='heading-3'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-3-size);\n    --typography-weight: var(--vectis-text-heading-3-weight);\n    --typography-leading: var(--vectis-text-heading-3-leading);\n  }\n\n  .v-typography[data-variant='heading-4'] {\n    --typography-family: var(--vectis-text-family-heading);\n    --typography-size: var(--vectis-text-heading-4-size);\n    --typography-weight: var(--vectis-text-heading-4-weight);\n    --typography-leading: var(--vectis-text-heading-4-leading);\n  }\n\n  .v-typography[data-variant='subtitle'] {\n    --typography-size: var(--vectis-text-subtitle-size);\n    --typography-weight: var(--vectis-text-subtitle-weight);\n    --typography-leading: var(--vectis-text-subtitle-leading);\n  }\n\n  .v-typography[data-variant='body-xl'] {\n    --typography-size: var(--vectis-text-body-xl-size);\n    --typography-weight: var(--vectis-text-body-xl-weight);\n    --typography-leading: var(--vectis-text-body-xl-leading);\n  }\n\n  .v-typography[data-variant='body-lg'] {\n    --typography-size: var(--vectis-text-body-lg-size);\n    --typography-weight: var(--vectis-text-body-lg-weight);\n    --typography-leading: var(--vectis-text-body-lg-leading);\n  }\n\n  .v-typography[data-variant='body-md'] {\n    --typography-size: var(--vectis-text-body-md-size);\n    --typography-weight: var(--vectis-text-body-md-weight);\n    --typography-leading: var(--vectis-text-body-md-leading);\n  }\n\n  .v-typography[data-variant='body-sm'] {\n    --typography-size: var(--vectis-text-body-sm-size);\n    --typography-weight: var(--vectis-text-body-sm-weight);\n    --typography-leading: var(--vectis-text-body-sm-leading);\n  }\n\n  .v-typography[data-variant='label'] {\n    --typography-size: var(--vectis-text-label-size);\n    --typography-weight: var(--vectis-text-label-weight);\n    --typography-leading: var(--vectis-text-label-leading);\n  }\n\n  .v-typography[data-variant='caption'] {\n    --typography-size: var(--vectis-text-caption-size);\n    --typography-weight: var(--vectis-text-caption-weight);\n    --typography-leading: var(--vectis-text-caption-leading);\n  }\n\n  .v-typography[data-variant='overline'] {\n    --typography-size: var(--vectis-text-overline-size);\n    --typography-weight: var(--vectis-text-overline-weight);\n    --typography-leading: var(--vectis-text-overline-leading);\n    --typography-tracking: var(--vectis-text-overline-tracking);\n\n    text-transform: uppercase;\n  }\n\n  .v-typography[data-variant='code'] {\n    --typography-family: var(--vectis-text-family-code);\n    --typography-size: var(--vectis-text-code-size);\n    --typography-weight: var(--vectis-text-code-weight);\n    --typography-leading: var(--vectis-text-code-leading);\n  }\n\n  /* There is deliberately no block for the `default` tone: leaving the colour\n     variable unset is precisely what makes the text inherit. */\n  .v-typography[data-tone='muted'] {\n    --typography-color: var(--vectis-color-text-muted);\n  }\n\n  .v-typography[data-tone='subtle'] {\n    --typography-color: var(--vectis-color-text-subtle);\n  }\n\n  .v-typography[data-tone='accent'] {\n    --typography-color: var(--vectis-color-accent-text);\n  }\n\n  .v-typography[data-tone='danger'] {\n    --typography-color: var(--vectis-color-danger-text);\n  }\n\n  .v-typography[data-tone='success'] {\n    --typography-color: var(--vectis-color-success-text);\n  }\n\n  .v-typography[data-tone='warning'] {\n    --typography-color: var(--vectis-color-warning-text);\n  }\n\n  .v-typography[data-tone='on-inverse'] {\n    --typography-color: var(--vectis-color-text-on-inverse);\n  }\n\n  .v-typography[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;EA6DA,IAAM,IAAQ,GAgBR,IAAkD;GACtD,SAAS;GACT,aAAa;GACb,aAAa;GACb,aAAa;GACb,aAAa;GACb,UAAU;GACV,WAAW;GACX,WAAW;GACX,WAAW;GACX,WAAW;GACX,OAAO;GACP,SAAS;GACT,UAAU;GACV,MAAM;EACR,GAEM,IAAM,QAAe,EAAM,MAAM,EAAa,EAAM,QAAQ;yBAIhE,EAQY,EAPL,EAAA,KAAG,GAAA;GACR,OAAM;GACL,gBAAc,EAAA;GACd,aAAW,EAAA,SAAI,YAAiB,KAAA,IAAY,EAAA;GAC5C,iBAAe,EAAA,WAAQ,KAAQ,KAAA;;oBAExB,CAAR,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/composables/useAriaLabel.d.ts

@@ -0,0 +1,19 @@
+import { ComputedRef } from 'vue';
+/**
+ * Works out the name a screen reader announces for a container that has one: a row of
+ * tabs, a group of buttons, a navigation area.
+ *
+ * A name can be given in three ways, and they are ranked. Pointing at another element
+ * that already carries the text wins; an explicit name written on the component comes
+ * next; the component's own `label` option is only the fallback. So that option is a
+ * DEFAULT and nothing more — an explicit name replaces it, and pointing at another
+ * element removes it altogether, since otherwise the element would carry two names at
+ * once.
+ *
+ * This arbitration has to be done by hand as soon as a component both spreads the
+ * attributes it was given and writes its own name in the same place: nothing would
+ * choose between the two, and both would apply. Elsewhere Vue's normal attribute
+ * fallthrough already lets the consumer's win, and all this does is drop a default that
+ * has become redundant.
+ */
+export declare function useAriaLabel(label: () => string | undefined): ComputedRef<string | undefined>;

package/dist/composables/useAriaLabel.js

@@ -0,0 +1,10 @@
+import { computed as e, useAttrs as t } from "vue";
+//#region src/composables/useAriaLabel.ts
+function n(n) {
+	let r = t();
+	return e(() => r["aria-labelledby"] === void 0 ? r["aria-label"] ?? n() : void 0);
+}
+//#endregion
+export { n as useAriaLabel };
+
+//# sourceMappingURL=useAriaLabel.js.map

package/dist/composables/useAriaLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAriaLabel.js","names":[],"sources":["../../src/composables/useAriaLabel.ts"],"sourcesContent":["import { computed, useAttrs, type ComputedRef } from 'vue'\n\n// @a11y\n/**\n * Works out the name a screen reader announces for a container that has one: a row of\n * tabs, a group of buttons, a navigation area.\n *\n * A name can be given in three ways, and they are ranked. Pointing at another element\n * that already carries the text wins; an explicit name written on the component comes\n * next; the component's own `label` option is only the fallback. So that option is a\n * DEFAULT and nothing more — an explicit name replaces it, and pointing at another\n * element removes it altogether, since otherwise the element would carry two names at\n * once.\n *\n * This arbitration has to be done by hand as soon as a component both spreads the\n * attributes it was given and writes its own name in the same place: nothing would\n * choose between the two, and both would apply. Elsewhere Vue's normal attribute\n * fallthrough already lets the consumer's win, and all this does is drop a default that\n * has become redundant.\n */\nexport function useAriaLabel(label: () => string | undefined): ComputedRef<string | undefined> {\n  const attrs = useAttrs()\n  return computed(() =>\n    attrs['aria-labelledby'] !== undefined\n      ? undefined\n      : ((attrs['aria-label'] as string | undefined) ?? label()),\n  )\n}\n"],"mappings":";;AAoBA,SAAgB,EAAa,GAAkE;CAC7F,IAAM,IAAQ,EAAS;CACvB,OAAO,QACL,EAAM,uBAAuB,KAAA,IAEvB,EAAM,iBAAwC,EAAM,IADtD,KAAA,CAEN;AACF"}

package/dist/composables/useFieldIds.d.ts

@@ -0,0 +1,21 @@
+import { ComputedRef } from 'vue';
+/**
+ * The identifiers a wrapped field needs — the text input and the multi-line one. They
+ * are what ties a label to its field and a field to the help text below it, so that
+ * clicking the label focuses the field and a screen reader reads the hint out with it.
+ *
+ * Two points are worth knowing. An identifier the consumer supplies WINS over the one
+ * generated here, or a label they wrote themselves outside the component would point at
+ * nothing. And the link to the descriptive text is a LIST rather than a single value, so
+ * the component's own hint is ADDED to whatever the consumer already pointed at instead
+ * of replacing it.
+ *
+ * The generated identifiers come from Vue's own facility rather than a counter of our
+ * own, which is what makes them identical in the page rendered on the server and in the
+ * one the browser takes over.
+ */
+export declare function useFieldIds(attrs: Record<string, unknown>, hasHint: () => boolean): {
+    fieldId: ComputedRef<string>;
+    hintId: string;
+    describedBy: ComputedRef<string | undefined>;
+};

package/dist/composables/useFieldIds.js

@@ -0,0 +1,14 @@
+import { computed as e, useId as t } from "vue";
+//#region src/composables/useFieldIds.ts
+function n(n, r) {
+	let i = t(), a = t();
+	return {
+		fieldId: e(() => n.id ?? i),
+		hintId: a,
+		describedBy: e(() => [n["aria-describedby"], r() ? a : void 0].filter(Boolean).join(" ") || void 0)
+	};
+}
+//#endregion
+export { n as useFieldIds };
+
+//# sourceMappingURL=useFieldIds.js.map

package/dist/composables/useFieldIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldIds.js","names":[],"sources":["../../src/composables/useFieldIds.ts"],"sourcesContent":["import { computed, useId, type ComputedRef } from 'vue'\n\n// @a11y @ssr\n/**\n * The identifiers a wrapped field needs — the text input and the multi-line one. They\n * are what ties a label to its field and a field to the help text below it, so that\n * clicking the label focuses the field and a screen reader reads the hint out with it.\n *\n * Two points are worth knowing. An identifier the consumer supplies WINS over the one\n * generated here, or a label they wrote themselves outside the component would point at\n * nothing. And the link to the descriptive text is a LIST rather than a single value, so\n * the component's own hint is ADDED to whatever the consumer already pointed at instead\n * of replacing it.\n *\n * The generated identifiers come from Vue's own facility rather than a counter of our\n * own, which is what makes them identical in the page rendered on the server and in the\n * one the browser takes over.\n */\nexport function useFieldIds(\n  attrs: Record<string, unknown>,\n  hasHint: () => boolean,\n): { fieldId: ComputedRef<string>; hintId: string; describedBy: ComputedRef<string | undefined> } {\n  const uid = useId()\n  const hintId = useId()\n\n  return {\n    fieldId: computed(() => (attrs.id as string | undefined) ?? uid),\n    hintId,\n    describedBy: computed(() => {\n      const ids = [attrs['aria-describedby'] as string | undefined, hasHint() ? hintId : undefined]\n      return ids.filter(Boolean).join(' ') || undefined\n    }),\n  }\n}\n"],"mappings":";;AAkBA,SAAgB,EACd,GACA,GACgG;CAChG,IAAM,IAAM,EAAM,GACZ,IAAS,EAAM;CAErB,OAAO;EACL,SAAS,QAAgB,EAAM,MAA6B,CAAG;EAC/D;EACA,aAAa,QAEJ,CADM,EAAM,qBAA2C,EAAQ,IAAI,IAAS,KAAA,CAC5E,CAAA,CAAI,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA,CACzC;CACH;AACF"}

package/dist/composables/useFieldPanel.d.ts

@@ -0,0 +1,61 @@
+import { Ref } from 'vue';
+/** The least this needs of the field: something it can put the focus back on. */
+interface FocusableField {
+    focus: () => void;
+}
+/** The least this needs of the panel: something it can open and close. */
+interface PanelControl {
+    show: () => void;
+    hide: () => void;
+}
+export interface UseFieldPanelOptions {
+    /** The component's root, against which "the focus has left" is judged. */
+    rootEl: Ref<HTMLElement | null>;
+    /** The panel to open and close. */
+    panelRef: Ref<PanelControl | null>;
+    /** The field the focus returns to. */
+    fieldEl: Ref<FocusableField | null>;
+    /**
+     * Whether opening is refused. It is the SINGLE cut-off point: every route in passes
+     * through it, so a component never has to repeat the condition per handler.
+     */
+    disabled: () => boolean;
+    /** Moves the focus INTO the open panel — where in it is the component's business. */
+    focusInPanel: () => void;
+    /** What the component needs to do as the panel opens: prepare a draft, reset a step. */
+    onOpen?: () => void;
+    /** What it needs to do as the panel closes: clear an announcement, for instance. */
+    onClose?: () => void;
+    /**
+     * Whether the focus should enter the panel when it opens. It does by default.
+     *
+     * A field one TYPES into says no: its panel opens without taking the caret, so typing
+     * carries on and the down arrow remains the one explicit way in.
+     */
+    focusOnOpen?: () => boolean;
+}
+/**
+ * The shell shared by the date and the time picker: a field, and a panel below it that
+ * nothing dismisses by itself. Neither component owns this — it belongs to both.
+ *
+ * A panel of that kind does NOTHING on its own: it does not close on a click outside, does
+ * not take the focus, and does not hand it back. What follows is exactly that minimum,
+ * and nothing more; whatever is particular to one component arrives through the three
+ * callbacks above.
+ *
+ * TRAP — the panel is WRITTEN to directly and READ back through a model. The state here is
+ * meant to be bound to the panel, which feeds it from its own events, but the opening
+ * itself must stay synchronous: the frame scheduled to move the focus assumes the panel is
+ * already open by the time it runs, and going through the model would put a tick in
+ * between.
+ */
+export declare function useFieldPanel(options: UseFieldPanelOptions): {
+    open: Ref<boolean, boolean>;
+    openPanel: (moveFocus?: boolean) => void;
+    closePanel: (refocus?: boolean) => void;
+    onControlClick: (event: MouseEvent) => void;
+    onFocusout: (event: FocusEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    onPanelMousedown: (event: MouseEvent) => void;
+};
+export {};

package/dist/composables/useFieldPanel.js

@@ -0,0 +1,39 @@
+import { useFocusoutDismiss as e } from "./useFocusoutDismiss.js";
+import { ref as t } from "vue";
+//#region src/composables/useFieldPanel.ts
+function n(n) {
+	let r = t(!1);
+	function i(e = n.focusOnOpen?.() ?? !0) {
+		n.disabled() || r.value || (n.onOpen?.(), n.panelRef.value?.show(), e && requestAnimationFrame(() => n.focusInPanel()));
+	}
+	function a(e = !1) {
+		r.value && (n.panelRef.value?.hide(), n.onClose?.(), e && n.fieldEl.value?.focus());
+	}
+	function o(e) {
+		e.target.closest(".v-input-action") || n.disabled() || i();
+	}
+	let s = e(n.rootEl, () => a(!1));
+	function c(e) {
+		e.target?.closest("button, a, input, select, textarea, [tabindex]") || e.preventDefault();
+	}
+	function l(e) {
+		if (e.key === "Escape") {
+			r.value && (e.preventDefault(), a(!0));
+			return;
+		}
+		(e.key === "ArrowDown" || e.key === "Enter") && !r.value && !e.defaultPrevented && (e.preventDefault(), i(!0));
+	}
+	return {
+		open: r,
+		openPanel: i,
+		closePanel: a,
+		onControlClick: o,
+		onFocusout: s,
+		onKeydown: l,
+		onPanelMousedown: c
+	};
+}
+//#endregion
+export { n as useFieldPanel };
+
+//# sourceMappingURL=useFieldPanel.js.map