vectis-ui 0.1.0 → 0.8.0

package/dist/composables/useFieldPanel.js

@@ -1,39 +1,59 @@
-import { useFocusoutDismiss as e } from "./useFocusoutDismiss.js";
-import { ref as t } from "vue";
+import { NO_BUTTON_GROUP as e, buttonGroupKey as t } from "../components/VButton/context.js";
+import { useFocusoutDismiss as n } from "./useFocusoutDismiss.js";
+import { provide as r, ref as i, useId as a } 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 o(o) {
+	let s = i(!1), c = () => o.openOnFocus?.() ?? !1, l = a();
+	r(t, e);
+	function u(e = !c()) {
+		o.disabled() || s.value || (o.onOpen?.(), o.panelRef.value?.show(), e && requestAnimationFrame(() => o.focusInPanel()));
 	}
-	function a(e = !1) {
-		r.value && (n.panelRef.value?.hide(), n.onClose?.(), e && n.fieldEl.value?.focus());
+	function d() {
+		s.value && (o.panelRef.value?.close(), o.onClose?.());
 	}
-	function o(e) {
-		e.target.closest(".v-input-action") || n.disabled() || i();
+	let f = !1;
+	function p() {
+		f = !0, o.field.value?.focus(), f = !1;
 	}
-	let s = e(n.rootEl, () => a(!1));
-	function c(e) {
+	function m() {
+		s.value && (d(), p());
+	}
+	function h() {
+		f || !c() || u(!1);
+	}
+	function g() {
+		s.value ? m() : u(!0);
+	}
+	function _(e) {
+		e.target.closest(".v-input-action") || u();
+	}
+	let v = n(o.rootEl, d);
+	function y(e) {
 		e.target?.closest("button, a, input, select, textarea, [tabindex]") || e.preventDefault();
 	}
-	function l(e) {
+	function b(e) {
 		if (e.key === "Escape") {
-			r.value && (e.preventDefault(), a(!0));
+			s.value && (e.preventDefault(), m());
 			return;
 		}
-		(e.key === "ArrowDown" || e.key === "Enter") && !r.value && !e.defaultPrevented && (e.preventDefault(), i(!0));
+		(e.key === "ArrowDown" || e.key === "Enter") && !s.value && !e.defaultPrevented && (e.preventDefault(), u(!0));
 	}
 	return {
-		open: r,
-		openPanel: i,
-		closePanel: a,
-		onControlClick: o,
-		onFocusout: s,
-		onKeydown: l,
-		onPanelMousedown: c
+		open: s,
+		panelId: l,
+		openPanel: u,
+		closePanel: d,
+		closeAndFocus: m,
+		focusField: p,
+		onFieldFocus: h,
+		toggleFromIcon: g,
+		onControlClick: _,
+		onFocusout: v,
+		onKeydown: b,
+		onPanelMousedown: y
 	};
 }
 //#endregion
-export { n as useFieldPanel };
+export { o as useFieldPanel };
 
 //# sourceMappingURL=useFieldPanel.js.map

package/dist/composables/useFieldPanel.js.map

@@ -1 +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"}
+{"version":3,"file":"useFieldPanel.js","names":[],"sources":["../../src/composables/useFieldPanel.ts"],"sourcesContent":["import { provide, ref, useId } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { NO_BUTTON_GROUP, buttonGroupKey } from '../components/VButton/context'\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  close: () => 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  field: 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 focusing the field opens the panel. It does not by default.\n   *\n   * A field one TYPES into says yes, and its panel then opens WITHOUT taking the caret, so\n   * typing carries on and the down arrow remains the one explicit way in. A click on such a\n   * field leaves the focus where it is for the same reason.\n   */\n  openOnFocus?: () => boolean\n}\n\n// @a11y @keyboard @core\n/**\n * The \"field + `VPopover` in `mode=\"manual\"`\" shell of VDateInput and VTimeInput.\n *\n * A `manual` popover does nothing on its own: no light dismiss, no focus move, no focus\n * return. This is exactly that minimum; what is particular to either component arrives\n * through `onOpen`/`onClose`.\n *\n * TRAP — the panel is WRITTEN imperatively and READ back by model. Bind `open` as\n * `v-model:open` so the DOM feeds it, but the write must stay synchronous: the `rAF` that\n * moves focus assumes the panel is already open when it is armed, and the model would put\n * a tick in between.\n */\nexport function useFieldPanel(options: UseFieldPanelOptions) {\n  const open = ref(false)\n  const openOnFocus = () => options.openOnFocus?.() ?? false\n\n  /** The id the panel carries, for the field's `aria-controls`. */\n  const panelId = useId()\n\n  // @core\n  // TRAP — this stops a VButtonGroup's or a VInputGroup's row context at the field's\n  // boundary. The picker in the panel sizes its own buttons — VDatePicker writes `size=\"sm\"`\n  // on its navigation, VTimePicker `size=\"lg\"` on its hour and minute cells — and a group\n  // WINS over a button's prop: without this line a VInputGroup would resize them to its own\n  // height, which only shows once the panel is open and nothing in the sheet or the template\n  // would say why. It is the JS counterpart of the `.v-overlay` guard every VButtonGroup\n  // selector carries — a floating panel is not a segment of the row that opened it.\n  provide(buttonGroupKey, NO_BUTTON_GROUP)\n\n  function openPanel(moveFocus = !openOnFocus()) {\n    if (options.disabled() || open.value) return\n    options.onOpen?.()\n    options.panelRef.value?.show()\n    // @a11y\n    // A `manual` popover moves focus nowhere, so it is moved by hand — a frame later,\n    // the panel not being painted yet, and nothing invisible can take focus.\n    if (moveFocus) requestAnimationFrame(() => options.focusInPanel())\n  }\n\n  /** Closes the panel and leaves the focus where it is: the focus has already gone elsewhere. */\n  function closePanel() {\n    if (!open.value) return\n    options.panelRef.value?.close()\n    options.onClose?.()\n  }\n\n  // @a11y\n  /*\n   * TRAP — handing the focus back to the field is what makes a field that opens ON FOCUS\n   * reopen the panel that was just closed: the two would chase each other and the panel\n   * would never close. The lock covers the focus call, which is synchronous.\n   *\n   * EVERY focus this shell or a component gives the field must go through `focusField`,\n   * `closeAndFocus` included. Focusing the field directly brings the loop straight back.\n   */\n  let refocusing = false\n\n  /**\n   * Puts the focus on the field without opening the panel.\n   *\n   * A component emptying its value calls it BEFORE the field focuses itself, and that order\n   * is the point: focusing an element that already has the focus emits no event at all, so\n   * the field's own call that follows is inert and the panel stays shut.\n   */\n  function focusField() {\n    refocusing = true\n    options.field.value?.focus()\n    refocusing = false\n  }\n\n  /** Closes the panel and hands the focus back to the field, under the lock above. */\n  function closeAndFocus() {\n    if (!open.value) return\n    closePanel()\n    focusField()\n  }\n\n  /** The field's focus handler: opens the panel on a field that asks for it. */\n  function onFieldFocus() {\n    if (refocusing || !openOnFocus()) return\n    openPanel(false)\n  }\n\n  /**\n   * The icon at the end of the field. Clicking it is an explicit request for the panel, and\n   * the focus has already left the field for the button — so carrying it into the panel is\n   * right whatever `openOnFocus` says.\n   */\n  function toggleFromIcon() {\n    if (open.value) closeAndFocus()\n    else openPanel(true)\n  }\n\n  function onControlClick(event: MouseEvent) {\n    // A click on one of the field's own buttons is that button's business: reacting here\n    // too would open the panel the clear cross has just given a reason to close.\n    if ((event.target as HTMLElement).closest('.v-input-action')) return\n    openPanel()\n  }\n\n  // @a11y\n  const onFocusout = useFocusoutDismiss(options.rootEl, closePanel)\n\n  // @a11y\n  /*\n   * TRAP — clicking a non-focusable pixel of the panel (padding, the gutter between cells)\n   * hands focus back to `<body>`. `onFocusout` above then fires with a null `relatedTarget`,\n   * reads it as an exit — rightly — and closes a panel the reader has just clicked.\n   *\n   * The filter is essential: VCombobox's unconditional `preventDefault` is safe there\n   * because focus never leaves its field, but here it would rob the days and the navigation\n   * arrows of focus and desynchronize VDatePicker's roving.\n   *\n   * Invisible in jsdom, where clicking moves no focus — the `ClicDansLeVide` play functions\n   * of both components 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        closeAndFocus()\n      }\n      return\n    }\n    // TRAP — a key already consumed INSIDE the panel is ignored. An Enter that selected a\n    // day has just CLOSED the panel, and without the guard would reopen it as it bubbles.\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 focus, whatever `openOnFocus` says:\n      // otherwise ArrowDown opens a panel the keyboard cannot reach.\n      openPanel(true)\n    }\n  }\n\n  return {\n    open,\n    panelId,\n    openPanel,\n    closePanel,\n    closeAndFocus,\n    focusField,\n    onFieldFocus,\n    toggleFromIcon,\n    onControlClick,\n    onFocusout,\n    onKeydown,\n    onPanelMousedown,\n  }\n}\n"],"mappings":";;;;AA0DA,SAAgB,EAAc,GAA+B;CAC3D,IAAM,IAAO,EAAI,EAAK,GAChB,UAAoB,EAAQ,cAAc,KAAK,IAG/C,IAAU,EAAM;CAUtB,EAAQ,GAAgB,CAAe;CAEvC,SAAS,EAAU,IAAY,CAAC,EAAY,GAAG;EACzC,EAAQ,SAAS,KAAK,EAAK,UAC/B,EAAQ,SAAS,GACjB,EAAQ,SAAS,OAAO,KAAK,GAIzB,KAAW,4BAA4B,EAAQ,aAAa,CAAC;CACnE;CAGA,SAAS,IAAa;EACf,EAAK,UACV,EAAQ,SAAS,OAAO,MAAM,GAC9B,EAAQ,UAAU;CACpB;CAWA,IAAI,IAAa;CASjB,SAAS,IAAa;EAGpB,AAFA,IAAa,IACb,EAAQ,MAAM,OAAO,MAAM,GAC3B,IAAa;CACf;CAGA,SAAS,IAAgB;EAClB,EAAK,UACV,EAAW,GACX,EAAW;CACb;CAGA,SAAS,IAAe;EAClB,KAAc,CAAC,EAAY,KAC/B,EAAU,EAAK;CACjB;CAOA,SAAS,IAAiB;EACxB,AAAI,EAAK,QAAO,EAAc,IACzB,EAAU,EAAI;CACrB;CAEA,SAAS,EAAe,GAAmB;EAGpC,EAAM,OAAuB,QAAQ,iBAAiB,KAC3D,EAAU;CACZ;CAGA,IAAM,IAAa,EAAmB,EAAQ,QAAQ,CAAU;CAehE,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,EAAc;GAEhB;EACF;EAGA,CACG,EAAM,QAAQ,eAAe,EAAM,QAAQ,YAC5C,CAAC,EAAK,SACN,CAAC,EAAM,qBAEP,EAAM,eAAe,GAGrB,EAAU,EAAI;CAElB;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/useFileDrop.d.ts

@@ -1,26 +1,4 @@
 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;

package/dist/composables/useFileDrop.js.map

@@ -1 +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"}
+{"version":3,"file":"useFileDrop.js","names":[],"sources":["../../src/composables/useFileDrop.ts"],"sourcesContent":["// @core\n/**\n * The drop-target plumbing of VFileInput and VFilePicker. It exists once rather than twice\n * because of the two traps it carries.\n *\n * `dragover` MUST `preventDefault`, or the browser refuses the drop and then NAVIGATES to\n * the file, replacing the page.\n *\n * And the state is a depth COUNTER, never a boolean: `dragleave` fires every time the\n * pointer crosses into a child, so a flag would flicker off under the cursor. `drop` forces\n * the depth back to 0 — a drag leaving the window never sends the matching `dragleave`, and\n * `currentTarget.contains(relatedTarget)`, the other classic fix, is useless there since\n * `relatedTarget` is null in exactly that case.\n *\n * `enabled` is a getter, read at event time, so a component disabled mid-drag stops\n * accepting with nothing re-bound.\n */\n\nimport { computed, ref, type ComputedRef } from 'vue'\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":";;AAoBA,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

@@ -1,36 +1,64 @@
 import { ComputedRef, Ref } from 'vue';
-import { FileLimits, FileRejection } from '../utils/file.js';
+import { FileRejection } from '../utils/file.js';
+/** The props both components declare under the same names, read at the moment they matter. */
+export interface FileFieldProps {
+    multiple: boolean;
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    maxTotalSize?: number;
+    disabled: boolean;
+    readonly: boolean;
+}
+/** The events both components declare under the same names and with the same payloads. */
+export interface FileFieldEmit {
+    (event: 'change', files: File[]): void;
+    (event: 'reject', rejection: FileRejection): void;
+    (event: 'remove', file: File, index: number): void;
+}
 export interface FileFieldOptions {
     /** The component's value — always a list of files, whether one or several are allowed. */
     model: Ref<File[]>;
+    props: FileFieldProps;
+    emit: FileFieldEmit;
     /** 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.
+     * Whether the component is disabled, the row it sits in taken into account. Left out, the
+     * `disabled` prop answers alone.
+     */
+    disabled?: Ref<boolean>;
+    /**
+     * Attributes to withhold from the visible control too. VFileInput withholds
+     * `aria-describedby`, which it re-aggregates itself: a binding written after the spread
+     * would replace the consumer's rather than merge with it.
      */
     excludeFromControl?: readonly string[];
+    /** Called once the selection has been emptied by `clear`, before `change` is emitted. */
+    onClear?: () => void;
+    /**
+     * The component's own development warnings, one message per condition that holds. They
+     * follow the same rule as the shared ones: each is given once per instance.
+     */
+    warnings?: () => (string | false)[];
 }
 export declare function useFileField(options: FileFieldOptions): {
     fileEl: Ref<HTMLInputElement | null, HTMLInputElement | null>;
-    nativeAttrs: ComputedRef<{
-        [k: string]: unknown;
+    enabled: ComputedRef<boolean>;
+    nativeInputAttrs: ComputedRef<{
+        type: string;
+        tabindex: number;
+        'aria-hidden': "true";
+        accept: string | undefined;
+        multiple: true | undefined;
+        disabled: true | undefined;
+        onChange: (event: Event) => void;
     }>;
     controlAttrs: ComputedRef<{
         [k: string]: unknown;
     }>;
     acceptFiles: (incoming: File[]) => void;
-    onNativeChange: (event: Event) => void;
     openPicker: () => void;
-    resetNative: () => void;
+    removeAt: (index: number) => File | undefined;
+    clear: () => void;
 };

package/dist/composables/useFileField.js

@@ -8,35 +8,55 @@ var r = [
 	"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 { model: a, props: o, emit: s } = i, c = n(null), l = () => i.disabled?.value ?? o.disabled, u = t(() => !l() && !o.readonly), d = 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 f() {
+		c.value && (c.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
+	function p(t) {
+		let n = o.multiple ? a.value : [], { accepted: r, rejected: i } = e(t, n, {
+			accept: o.accept,
+			maxSize: o.maxSize,
+			maxFiles: o.multiple ? o.maxFiles : 1,
+			maxTotalSize: o.maxTotalSize
 		});
-		for (let e of s) i.onReject(e);
-		c(), o.length !== 0 && (i.model.value = [...r, ...o], i.onChange(i.model.value));
+		for (let e of i) s("reject", e);
+		f(), r.length !== 0 && (a.value = [...n, ...r], s("change", a.value));
 	}
-	function u(e) {
-		l([...e.target.files ?? []]);
+	function m(e) {
+		p([...e.target.files ?? []]);
 	}
-	function d() {
-		i.enabled() && a.value?.click();
+	let h = t(() => ({
+		...Object.fromEntries(Object.entries(i.forwardedAttrs.value).filter(([e]) => r.includes(e))),
+		type: "file",
+		tabindex: -1,
+		"aria-hidden": "true",
+		accept: o.accept,
+		multiple: o.multiple || void 0,
+		disabled: l() || void 0,
+		onChange: m
+	}));
+	function g() {
+		u.value && c.value?.click();
+	}
+	function _(e) {
+		let t = a.value[e];
+		if (!(!t || !u.value)) return a.value = a.value.filter((t, n) => n !== e), f(), s("remove", t, e), s("change", a.value), t;
+	}
+	function v() {
+		a.value = [], f(), i.onClear?.(), s("change", a.value);
 	}
 	return {
-		fileEl: a,
-		nativeAttrs: o,
-		controlAttrs: s,
-		acceptFiles: l,
-		onNativeChange: u,
-		openPicker: d,
-		resetNative: c
+		fileEl: c,
+		enabled: u,
+		nativeInputAttrs: h,
+		controlAttrs: d,
+		acceptFiles: p,
+		openPicker: g,
+		removeAt: _,
+		clear: v
 	};
 }
 //#endregion

package/dist/composables/useFileField.js.map

@@ -1 +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"}
+{"version":3,"file":"useFileField.js","names":[],"sources":["../../src/composables/useFileField.ts"],"sourcesContent":["// @core\n/**\n * The hidden `<input type=\"file\">` gate of VFileInput and VFilePicker.\n *\n * The JS here is imposed by the platform, not chosen: a dialog opens ONLY from a real click\n * on a file input, and a `FileList` cannot be written from a template. So what the reader\n * clicks can never BE the file input, and the file input can only ever be a SOURCE of files.\n *\n * Hence `.click()` and not `showPicker()` — both need a transient user activation, but\n * `showPicker()` THROWS without one where `.click()` is merely inert — and hence\n * `resetNative()` on every path: without it, re-picking the SAME file after a clear fires no\n * `change` at all and that file becomes unreachable.\n *\n * Everything the two components did identically lives here, so the two cannot drift: the\n * attributes of the hidden input, the screening of what comes in, the removal of one file and\n * the emptying of all of them, and the development warnings both of them owe the integrator.\n */\nimport { computed, getCurrentInstance, ref, watchEffect, type ComputedRef, type Ref } from 'vue'\n\nimport { isDev } from '../utils/env'\nimport { screenFiles, type FileRejection } from '../utils/file'\n\n// @a11y\n/**\n * The attributes belonging on the hidden file input rather than on the visible control.\n *\n * The wrapper-root pattern assumes ONE functional element and there are two here, so the\n * attrs split in three: `class`/`style` on the root, these four on the input because they\n * are what the FORM reads, everything else on the element the READER focuses. The buckets\n * must not overlap — a duplicated `id` breaks a consumer's `<label for>`, a duplicated\n * `name` gets the field announced twice.\n */\nconst NATIVE_ONLY = ['name', 'required', 'form', 'capture']\n\n/** The props both components declare under the same names, read at the moment they matter. */\nexport interface FileFieldProps {\n  multiple: boolean\n  accept?: string\n  maxSize?: number\n  maxFiles?: number\n  maxTotalSize?: number\n  disabled: boolean\n  readonly: boolean\n}\n\n/** The events both components declare under the same names and with the same payloads. */\nexport interface FileFieldEmit {\n  (event: 'change', files: File[]): void\n  (event: 'reject', rejection: FileRejection): void\n  (event: 'remove', file: File, index: number): void\n}\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  props: FileFieldProps\n  emit: FileFieldEmit\n  /** The attributes the consumer wrote, minus styling, still to be split in two. */\n  forwardedAttrs: ComputedRef<Record<string, unknown>>\n  /**\n   * Whether the component is disabled, the row it sits in taken into account. Left out, the\n   * `disabled` prop answers alone.\n   */\n  disabled?: Ref<boolean>\n  /**\n   * Attributes to withhold from the visible control too. VFileInput withholds\n   * `aria-describedby`, which it re-aggregates itself: a binding written after the spread\n   * would replace the consumer's rather than merge with it.\n   */\n  excludeFromControl?: readonly string[]\n  /** Called once the selection has been emptied by `clear`, before `change` is emitted. */\n  onClear?: () => void\n  /**\n   * The component's own development warnings, one message per condition that holds. They\n   * follow the same rule as the shared ones: each is given once per instance.\n   */\n  warnings?: () => (string | false)[]\n}\n\nexport function useFileField(options: FileFieldOptions) {\n  const { model, props, emit } = options\n\n  const fileEl = ref<HTMLInputElement | null>(null)\n\n  const disabled = () => options.disabled?.value ?? props.disabled\n\n  /** Whether files may come in or go out — no dialog, no drop and no removal otherwise. */\n  const enabled = computed(() => !disabled() && !props.readonly)\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 — picking the SAME file again after a clear or a removal fires no `change` at all:\n   * as far as the input is concerned its value never changed, and that file becomes\n   * unreachable with nothing to show for it. Emptying it on every path is what keeps it\n   * selectable.\n   */\n  function resetNative() {\n    if (fileEl.value) fileEl.value.value = ''\n  }\n\n  /**\n   * The single entry into the model: the dialog and a drop both arrive here.\n   *\n   * A refused file never enters the model at all, and every refusal is reported so the\n   * component can say why. The screening is a pure function in `utils/file`, which is what\n   * makes the ORDER of the reasons testable without a mount.\n   */\n  function acceptFiles(incoming: File[]) {\n    const current = props.multiple ? model.value : []\n    const { accepted, rejected } = screenFiles(incoming, current, {\n      accept: props.accept,\n      maxSize: props.maxSize,\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: props.multiple ? props.maxFiles : 1,\n      maxTotalSize: props.maxTotalSize,\n    })\n\n    for (const rejection of rejected) emit('reject', rejection)\n\n    resetNative()\n    if (accepted.length === 0) return\n\n    model.value = [...current, ...accepted]\n    emit('change', model.value)\n  }\n\n  function onNativeChange(event: Event) {\n    acceptFiles([...((event.target as HTMLInputElement).files ?? [])])\n  }\n\n  /**\n   * Everything the hidden input is bound with, the consumer's form attributes included. It\n   * is taken out of the tab order and hidden from screen readers, which leaves the visible\n   * control as the single stop and the single announcement; it stays disabled only when the\n   * component is — a read-only one still submits what it holds.\n   */\n  const nativeInputAttrs = computed(() => ({\n    ...Object.fromEntries(\n      Object.entries(options.forwardedAttrs.value).filter(([key]) => NATIVE_ONLY.includes(key)),\n    ),\n    type: 'file',\n    tabindex: -1,\n    'aria-hidden': 'true' as const,\n    accept: props.accept,\n    multiple: props.multiple || undefined,\n    disabled: disabled() || undefined,\n    onChange: onNativeChange,\n  }))\n\n  // @fallback\n  /**\n   * `.click()` and not `showPicker()`. Both need a transient user activation, but\n   * `showPicker()` THROWS without one — and inside a cross-origin iframe — where a click is\n   * simply inert. On a file input there is nothing to gain in exchange.\n   */\n  function openPicker() {\n    if (!enabled.value) return\n    fileEl.value?.click()\n  }\n\n  /**\n   * Takes ONE file out of the selection, and says which: `remove` with the file and the\n   * position it held, then `change` with what is left. It returns the file removed, or\n   * `undefined` when nothing was — so the component knows whether it has a focus to catch.\n   */\n  function removeAt(index: number): File | undefined {\n    const file = model.value[index]\n    if (!file || !enabled.value) return undefined\n\n    model.value = model.value.filter((_, i) => i !== index)\n    resetNative()\n    emit('remove', file, index)\n    emit('change', model.value)\n    return file\n  }\n\n  /** Empties the selection, and the hidden input with it. */\n  function clear() {\n    model.value = []\n    resetNative()\n    options.onClear?.()\n    emit('change', model.value)\n  }\n\n  // @devwarn\n  /*\n   * Both shared guards describe something that fails SILENTLY at runtime. Each message is given\n   * once per instance: they sit in an effect, which re-runs on every change of what it reads,\n   * and the same sentence repeated at every keystroke is how a warning stops being read.\n   */\n  if (isDev) {\n    // The prefix is the component's own name, read off the instance rather than passed in:\n    // this whole block is dropped from a production build, and the name with it.\n    const name = getCurrentInstance()?.type.__name\n    const warned = new Set<string>()\n    const warn = (message: string) => {\n      if (warned.has(message)) return\n      warned.add(message)\n      console.warn(`[${name}] ${message}`)\n    }\n    watchEffect(() => {\n      if (props.maxFiles !== undefined && !props.multiple)\n        warn('`maxFiles` ignored without `multiple`: single mode already caps at one file.')\n      if (options.forwardedAttrs.value.required !== undefined)\n        warn(\n          '`required` lands on the hidden file input, which is not focusable: the browser blocks submission with no visible message. Validate the v-model yourself and use the `invalid` prop.',\n        )\n      for (const message of options.warnings?.() ?? []) if (message) warn(message)\n    })\n  }\n\n  return {\n    fileEl,\n    enabled,\n    nativeInputAttrs,\n    controlAttrs,\n    acceptFiles,\n    openPicker,\n    removeAt,\n    clear,\n  }\n}\n"],"mappings":";;;AAgCA,IAAM,IAAc;CAAC;CAAQ;CAAY;CAAQ;AAAS;AA+C1D,SAAgB,EAAa,GAA2B;CACtD,IAAM,EAAE,UAAO,UAAO,YAAS,GAEzB,IAAS,EAA6B,IAAI,GAE1C,UAAiB,EAAQ,UAAU,SAAS,EAAM,UAGlD,IAAU,QAAe,CAAC,EAAS,KAAK,CAAC,EAAM,QAAQ,GAEvD,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;CASA,SAAS,EAAY,GAAkB;EACrC,IAAM,IAAU,EAAM,WAAW,EAAM,QAAQ,CAAC,GAC1C,EAAE,aAAU,gBAAa,EAAY,GAAU,GAAS;GAC5D,QAAQ,EAAM;GACd,SAAS,EAAM;GAGf,UAAU,EAAM,WAAW,EAAM,WAAW;GAC5C,cAAc,EAAM;EACtB,CAAC;EAED,KAAK,IAAM,KAAa,GAAU,EAAK,UAAU,CAAS;EAE1D,EAAY,GACR,EAAS,WAAW,MAExB,EAAM,QAAQ,CAAC,GAAG,GAAS,GAAG,CAAQ,GACtC,EAAK,UAAU,EAAM,KAAK;CAC5B;CAEA,SAAS,EAAe,GAAc;EACpC,EAAY,CAAC,GAAK,EAAM,OAA4B,SAAS,CAAC,CAAE,CAAC;CACnE;CAQA,IAAM,IAAmB,SAAgB;EACvC,GAAG,OAAO,YACR,OAAO,QAAQ,EAAQ,eAAe,KAAK,CAAC,CAAC,QAAQ,CAAC,OAAS,EAAY,SAAS,CAAG,CAAC,CAC1F;EACA,MAAM;EACN,UAAU;EACV,eAAe;EACf,QAAQ,EAAM;EACd,UAAU,EAAM,YAAY,KAAA;EAC5B,UAAU,EAAS,KAAK,KAAA;EACxB,UAAU;CACZ,EAAE;CAQF,SAAS,IAAa;EACf,EAAQ,SACb,EAAO,OAAO,MAAM;CACtB;CAOA,SAAS,EAAS,GAAiC;EACjD,IAAM,IAAO,EAAM,MAAM;EACrB,OAAC,KAAQ,CAAC,EAAQ,QAMtB,OAJA,EAAM,QAAQ,EAAM,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAK,GACtD,EAAY,GACZ,EAAK,UAAU,GAAM,CAAK,GAC1B,EAAK,UAAU,EAAM,KAAK,GACnB;CACT;CAGA,SAAS,IAAQ;EAIf,AAHA,EAAM,QAAQ,CAAC,GACf,EAAY,GACZ,EAAQ,UAAU,GAClB,EAAK,UAAU,EAAM,KAAK;CAC5B;CA6BA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/composables/useFocusoutDismiss.d.ts

@@ -1,17 +1,2 @@
 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.map

@@ -1 +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"}
+{"version":3,"file":"useFocusoutDismiss.js","names":[],"sources":["../../src/composables/useFocusoutDismiss.ts"],"sourcesContent":["// @a11y\n/**\n * A `@focusout` handler closing the component when focus leaves it, panel included.\n *\n * A popover stays a DOM descendant of its owner even while painted in the top layer, so\n * `contains` is the whole test and nothing has to be watched at document level. A null\n * `relatedTarget` — focus gone to the body, or out of the window — counts as leaving.\n *\n * Only `manual` popovers need this. VMenu's `auto` panel is dismissed by the browser.\n */\n\nimport type { Ref } from 'vue'\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":";AAaA,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

@@ -1,22 +1,37 @@
 /**
- * Tells a field whether the consumer wants its icons to be CLICKABLE.
+ * Whether VInput/VTextarea's icons should render as real buttons: an icon is decoration
+ * until someone listens for `@click:icon-*`, at which point it needs a tab stop and a name.
  *
- * 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.
+ * Declared emits are removed from `$attrs`, so the only place left to look is
+ * `vnode.props` — in BOTH spellings, a template writing them with dashes and a render
+ * function in camel case. Read ONCE and never revised: a listener attached later is not
+ * picked up, which is marginal enough to accept.
  *
- * 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 missing-name warning lives here rather than in each field: a button nothing can
+ * announce is a flaw of the arrangement, not of the component using it.
+ */
+/**
+ * Whether the component being set up was handed a `@click:icon-start` / `@click:icon-end`
+ * listener, in either spelling.
+ */
+export declare function iconClickHandlers(): {
+    start: boolean;
+    end: boolean;
+};
+/**
+ * The start-icon listener a field COMPOSED on top of VInput — VCombobox, VDateInput,
+ * VTimeInput, VFileInput — binds onto that inner VInput, ready to spread beside the
+ * consumer's attributes. Call it during setup: it reads the component's own vnode.
  *
- * 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.
+ * Each of those fields declares `click:icon-start` as its own event, which puts it in the API
+ * tables and takes it out of `$attrs`, hence out of what is forwarded: the listener has to be
+ * bound by hand. And it has to follow what the consumer actually wrote — bound unconditionally,
+ * VInput would read a handler on every instance and turn a decorative icon into a focusable
+ * button nobody asked for. So it is `undefined` when there is nothing to relay.
  */
+export declare function iconStartListener(relay: (event: MouseEvent) => void): {
+    'onClick:icon-start': (event: MouseEvent) => void;
+} | undefined;
 export declare function useIconClickHandlers(options: {
     name: string;
     iconStartLabel?: string;

package/dist/composables/useIconClickHandlers.js

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

package/dist/composables/useIconClickHandlers.js.map

@@ -1 +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"}
+{"version":3,"file":"useIconClickHandlers.js","names":[],"sources":["../../src/composables/useIconClickHandlers.ts"],"sourcesContent":["// @core\n/**\n * Whether VInput/VTextarea's icons should render as real buttons: an icon is decoration\n * until someone listens for `@click:icon-*`, at which point it needs a tab stop and a name.\n *\n * Declared emits are removed from `$attrs`, so the only place left to look is\n * `vnode.props` — in BOTH spellings, a template writing them with dashes and a render\n * function in camel case. Read ONCE and never revised: a listener attached later is not\n * picked up, which is marginal enough to accept.\n *\n * The missing-name warning lives here rather than in each field: a button nothing can\n * announce is a flaw of the arrangement, not of the component using it.\n */\n\nimport { getCurrentInstance } from 'vue'\n\nimport { isDev } from '../utils/env'\n\n/**\n * Whether the component being set up was handed a `@click:icon-start` / `@click:icon-end`\n * listener, in either spelling.\n */\nexport function iconClickHandlers(): { start: boolean; end: boolean } {\n  const vnodeProps = getCurrentInstance()?.vnode.props ?? {}\n  return {\n    start: 'onClick:iconStart' in vnodeProps || 'onClick:icon-start' in vnodeProps,\n    end: 'onClick:iconEnd' in vnodeProps || 'onClick:icon-end' in vnodeProps,\n  }\n}\n\n/**\n * The start-icon listener a field COMPOSED on top of VInput — VCombobox, VDateInput,\n * VTimeInput, VFileInput — binds onto that inner VInput, ready to spread beside the\n * consumer's attributes. Call it during setup: it reads the component's own vnode.\n *\n * Each of those fields declares `click:icon-start` as its own event, which puts it in the API\n * tables and takes it out of `$attrs`, hence out of what is forwarded: the listener has to be\n * bound by hand. And it has to follow what the consumer actually wrote — bound unconditionally,\n * VInput would read a handler on every instance and turn a decorative icon into a focusable\n * button nobody asked for. So it is `undefined` when there is nothing to relay.\n */\nexport function iconStartListener(\n  relay: (event: MouseEvent) => void,\n): { 'onClick:icon-start': (event: MouseEvent) => void } | undefined {\n  return iconClickHandlers().start ? { 'onClick:icon-start': relay } : undefined\n}\n\nexport function useIconClickHandlers(options: {\n  name: string\n  iconStartLabel?: string\n  iconEndLabel?: string\n}): { hasIconStartHandler: boolean; hasIconEndHandler: boolean } {\n  const { start: hasIconStartHandler, end: hasIconEndHandler } = iconClickHandlers()\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":";;AAsBA,SAAgB,IAAsD;CACpE,IAAM,IAAa,EAAmB,CAAC,EAAE,MAAM,SAAS,CAAC;CACzD,OAAO;EACL,OAAO,uBAAuB,KAAc,wBAAwB;EACpE,KAAK,qBAAqB,KAAc,sBAAsB;CAChE;AACF;AAaA,SAAgB,EACd,GACmE;CACnE,OAAO,EAAkB,CAAC,CAAC,QAAQ,EAAE,sBAAsB,EAAM,IAAI,KAAA;AACvE;AAEA,SAAgB,EAAqB,GAI4B;CAC/D,IAAM,EAAE,OAAO,GAAqB,KAAK,MAAsB,EAAkB;CAcjF,OAAO;EAAE;EAAqB;CAAkB;AAClD"}

package/dist/composables/useInertLink.d.ts

@@ -0,0 +1,20 @@
+import { ComputedRef } from 'vue';
+export interface InertLinkOptions {
+    /** The address the component would link to, or `undefined` when it is not a link. */
+    href: () => string | undefined;
+    /** Whether the component is unusable right now. */
+    inert: () => boolean;
+    /** The attributes the component forwards to the element that acts. */
+    attrs: () => Record<string, unknown>;
+}
+export interface InertLink {
+    /** Whether the component renders an `<a>`. */
+    isLink: ComputedRef<boolean>;
+    /** Whether that `<a>` is inert, which is what `aria-disabled` is bound to. */
+    isInertLink: ComputedRef<boolean>;
+    /** The `href` to bind: the address, or nothing on an inert link. */
+    linkHref: ComputedRef<string | undefined>;
+    /** The attributes to bind, without the click handler on an inert link. */
+    attrs: ComputedRef<Record<string, unknown>>;
+}
+export declare function useInertLink(options: InertLinkOptions): InertLink;

package/dist/composables/useInertLink.js

@@ -0,0 +1,23 @@
+import { computed as e } from "vue";
+//#region src/composables/useInertLink.ts
+function t(t) {
+	let n = e(() => t.href() !== void 0), r = e(() => n.value && t.inert());
+	return {
+		isLink: n,
+		isInertLink: r,
+		linkHref: e(() => r.value ? void 0 : t.href()),
+		attrs: e(() => {
+			let e = t.attrs();
+			if (!r.value) return e;
+			let n = {
+				role: "link",
+				...e
+			};
+			return delete n.onClick, n;
+		})
+	};
+}
+//#endregion
+export { t as useInertLink };
+
+//# sourceMappingURL=useInertLink.js.map

package/dist/composables/useInertLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInertLink.js","names":[],"sources":["../../src/composables/useInertLink.ts"],"sourcesContent":["// @a11y\n/**\n * The inert link of every component that may render as an `<a>`: VButton, VChip and VAvatar.\n *\n * A link has no `disabled` attribute, so the complete inertness a `<button disabled>` gets for\n * free is rebuilt by hand, in parts that only work together. The address is dropped, so the\n * link can be neither focused nor followed; `aria-disabled` tells assistive technology why; and\n * the consumer's `onClick` is filtered out of the attributes, since an `<a>` without an `href`\n * still dispatches clicks and a handler would otherwise run on a control announced as disabled.\n *\n * TRAP — the attributes also gain `role=\"link\"`. An `<a>` without `href` is no longer a link\n * but a generic element, on which an `aria-label` is PROHIBITED (axe `aria-prohibited-attr`)\n * and `aria-disabled` describes nothing: an icon-only VIconButton turned inert would lose its\n * name. The role is spread BEFORE the consumer's attributes, so a role of their own still wins —\n * which is also why it travels in the attributes and is never bound after them, where an\n * `undefined` would erase the `role=\"tab\"` a VTab hands its button.\n *\n * Each of the three decides for itself WHEN it is a link and WHEN it is inert (VChip gives\n * `selectable` precedence over `href`, VButton counts `loading` as inert), which is why both\n * arrive as getters; the consequences are the same everywhere and live here.\n */\nimport { computed } from 'vue'\nimport type { ComputedRef } from 'vue'\n\nexport interface InertLinkOptions {\n  /** The address the component would link to, or `undefined` when it is not a link. */\n  href: () => string | undefined\n  /** Whether the component is unusable right now. */\n  inert: () => boolean\n  /** The attributes the component forwards to the element that acts. */\n  attrs: () => Record<string, unknown>\n}\n\nexport interface InertLink {\n  /** Whether the component renders an `<a>`. */\n  isLink: ComputedRef<boolean>\n  /** Whether that `<a>` is inert, which is what `aria-disabled` is bound to. */\n  isInertLink: ComputedRef<boolean>\n  /** The `href` to bind: the address, or nothing on an inert link. */\n  linkHref: ComputedRef<string | undefined>\n  /** The attributes to bind, without the click handler on an inert link. */\n  attrs: ComputedRef<Record<string, unknown>>\n}\n\nexport function useInertLink(options: InertLinkOptions): InertLink {\n  const isLink = computed(() => options.href() !== undefined)\n  const isInertLink = computed(() => isLink.value && options.inert())\n  return {\n    isLink,\n    isInertLink,\n    linkHref: computed(() => (isInertLink.value ? undefined : options.href())),\n    attrs: computed(() => {\n      const attrs = options.attrs()\n      if (!isInertLink.value) return attrs\n      const rest: Record<string, unknown> = { role: 'link', ...attrs }\n      delete rest.onClick\n      return rest\n    }),\n  }\n}\n"],"mappings":";;AA4CA,SAAgB,EAAa,GAAsC;CACjE,IAAM,IAAS,QAAe,EAAQ,KAAK,MAAM,KAAA,CAAS,GACpD,IAAc,QAAe,EAAO,SAAS,EAAQ,MAAM,CAAC;CAClE,OAAO;EACL;EACA;EACA,UAAU,QAAgB,EAAY,QAAQ,KAAA,IAAY,EAAQ,KAAK,CAAE;EACzE,OAAO,QAAe;GACpB,IAAM,IAAQ,EAAQ,MAAM;GAC5B,IAAI,CAAC,EAAY,OAAO,OAAO;GAC/B,IAAM,IAAgC;IAAE,MAAM;IAAQ,GAAG;GAAM;GAE/D,OADA,OAAO,EAAK,SACL;EACT,CAAC;CACH;AACF"}