@skdx/vue 0.26.0

package/dist/utils/numberFormat.d.cts

@@ -0,0 +1,19 @@
+/**
+ * `Intl.NumberFormat` display/parse pair for NumberField.
+ *
+ * With neither `locale` nor `formatOptions`, formatting is off and the value
+ * round-trips through `String`/`Number` exactly as it did before — the
+ * formatted path is opt-in.
+ *
+ * Percent follows `Intl.NumberFormat` semantics: the value is the *fraction*,
+ * so `0.5` displays as `50%` and typing `50%` parses back to `0.5`. `min`,
+ * `max` and `step` therefore also operate on the fraction.
+ */
+export declare function formatNumberValue(value: number, locale?: string, formatOptions?: Intl.NumberFormatOptions): string;
+/**
+ * Parses text the user typed or pasted back into a number, tolerating
+ * everything {@link formatNumberValue} can emit: group separators, the
+ * locale's decimal separator, currency symbols, unit suffixes, `%`, and the
+ * Unicode minus sign. Returns `NaN` when the text holds no number.
+ */
+export declare function parseNumberValue(text: string, locale?: string, formatOptions?: Intl.NumberFormatOptions): number;

package/dist/utils/numberFormat.d.ts

@@ -0,0 +1,19 @@
+/**
+ * `Intl.NumberFormat` display/parse pair for NumberField.
+ *
+ * With neither `locale` nor `formatOptions`, formatting is off and the value
+ * round-trips through `String`/`Number` exactly as it did before — the
+ * formatted path is opt-in.
+ *
+ * Percent follows `Intl.NumberFormat` semantics: the value is the *fraction*,
+ * so `0.5` displays as `50%` and typing `50%` parses back to `0.5`. `min`,
+ * `max` and `step` therefore also operate on the fraction.
+ */
+export declare function formatNumberValue(value: number, locale?: string, formatOptions?: Intl.NumberFormatOptions): string;
+/**
+ * Parses text the user typed or pasted back into a number, tolerating
+ * everything {@link formatNumberValue} can emit: group separators, the
+ * locale's decimal separator, currency symbols, unit suffixes, `%`, and the
+ * Unicode minus sign. Returns `NaN` when the text holds no number.
+ */
+export declare function parseNumberValue(text: string, locale?: string, formatOptions?: Intl.NumberFormatOptions): number;

package/dist/utils/numberFormat.js

@@ -0,0 +1 @@
+function e(e,r,t){return r||t?new Intl.NumberFormat(r,t).format(e):String(e)}function r(e,r,t){const a=e.trim();if(""===a)return NaN;if(!r&&!t)return Number(a);const n=new Intl.NumberFormat(r,t).formatToParts(-12345.6),u=n.find(e=>"group"===e.type)?.value,m=n.find(e=>"decimal"===e.type)?.value??new Intl.NumberFormat(r).formatToParts(1.5).find(e=>"decimal"===e.type)?.value??".";let o=a.replace(/[\s\u00a0\u202f]/g,"").replace(/\u2212/g,"-");if(u&&(o=o.split(u).join("")),o=o.split(m).join(".").replace(/[^0-9.-]/g,""),!/[0-9]/.test(o))return NaN;const i=Number(o);return Number.isNaN(i)?NaN:"percent"===t?.style?i/100:i}export{e as formatNumberValue,r as parseNumberValue};

package/dist/utils/popper.cjs

@@ -0,0 +1 @@
+const C=require("./direction.cjs");let t=require("vue"),r=require("@floating-ui/dom");var U=Symbol("skdx-popper-context"),Y=Symbol("skdx-popper-arrow-context");function j(i,o){return o==="center"?i:`${i}-${o}`}var z={top:"bottom",right:"left",bottom:"top",left:"right"},H={start:"0%",center:"50%",end:"100%"};function G(i,o,d){const{availableWidth:P,availableHeight:f,triggerWidth:c,side:a,align:v}=d,u=H[v],m=a==="top"||a==="bottom"?`${u} ${a==="top"?"100%":"0%"}`:`${a==="left"?"100%":"0%"} ${u}`;i.style.setProperty(`--skdx-${o}-available-width`,`${P}px`),i.style.setProperty(`--skdx-${o}-available-height`,`${f}px`),i.style.setProperty(`--skdx-${o}-trigger-width`,`${c}px`),i.style.setProperty(`--skdx-${o}-transform-origin`,m)}function L(i,o,d,P={},f){function c(){const{side:e="bottom",align:n="center",sideOffset:O=0,alignOffset:$=0,avoidCollisions:b=!0,collisionPadding:w=8,collisionBoundary:S,component:p}=(0,t.toValue)(P);return{side:e,align:n,sideOffset:O,alignOffset:$,avoidCollisions:b,collisionPadding:w,collisionBoundary:S,component:p}}const a=C.useDirection(),v=e=>C.resolvePhysicalSide(e,C.resolveDirection(i.value,a())),u=c(),m=(0,t.ref)(v(u.side)),N=(0,t.ref)(u.align),X=(0,t.shallowRef)({position:"fixed",left:"0px",top:"0px"}),I=(0,t.shallowRef)({position:"absolute"});let g,l,W=0;function D(){const e=i.value,n=o.value;if(!e||!n)return;const{side:O,align:$,sideOffset:b,alignOffset:w,avoidCollisions:S,collisionPadding:p,collisionBoundary:F,component:R}=c(),A=F?{boundary:F}:{},M=++W;(0,r.computePosition)(e,n,{strategy:"fixed",placement:j(v(O),$),middleware:[(0,r.offset)({mainAxis:b,alignmentAxis:w}),...S?[(0,r.flip)({padding:p,...A}),(0,r.shift)({padding:p,limiter:(0,r.limitShift)(),...A})]:[],(0,r.size)({padding:p,...A,apply({availableWidth:E,availableHeight:_,elements:T,rects:k,placement:x}){if(!R)return;const[q,s="center"]=x.split("-");G(T.floating,R,{availableWidth:E,availableHeight:_,triggerWidth:k.reference.width,side:q,align:s})}}),...f?.value?[(0,r.arrow)({element:f.value})]:[]]}).then(({x:E,y:_,placement:T,middlewareData:k})=>{if(M!==W)return;X.value={position:"fixed",left:`${E}px`,top:`${_}px`};const[x,q="center"]=T.split("-");m.value=x,N.value=q;const s=k.arrow,y=z[x];I.value={position:"absolute",left:s?.x!=null?`${s.x}px`:void 0,top:s?.y!=null?`${s.y}px`:void 0,...y==="top"&&{top:"0px",transform:"translateY(-100%)"},...y==="bottom"&&{bottom:"0px",transform:"translateY(100%)"},...y==="left"&&{left:"0px",transform:"translateX(-100%)"},...y==="right"&&{right:"0px",transform:"translateX(100%)"}}})}function B(){l=void 0;const e=i.value,n=o.value;!e||!n||g||(g=(0,r.autoUpdate)(e,n,D))}function h(){l!==void 0&&cancelAnimationFrame(l),l=void 0,g?.(),g=void 0}return typeof document<"u"&&((0,t.watch)(d,e=>{e?l===void 0&&(l=requestAnimationFrame(B)):h()},{immediate:!0}),(0,t.watch)([i,o],([e,n])=>{d.value&&(h(),!(!e||!n)&&(l=requestAnimationFrame(B)))}),(0,t.watch)(()=>Object.values(c()),()=>{d.value&&D()}),(0,t.onBeforeUnmount)(h)),{style:(0,t.computed)(()=>X.value),arrowStyle:(0,t.computed)(()=>I.value),placedSide:(0,t.computed)(()=>m.value),placedAlign:(0,t.computed)(()=>N.value)}}exports.ARROW_CONTEXT=Y;exports.POPPER_CONTEXT=U;exports.setMeasurementProperties=G;exports.usePopperPosition=L;

