vectis-ui 0.1.0

package/dist/composables/useFieldPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldPanel.js","names":[],"sources":["../../src/composables/useFieldPanel.ts"],"sourcesContent":["import { ref } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { useFocusoutDismiss } from './useFocusoutDismiss'\n\n/** The least this needs of the field: something it can put the focus back on. */\ninterface FocusableField {\n  focus: () => void\n}\n\n/** The least this needs of the panel: something it can open and close. */\ninterface PanelControl {\n  show: () => void\n  hide: () => void\n}\n\nexport interface UseFieldPanelOptions {\n  /** The component's root, against which \"the focus has left\" is judged. */\n  rootEl: Ref<HTMLElement | null>\n  /** The panel to open and close. */\n  panelRef: Ref<PanelControl | null>\n  /** The field the focus returns to. */\n  fieldEl: Ref<FocusableField | null>\n  /**\n   * Whether opening is refused. It is the SINGLE cut-off point: every route in passes\n   * through it, so a component never has to repeat the condition per handler.\n   */\n  disabled: () => boolean\n  /** Moves the focus INTO the open panel — where in it is the component's business. */\n  focusInPanel: () => void\n  /** What the component needs to do as the panel opens: prepare a draft, reset a step. */\n  onOpen?: () => void\n  /** What it needs to do as the panel closes: clear an announcement, for instance. */\n  onClose?: () => void\n  /**\n   * Whether the focus should enter the panel when it opens. It does by default.\n   *\n   * A field one TYPES into says no: its panel opens without taking the caret, so typing\n   * carries on and the down arrow remains the one explicit way in.\n   */\n  focusOnOpen?: () => boolean\n}\n\n// @a11y @keyboard @core\n/**\n * The shell shared by the date and the time picker: a field, and a panel below it that\n * nothing dismisses by itself. Neither component owns this — it belongs to both.\n *\n * A panel of that kind does NOTHING on its own: it does not close on a click outside, does\n * not take the focus, and does not hand it back. What follows is exactly that minimum,\n * and nothing more; whatever is particular to one component arrives through the three\n * callbacks above.\n *\n * TRAP — the panel is WRITTEN to directly and READ back through a model. The state here is\n * meant to be bound to the panel, which feeds it from its own events, but the opening\n * itself must stay synchronous: the frame scheduled to move the focus assumes the panel is\n * already open by the time it runs, and going through the model would put a tick in\n * between.\n */\nexport function useFieldPanel(options: UseFieldPanelOptions) {\n  const open = ref(false)\n\n  function openPanel(moveFocus = options.focusOnOpen?.() ?? true) {\n    if (options.disabled() || open.value) return\n    options.onOpen?.()\n    options.panelRef.value?.show()\n    // @a11y\n    // The focus has to be moved by hand — the platform moves it into no panel of this\n    // kind. It waits a frame because the panel has not been painted by the time it is\n    // asked to open, and nothing invisible can take the focus.\n    if (moveFocus) requestAnimationFrame(() => options.focusInPanel())\n  }\n\n  function closePanel(refocus = false) {\n    if (!open.value) return\n    options.panelRef.value?.hide()\n    options.onClose?.()\n    if (refocus) options.fieldEl.value?.focus()\n  }\n\n  function onControlClick(event: MouseEvent) {\n    // A click on one of the field's own buttons — the clear cross, an icon — is left to\n    // that button's handler: reacting here as well would open the panel the cross has\n    // just given a reason to close.\n    if ((event.target as HTMLElement).closest('.v-input-action')) return\n    if (options.disabled()) return\n    openPanel()\n  }\n\n  // @a11y\n  /**\n   * Closes as soon as the focus leaves the component — the panel included, which is a\n   * descendant of it even while floating above the page.\n   */\n  const onFocusout = useFocusoutDismiss(options.rootEl, () => closePanel(false))\n\n  // @a11y\n  /*\n   * TRAP — clicking a part of the panel that cannot take focus (its padding, the gutter\n   * between two cells, the empty space in a navigation bar) makes the browser take the\n   * focus off whatever had it and hand it back to the page body. The handler above then\n   * sees the focus leave with nowhere to go, reads it as an exit — rightly — and closes a\n   * panel the reader has just clicked on.\n   *\n   * So the focus is held in place, but ONLY outside things that can take it. An\n   * unconditional cancellation, as VCombobox uses — where the focus never leaves the field\n   * anyway — would here rob the days and the navigation arrows of the focus, and leave the\n   * calendar's keyboard pointing at nothing.\n   *\n   * None of this is visible in the unit tests, where clicking moves no focus; browser tests\n   * cover it.\n   */\n  function onPanelMousedown(event: MouseEvent) {\n    const target = event.target as HTMLElement | null\n    if (!target?.closest('button, a, input, select, textarea, [tabindex]')) event.preventDefault()\n  }\n\n  // @keyboard @a11y\n  function onKeydown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      if (open.value) {\n        event.preventDefault()\n        closePanel(true)\n      }\n      return\n    }\n    // TRAP — a key already consumed INSIDE the panel is ignored here. An Enter that\n    // selected a day or confirmed the dial has just CLOSED the panel, and without this\n    // guard it would reopen it immediately as it travels up to the root.\n    if (\n      (event.key === 'ArrowDown' || event.key === 'Enter') &&\n      !open.value &&\n      !event.defaultPrevented\n    ) {\n      event.preventDefault()\n      // Opened from the KEYBOARD, the panel always takes the focus, whatever the component\n      // asked for: otherwise the down arrow would open a panel the keyboard could not\n      // reach.\n      openPanel(true)\n    }\n  }\n\n  return {\n    open,\n    openPanel,\n    closePanel,\n    onControlClick,\n    onFocusout,\n    onKeydown,\n    onPanelMousedown,\n  }\n}\n"],"mappings":";;;AA2DA,SAAgB,EAAc,GAA+B;CAC3D,IAAM,IAAO,EAAI,EAAK;CAEtB,SAAS,EAAU,IAAY,EAAQ,cAAc,KAAK,IAAM;EAC1D,EAAQ,SAAS,KAAK,EAAK,UAC/B,EAAQ,SAAS,GACjB,EAAQ,SAAS,OAAO,KAAK,GAKzB,KAAW,4BAA4B,EAAQ,aAAa,CAAC;CACnE;CAEA,SAAS,EAAW,IAAU,IAAO;EAC9B,EAAK,UACV,EAAQ,SAAS,OAAO,KAAK,GAC7B,EAAQ,UAAU,GACd,KAAS,EAAQ,QAAQ,OAAO,MAAM;CAC5C;CAEA,SAAS,EAAe,GAAmB;EAIpC,EAAM,OAAuB,QAAQ,iBAAiB,KACvD,EAAQ,SAAS,KACrB,EAAU;CACZ;CAOA,IAAM,IAAa,EAAmB,EAAQ,cAAc,EAAW,EAAK,CAAC;CAkB7E,SAAS,EAAiB,GAAmB;EAE3C,AADe,EAAM,QACR,QAAQ,gDAAgD,KAAG,EAAM,eAAe;CAC/F;CAGA,SAAS,EAAU,GAAsB;EACvC,IAAI,EAAM,QAAQ,UAAU;GAC1B,AAAI,EAAK,UACP,EAAM,eAAe,GACrB,EAAW,EAAI;GAEjB;EACF;EAIA,CACG,EAAM,QAAQ,eAAe,EAAM,QAAQ,YAC5C,CAAC,EAAK,SACN,CAAC,EAAM,qBAEP,EAAM,eAAe,GAIrB,EAAU,EAAI;CAElB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/useFileDrop.d.ts