package/dist/utils/popper.d.cts

@@ -0,0 +1,114 @@
+import { type CSSProperties, type InjectionKey, type MaybeRefOrGetter, type Ref } from 'vue';
+import { type PhysicalSide } from './direction.cjs';
+export type { PhysicalSide } from './direction.cjs';
+/**
+ * Internal positioning layer shared by Popover, Tooltip, HoverCard and any
+ * future floating-content component. Wraps `@floating-ui/dom` with a
+ * Radix-like side/align API and exposes `data-side`/`data-align` for
+ * animation styling, mirroring `packages/react/src/utils/popper.tsx`.
+ * @internal
+ */
+/**
+ * @internal Edge of the anchor the floating content is placed against.
+ * `start`/`end` are *logical*: they resolve to `left`/`right` under
+ * `dir="ltr"` and swap under `dir="rtl"`, so an overlay authored as
+ * `side="end"` mirrors itself. `left`/`right` are physical and never mirror.
+ * `data-side` always reports a physical side — where the content landed.
+ */
+export type Side = PhysicalSide | 'start' | 'end';
+/** @internal How floating content aligns along its chosen side: to the anchor's start, center, or end. */
+export type Align = 'start' | 'center' | 'end';
+/** @internal Injection key a PopperRoot provides so PopperAnchor/trigger components can register the anchor element. */
+export interface PopperContext {
+    anchor: Ref<HTMLElement | null>;
+    setAnchor(node: HTMLElement | null): void;
+}
+/** @internal Injection key connecting a PopperRoot to the anchor/trigger parts that register its positioning anchor. */
+export declare const POPPER_CONTEXT: InjectionKey<PopperContext>;
+/** @internal Shape a `*Content` component provides so a nested `*Arrow` component can register itself and read its computed style. */
+export interface PopperArrowContext {
+    style: Readonly<Ref<CSSProperties>>;
+    setArrowEl(node: HTMLElement | null): void;
+}
+/**
+ * @internal Injection key a `*Content` component provides so a nested
+ * `*Arrow` component can register its element and read its computed
+ * position, without each component pair (Popover, Tooltip, HoverCard, ...)
+ * inventing its own.
+ */
+export declare const ARROW_CONTEXT: InjectionKey<PopperArrowContext>;
+/** @internal Side/align, offsets and collision settings for placing floating content relative to its anchor. */
+export interface PopperPositionOptions {
+    /** Preferred edge. `start`/`end` are logical and follow the writing direction; `left`/`right` are physical. */
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+    avoidCollisions?: boolean;
+    /**
+     * Minimum distance in pixels kept from the collision boundary when avoiding
+     * collisions. A number applies to every side; an object sets only the sides
+     * it names, the rest falling back to `0`.
+     */
+    collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
+    /**
+     * Element (or elements) collisions are measured against, instead of the
+     * content's clipping ancestors. Use it to keep an overlay inside a scroll
+     * container or one pane of a split layout rather than the whole viewport.
+     */
+    collisionBoundary?: Element | Element[] | null;
+    /**
+     * Kebab-case component name the measurement CSS custom properties are
+     * namespaced under — `"popover"` yields `--skdx-popover-available-width` and
+     * friends. Belongs to the component, not to its consumer, so it is never a
+     * public prop.
+     * @internal
+     * @default undefined — an internal popper with no documented namespace writes no measurement properties at all.
+     */
+    component?: string;
+}
+/**
+ * Writes the four measurement custom properties onto the floating element
+ * after each reposition, so a consumer can size the panel from CSS alone
+ * (`max-height: var(--skdx-select-available-height)`) instead of measuring in
+ * JavaScript. Mirrored by `PopperContent`/`positionFloating` in the other four
+ * packages and asserted by `assertPopperMeasurementProperties`.
+ *
+ * The transform origin is derived from the *resolved* side and alignment, so
+ * a panel that flipped grows from the edge it actually landed on.
+ *
+ * ponytail: origin is edge-and-alignment accurate but not arrow-accurate —
+ * a panel with a shifted arrow scales from the aligned edge rather than from
+ * the arrow's tip. Feed the arrow middleware's offset in here if that ever
+ * shows.
+ * @internal
+ */
+export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
+    availableWidth: number;
+    availableHeight: number;
+    triggerWidth: number;
+    side: PhysicalSide;
+    align: Align;
+}): void;
+/**
+ * Positions `floatingRef`'s element relative to `anchorRef`'s element while
+ * `enabled` is true, re-running on scroll/resize/anchor-size-change.
+ * Optionally positions an arrow element via `arrowRef`. Returns reactive
+ * placement/style data; cleans up its own `autoUpdate` subscription when
+ * `enabled` turns false or the owner component unmounts, and re-registers it
+ * when either element changes identity while still enabled — matching React's
+ * `whileElementsMounted`.
+ *
+ * `options` is read fresh on every positioning pass, so a call site may pass
+ * its own reactive `props`, a ref or a getter and have a changed `side`,
+ * offset or collision setting actually reposition the content. A plain object
+ * still works, but — being built once — freezes its values, exactly as a
+ * literal always did.
+ * @internal
+ */
+export declare function usePopperPosition(anchorRef: Ref<HTMLElement | null>, floatingRef: Ref<HTMLElement | null>, enabled: Ref<boolean>, options?: MaybeRefOrGetter<PopperPositionOptions>, arrowRef?: Ref<HTMLElement | null>): {
+    style: import("vue").ComputedRef<CSSProperties>;
+    arrowStyle: import("vue").ComputedRef<CSSProperties>;
+    placedSide: import("vue").ComputedRef<PhysicalSide>;
+    placedAlign: import("vue").ComputedRef<Align>;
+};