@@ -0,0 +1,30 @@
+import { ComputedRef } from 'vue';
+/**
+ * Everything an area needs in order to accept files dropped onto it, and to show that it
+ * is ready to receive them. Both the file field and the drop zone are built on it.
+ *
+ * Two traps live here, which is the whole reason this exists once rather than twice.
+ *
+ * The browser must be told explicitly, while the file is being dragged over the area,
+ * that a drop is welcome. Left unsaid, it refuses the drop and then NAVIGATES to the
+ * file, replacing the page the reader was on.
+ *
+ * And what is counted is a DEPTH, not a yes-or-no. The browser reports the pointer
+ * LEAVING every time it crosses into a child element — a field, a chip, a button inside
+ * the area — so a simple flag would switch off under the cursor and the highlight would
+ * flicker. A drop forces the count back to zero, because a drag that leaves the window
+ * altogether never reports the departure that would have balanced it; asking instead
+ * whether the pointer went to a descendant, the other well-known fix, is no use since
+ * there is precisely nothing to ask about in that case.
+ *
+ * Whether the area accepts anything is read at the moment of the event rather than
+ * captured once, so a component turned off in the middle of a drag stops accepting
+ * without anything being re-attached.
+ */
+export declare function useFileDrop(enabled: () => boolean, onFiles: (files: File[]) => void): {
+    dragging: ComputedRef<boolean>;
+    onDragEnter: (event: DragEvent) => void;
+    onDragOver: (event: DragEvent) => void;
+    onDragLeave: () => void;
+    onDrop: (event: DragEvent) => void;
+};

package/dist/composables/useFileDrop.js

@@ -0,0 +1,28 @@
+import { computed as e, ref as t } from "vue";
+//#region src/composables/useFileDrop.ts
+function n(n, r) {
+	let i = t(0);
+	function a(e) {
+		n() && (e.preventDefault(), i.value += 1);
+	}
+	function o(e) {
+		n() && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "copy"));
+	}
+	function s() {
+		n() && (i.value = Math.max(0, i.value - 1));
+	}
+	function c(e) {
+		n() && (e.preventDefault(), i.value = 0, r([...e.dataTransfer?.files ?? []]));
+	}
+	return {
+		dragging: e(() => i.value > 0),
+		onDragEnter: a,
+		onDragOver: o,
+		onDragLeave: s,
+		onDrop: c
+	};
+}
+//#endregion
+export { n as useFileDrop };
+
+//# sourceMappingURL=useFileDrop.js.map

package/dist/composables/useFileDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileDrop.js","names":[],"sources":["../../src/composables/useFileDrop.ts"],"sourcesContent":["import { computed, ref, type ComputedRef } from 'vue'\n\n// @core\n/**\n * Everything an area needs in order to accept files dropped onto it, and to show that it\n * is ready to receive them. Both the file field and the drop zone are built on it.\n *\n * Two traps live here, which is the whole reason this exists once rather than twice.\n *\n * The browser must be told explicitly, while the file is being dragged over the area,\n * that a drop is welcome. Left unsaid, it refuses the drop and then NAVIGATES to the\n * file, replacing the page the reader was on.\n *\n * And what is counted is a DEPTH, not a yes-or-no. The browser reports the pointer\n * LEAVING every time it crosses into a child element — a field, a chip, a button inside\n * the area — so a simple flag would switch off under the cursor and the highlight would\n * flicker. A drop forces the count back to zero, because a drag that leaves the window\n * altogether never reports the departure that would have balanced it; asking instead\n * whether the pointer went to a descendant, the other well-known fix, is no use since\n * there is precisely nothing to ask about in that case.\n *\n * Whether the area accepts anything is read at the moment of the event rather than\n * captured once, so a component turned off in the middle of a drag stops accepting\n * without anything being re-attached.\n */\nexport function useFileDrop(\n  enabled: () => boolean,\n  onFiles: (files: File[]) => void,\n): {\n  dragging: ComputedRef<boolean>\n  onDragEnter: (event: DragEvent) => void\n  onDragOver: (event: DragEvent) => void\n  onDragLeave: () => void\n  onDrop: (event: DragEvent) => void\n} {\n  const depth = ref(0)\n\n  function onDragEnter(event: DragEvent) {\n    if (!enabled()) return\n    event.preventDefault()\n    depth.value += 1\n  }\n\n  function onDragOver(event: DragEvent) {\n    if (!enabled()) return\n    event.preventDefault()\n    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy'\n  }\n\n  function onDragLeave() {\n    if (!enabled()) return\n    depth.value = Math.max(0, depth.value - 1)\n  }\n\n  function onDrop(event: DragEvent) {\n    if (!enabled()) return\n    event.preventDefault()\n    depth.value = 0\n    onFiles([...(event.dataTransfer?.files ?? [])])\n  }\n\n  return {\n    dragging: computed(() => depth.value > 0),\n    onDragEnter,\n    onDragOver,\n    onDragLeave,\n    onDrop,\n  }\n}\n"],"mappings":";;AAyBA,SAAgB,EACd,GACA,GAOA;CACA,IAAM,IAAQ,EAAI,CAAC;CAEnB,SAAS,EAAY,GAAkB;EAChC,EAAQ,MACb,EAAM,eAAe,GACrB,EAAM,SAAS;CACjB;CAEA,SAAS,EAAW,GAAkB;EAC/B,EAAQ,MACb,EAAM,eAAe,GACjB,EAAM,iBAAc,EAAM,aAAa,aAAa;CAC1D;CAEA,SAAS,IAAc;EAChB,EAAQ,MACb,EAAM,QAAQ,KAAK,IAAI,GAAG,EAAM,QAAQ,CAAC;CAC3C;CAEA,SAAS,EAAO,GAAkB;EAC3B,EAAQ,MACb,EAAM,eAAe,GACrB,EAAM,QAAQ,GACd,EAAQ,CAAC,GAAI,EAAM,cAAc,SAAS,CAAC,CAAE,CAAC;CAChD;CAEA,OAAO;EACL,UAAU,QAAe,EAAM,QAAQ,CAAC;EACxC;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/useFileField.d.ts

@@ -0,0 +1,36 @@
+import { ComputedRef, Ref } from 'vue';
+import { FileLimits, FileRejection } from '../utils/file.js';
+export interface FileFieldOptions {
+    /** The component's value — always a list of files, whether one or several are allowed. */
+    model: Ref<File[]>;
+    /** The attributes the consumer wrote, minus styling, still to be split in two. */
+    forwardedAttrs: ComputedRef<Record<string, unknown>>;
+    /** Read at the moment of the event, so a component turned off mid-way stops accepting. */
+    enabled: () => boolean;
+    multiple: () => boolean;
+    /** The limits as the consumer set them: capping a single-file field at one happens here. */
+    limits: () => FileLimits;
+    onReject: (rejection: FileRejection) => void;
+    onChange: (files: File[]) => void;
+    /**
+     * Attributes to withhold from the visible control as well.
+     *
+     * The file field withholds the link to its descriptive text because it puts that list
+     * together itself, and a binding written after the spread would silently replace the
+     * consumer's rather than being merged with it.
+     */
+    excludeFromControl?: readonly string[];
+}
+export declare function useFileField(options: FileFieldOptions): {
+    fileEl: Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    nativeAttrs: ComputedRef<{
+        [k: string]: unknown;
+    }>;
+    controlAttrs: ComputedRef<{
+        [k: string]: unknown;
+    }>;
+    acceptFiles: (incoming: File[]) => void;
+    onNativeChange: (event: Event) => void;
+    openPicker: () => void;
+    resetNative: () => void;
+};

package/dist/composables/useFileField.js

@@ -0,0 +1,45 @@
+import { screenFiles as e } from "../utils/file.js";
+import { computed as t, ref as n } from "vue";
+//#region src/composables/useFileField.ts
+var r = [
+	"name",
+	"required",
+	"form",
+	"capture"
+];
+function i(i) {
+	let a = n(null), o = t(() => Object.fromEntries(Object.entries(i.forwardedAttrs.value).filter(([e]) => r.includes(e)))), s = t(() => {
+		let e = i.excludeFromControl ?? [];
+		return Object.fromEntries(Object.entries(i.forwardedAttrs.value).filter(([t]) => !r.includes(t) && !e.includes(t)));
+	});
+	function c() {
+		a.value && (a.value.value = "");
+	}
+	function l(t) {
+		let n = i.multiple(), r = n ? i.model.value : [], a = i.limits(), { accepted: o, rejected: s } = e(t, r, {
+			...a,
+			maxFiles: n ? a.maxFiles : 1
+		});
+		for (let e of s) i.onReject(e);
+		c(), o.length !== 0 && (i.model.value = [...r, ...o], i.onChange(i.model.value));
+	}
+	function u(e) {
+		l([...e.target.files ?? []]);
+	}
+	function d() {
+		i.enabled() && a.value?.click();
+	}
+	return {
+		fileEl: a,
+		nativeAttrs: o,
+		controlAttrs: s,
+		acceptFiles: l,
+		onNativeChange: u,
+		openPicker: d,
+		resetNative: c
+	};
+}
+//#endregion
+export { i as useFileField };
+
+//# sourceMappingURL=useFileField.js.map

package/dist/composables/useFileField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileField.js","names":[],"sources":["../../src/composables/useFileField.ts"],"sourcesContent":["// @core\n/**\n * The hidden file control both file components are built around — the one that actually\n * opens the operating system's file dialog.\n *\n * The code here is imposed by the browser rather than chosen. A file dialog opens ONLY\n * from a genuine click on a file control, and the list of chosen files cannot be handed\n * to that control from a template the way any other value would be. So the thing the\n * reader sees and clicks can never BE the file control, and the file control can only\n * ever be a SOURCE of files. That is exactly the shape of what follows.\n *\n * The rules deciding which files are acceptable live apart from this, on their own; what\n * was left duplicated between the two components was the wiring around them.\n */\nimport { computed, ref, type ComputedRef, type Ref } from 'vue'\n\nimport { screenFiles, type FileLimits, type FileRejection } from '../utils/file'\n\n// @a11y\n/**\n * The attributes that belong on the hidden file control rather than on the visible one.\n *\n * The usual split assumes a single element that does the work, and there are two here, so\n * the attributes go into three piles instead of two: styling stays on the outermost\n * element, these four go to the hidden control because they are what the FORM reads —\n * the field's name, whether it is mandatory, which form it belongs to, and whether the\n * camera should open — and everything else goes to the element the READER focuses.\n *\n * The three piles never overlap, and that matters: an identifier applied twice would\n * break a label the consumer wrote for the field, and a name applied twice would have it\n * announced twice.\n */\nconst NATIVE_ONLY = ['name', 'required', 'form', 'capture']\n\nexport interface FileFieldOptions {\n  /** The component's value — always a list of files, whether one or several are allowed. */\n  model: Ref<File[]>\n  /** The attributes the consumer wrote, minus styling, still to be split in two. */\n  forwardedAttrs: ComputedRef<Record<string, unknown>>\n  /** Read at the moment of the event, so a component turned off mid-way stops accepting. */\n  enabled: () => boolean\n  multiple: () => boolean\n  /** The limits as the consumer set them: capping a single-file field at one happens here. */\n  limits: () => FileLimits\n  onReject: (rejection: FileRejection) => void\n  onChange: (files: File[]) => void\n  /**\n   * Attributes to withhold from the visible control as well.\n   *\n   * The file field withholds the link to its descriptive text because it puts that list\n   * together itself, and a binding written after the spread would silently replace the\n   * consumer's rather than being merged with it.\n   */\n  excludeFromControl?: readonly string[]\n}\n\nexport function useFileField(options: FileFieldOptions) {\n  const fileEl = ref<HTMLInputElement | null>(null)\n\n  const nativeAttrs = computed(() =>\n    Object.fromEntries(\n      Object.entries(options.forwardedAttrs.value).filter(([key]) => NATIVE_ONLY.includes(key)),\n    ),\n  )\n\n  const controlAttrs = computed(() => {\n    const excluded = options.excludeFromControl ?? []\n    return Object.fromEntries(\n      Object.entries(options.forwardedAttrs.value).filter(\n        ([key]) => !NATIVE_ONLY.includes(key) && !excluded.includes(key),\n      ),\n    )\n  })\n\n  /**\n   * TRAP — choosing the SAME file again, after clearing the field or removing that file\n   * from the list, reports nothing at all: as far as the hidden control is concerned its\n   * value never changed. The file then becomes impossible to pick, with nothing to show\n   * for it. Emptying the control on every path out is what keeps it selectable.\n   */\n  function resetNative() {\n    if (fileEl.value) fileEl.value.value = ''\n  }\n\n  /**\n   * The one way files get into the value: the operating system's dialog and a drop onto\n   * the component both arrive here.\n   *\n   * A file the limits refuse is REFUSED outright — it never enters the value at all — and\n   * every refusal is reported so the component can say why. The screening itself is a\n   * plain function elsewhere, which is what makes the ORDER of the reasons testable\n   * without putting a component on screen.\n   */\n  function acceptFiles(incoming: File[]) {\n    const multiple = options.multiple()\n    const current = multiple ? options.model.value : []\n    const limits = options.limits()\n    const { accepted, rejected } = screenFiles(incoming, current, {\n      ...limits,\n      // A single-file field is a list capped at one, so extra files are refused for the\n      // same reason as anywhere else: too many.\n      maxFiles: multiple ? limits.maxFiles : 1,\n    })\n\n    for (const rejection of rejected) options.onReject(rejection)\n\n    resetNative()\n    if (accepted.length === 0) return\n\n    options.model.value = [...current, ...accepted]\n    options.onChange(options.model.value)\n  }\n\n  function onNativeChange(event: Event) {\n    acceptFiles([...((event.target as HTMLInputElement).files ?? [])])\n  }\n\n  // @fallback\n  /**\n   * The one call to the browser neither component can do without: opening the dialog.\n   *\n   * It clicks the hidden control rather than using the newer, more explicit request to\n   * open a picker. Both require the reader to have just done something, but the explicit\n   * one THROWS when they have not — and in an embedded page from another site — where a\n   * click simply does nothing. On a file control there is nothing to gain in exchange.\n   */\n  function openPicker() {\n    if (!options.enabled()) return\n    fileEl.value?.click()\n  }\n\n  return { fileEl, nativeAttrs, controlAttrs, acceptFiles, onNativeChange, openPicker, resetNative }\n}\n"],"mappings":";;;AAgCA,IAAM,IAAc;CAAC;CAAQ;CAAY;CAAQ;AAAS;AAwB1D,SAAgB,EAAa,GAA2B;CACtD,IAAM,IAAS,EAA6B,IAAI,GAE1C,IAAc,QAClB,OAAO,YACL,OAAO,QAAQ,EAAQ,eAAe,KAAK,CAAC,CAAC,QAAQ,CAAC,OAAS,EAAY,SAAS,CAAG,CAAC,CAC1F,CACF,GAEM,IAAe,QAAe;EAClC,IAAM,IAAW,EAAQ,sBAAsB,CAAC;EAChD,OAAO,OAAO,YACZ,OAAO,QAAQ,EAAQ,eAAe,KAAK,CAAC,CAAC,QAC1C,CAAC,OAAS,CAAC,EAAY,SAAS,CAAG,KAAK,CAAC,EAAS,SAAS,CAAG,CACjE,CACF;CACF,CAAC;CAQD,SAAS,IAAc;EACrB,AAAI,EAAO,UAAO,EAAO,MAAM,QAAQ;CACzC;CAWA,SAAS,EAAY,GAAkB;EACrC,IAAM,IAAW,EAAQ,SAAS,GAC5B,IAAU,IAAW,EAAQ,MAAM,QAAQ,CAAC,GAC5C,IAAS,EAAQ,OAAO,GACxB,EAAE,aAAU,gBAAa,EAAY,GAAU,GAAS;GAC5D,GAAG;GAGH,UAAU,IAAW,EAAO,WAAW;EACzC,CAAC;EAED,KAAK,IAAM,KAAa,GAAU,EAAQ,SAAS,CAAS;EAE5D,EAAY,GACR,EAAS,WAAW,MAExB,EAAQ,MAAM,QAAQ,CAAC,GAAG,GAAS,GAAG,CAAQ,GAC9C,EAAQ,SAAS,EAAQ,MAAM,KAAK;CACtC;CAEA,SAAS,EAAe,GAAc;EACpC,EAAY,CAAC,GAAK,EAAM,OAA4B,SAAS,CAAC,CAAE,CAAC;CACnE;CAWA,SAAS,IAAa;EACf,EAAQ,QAAQ,KACrB,EAAO,OAAO,MAAM;CACtB;CAEA,OAAO;EAAE;EAAQ;EAAa;EAAc;EAAa;EAAgB;EAAY;CAAY;AACnG"}