package/dist/utils/popper.d.ts

@@ -0,0 +1,114 @@
+import { type CSSProperties, type InjectionKey, type MaybeRefOrGetter, type Ref } from 'vue';
+import { type PhysicalSide } from './direction.js';
+export type { PhysicalSide } from './direction.js';
+/**
+ * Internal positioning layer shared by Popover, Tooltip, HoverCard and any
+ * future floating-content component. Wraps `@floating-ui/dom` with a
+ * Radix-like side/align API and exposes `data-side`/`data-align` for
+ * animation styling, mirroring `packages/react/src/utils/popper.tsx`.
+ * @internal
+ */
+/**
+ * @internal Edge of the anchor the floating content is placed against.
+ * `start`/`end` are *logical*: they resolve to `left`/`right` under
+ * `dir="ltr"` and swap under `dir="rtl"`, so an overlay authored as
+ * `side="end"` mirrors itself. `left`/`right` are physical and never mirror.
+ * `data-side` always reports a physical side — where the content landed.
+ */
+export type Side = PhysicalSide | 'start' | 'end';
+/** @internal How floating content aligns along its chosen side: to the anchor's start, center, or end. */
+export type Align = 'start' | 'center' | 'end';
+/** @internal Injection key a PopperRoot provides so PopperAnchor/trigger components can register the anchor element. */
+export interface PopperContext {
+    anchor: Ref<HTMLElement | null>;
+    setAnchor(node: HTMLElement | null): void;
+}
+/** @internal Injection key connecting a PopperRoot to the anchor/trigger parts that register its positioning anchor. */
+export declare const POPPER_CONTEXT: InjectionKey<PopperContext>;
+/** @internal Shape a `*Content` component provides so a nested `*Arrow` component can register itself and read its computed style. */
+export interface PopperArrowContext {
+    style: Readonly<Ref<CSSProperties>>;
+    setArrowEl(node: HTMLElement | null): void;
+}
+/**
+ * @internal Injection key a `*Content` component provides so a nested
+ * `*Arrow` component can register its element and read its computed
+ * position, without each component pair (Popover, Tooltip, HoverCard, ...)
+ * inventing its own.
+ */
+export declare const ARROW_CONTEXT: InjectionKey<PopperArrowContext>;
+/** @internal Side/align, offsets and collision settings for placing floating content relative to its anchor. */
+export interface PopperPositionOptions {
+    /** Preferred edge. `start`/`end` are logical and follow the writing direction; `left`/`right` are physical. */
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+    avoidCollisions?: boolean;
+    /**
+     * Minimum distance in pixels kept from the collision boundary when avoiding
+     * collisions. A number applies to every side; an object sets only the sides
+     * it names, the rest falling back to `0`.
+     */
+    collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
+    /**
+     * Element (or elements) collisions are measured against, instead of the
+     * content's clipping ancestors. Use it to keep an overlay inside a scroll
+     * container or one pane of a split layout rather than the whole viewport.
+     */
+    collisionBoundary?: Element | Element[] | null;
+    /**
+     * Kebab-case component name the measurement CSS custom properties are
+     * namespaced under — `"popover"` yields `--skdx-popover-available-width` and
+     * friends. Belongs to the component, not to its consumer, so it is never a
+     * public prop.
+     * @internal
+     * @default undefined — an internal popper with no documented namespace writes no measurement properties at all.
+     */
+    component?: string;
+}
+/**
+ * Writes the four measurement custom properties onto the floating element
+ * after each reposition, so a consumer can size the panel from CSS alone
+ * (`max-height: var(--skdx-select-available-height)`) instead of measuring in
+ * JavaScript. Mirrored by `PopperContent`/`positionFloating` in the other four
+ * packages and asserted by `assertPopperMeasurementProperties`.
+ *
+ * The transform origin is derived from the *resolved* side and alignment, so
+ * a panel that flipped grows from the edge it actually landed on.
+ *
+ * ponytail: origin is edge-and-alignment accurate but not arrow-accurate —
+ * a panel with a shifted arrow scales from the aligned edge rather than from
+ * the arrow's tip. Feed the arrow middleware's offset in here if that ever
+ * shows.
+ * @internal
+ */
+export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
+    availableWidth: number;
+    availableHeight: number;
+    triggerWidth: number;
+    side: PhysicalSide;
+    align: Align;
+}): void;
+/**
+ * Positions `floatingRef`'s element relative to `anchorRef`'s element while
+ * `enabled` is true, re-running on scroll/resize/anchor-size-change.
+ * Optionally positions an arrow element via `arrowRef`. Returns reactive
+ * placement/style data; cleans up its own `autoUpdate` subscription when
+ * `enabled` turns false or the owner component unmounts, and re-registers it
+ * when either element changes identity while still enabled — matching React's
+ * `whileElementsMounted`.
+ *
+ * `options` is read fresh on every positioning pass, so a call site may pass
+ * its own reactive `props`, a ref or a getter and have a changed `side`,
+ * offset or collision setting actually reposition the content. A plain object
+ * still works, but — being built once — freezes its values, exactly as a
+ * literal always did.
+ * @internal
+ */
+export declare function usePopperPosition(anchorRef: Ref<HTMLElement | null>, floatingRef: Ref<HTMLElement | null>, enabled: Ref<boolean>, options?: MaybeRefOrGetter<PopperPositionOptions>, arrowRef?: Ref<HTMLElement | null>): {
+    style: import("vue").ComputedRef<CSSProperties>;
+    arrowStyle: import("vue").ComputedRef<CSSProperties>;
+    placedSide: import("vue").ComputedRef<PhysicalSide>;
+    placedAlign: import("vue").ComputedRef<Align>;
+};