package/dist/composables/useFocusoutDismiss.d.ts

@@ -0,0 +1,17 @@
+import { Ref } from 'vue';
+/**
+ * Closes something as soon as the focus leaves the component — its floating panel
+ * included.
+ *
+ * That last part is what makes this so short. A panel painted above the whole page is
+ * still, in the document, a descendant of the component that owns it, so asking whether
+ * the focus went somewhere inside the component is enough; nothing has to be watched at
+ * the level of the page.
+ *
+ * The focus going nowhere in particular — out of the window, or back to the page body —
+ * counts as leaving too, and closes.
+ *
+ * This exists because a panel the browser does not dismiss on its own has to be closed
+ * by hand. The self-dismissing kind, the menu's, needs none of it.
+ */
+export declare function useFocusoutDismiss(root: Ref<HTMLElement | null>, close: () => void): (event: FocusEvent) => void;

package/dist/composables/useFocusoutDismiss.js

@@ -0,0 +1,11 @@
+//#region src/composables/useFocusoutDismiss.ts
+function e(e, t) {
+	return (n) => {
+		let r = n.relatedTarget;
+		(!r || !e.value?.contains(r)) && t();
+	};
+}
+//#endregion
+export { e as useFocusoutDismiss };
+
+//# sourceMappingURL=useFocusoutDismiss.js.map

package/dist/composables/useFocusoutDismiss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusoutDismiss.js","names":[],"sources":["../../src/composables/useFocusoutDismiss.ts"],"sourcesContent":["import type { Ref } from 'vue'\n\n// @a11y\n/**\n * Closes something as soon as the focus leaves the component — its floating panel\n * included.\n *\n * That last part is what makes this so short. A panel painted above the whole page is\n * still, in the document, a descendant of the component that owns it, so asking whether\n * the focus went somewhere inside the component is enough; nothing has to be watched at\n * the level of the page.\n *\n * The focus going nowhere in particular — out of the window, or back to the page body —\n * counts as leaving too, and closes.\n *\n * This exists because a panel the browser does not dismiss on its own has to be closed\n * by hand. The self-dismissing kind, the menu's, needs none of it.\n */\nexport function useFocusoutDismiss(\n  root: Ref<HTMLElement | null>,\n  close: () => void,\n): (event: FocusEvent) => void {\n  return (event: FocusEvent) => {\n    const next = event.relatedTarget as Node | null\n    if (!next || !root.value?.contains(next)) close()\n  }\n}\n"],"mappings":";AAkBA,SAAgB,EACd,GACA,GAC6B;CAC7B,QAAQ,MAAsB;EAC5B,IAAM,IAAO,EAAM;EACnB,CAAI,CAAC,KAAQ,CAAC,EAAK,OAAO,SAAS,CAAI,MAAG,EAAM;CAClD;AACF"}

package/dist/composables/useIconClickHandlers.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Tells a field whether the consumer wants its icons to be CLICKABLE.
+ *
+ * An icon inside a field is decoration until someone listens for a click on it, at which
+ * point it becomes a real button — one that can be reached with the keyboard and has a
+ * name of its own. This is what answers the question.
+ *
+ * Because those two events are declared by the component, Vue takes them out of the
+ * attributes it hands down, so the only place left to look is the element description
+ * Vue was given — and in BOTH spellings, since a template writes them with dashes and a
+ * render function in camel case.
+ *
+ * The answer is read ONCE and never revised: a listener attached later is not picked up.
+ * That case is marginal and the cost is accepted.
+ *
+ * The warning about a missing name belongs here rather than in each field. A button
+ * nothing can announce is a flaw of the arrangement itself, not of the component that
+ * happens to use it.
+ */
+export declare function useIconClickHandlers(options: {
+    name: string;
+    iconStartLabel?: string;
+    iconEndLabel?: string;
+}): {
+    hasIconStartHandler: boolean;
+    hasIconEndHandler: boolean;
+};

package/dist/composables/useIconClickHandlers.js

@@ -0,0 +1,13 @@
+import { getCurrentInstance as e } from "vue";
+//#region src/composables/useIconClickHandlers.ts
+function t(t) {
+	let n = e()?.vnode.props ?? {};
+	return {
+		hasIconStartHandler: "onClick:iconStart" in n || "onClick:icon-start" in n,
+		hasIconEndHandler: "onClick:iconEnd" in n || "onClick:icon-end" in n
+	};
+}
+//#endregion
+export { t as useIconClickHandlers };
+
+//# sourceMappingURL=useIconClickHandlers.js.map

package/dist/composables/useIconClickHandlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIconClickHandlers.js","names":[],"sources":["../../src/composables/useIconClickHandlers.ts"],"sourcesContent":["import { getCurrentInstance } from 'vue'\n\nimport { isDev } from '../utils/env'\n\n// @core\n/**\n * Tells a field whether the consumer wants its icons to be CLICKABLE.\n *\n * An icon inside a field is decoration until someone listens for a click on it, at which\n * point it becomes a real button — one that can be reached with the keyboard and has a\n * name of its own. This is what answers the question.\n *\n * Because those two events are declared by the component, Vue takes them out of the\n * attributes it hands down, so the only place left to look is the element description\n * Vue was given — and in BOTH spellings, since a template writes them with dashes and a\n * render function in camel case.\n *\n * The answer is read ONCE and never revised: a listener attached later is not picked up.\n * That case is marginal and the cost is accepted.\n *\n * The warning about a missing name belongs here rather than in each field. A button\n * nothing can announce is a flaw of the arrangement itself, not of the component that\n * happens to use it.\n */\nexport function useIconClickHandlers(options: {\n  name: string\n  iconStartLabel?: string\n  iconEndLabel?: string\n}): { hasIconStartHandler: boolean; hasIconEndHandler: boolean } {\n  const vnodeProps = getCurrentInstance()?.vnode.props ?? {}\n  const hasIconStartHandler =\n    'onClick:iconStart' in vnodeProps || 'onClick:icon-start' in vnodeProps\n  const hasIconEndHandler = 'onClick:iconEnd' in vnodeProps || 'onClick:icon-end' in vnodeProps\n\n  // @a11y @devwarn\n  if (isDev) {\n    if (hasIconStartHandler && !options.iconStartLabel)\n      console.warn(\n        `[${options.name}] clickable start icon without iconStartLabel — provide an accessible label.`,\n      )\n    if (hasIconEndHandler && !options.iconEndLabel)\n      console.warn(\n        `[${options.name}] clickable end icon without iconEndLabel — provide an accessible label.`,\n      )\n  }\n\n  return { hasIconStartHandler, hasIconEndHandler }\n}\n"],"mappings":";;AAwBA,SAAgB,EAAqB,GAI4B;CAC/D,IAAM,IAAa,EAAmB,CAAC,EAAE,MAAM,SAAS,CAAC;CAiBzD,OAAO;EAAE,qBAfP,uBAAuB,KAAc,wBAAwB;EAejC,mBAdJ,qBAAqB,KAAc,sBAAsB;CAcnC;AAClD"}

package/dist/composables/useMaskedField.d.ts

@@ -0,0 +1,65 @@
+import { Ref, WritableComputedRef } from 'vue';
+export interface MaskedFieldOptions<T extends string> {
+    /** The real input, which is written to directly — see below. */
+    fieldEl: Ref<HTMLInputElement | null>;
+    /** Whether the field can be typed into at all. Everything here is inert when it cannot. */
+    typing: () => boolean;
+    /** What the field shows when it is NOT being typed into: the value, written out in full. */
+    displayText: () => string;
+    /** The current value, or nothing. */
+    readValue: () => T | null;
+    /** Writes a new value. */
+    writeValue: (value: T | null) => void;
+    /** How many digits the mask holds: eight for a date, four for a time. */
+    maxDigits: () => number;
+    /** Lays a run of digits out as masked text. */
+    format: (digits: string) => string;
+    /**
+     * Where the caret goes so as to sit after a given number of digits.
+     *
+     * The flag says whether something was INSERTED rather than deleted, and it matters: on
+     * a deletion the caret must stay IN FRONT of the separator, or the next press of the key
+     * would step over it instead of erasing, and the key would appear to do nothing.
+     */
+    caret: (text: string, digitsBefore: number, inserting: boolean) => number;
+    /**
+     * Reads masked text back into a value, or nothing when it is not one yet.
+     *
+     * The flag marks the FINAL reading, when the reader leaves the field. A date expands a
+     * two-digit year only there: "26" must not be committed as 2026 while it may still be on
+     * its way to becoming it.
+     */
+    parse: (text: string, final: boolean) => T | null;
+    /** Writes a value as masked text, and nothing at all for no value. */
+    toMask: (value: T | null) => string;
+    /**
+     * Whether a value the reader has finished typing may be taken — within the bounds, not
+     * one of the excluded days. Everything is acceptable by default.
+     */
+    acceptable?: (value: T) => boolean;
+}
+export interface MaskedField {
+    /** The text currently in the field while it is being typed into. */
+    draft: Ref<string>;
+    /**
+     * TRAP — bind this with `v-model` on the field and NEVER as a one-way value. Without a
+     * listener for its updates, the field keeps an internal copy of the RAW text typed and
+     * writes it back on the next patch — which erases the mask precisely when the masked
+     * text did NOT change: a rejected character, or a digit past the last. Both components
+     * have a test locking it.
+     */
+    fieldModel: WritableComputedRef<string | number>;
+    /**
+     * Writes the text into both the draft and the input itself. Both are needed: Vue does
+     * not patch an element whose text it believes is unchanged, and after a reformat it
+     * often is.
+     */
+    writeField: (text: string, caret?: number) => void;
+    /** Takes the value as soon as what has been typed is complete and acceptable. */
+    commitLive: () => void;
+    /** Called as the reader leaves the field. It is safe to call twice. */
+    commitOrRevert: () => void;
+    /** The handler to bind to the field's input event. */
+    onFieldInput: (event: Event) => void;
+}
+export declare function useMaskedField<T extends string>(options: MaskedFieldOptions<T>): MaskedField;

package/dist/composables/useMaskedField.js

@@ -0,0 +1,54 @@
+import { digitsOf as e } from "../utils/text.js";
+import { computed as t, ref as n, watch as r } from "vue";
+//#region src/composables/useMaskedField.ts
+function i(i) {
+	let a = n(""), o = i.acceptable ?? (() => !0);
+	r(t(() => i.toMask(i.readValue())), (e) => {
+		e !== a.value && (a.value = e);
+	}, { immediate: !0 });
+	let s = t({
+		get: () => i.typing() ? a.value : i.displayText(),
+		set: (e) => {
+			i.typing() && (a.value = String(e ?? ""));
+		}
+	});
+	function c(e, t) {
+		a.value = e;
+		let n = i.fieldEl.value;
+		n && (n.value !== e && (n.value = e), t !== void 0 && n.setSelectionRange(t, t));
+	}
+	function l() {
+		let e = i.parse(a.value, !1);
+		e && o(e) && e !== i.readValue() && i.writeValue(e);
+	}
+	function u() {
+		if (!i.typing()) return;
+		if (!e(a.value)) {
+			i.readValue() !== null && i.writeValue(null), c("");
+			return;
+		}
+		let t = i.parse(a.value, !0);
+		if (t && o(t)) {
+			t !== i.readValue() && i.writeValue(t), c(i.toMask(t));
+			return;
+		}
+		c(i.toMask(i.readValue()));
+	}
+	function d(t) {
+		if (!i.typing()) return;
+		let n = t.target, r = n.value, a = n.selectionStart ?? r.length, o = e(r.slice(0, a)).length, s = e(r).slice(0, i.maxDigits()), u = !String(t.inputType ?? "").startsWith("delete"), d = i.format(s);
+		c(d, i.caret(d, Math.min(o, s.length), u)), l();
+	}
+	return {
+		draft: a,
+		fieldModel: s,
+		writeField: c,
+		commitLive: l,
+		commitOrRevert: u,
+		onFieldInput: d
+	};
+}
+//#endregion
+export { i as useMaskedField };
+
+//# sourceMappingURL=useMaskedField.js.map