package/dist/utils/popper.js

@@ -0,0 +1 @@
+import{resolveDirection as e,resolvePhysicalSide as t,useDirection as i}from"./direction.js";import{computed as o,onBeforeUnmount as a,ref as n,shallowRef as l,toValue as s,watch as r}from"vue";import{arrow as d,autoUpdate as p,computePosition as f,flip as u,limitShift as c,offset as m,shift as v,size as g}from"@floating-ui/dom";var x=/* @__PURE__ */Symbol("skdx-popper-context"),h=/* @__PURE__ */Symbol("skdx-popper-arrow-context");function y(e,t){return"center"===t?e:`${e}-${t}`}var b={top:"bottom",right:"left",bottom:"top",left:"right"},$={start:"0%",center:"50%",end:"100%"};function P(e,t,i){const{availableWidth:o,availableHeight:a,triggerWidth:n,side:l,align:s}=i,r=$[s],d="top"===l||"bottom"===l?`${r} ${"top"===l?"100%":"0%"}`:`${"left"===l?"100%":"0%"} ${r}`;e.style.setProperty(`--skdx-${t}-available-width`,`${o}px`),e.style.setProperty(`--skdx-${t}-available-height`,`${a}px`),e.style.setProperty(`--skdx-${t}-trigger-width`,`${n}px`),e.style.setProperty(`--skdx-${t}-transform-origin`,d)}function w(x,h,$,w={},O){function A(){const{side:e="bottom",align:t="center",sideOffset:i=0,alignOffset:o=0,avoidCollisions:a=!0,collisionPadding:n=8,collisionBoundary:l,component:r}=s(w);return{side:e,align:t,sideOffset:i,alignOffset:o,avoidCollisions:a,collisionPadding:n,collisionBoundary:l,component:r}}const k=i(),S=i=>t(i,e(x.value,k())),W=A(),C=n(S(W.side)),B=n(W.align),R=l({position:"fixed",left:"0px",top:"0px"}),T=l({position:"absolute"});let X,D,E=0;function F(){const e=x.value,t=h.value;if(!e||!t)return;const{side:i,align:o,sideOffset:a,alignOffset:n,avoidCollisions:l,collisionPadding:s,collisionBoundary:r,component:p}=A(),$=r?{boundary:r}:{},w=++E;f(e,t,{strategy:"fixed",placement:y(S(i),o),middleware:[m({mainAxis:a,alignmentAxis:n}),...l?[u({padding:s,...$}),v({padding:s,limiter:c(),...$})]:[],g({padding:s,...$,apply({availableWidth:e,availableHeight:t,elements:i,rects:o,placement:a}){if(!p)return;const[n,l="center"]=a.split("-");P(i.floating,p,{availableWidth:e,availableHeight:t,triggerWidth:o.reference.width,side:n,align:l})}}),...O?.value?[d({element:O.value})]:[]]}).then(({x:e,y:t,placement:i,middlewareData:o})=>{if(w!==E)return;R.value={position:"fixed",left:`${e}px`,top:`${t}px`};const[a,n="center"]=i.split("-");C.value=a,B.value=n;const l=o.arrow,s=b[a];T.value={position:"absolute",left:null!=l?.x?`${l.x}px`:void 0,top:null!=l?.y?`${l.y}px`:void 0,..."top"===s&&{top:"0px",transform:"translateY(-100%)"},..."bottom"===s&&{bottom:"0px",transform:"translateY(100%)"},..."left"===s&&{left:"0px",transform:"translateX(-100%)"},..."right"===s&&{right:"0px",transform:"translateX(100%)"}}})}function H(){D=void 0;const e=x.value,t=h.value;!e||!t||X||(X=p(e,t,F))}function j(){void 0!==D&&cancelAnimationFrame(D),D=void 0,X?.(),X=void 0}return typeof document<"u"&&(r($,e=>{e?void 0===D&&(D=requestAnimationFrame(H)):j()},{immediate:!0}),r([x,h],([e,t])=>{$.value&&(j(),e&&t&&(D=requestAnimationFrame(H)))}),r(()=>Object.values(A()),()=>{$.value&&F()}),a(j)),{style:o(()=>R.value),arrowStyle:o(()=>T.value),placedSide:o(()=>C.value),placedAlign:o(()=>B.value)}}export{h as ARROW_CONTEXT,x as POPPER_CONTEXT,P as setMeasurementProperties,w as usePopperPosition};

package/dist/utils/portal.d.cts

@@ -0,0 +1,20 @@
+/**
+ * Where a `SkdxPortal` — or any per-component `Skdx*Portal` part, which all
+ * delegate to it — may move its children.
+ *
+ * Declared once because seventeen call sites repeat it, and because the union
+ * is the package's portal contract rather than any one part's detail.
+ *
+ * Superset of React's `PortalProps['container']`
+ * (`packages/react/src/utils/portal.tsx:11` — `Element | DocumentFragment |
+ * null`) by the CSS-selector string Vue's `<Teleport to>` also accepts. The
+ * `DocumentFragment` arm is the one that matters: a `ShadowRoot` *is* a
+ * `DocumentFragment` and not an `HTMLElement`, so the narrower
+ * `string | HTMLElement | null` this replaced could not express the
+ * shadow-DOM host that portalling into an arbitrary container exists for.
+ * `Element` rather than `HTMLElement` for the same reason on the SVG side.
+ *
+ * `null` means "no container given" and resolves to `document.body`, matching
+ * React, whose `container ?? document.body` fallback does the same.
+ */
+export type PortalContainer = string | Element | DocumentFragment | null;