package/dist/composables/useMaskedField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMaskedField.js","names":[],"sources":["../../src/composables/useMaskedField.ts"],"sourcesContent":["// @core — module-wide: mask, caret and commit are the field's own behaviour.\n/**\n * A field one types a date or a time into: the reader enters digits, and the separators\n * appear as they go.\n *\n * It is the FIELD half of the date and time pickers, the panel half being shared already.\n * What is injected here is only the vocabulary of the mask itself: how many digits it\n * holds, how those digits become text, where the caret should land, and how the text\n * becomes a value.\n *\n * The two differ in one respect worth knowing: a date's separator depends on the reader's\n * language while a time's is the same everywhere, so they work out the caret differently.\n * Nothing here cares — it only tells them whether the edit was an INSERTION, which is what\n * decides whether the caret steps over a separator.\n */\nimport { computed, ref, watch, type Ref, type WritableComputedRef } from 'vue'\n\nimport { digitsOf } from '../utils/text'\n\nexport interface MaskedFieldOptions<T extends string> {\n  /** The real input, which is written to directly — see below. */\n  fieldEl: Ref<HTMLInputElement | null>\n  /** Whether the field can be typed into at all. Everything here is inert when it cannot. */\n  typing: () => boolean\n  /** What the field shows when it is NOT being typed into: the value, written out in full. */\n  displayText: () => string\n  /** The current value, or nothing. */\n  readValue: () => T | null\n  /** Writes a new value. */\n  writeValue: (value: T | null) => void\n  /** How many digits the mask holds: eight for a date, four for a time. */\n  maxDigits: () => number\n  /** Lays a run of digits out as masked text. */\n  format: (digits: string) => string\n  /**\n   * Where the caret goes so as to sit after a given number of digits.\n   *\n   * The flag says whether something was INSERTED rather than deleted, and it matters: on\n   * a deletion the caret must stay IN FRONT of the separator, or the next press of the key\n   * would step over it instead of erasing, and the key would appear to do nothing.\n   */\n  caret: (text: string, digitsBefore: number, inserting: boolean) => number\n  /**\n   * Reads masked text back into a value, or nothing when it is not one yet.\n   *\n   * The flag marks the FINAL reading, when the reader leaves the field. A date expands a\n   * two-digit year only there: \"26\" must not be committed as 2026 while it may still be on\n   * its way to becoming it.\n   */\n  parse: (text: string, final: boolean) => T | null\n  /** Writes a value as masked text, and nothing at all for no value. */\n  toMask: (value: T | null) => string\n  /**\n   * Whether a value the reader has finished typing may be taken — within the bounds, not\n   * one of the excluded days. Everything is acceptable by default.\n   */\n  acceptable?: (value: T) => boolean\n}\n\nexport interface MaskedField {\n  /** The text currently in the field while it is being typed into. */\n  draft: Ref<string>\n  /**\n   * TRAP — bind this with `v-model` on the field and NEVER as a one-way value. Without a\n   * listener for its updates, the field keeps an internal copy of the RAW text typed and\n   * writes it back on the next patch — which erases the mask precisely when the masked\n   * text did NOT change: a rejected character, or a digit past the last. Both components\n   * have a test locking it.\n   */\n  fieldModel: WritableComputedRef<string | number>\n  /**\n   * Writes the text into both the draft and the input itself. Both are needed: Vue does\n   * not patch an element whose text it believes is unchanged, and after a reformat it\n   * often is.\n   */\n  writeField: (text: string, caret?: number) => void\n  /** Takes the value as soon as what has been typed is complete and acceptable. */\n  commitLive: () => void\n  /** Called as the reader leaves the field. It is safe to call twice. */\n  commitOrRevert: () => void\n  /** The handler to bind to the field's input event. */\n  onFieldInput: (event: Event) => void\n}\n\nexport function useMaskedField<T extends string>(options: MaskedFieldOptions<T>): MaskedField {\n  const draft = ref('')\n  const acceptable = options.acceptable ?? (() => true)\n\n  /*\n   * The current value, written as masked text. Being derived, it also tracks whatever the\n   * conversion reads — the language's own mask, the choice of clock — so neither component\n   * has to list those dependencies itself.\n   */\n  const maskedValue = computed(() => options.toMask(options.readValue()))\n\n  watch(\n    maskedValue,\n    (next) => {\n      // TRAP — this guard is what stops the field and the value chasing each other. A\n      // commit made while typing writes the value, which comes straight back here; without\n      // the test, the text being typed and the caret with it would be overwritten by text\n      // identical to what is already there.\n      if (next !== draft.value) draft.value = next\n    },\n    { immediate: true },\n  )\n\n  const fieldModel = computed<string | number>({\n    get: () => (options.typing() ? draft.value : options.displayText()),\n    set: (value) => {\n      if (options.typing()) draft.value = String(value ?? '')\n    },\n  })\n\n  function writeField(text: string, caret?: number) {\n    draft.value = text\n    const el = options.fieldEl.value\n    if (!el) return\n    if (el.value !== text) el.value = text\n    if (caret !== undefined) el.setSelectionRange(caret, caret)\n  }\n\n  function commitLive() {\n    const value = options.parse(draft.value, false)\n    if (value && acceptable(value) && value !== options.readValue()) options.writeValue(value)\n  }\n\n  /**\n   * Tidies up what was typed, or SILENTLY puts back what was there before.\n   *\n   * An entry that is incomplete, impossible — the 31st of February — outside the allowed\n   * bounds or excluded simply disappears in favour of the current value. There is\n   * deliberately no error state of our own competing with the `invalid` prop a consumer\n   * controls.\n   */\n  function commitOrRevert() {\n    if (!options.typing()) return\n    if (!digitsOf(draft.value)) {\n      if (options.readValue() !== null) options.writeValue(null)\n      writeField('')\n      return\n    }\n    const value = options.parse(draft.value, true)\n    if (value && acceptable(value)) {\n      if (value !== options.readValue()) options.writeValue(value)\n      // Rewritten in full: \"5/6/26\" becomes \"05/06/2026\".\n      writeField(options.toMask(value))\n      return\n    }\n    writeField(options.toMask(options.readValue()))\n  }\n\n  /**\n   * Reformats the field on every keystroke.\n   *\n   * The invariant to keep is that the number of digits to the LEFT of the caret survives\n   * the reformatting. Restoring an absolute position instead would misplace the caret on\n   * exactly the keystrokes that matter: a position jumps by one the moment a separator\n   * appears or disappears.\n   */\n  function onFieldInput(event: Event) {\n    if (!options.typing()) return\n    const el = event.target as HTMLInputElement\n    const raw = el.value\n    const caret = el.selectionStart ?? raw.length\n    const before = digitsOf(raw.slice(0, caret)).length\n    const digits = digitsOf(raw).slice(0, options.maxDigits())\n    const inserting = !String((event as InputEvent).inputType ?? '').startsWith('delete')\n    const text = options.format(digits)\n    writeField(text, options.caret(text, Math.min(before, digits.length), inserting))\n    commitLive()\n  }\n\n  return { draft, fieldModel, writeField, commitLive, commitOrRevert, onFieldInput }\n}\n"],"mappings":";;;AAoFA,SAAgB,EAAiC,GAA6C;CAC5F,IAAM,IAAQ,EAAI,EAAE,GACd,IAAa,EAAQ,qBAAqB;CAShD,EAFoB,QAAe,EAAQ,OAAO,EAAQ,UAAU,CAAC,CAGnE,IACC,MAAS;EAKR,AAAI,MAAS,EAAM,UAAO,EAAM,QAAQ;CAC1C,GACA,EAAE,WAAW,GAAK,CACpB;CAEA,IAAM,IAAa,EAA0B;EAC3C,WAAY,EAAQ,OAAO,IAAI,EAAM,QAAQ,EAAQ,YAAY;EACjE,MAAM,MAAU;GACd,AAAI,EAAQ,OAAO,MAAG,EAAM,QAAQ,OAAO,KAAS,EAAE;EACxD;CACF,CAAC;CAED,SAAS,EAAW,GAAc,GAAgB;EAChD,EAAM,QAAQ;EACd,IAAM,IAAK,EAAQ,QAAQ;EACtB,MACD,EAAG,UAAU,MAAM,EAAG,QAAQ,IAC9B,MAAU,KAAA,KAAW,EAAG,kBAAkB,GAAO,CAAK;CAC5D;CAEA,SAAS,IAAa;EACpB,IAAM,IAAQ,EAAQ,MAAM,EAAM,OAAO,EAAK;EAC9C,AAAI,KAAS,EAAW,CAAK,KAAK,MAAU,EAAQ,UAAU,KAAG,EAAQ,WAAW,CAAK;CAC3F;CAUA,SAAS,IAAiB;EACxB,IAAI,CAAC,EAAQ,OAAO,GAAG;EACvB,IAAI,CAAC,EAAS,EAAM,KAAK,GAAG;GAE1B,AADI,EAAQ,UAAU,MAAM,QAAM,EAAQ,WAAW,IAAI,GACzD,EAAW,EAAE;GACb;EACF;EACA,IAAM,IAAQ,EAAQ,MAAM,EAAM,OAAO,EAAI;EAC7C,IAAI,KAAS,EAAW,CAAK,GAAG;GAG9B,AAFI,MAAU,EAAQ,UAAU,KAAG,EAAQ,WAAW,CAAK,GAE3D,EAAW,EAAQ,OAAO,CAAK,CAAC;GAChC;EACF;EACA,EAAW,EAAQ,OAAO,EAAQ,UAAU,CAAC,CAAC;CAChD;CAUA,SAAS,EAAa,GAAc;EAClC,IAAI,CAAC,EAAQ,OAAO,GAAG;EACvB,IAAM,IAAK,EAAM,QACX,IAAM,EAAG,OACT,IAAQ,EAAG,kBAAkB,EAAI,QACjC,IAAS,EAAS,EAAI,MAAM,GAAG,CAAK,CAAC,CAAC,CAAC,QACvC,IAAS,EAAS,CAAG,CAAC,CAAC,MAAM,GAAG,EAAQ,UAAU,CAAC,GACnD,IAAY,CAAC,OAAQ,EAAqB,aAAa,EAAE,CAAC,CAAC,WAAW,QAAQ,GAC9E,IAAO,EAAQ,OAAO,CAAM;EAElC,AADA,EAAW,GAAM,EAAQ,MAAM,GAAM,KAAK,IAAI,GAAQ,EAAO,MAAM,GAAG,CAAS,CAAC,GAChF,EAAW;CACb;CAEA,OAAO;EAAE;EAAO;EAAY;EAAY;EAAY;EAAgB;CAAa;AACnF"}

package/dist/composables/usePopover.d.ts

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+export declare function usePopover(el: Ref<HTMLElement | null>): {
+    shown: Ref<boolean, boolean>;
+    syncShown: (event: Event) => void;
+    show: (source?: HTMLElement) => void;
+    hide: () => void;
+};

package/dist/composables/usePopover.js

@@ -0,0 +1,24 @@
+import { ref as e } from "vue";
+//#region src/composables/usePopover.ts
+function t(t) {
+	let n = e(!1);
+	function r(e) {
+		n.value = e.newState === "open";
+	}
+	function i(e) {
+		n.value || t.value?.showPopover(e ? { source: e } : void 0);
+	}
+	function a() {
+		n.value && t.value?.hidePopover();
+	}
+	return {
+		shown: n,
+		syncShown: r,
+		show: i,
+		hide: a
+	};
+}
+//#endregion
+export { t as usePopover };
+
+//# sourceMappingURL=usePopover.js.map