package/dist/utils/portal.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Where a `SkdxPortal` — or any per-component `Skdx*Portal` part, which all
+ * delegate to it — may move its children.
+ *
+ * Declared once because seventeen call sites repeat it, and because the union
+ * is the package's portal contract rather than any one part's detail.
+ *
+ * Superset of React's `PortalProps['container']`
+ * (`packages/react/src/utils/portal.tsx:11` — `Element | DocumentFragment |
+ * null`) by the CSS-selector string Vue's `<Teleport to>` also accepts. The
+ * `DocumentFragment` arm is the one that matters: a `ShadowRoot` *is* a
+ * `DocumentFragment` and not an `HTMLElement`, so the narrower
+ * `string | HTMLElement | null` this replaced could not express the
+ * shadow-DOM host that portalling into an arbitrary container exists for.
+ * `Element` rather than `HTMLElement` for the same reason on the SVG side.
+ *
+ * `null` means "no container given" and resolves to `document.body`, matching
+ * React, whose `container ?? document.body` fallback does the same.
+ */
+export type PortalContainer = string | Element | DocumentFragment | null;

package/dist/utils/reassertValue.cjs

@@ -0,0 +1 @@
+let t=require("vue");async function u(e,r){await(0,t.nextTick)();const a=r();e.value!==a&&(e.value=a)}exports.reassertValue=u;

package/dist/utils/reassertValue.d.cts

@@ -0,0 +1,16 @@
+/**
+ * @internal Puts the source of truth back into a user-editable element after an
+ * edit has had its chance to propagate.
+ *
+ * A native `input` event has *already* moved the DOM by the time a handler runs,
+ * and Vue re-patches a `:value` binding only when the bound state itself moves.
+ * So when a strictly controlled owner **rejects** the change — the component
+ * emits, the owner declines to update the bound value — Vue re-renders nothing
+ * and the rejected text stays on screen even though the component's value never
+ * did. React does not have this problem: it re-renders and resets the node.
+ *
+ * `truth` is read *after* `nextTick` rather than passed by value, so it sees the
+ * state the owner settled on rather than the one that existed mid-keystroke.
+ * Uncontrolled (and accepted-controlled) use is a no-op: the two already agree.
+ */
+export declare function reassertValue(el: HTMLInputElement | HTMLTextAreaElement, truth: () => string): Promise<void>;

package/dist/utils/reassertValue.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @internal Puts the source of truth back into a user-editable element after an
+ * edit has had its chance to propagate.
+ *
+ * A native `input` event has *already* moved the DOM by the time a handler runs,
+ * and Vue re-patches a `:value` binding only when the bound state itself moves.
+ * So when a strictly controlled owner **rejects** the change — the component
+ * emits, the owner declines to update the bound value — Vue re-renders nothing
+ * and the rejected text stays on screen even though the component's value never
+ * did. React does not have this problem: it re-renders and resets the node.
+ *
+ * `truth` is read *after* `nextTick` rather than passed by value, so it sees the
+ * state the owner settled on rather than the one that existed mid-keystroke.
+ * Uncontrolled (and accepted-controlled) use is a no-op: the two already agree.
+ */
+export declare function reassertValue(el: HTMLInputElement | HTMLTextAreaElement, truth: () => string): Promise<void>;

package/dist/utils/reassertValue.js

@@ -0,0 +1 @@
+import{nextTick as a}from"vue";async function e(e,t){await a();const s=t();e.value!==s&&(e.value=s)}export{e as reassertValue};

package/dist/utils/useBodyScrollLock.cjs

@@ -0,0 +1 @@
+let d=require("vue");var t=0,i="",l="";function c(r){if(typeof document>"u")return;let e=!1;function u(){if(!e){if(e=!0,t===0){const o=window.innerWidth-document.documentElement.clientWidth;i=document.body.style.overflow,l=document.body.style.paddingRight,document.body.style.overflow="hidden",o>0&&(document.body.style.paddingRight=`${o}px`)}t++}}function n(){e&&(e=!1,t--,t===0&&(document.body.style.overflow=i,document.body.style.paddingRight=l))}(0,d.watch)(r,o=>{o?u():n()},{immediate:!0}),(0,d.onBeforeUnmount)(n)}exports.useBodyScrollLock=c;

package/dist/utils/useBodyScrollLock.d.cts

@@ -0,0 +1,9 @@
+import { type Ref } from 'vue';
+/**
+ * Locks body scroll while `enabled`, compensating for scrollbar width.
+ * Reference-counted across concurrent lock holders (e.g. a nested Popover
+ * and AlertDialog both open) — only the 0→1 and 1→0 transitions touch
+ * `document.body.style`. Mirrors `packages/react/src/utils/useBodyScrollLock.ts`.
+ * @internal
+ */
+export declare function useBodyScrollLock(enabled: Ref<boolean>): void;

package/dist/utils/useBodyScrollLock.d.ts

@@ -0,0 +1,9 @@
+import { type Ref } from 'vue';
+/**
+ * Locks body scroll while `enabled`, compensating for scrollbar width.
+ * Reference-counted across concurrent lock holders (e.g. a nested Popover
+ * and AlertDialog both open) — only the 0→1 and 1→0 transitions touch
+ * `document.body.style`. Mirrors `packages/react/src/utils/useBodyScrollLock.ts`.
+ * @internal
+ */
+export declare function useBodyScrollLock(enabled: Ref<boolean>): void;

package/dist/utils/useBodyScrollLock.js

@@ -0,0 +1 @@
+import{onBeforeUnmount as o,watch as t}from"vue";var e=0,n="",d="";function i(i){if(typeof document>"u")return;let c=!1;function u(){c&&(c=!1,0===--e&&(document.body.style.overflow=n,document.body.style.paddingRight=d))}t(i,o=>{o?function(){if(!c){if(c=!0,0===e){const o=window.innerWidth-document.documentElement.clientWidth;n=document.body.style.overflow,d=document.body.style.paddingRight,document.body.style.overflow="hidden",o>0&&(document.body.style.paddingRight=`${o}px`)}e++}}():u()},{immediate:!0}),o(u)}export{i as useBodyScrollLock};

package/dist/utils/useDismiss.cjs

@@ -0,0 +1 @@
+let m=require("vue");function y({enabled:a,onEscapeKeyDown:f,onPointerDownOutside:v,onFocusOutside:E,onInteractOutside:n},w){if(typeof document>"u")return;let o;const u=e=>!w.some(t=>t.value?.contains(e)),i=e=>{e.key==="Escape"&&f?.(e)},r=e=>{const t=e.target;t&&u(t)&&(n?.(e),v?.(e))},s=e=>{const t=e.target;if(!t||t===document.body||!u(t))return;const d=new CustomEvent("focus-outside",{detail:e,cancelable:!0});n?.(d),E?.(d)};function l(){document.addEventListener("keydown",i),o=setTimeout(()=>{document.addEventListener("pointerdown",r,!0),document.addEventListener("focusin",s,!0)},0)}function c(){document.removeEventListener("keydown",i),clearTimeout(o),document.removeEventListener("pointerdown",r,!0),document.removeEventListener("focusin",s,!0)}(0,m.watch)(a,e=>{c(),e&&l()},{immediate:!0}),(0,m.onBeforeUnmount)(c)}exports.useDismiss=y;

package/dist/utils/useDismiss.d.cts