package/dist/composables/usePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopover.js","names":[],"sources":["../../src/composables/usePopover.ts"],"sourcesContent":["import { ref, type Ref } from 'vue'\n\n// @core\n/**\n * Everything needed to know whether a floating panel is open, and to open or close it.\n * It is the code half of a subject whose other half is `styles/floating.css`, which\n * handles where such a panel is placed.\n *\n * The browser's own support for these panels is imperative, where the rest of the design\n * system is declarative, and it sets two traps a plain local boolean would fall into.\n *\n * Asking to close a panel that is already closed — or to open one already open — throws.\n * Hence the guards, which make both calls safe to repeat.\n *\n * And a panel of the self-dismissing kind closes WITHOUT anyone asking, on a click outside\n * or on Escape. So the state is READ from the panel rather than guessed: it reports both\n * synchronously as it changes and again afterwards, and both have to be listened to — the\n * first is the only one that catches a dismissal in time, the second the only one the unit\n * tests' stub emits at all.\n *\n * TRAP — never assign that state by hand, tempting though it is inside the opening\n * function. A panel dismissed by the browser would then leave the state saying it is open,\n * and the next request to close it would be swallowed by the guard.\n */\n\n// @fallback\n// The option below is newer than the type definitions shipped with TypeScript, so the\n// element is described locally rather than being cast about at each call site.\ntype PopoverWithSource = HTMLElement & { showPopover(options?: { source?: HTMLElement }): void }\n\nexport function usePopover(el: Ref<HTMLElement | null>) {\n  const shown = ref(false)\n\n  /**\n   * Reads the state from the panel itself. It must be wired to BOTH events the panel\n   * emits, and on the panel element: these events do not travel up the tree.\n   */\n  function syncShown(event: Event) {\n    shown.value = (event as ToggleEvent).newState === 'open'\n  }\n\n  /**\n   * Opens the panel.\n   *\n   * TRAP — when the panel is opened from code rather than by a click, the element it\n   * belongs to must be named as the SOURCE of that opening. That is what re-establishes\n   * the relationship a click would have created: the panel's implicit anchor, and its\n   * place in the stack of open panels. Without it the panel has nothing to position itself\n   * against.\n   */\n  function show(source?: HTMLElement) {\n    if (!shown.value)\n      (el.value as PopoverWithSource | null)?.showPopover(source ? { source } : undefined)\n  }\n\n  /** Closes the panel. */\n  function hide() {\n    if (shown.value) el.value?.hidePopover()\n  }\n\n  return { shown, syncShown, show, hide }\n}\n"],"mappings":";;AA8BA,SAAgB,EAAW,GAA6B;CACtD,IAAM,IAAQ,EAAI,EAAK;CAMvB,SAAS,EAAU,GAAc;EAC/B,EAAM,QAAS,EAAsB,aAAa;CACpD;CAWA,SAAS,EAAK,GAAsB;EAClC,AAAK,EAAM,SACT,EAAI,OAAoC,YAAY,IAAS,EAAE,UAAO,IAAI,KAAA,CAAS;CACvF;CAGA,SAAS,IAAO;EACd,AAAI,EAAM,SAAO,EAAG,OAAO,YAAY;CACzC;CAEA,OAAO;EAAE;EAAO;EAAW;EAAM;CAAK;AACxC"}

package/dist/composables/useProgressValue.d.ts

@@ -0,0 +1,13 @@
+import { ComputedRef } from 'vue';
+/**
+ * Brings a progress value into line, for the bar and the ring alike.
+ *
+ * It returns two things: the value itself, held inside the range it is allowed to take,
+ * and how far along that range it sits, as a number between nothing and one. Everything
+ * both components draw comes from those two — how much of the bar is filled, how much of
+ * the ring is drawn, the percentage written out, and what a screen reader announces.
+ */
+export declare function useProgressValue(value: () => number, max: () => number): {
+    clamped: ComputedRef<number>;
+    fraction: ComputedRef<number>;
+};

package/dist/composables/useProgressValue.js

@@ -0,0 +1,14 @@
+import { clamp as e } from "../utils/number.js";
+import { computed as t } from "vue";
+//#region src/composables/useProgressValue.ts
+function n(n, r) {
+	let i = t(() => e(n(), 0, Math.max(r(), 0)));
+	return {
+		clamped: i,
+		fraction: t(() => i.value / (r() || 1))
+	};
+}
+//#endregion
+export { n as useProgressValue };
+
+//# sourceMappingURL=useProgressValue.js.map

package/dist/composables/useProgressValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProgressValue.js","names":[],"sources":["../../src/composables/useProgressValue.ts"],"sourcesContent":["import { computed, type ComputedRef } from 'vue'\nimport { clamp } from '../utils/number'\n\n// @core\n/**\n * Brings a progress value into line, for the bar and the ring alike.\n *\n * It returns two things: the value itself, held inside the range it is allowed to take,\n * and how far along that range it sits, as a number between nothing and one. Everything\n * both components draw comes from those two — how much of the bar is filled, how much of\n * the ring is drawn, the percentage written out, and what a screen reader announces.\n */\nexport function useProgressValue(\n  value: () => number,\n  max: () => number,\n): { clamped: ComputedRef<number>; fraction: ComputedRef<number> } {\n  const clamped = computed(() => clamp(value(), 0, Math.max(max(), 0)))\n\n  /**\n   * How far along, from 0 to 1 — the number every part of the rendering is driven by.\n   * The fallback denominator is what keeps a maximum of zero from dividing by nothing.\n   */\n  const fraction = computed(() => clamped.value / (max() || 1))\n\n  return { clamped, fraction }\n}\n"],"mappings":";;;AAYA,SAAgB,EACd,GACA,GACiE;CACjE,IAAM,IAAU,QAAe,EAAM,EAAM,GAAG,GAAG,KAAK,IAAI,EAAI,GAAG,CAAC,CAAC,CAAC;CAQpE,OAAO;EAAE;EAAS,UAFD,QAAe,EAAQ,SAAS,EAAI,KAAK,EAExC;CAAS;AAC7B"}

package/dist/composables/useRootAttrs.d.ts

@@ -0,0 +1,34 @@
+import { ComputedRef, StyleValue } from 'vue';
+/**
+ * The shape of a class binding. It is written out here rather than imported because the
+ * type exists in Vue's DOM runtime under another name and the `vue` package does not
+ * pass it on. Without it the class stays untyped, and a template refuses to bind it.
+ */
+type ClassBinding = false | null | undefined | string | Record<string, unknown> | ClassBinding[];
+/**
+ * Splits the attributes a consumer wrote on a component in two, for the components whose
+ * outermost element is only a container: the two text fields, the search field, the
+ * table, the two pickers, the row of tabs.
+ *
+ * Everything a consumer writes on a component lands, by default, on that outermost
+ * element. Here that is the wrong place for most of it. Styling belongs on the container,
+ * since that is the box the consumer sees and positions; everything else belongs on the
+ * element that actually DOES something — the real input, the real control. Left
+ * unsplit, the field's name, the fact that it is required and everything describing it
+ * for a screen reader all end up on a decorative box, where a form ignores them and a
+ * screen reader never finds them.
+ *
+ * Turning the default placement off stays the component's own business: that is a
+ * compilation option of the file, not something that can be arranged from here.
+ *
+ * The whole set is handed back as well, for the few components that need to look
+ * something up in it — an identifier the consumer supplied, which must win over the
+ * generated one, or a description that has to be merged rather than replaced.
+ */
+export declare function useRootAttrs(): {
+    attrs: Record<string, unknown>;
+    rootClass: ComputedRef<ClassBinding>;
+    rootStyle: ComputedRef<StyleValue>;
+    forwardedAttrs: ComputedRef<Record<string, unknown>>;
+};
+export {};

package/dist/composables/useRootAttrs.js

@@ -0,0 +1,15 @@
+import { computed as e, useAttrs as t } from "vue";
+//#region src/composables/useRootAttrs.ts
+function n() {
+	let n = t();
+	return {
+		attrs: n,
+		rootClass: e(() => n.class),
+		rootStyle: e(() => n.style),
+		forwardedAttrs: e(() => Object.fromEntries(Object.entries(n).filter(([e]) => e !== "class" && e !== "style")))
+	};
+}
+//#endregion
+export { n as useRootAttrs };
+
+//# sourceMappingURL=useRootAttrs.js.map