@@ -0,0 +1,38 @@
+import { type Ref } from 'vue';
+/**
+ * What `onFocusOutside` receives. `focusin` is not cancelable, so there would
+ * be nothing to `preventDefault()` on the real event — the handler gets a
+ * cancelable stand-in carrying the original as its `detail` instead.
+ */
+export type FocusOutsideEvent = CustomEvent<FocusEvent>;
+/** Either flavour of outside interaction, as `onInteractOutside` sees it. */
+export type InteractOutsideEvent = PointerEvent | FocusOutsideEvent;
+/** @internal Options for useDismiss: whether it is active and the Escape / outside-interaction callbacks. */
+export interface UseDismissOptions {
+    /** Whether dismiss listeners are active (usually the open state). */
+    enabled: Ref<boolean>;
+    /** Called on Escape keydown. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** Called on pointerdown outside every element in `insideRefs`. */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /** Called when focus moves to an element outside every element in `insideRefs`. */
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    /**
+     * Called for *either* kind of outside interaction, immediately **before**
+     * the specific handler above and with the same event object — so a single
+     * `preventDefault()` here is already visible to that handler and vetoes the
+     * dismissal whichever way it was triggered.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+/**
+ * Layer dismissal behavior shared by Dialog-like floating content (Popover,
+ * Tooltip, HoverCard, and future menu/select-style overlays). Consumers
+ * pass refs of elements that count as "inside".
+ *
+ * This composable only *reports*: the caller decides what dismissal means
+ * (Dialog ignores outside interaction unless modal, AlertDialog ignores it
+ * entirely) by checking `event.defaultPrevented` in its own handler. Mirrors
+ * `packages/react/src/utils/useDismiss.ts`. @internal
+ */
+export declare function useDismiss({ enabled, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside }: UseDismissOptions, insideRefs: Array<Ref<Element | null>>): void;

package/dist/utils/useDismiss.d.ts

@@ -0,0 +1,38 @@
+import { type Ref } from 'vue';
+/**
+ * What `onFocusOutside` receives. `focusin` is not cancelable, so there would
+ * be nothing to `preventDefault()` on the real event — the handler gets a
+ * cancelable stand-in carrying the original as its `detail` instead.
+ */
+export type FocusOutsideEvent = CustomEvent<FocusEvent>;
+/** Either flavour of outside interaction, as `onInteractOutside` sees it. */
+export type InteractOutsideEvent = PointerEvent | FocusOutsideEvent;
+/** @internal Options for useDismiss: whether it is active and the Escape / outside-interaction callbacks. */
+export interface UseDismissOptions {
+    /** Whether dismiss listeners are active (usually the open state). */
+    enabled: Ref<boolean>;
+    /** Called on Escape keydown. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** Called on pointerdown outside every element in `insideRefs`. */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /** Called when focus moves to an element outside every element in `insideRefs`. */
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    /**
+     * Called for *either* kind of outside interaction, immediately **before**
+     * the specific handler above and with the same event object — so a single
+     * `preventDefault()` here is already visible to that handler and vetoes the
+     * dismissal whichever way it was triggered.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+/**
+ * Layer dismissal behavior shared by Dialog-like floating content (Popover,
+ * Tooltip, HoverCard, and future menu/select-style overlays). Consumers
+ * pass refs of elements that count as "inside".
+ *
+ * This composable only *reports*: the caller decides what dismissal means
+ * (Dialog ignores outside interaction unless modal, AlertDialog ignores it
+ * entirely) by checking `event.defaultPrevented` in its own handler. Mirrors
+ * `packages/react/src/utils/useDismiss.ts`. @internal
+ */
+export declare function useDismiss({ enabled, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside }: UseDismissOptions, insideRefs: Array<Ref<Element | null>>): void;

package/dist/utils/useDismiss.js

@@ -0,0 +1 @@
+import{onBeforeUnmount as e,watch as n}from"vue";function t({enabled:t,onEscapeKeyDown:o,onPointerDownOutside:s,onFocusOutside:i,onInteractOutside:u},c){if(typeof document>"u")return;let d;const r=e=>!c.some(n=>n.value?.contains(e)),m=e=>{"Escape"===e.key&&o?.(e)},a=e=>{const n=e.target;n&&r(n)&&(u?.(e),s?.(e))},v=e=>{const n=e.target;if(!n||n===document.body||!r(n))return;const t=new CustomEvent("focus-outside",{detail:e,cancelable:!0});u?.(t),i?.(t)};function f(){document.removeEventListener("keydown",m),clearTimeout(d),document.removeEventListener("pointerdown",a,!0),document.removeEventListener("focusin",v,!0)}n(t,e=>{f(),e&&(document.addEventListener("keydown",m),d=setTimeout(()=>{document.addEventListener("pointerdown",a,!0),document.addEventListener("focusin",v,!0)},0))},{immediate:!0}),e(f)}export{t as useDismiss};

package/dist/utils/useFocusFirstItemOnOpen.cjs

@@ -0,0 +1 @@
+let i=require("vue");function o(n,t,u){let e;(0,i.watch)(t,r=>{e!==void 0&&cancelAnimationFrame(e),!(!r||typeof document>"u")&&(e=requestAnimationFrame(()=>{(n.value?.querySelector(u)??n.value)?.focus()}))},{immediate:!0}),(0,i.onBeforeUnmount)(()=>{e!==void 0&&cancelAnimationFrame(e)})}exports.useFocusFirstItemOnOpen=o;

package/dist/utils/useFocusFirstItemOnOpen.d.cts

@@ -0,0 +1,13 @@
+import { type Ref } from 'vue';
+/**
+ * Moves focus into a panel one frame after it opens: to the first `selector`
+ * match inside `contentRef`, or to the container itself when it has no items
+ * yet. The frame is what lets the panel mount and position before focus lands.
+ *
+ * Shared verbatim by `DropdownMenuContent`, `MenubarContent` and
+ * `SpeedDialContent`. `ContextMenuContent`, `SelectContent` and `Combobox`
+ * deliberately keep their own versions — they skip when focus is already
+ * inside, prefer the checked option, or move `aria-activedescendant` instead
+ * of real focus. @internal
+ */
+export declare function useFocusFirstItemOnOpen(contentRef: Ref<HTMLElement | null>, open: Readonly<Ref<boolean>>, selector: string): void;

package/dist/utils/useFocusFirstItemOnOpen.d.ts

@@ -0,0 +1,13 @@
+import { type Ref } from 'vue';
+/**
+ * Moves focus into a panel one frame after it opens: to the first `selector`
+ * match inside `contentRef`, or to the container itself when it has no items
+ * yet. The frame is what lets the panel mount and position before focus lands.
+ *
+ * Shared verbatim by `DropdownMenuContent`, `MenubarContent` and
+ * `SpeedDialContent`. `ContextMenuContent`, `SelectContent` and `Combobox`
+ * deliberately keep their own versions — they skip when focus is already
+ * inside, prefer the checked option, or move `aria-activedescendant` instead
+ * of real focus. @internal
+ */
+export declare function useFocusFirstItemOnOpen(contentRef: Ref<HTMLElement | null>, open: Readonly<Ref<boolean>>, selector: string): void;

package/dist/utils/useFocusFirstItemOnOpen.js

@@ -0,0 +1 @@
+import{onBeforeUnmount as e,watch as o}from"vue";function n(n,t,a){let i;o(t,e=>{void 0!==i&&cancelAnimationFrame(i),e&&!(typeof document>"u")&&(i=requestAnimationFrame(()=>{(n.value?.querySelector(a)??n.value)?.focus()}))},{immediate:!0}),e(()=>{void 0!==i&&cancelAnimationFrame(i)})}export{n as useFocusFirstItemOnOpen};

package/dist/utils/useFocusTrap.cjs

@@ -0,0 +1 @@
+let s=require("vue");var y=["a[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function E(n){return Array.from(n.querySelectorAll(y)).filter(t=>t.offsetParent!==null||t===document.activeElement)}function f(n,t){if(!t)return!0;const u=new CustomEvent(n,{cancelable:!0,detail:null});return t(u),!u.defaultPrevented}function A(n,t,u={}){let o=null,c,i=!1;const d=e=>{if(e.key!=="Tab")return;const a=n.value;if(!a)return;const r=E(a);if(r.length===0){e.preventDefault();return}const b=r[0],p=r[r.length-1],l=document.activeElement;e.shiftKey&&(l===b||l===a)?(e.preventDefault(),p.focus()):!e.shiftKey&&l===p&&(e.preventDefault(),b.focus())};function v(){const e=n.value;e&&(i=!0,o=document.activeElement,c=requestAnimationFrame(()=>{if(!f("open-auto-focus",u.onOpenAutoFocus))return;const a=E(e)[0]??e;e.contains(document.activeElement)||(e.tabIndex=e.tabIndex>=0?e.tabIndex:-1,a.focus({preventScroll:!0}))}),e.addEventListener("keydown",d))}function m(){if(!i)return;i=!1;const e=n.value;if(c!==void 0&&cancelAnimationFrame(c),e?.removeEventListener("keydown",d),!f("close-auto-focus",u.onCloseAutoFocus)){o=null;return}o&&o!==document.body&&document.contains(o)&&o.focus({preventScroll:!0}),o=null}(0,s.watch)(t,e=>{e?v():m()},{flush:"post"}),(0,s.onMounted)(()=>{t.value&&v()}),(0,s.onBeforeUnmount)(m)}exports.autoFocusEvent=f;exports.useFocusTrap=A;

package/dist/utils/useFocusTrap.d.cts

@@ -0,0 +1,28 @@
+import { type Ref } from 'vue';
+/** The cancelable stand-in an auto-focus handler receives — there is no native event for "I am about to move focus". */
+export type AutoFocusEvent = CustomEvent<null>;
+/**
+ * Announces an automatic focus move as a cancelable event and reports whether
+ * it may go ahead. Shared by the focus trap and by the overlays that return
+ * focus to their trigger by hand, so the veto means the same thing in both.
+ * Mirrors `autoFocusEvent` in `packages/react/src/utils/useFocusTrap.ts`. @internal
+ */
+export declare function autoFocusEvent(type: 'open-auto-focus' | 'close-auto-focus', handler?: (event: AutoFocusEvent) => void): boolean;
+/** @internal Consumer overrides for the two focus moves the trap makes on the overlay's behalf. */
+export interface FocusTrapOptions {
+    /** Fired before focus moves into the container; `preventDefault()` leaves focus where it is. */
+    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    /** Fired before focus returns to the previously focused element; `preventDefault()` suppresses the return. */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+}
+/**
+ * Traps Tab focus inside `containerRef` while `enabled`. Focuses the first
+ * tabbable element (or the container) once mounted/positioned, and restores
+ * focus to the previously-focused element when disabled/unmounted — each of
+ * those two moves first announced as a cancelable `open-auto-focus` /
+ * `close-auto-focus` event, so a consumer can redirect initial focus or take
+ * over the return when the trigger no longer exists (the WAI-ARIA modal
+ * pattern's two escape hatches). Mirrors
+ * `packages/react/src/utils/useFocusTrap.ts`. @internal
+ */
+export declare function useFocusTrap(containerRef: Ref<HTMLElement | null>, enabled: Ref<boolean>, options?: FocusTrapOptions): void;

package/dist/utils/useFocusTrap.d.ts

@@ -0,0 +1,28 @@
+import { type Ref } from 'vue';
+/** The cancelable stand-in an auto-focus handler receives — there is no native event for "I am about to move focus". */
+export type AutoFocusEvent = CustomEvent<null>;
+/**
+ * Announces an automatic focus move as a cancelable event and reports whether
+ * it may go ahead. Shared by the focus trap and by the overlays that return
+ * focus to their trigger by hand, so the veto means the same thing in both.
+ * Mirrors `autoFocusEvent` in `packages/react/src/utils/useFocusTrap.ts`. @internal
+ */
+export declare function autoFocusEvent(type: 'open-auto-focus' | 'close-auto-focus', handler?: (event: AutoFocusEvent) => void): boolean;
+/** @internal Consumer overrides for the two focus moves the trap makes on the overlay's behalf. */
+export interface FocusTrapOptions {
+    /** Fired before focus moves into the container; `preventDefault()` leaves focus where it is. */
+    onOpenAutoFocus?: (event: AutoFocusEvent) => void;
+    /** Fired before focus returns to the previously focused element; `preventDefault()` suppresses the return. */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+}
+/**
+ * Traps Tab focus inside `containerRef` while `enabled`. Focuses the first
+ * tabbable element (or the container) once mounted/positioned, and restores
+ * focus to the previously-focused element when disabled/unmounted — each of
+ * those two moves first announced as a cancelable `open-auto-focus` /
+ * `close-auto-focus` event, so a consumer can redirect initial focus or take
+ * over the return when the trigger no longer exists (the WAI-ARIA modal
+ * pattern's two escape hatches). Mirrors
+ * `packages/react/src/utils/useFocusTrap.ts`. @internal
+ */
+export declare function useFocusTrap(containerRef: Ref<HTMLElement | null>, enabled: Ref<boolean>, options?: FocusTrapOptions): void;

package/dist/utils/useFocusTrap.js

@@ -0,0 +1 @@
+import{onBeforeUnmount as e,onMounted as t,watch as n}from"vue";var o=["a[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function u(e){return Array.from(e.querySelectorAll(o)).filter(e=>null!==e.offsetParent||e===document.activeElement)}function a(e,t){if(!t)return!0;const n=new CustomEvent(e,{cancelable:!0,detail:null});return t(n),!n.defaultPrevented}function c(o,c,l={}){let r,s=null,i=!1;const d=e=>{if("Tab"!==e.key)return;const t=o.value;if(!t)return;const n=u(t);if(0===n.length)return void e.preventDefault();const a=n[0],c=n[n.length-1],l=document.activeElement;!e.shiftKey||l!==a&&l!==t?!e.shiftKey&&l===c&&(e.preventDefault(),a.focus()):(e.preventDefault(),c.focus())};function f(){const e=o.value;e&&(i=!0,s=document.activeElement,r=requestAnimationFrame(()=>{if(!a("open-auto-focus",l.onOpenAutoFocus))return;const t=u(e)[0]??e;e.contains(document.activeElement)||(e.tabIndex=e.tabIndex>=0?e.tabIndex:-1,t.focus({preventScroll:!0}))}),e.addEventListener("keydown",d))}function v(){if(!i)return;i=!1;const e=o.value;void 0!==r&&cancelAnimationFrame(r),e?.removeEventListener("keydown",d),a("close-auto-focus",l.onCloseAutoFocus)?(s&&s!==document.body&&document.contains(s)&&s.focus({preventScroll:!0}),s=null):s=null}n(c,e=>{e?f():v()},{flush:"post"}),t(()=>{c.value&&f()}),e(v)}export{a as autoFocusEvent,c as useFocusTrap};

package/dist/utils/useFormReset.cjs

@@ -0,0 +1 @@
+let r=require("vue");function u(n,s){let e=null;const t=()=>s();(0,r.watch)(n,o=>{e?.removeEventListener("reset",t),e=o?.form??null,e?.addEventListener("reset",t)},{immediate:!0,flush:"post"}),(0,r.onBeforeUnmount)(()=>e?.removeEventListener("reset",t))}exports.useFormReset=u;

package/dist/utils/useFormReset.d.cts

@@ -0,0 +1,19 @@
+/**
+ * @internal Runs `restore` whenever the `<form>` owning `control` is reset.
+ *
+ * A native input resets itself, but a value Vue owns does not: the component
+ * has to put its declared default back by hand. `control` is whatever element
+ * actually carries the value into the form — the wrapped native input, or the
+ * first hidden one — which is also how the form is found, since
+ * `HTMLInputElement.form` follows a `form=""` attribute as well as an
+ * enclosing `<form>`. It is read through a getter because that element only
+ * exists after mount, and can be replaced (or removed with `name`) later.
+ *
+ * `restore` runs from the `reset` event, i.e. *before* the browser resets the
+ * form's native controls. Components restoring a value Vue re-renders from
+ * (a hidden input bound with `:value.attr`, whose reset default is the
+ * attribute Vue keeps up to date) need nothing else; one writing into a native
+ * input's `value` property has to write it again on `nextTick`, after the
+ * browser's own reset has run.
+ */
+export declare function useFormReset(control: () => HTMLInputElement | null | undefined, restore: () => void): void;