package/dist/composables/useRootAttrs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRootAttrs.js","names":[],"sources":["../../src/composables/useRootAttrs.ts"],"sourcesContent":["import { computed, useAttrs, type ComputedRef, type StyleValue } from 'vue'\n\n/**\n * The shape of a class binding. It is written out here rather than imported because the\n * type exists in Vue's DOM runtime under another name and the `vue` package does not\n * pass it on. Without it the class stays untyped, and a template refuses to bind it.\n */\ntype ClassBinding = false | null | undefined | string | Record<string, unknown> | ClassBinding[]\n\n// @a11y\n/**\n * Splits the attributes a consumer wrote on a component in two, for the components whose\n * outermost element is only a container: the two text fields, the search field, the\n * table, the two pickers, the row of tabs.\n *\n * Everything a consumer writes on a component lands, by default, on that outermost\n * element. Here that is the wrong place for most of it. Styling belongs on the container,\n * since that is the box the consumer sees and positions; everything else belongs on the\n * element that actually DOES something — the real input, the real control. Left\n * unsplit, the field's name, the fact that it is required and everything describing it\n * for a screen reader all end up on a decorative box, where a form ignores them and a\n * screen reader never finds them.\n *\n * Turning the default placement off stays the component's own business: that is a\n * compilation option of the file, not something that can be arranged from here.\n *\n * The whole set is handed back as well, for the few components that need to look\n * something up in it — an identifier the consumer supplied, which must win over the\n * generated one, or a description that has to be merged rather than replaced.\n */\nexport function useRootAttrs(): {\n  attrs: Record<string, unknown>\n  rootClass: ComputedRef<ClassBinding>\n  rootStyle: ComputedRef<StyleValue>\n  forwardedAttrs: ComputedRef<Record<string, unknown>>\n} {\n  const attrs = useAttrs()\n\n  return {\n    attrs,\n    rootClass: computed(() => attrs.class as ClassBinding),\n    rootStyle: computed(() => attrs.style as StyleValue),\n    forwardedAttrs: computed(() =>\n      Object.fromEntries(\n        Object.entries(attrs).filter(([key]) => key !== 'class' && key !== 'style'),\n      ),\n    ),\n  }\n}\n"],"mappings":";;AA8BA,SAAgB,IAKd;CACA,IAAM,IAAQ,EAAS;CAEvB,OAAO;EACL;EACA,WAAW,QAAe,EAAM,KAAqB;EACrD,WAAW,QAAe,EAAM,KAAmB;EACnD,gBAAgB,QACd,OAAO,YACL,OAAO,QAAQ,CAAK,CAAC,CAAC,QAAQ,CAAC,OAAS,MAAQ,WAAW,MAAQ,OAAO,CAC5E,CACF;CACF;AACF"}

package/dist/composables/useTextLimit.d.ts

@@ -0,0 +1,31 @@
+import { ComputedRef, Ref } from 'vue';
+/** The least this needs of the real control — the two kinds of field both offer it. */
+interface ValidatableControl {
+    setCustomValidity: (message: string) => void;
+}
+/**
+ * How much has been typed against how much is allowed: the "12/80" counter under a
+ * field, whether the allowance has been passed, and the SOFT limit.
+ *
+ * A soft limit lets the reader keep typing past the allowance and puts the field in
+ * error instead of cutting them off mid-word. That error is declared to the BROWSER
+ * rather than invented here, and three things follow from it for free: the field only
+ * turns red once the reader has actually interacted with it, exactly as a native error
+ * does; the form refuses to submit; and anyone inspecting the field finds the error where
+ * they would look for any other. The price is that the component then owns that error
+ * outright for as long as the soft limit is on.
+ *
+ * The effect runs AFTER the render rather than before it, because the reference to the
+ * real element is not filled in yet at the earlier point. It does nothing at all during a
+ * server render, where there is no element to speak to.
+ */
+export declare function useTextLimit(options: {
+    el: Ref<ValidatableControl | null>;
+    text: () => string;
+    maxlength: () => number | undefined;
+    softLimit: () => boolean;
+}): {
+    counterText: ComputedRef<string>;
+    over: ComputedRef<boolean>;
+};
+export {};

package/dist/composables/useTextLimit.js

@@ -0,0 +1,19 @@
+import { useMessages as e } from "../i18n/state.js";
+import { computed as t, watchEffect as n } from "vue";
+//#region src/composables/useTextLimit.ts
+function r(r) {
+	let i = t(() => r.text().length), a = t(() => r.maxlength()), o = e();
+	return n(() => {
+		let e = r.el.value;
+		if (!e) return;
+		let t = a.value;
+		r.softLimit() && t != null && i.value > t ? e.setCustomValidity(o.value.field.limitExceeded(t)) : e.setCustomValidity("");
+	}, { flush: "post" }), {
+		counterText: t(() => a.value == null ? `${i.value}` : `${i.value}/${a.value}`),
+		over: t(() => a.value != null && i.value > a.value)
+	};
+}
+//#endregion
+export { r as useTextLimit };
+
+//# sourceMappingURL=useTextLimit.js.map

package/dist/composables/useTextLimit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextLimit.js","names":[],"sources":["../../src/composables/useTextLimit.ts"],"sourcesContent":["import { computed, watchEffect, type ComputedRef, type Ref } from 'vue'\n\nimport { useMessages } from '../i18n/state'\n\n/** The least this needs of the real control — the two kinds of field both offer it. */\ninterface ValidatableControl {\n  setCustomValidity: (message: string) => void\n}\n\n// @core\n/**\n * How much has been typed against how much is allowed: the \"12/80\" counter under a\n * field, whether the allowance has been passed, and the SOFT limit.\n *\n * A soft limit lets the reader keep typing past the allowance and puts the field in\n * error instead of cutting them off mid-word. That error is declared to the BROWSER\n * rather than invented here, and three things follow from it for free: the field only\n * turns red once the reader has actually interacted with it, exactly as a native error\n * does; the form refuses to submit; and anyone inspecting the field finds the error where\n * they would look for any other. The price is that the component then owns that error\n * outright for as long as the soft limit is on.\n *\n * The effect runs AFTER the render rather than before it, because the reference to the\n * real element is not filled in yet at the earlier point. It does nothing at all during a\n * server render, where there is no element to speak to.\n */\nexport function useTextLimit(options: {\n  el: Ref<ValidatableControl | null>\n  text: () => string\n  maxlength: () => number | undefined\n  softLimit: () => boolean\n}): { counterText: ComputedRef<string>; over: ComputedRef<boolean> } {\n  const length = computed(() => options.text().length)\n  const max = computed(() => options.maxlength())\n  const m = useMessages()\n\n  // The dictionary is read INSIDE the effect, which is what makes the error message\n  // rewrite itself when the language is changed after the component is on screen. The\n  // branches are spelled out rather than written as a ternary so that TypeScript can\n  // narrow the limit to a number.\n  watchEffect(\n    () => {\n      const el = options.el.value\n      if (!el) return\n      const limit = max.value\n      if (options.softLimit() && limit != null && length.value > limit) {\n        el.setCustomValidity(m.value.field.limitExceeded(limit))\n      } else {\n        el.setCustomValidity('')\n      }\n    },\n    { flush: 'post' },\n  )\n\n  return {\n    counterText: computed(() =>\n      max.value != null ? `${length.value}/${max.value}` : `${length.value}`,\n    ),\n    over: computed(() => max.value != null && length.value > max.value),\n  }\n}\n"],"mappings":";;;AA0BA,SAAgB,EAAa,GAKwC;CACnE,IAAM,IAAS,QAAe,EAAQ,KAAK,CAAC,CAAC,MAAM,GAC7C,IAAM,QAAe,EAAQ,UAAU,CAAC,GACxC,IAAI,EAAY;CAoBtB,OAdA,QACQ;EACJ,IAAM,IAAK,EAAQ,GAAG;EACtB,IAAI,CAAC,GAAI;EACT,IAAM,IAAQ,EAAI;EAClB,AAAI,EAAQ,UAAU,KAAK,KAAS,QAAQ,EAAO,QAAQ,IACzD,EAAG,kBAAkB,EAAE,MAAM,MAAM,cAAc,CAAK,CAAC,IAEvD,EAAG,kBAAkB,EAAE;CAE3B,GACA,EAAE,OAAO,OAAO,CAClB,GAEO;EACL,aAAa,QACX,EAAI,SAAS,OAAwC,GAAG,EAAO,UAA3C,GAAG,EAAO,MAAM,GAAG,EAAI,OAC7C;EACA,MAAM,QAAe,EAAI,SAAS,QAAQ,EAAO,QAAQ,EAAI,KAAK;CACpE;AACF"}