@skdx/vue 0.27.0 → 0.28.0

package/dist/utils/popper.d.cts

@@ -4,16 +4,13 @@ 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`.
+ * Radix-like side/align API, 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.
+ * `start`/`end` are logical (swap in RTL); `left`/`right` are physical.
+ * `data-side` always reports a physical side.
  */
 export type Side = PhysicalSide | 'start' | 'end';
 /** @internal How floating content aligns along its chosen side: to the anchor's start, center, or end. */
@@ -30,12 +27,7 @@ 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.
- */
+/** @internal Injection key a `*Content` component provides so a nested `*Arrow` component can register and read its position. */
 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 {
@@ -46,41 +38,38 @@ export interface PopperPositionOptions {
     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`.
+     * Minimum distance in pixels kept from the collision boundary. A number
+     * applies to every side; an object sets only the sides it names.
      */
     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.
-     */
+    /** Element(s) collisions are measured against, instead of the content's clipping ancestors. */
     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.
+     * namespaced under — `"popover"` yields `--skdx-popover-available-width`. Never a public prop.
      * @internal
-     * @default undefined — an internal popper with no documented namespace writes no measurement properties at all.
+     * @default undefined — writes no measurement properties.
      */
     component?: string;
+    /**
+     * Clearance in pixels between the arrow and each end of the panel's edge.
+     * Defaults to `0`, not Popover's public `8`: every family shares this
+     * layer, and moving Tooltip's/HoverCard's arrows isn't their call.
+     * @default 0
+     */
+    arrowPadding?: number;
+    /**
+     * Hides the panel while the anchor is fully clipped out of view by a
+     * scroll container. Off by default: it costs an extra overflow
+     * measurement per reposition for a failure most anchors never risk.
+     * @default false
+     */
+    hideWhenDetached?: boolean;
 }
 /**
- * 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.
+ * Writes measurement custom properties onto the floating element so consumers
+ * can size the panel from CSS. Transform origin is derived from resolved
+ * side/align, so a flipped panel grows from its actual edge, not the arrow.
  * @internal
  */
 export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
@@ -91,19 +80,10 @@ export declare function setMeasurementProperties(floating: HTMLElement, componen
     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.
+ * Positions floating element relative to anchor, re-running on scroll/resize,
+ * with optional arrow. Cleans up and re-registers autoUpdate when either
+ * element changes identity while enabled. Options read fresh each pass
+ * (changes to side/offset/collision trigger reposition).
  * @internal
  */
 export declare function usePopperPosition(anchorRef: Ref<HTMLElement | null>, floatingRef: Ref<HTMLElement | null>, enabled: Ref<boolean>, options?: MaybeRefOrGetter<PopperPositionOptions>, arrowRef?: Ref<HTMLElement | null>): {
@@ -111,4 +91,9 @@ export declare function usePopperPosition(anchorRef: Ref<HTMLElement | null>, fl
     arrowStyle: import("vue").ComputedRef<CSSProperties>;
     placedSide: import("vue").ComputedRef<PhysicalSide>;
     placedAlign: import("vue").ComputedRef<Align>;
+    /**
+     * Recomputes position now (for families exposing public `reposition()`).
+     * No-op while either element is missing.
+     */
+    reposition: () => void;
 };

package/dist/utils/popper.d.ts

@@ -4,16 +4,13 @@ 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`.
+ * Radix-like side/align API, 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.
+ * `start`/`end` are logical (swap in RTL); `left`/`right` are physical.
+ * `data-side` always reports a physical side.
  */
 export type Side = PhysicalSide | 'start' | 'end';
 /** @internal How floating content aligns along its chosen side: to the anchor's start, center, or end. */
@@ -30,12 +27,7 @@ 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.
- */
+/** @internal Injection key a `*Content` component provides so a nested `*Arrow` component can register and read its position. */
 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 {
@@ -46,41 +38,38 @@ export interface PopperPositionOptions {
     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`.
+     * Minimum distance in pixels kept from the collision boundary. A number
+     * applies to every side; an object sets only the sides it names.
      */
     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.
-     */
+    /** Element(s) collisions are measured against, instead of the content's clipping ancestors. */
     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.
+     * namespaced under — `"popover"` yields `--skdx-popover-available-width`. Never a public prop.
      * @internal
-     * @default undefined — an internal popper with no documented namespace writes no measurement properties at all.
+     * @default undefined — writes no measurement properties.
      */
     component?: string;
+    /**
+     * Clearance in pixels between the arrow and each end of the panel's edge.
+     * Defaults to `0`, not Popover's public `8`: every family shares this
+     * layer, and moving Tooltip's/HoverCard's arrows isn't their call.
+     * @default 0
+     */
+    arrowPadding?: number;
+    /**
+     * Hides the panel while the anchor is fully clipped out of view by a
+     * scroll container. Off by default: it costs an extra overflow
+     * measurement per reposition for a failure most anchors never risk.
+     * @default false
+     */
+    hideWhenDetached?: boolean;
 }
 /**
- * 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.
+ * Writes measurement custom properties onto the floating element so consumers
+ * can size the panel from CSS. Transform origin is derived from resolved
+ * side/align, so a flipped panel grows from its actual edge, not the arrow.
  * @internal
  */
 export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
@@ -91,19 +80,10 @@ export declare function setMeasurementProperties(floating: HTMLElement, componen
     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.
+ * Positions floating element relative to anchor, re-running on scroll/resize,
+ * with optional arrow. Cleans up and re-registers autoUpdate when either
+ * element changes identity while enabled. Options read fresh each pass
+ * (changes to side/offset/collision trigger reposition).
  * @internal
  */
 export declare function usePopperPosition(anchorRef: Ref<HTMLElement | null>, floatingRef: Ref<HTMLElement | null>, enabled: Ref<boolean>, options?: MaybeRefOrGetter<PopperPositionOptions>, arrowRef?: Ref<HTMLElement | null>): {
@@ -111,4 +91,9 @@ export declare function usePopperPosition(anchorRef: Ref<HTMLElement | null>, fl
     arrowStyle: import("vue").ComputedRef<CSSProperties>;
     placedSide: import("vue").ComputedRef<PhysicalSide>;
     placedAlign: import("vue").ComputedRef<Align>;
+    /**
+     * Recomputes position now (for families exposing public `reposition()`).
+     * No-op while either element is missing.
+     */
+    reposition: () => void;
 };

package/dist/utils/popper.js

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

package/dist/utils/portal.d.cts

@@ -1,20 +1,6 @@
 /**
- * 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.
+ * Where SkdxPortal may move children. Superset of React's container (adds CSS
+ * selector). DocumentFragment (ShadowRoot), not just HTMLElement; Element for
+ * SVG. `null` → `document.body`.
  */
 export type PortalContainer = string | Element | DocumentFragment | null;

package/dist/utils/portal.d.ts

@@ -1,20 +1,6 @@
 /**
- * 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.
+ * Where SkdxPortal may move children. Superset of React's container (adds CSS
+ * selector). DocumentFragment (ShadowRoot), not just HTMLElement; Element for
+ * SVG. `null` → `document.body`.
  */
 export type PortalContainer = string | Element | DocumentFragment | null;

package/dist/utils/reassertValue.d.cts

@@ -1,16 +1,9 @@
 /**
- * @internal Puts the source of truth back into a user-editable element after an
- * edit has had its chance to propagate.
+ * @internal Reset an input to truth after a controlled owner rejects a change.
  *
- * 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.
+ * When owner declines to update a controlled `:value`, Vue doesn't re-render
+ * and rejected text stays on screen. `truth` is read after `nextTick`
+ * to see the state the owner settled on, not the mid-keystroke value.
+ * Uncontrolled 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

@@ -1,16 +1,9 @@
 /**
- * @internal Puts the source of truth back into a user-editable element after an
- * edit has had its chance to propagate.
+ * @internal Reset an input to truth after a controlled owner rejects a change.
  *
- * 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.
+ * When owner declines to update a controlled `:value`, Vue doesn't re-render
+ * and rejected text stays on screen. `truth` is read after `nextTick`
+ * to see the state the owner settled on, not the mid-keystroke value.
+ * Uncontrolled use is a no-op: the two already agree.
  */
 export declare function reassertValue(el: HTMLInputElement | HTMLTextAreaElement, truth: () => string): Promise<void>;

package/dist/utils/renderProp.cjs

@@ -0,0 +1 @@
+var r=e=>e.render();r.props=["render"];exports.RenderProp=r;

package/dist/utils/renderProp.d.cts

@@ -0,0 +1,8 @@
+import { type FunctionalComponent } from 'vue';
+/**
+ * @internal Renders whatever a `render*` prop returns (VNode, string, or
+ * array) inline, avoiding `{{ }}` stringification in template SFCs.
+ */
+export declare const RenderProp: FunctionalComponent<{
+    render: () => unknown;
+}>;

package/dist/utils/renderProp.d.ts

@@ -0,0 +1,8 @@
+import { type FunctionalComponent } from 'vue';
+/**
+ * @internal Renders whatever a `render*` prop returns (VNode, string, or
+ * array) inline, avoiding `{{ }}` stringification in template SFCs.
+ */
+export declare const RenderProp: FunctionalComponent<{
+    render: () => unknown;
+}>;

package/dist/utils/renderProp.js

@@ -0,0 +1 @@
+var r=r=>r.render();r.props=["render"];export{r as RenderProp};

package/dist/utils/resolveRel.cjs

@@ -0,0 +1 @@
+function n(r,e){return e!==void 0?e:r==="_blank"?"noopener noreferrer":void 0}exports.resolveRel=n;

package/dist/utils/resolveRel.d.cts

@@ -0,0 +1,5 @@
+/**
+ * Reverse-tabnabbing guard: defaults `rel` to `'noopener noreferrer'` when
+ * `target` is `'_blank'` and none was given; an explicit `rel` always wins.
+ */
+export declare function resolveRel(target: string | undefined, rel: string | undefined): string | undefined;

package/dist/utils/resolveRel.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Reverse-tabnabbing guard: defaults `rel` to `'noopener noreferrer'` when
+ * `target` is `'_blank'` and none was given; an explicit `rel` always wins.
+ */
+export declare function resolveRel(target: string | undefined, rel: string | undefined): string | undefined;

package/dist/utils/resolveRel.js

@@ -0,0 +1 @@
+function e(e,r){return void 0!==r?r:"_blank"===e?"noopener noreferrer":void 0}export{e as resolveRel};

package/dist/utils/scoredFilter.cjs

@@ -0,0 +1 @@
+function i(e){return typeof e=="number"?e>0:e}function d(e,s,f){const t=Array.from(e.querySelectorAll(s)),c=t.map(r=>({el:r,score:f(r.id)}));if(!c.some(r=>r.score!==null))return t;const n=[...c].sort((r,o)=>(o.score??0)-(r.score??0));return n.forEach(({el:r},o)=>{r.style.order=String(o)}),n.map(r=>r.el)}exports.filterKeeps=i;exports.orderByScore=d;

package/dist/utils/scoredFilter.d.cts

@@ -0,0 +1,26 @@
+/**
+ * Filter predicate shared by Command, Combobox, Autocomplete, MultiSelect:
+ * boolean keeps/excludes; number filters and ranks.
+ */
+export type ScoredFilterResult = boolean | number;
+/**
+ * Whether a {@link ScoredFilterResult} keeps the item: `0` and `false`
+ * exclude, `true` and any positive number keep. A negative number excludes
+ * too — the contract only promises a positive score keeps, so treating a
+ * negative one as a rejection (rather than JS's own truthiness, which would
+ * keep it) is the conservative reading.
+ */
+export declare function filterKeeps(result: ScoredFilterResult): boolean;
+/**
+ * Returns `container`'s currently-visible option elements in traversal
+ * order — descending filter score, ties keeping their original relative
+ * order (`Array.prototype.sort` is stable) — and sets inline CSS `order` on
+ * each to match, so a flex/grid container's visual sequence follows the same
+ * order arrow keys, typeahead and range-selection walk. A no-op on both
+ * counts when nothing scores numerically, so a boolean-only predicate leaves
+ * DOM and CSS order exactly as rendered.
+ *
+ * ponytail: `order` only reorders inside a flex or grid container — the skin
+ * is responsible for the list being one.
+ */
+export declare function orderByScore(container: HTMLElement, optionSelector: string, scoreOf: (id: string) => number | null): HTMLElement[];

package/dist/utils/scoredFilter.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Filter predicate shared by Command, Combobox, Autocomplete, MultiSelect:
+ * boolean keeps/excludes; number filters and ranks.
+ */
+export type ScoredFilterResult = boolean | number;
+/**
+ * Whether a {@link ScoredFilterResult} keeps the item: `0` and `false`
+ * exclude, `true` and any positive number keep. A negative number excludes
+ * too — the contract only promises a positive score keeps, so treating a
+ * negative one as a rejection (rather than JS's own truthiness, which would
+ * keep it) is the conservative reading.
+ */
+export declare function filterKeeps(result: ScoredFilterResult): boolean;
+/**
+ * Returns `container`'s currently-visible option elements in traversal
+ * order — descending filter score, ties keeping their original relative
+ * order (`Array.prototype.sort` is stable) — and sets inline CSS `order` on
+ * each to match, so a flex/grid container's visual sequence follows the same
+ * order arrow keys, typeahead and range-selection walk. A no-op on both
+ * counts when nothing scores numerically, so a boolean-only predicate leaves
+ * DOM and CSS order exactly as rendered.
+ *
+ * ponytail: `order` only reorders inside a flex or grid container — the skin
+ * is responsible for the list being one.
+ */
+export declare function orderByScore(container: HTMLElement, optionSelector: string, scoreOf: (id: string) => number | null): HTMLElement[];

package/dist/utils/scoredFilter.js

@@ -0,0 +1 @@
+function r(r){return"number"==typeof r?r>0:r}function e(r,e,o){const t=Array.from(r.querySelectorAll(e)),n=t.map(r=>({el:r,score:o(r.id)}));if(!n.some(r=>null!==r.score))return t;const s=[...n].sort((r,e)=>(e.score??0)-(r.score??0));return s.forEach(({el:r},e)=>{r.style.order=String(e)}),s.map(r=>r.el)}export{r as filterKeeps,e as orderByScore};

package/dist/utils/space.cjs

@@ -0,0 +1 @@
+var r=new Set(["1","2","3","4","5","6","8","10","12","16"]);function n(e){if(e!==void 0)return r.has(e)?`var(--skdx-space-${e})`:e}exports.resolveSpace=n;

package/dist/utils/space.d.cts

@@ -0,0 +1,5 @@
+/** Mirrors React's `resolveSpace.ts`; copied, not imported — packages don't depend on each other at runtime. */
+/** A spacing-scale token key, or any other string passed through as a raw CSS length. */
+export type Space = '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | (string & {});
+/** A scale key resolves to its token (`var(--skdx-space-<key>)`); anything else passes through verbatim. */
+export declare function resolveSpace(value: Space | undefined): string | undefined;

package/dist/utils/space.d.ts

@@ -0,0 +1,5 @@
+/** Mirrors React's `resolveSpace.ts`; copied, not imported — packages don't depend on each other at runtime. */
+/** A spacing-scale token key, or any other string passed through as a raw CSS length. */
+export type Space = '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | (string & {});
+/** A scale key resolves to its token (`var(--skdx-space-<key>)`); anything else passes through verbatim. */
+export declare function resolveSpace(value: Space | undefined): string | undefined;

package/dist/utils/space.js

@@ -0,0 +1 @@
+var e=/* @__PURE__ */new Set(["1","2","3","4","5","6","8","10","12","16"]);function a(a){if(void 0!==a)return e.has(a)?`var(--skdx-space-${a})`:a}export{a as resolveSpace};

package/dist/utils/tabbable.cjs

@@ -0,0 +1 @@
+var t=["a[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function n(e){return Array.from(e.querySelectorAll(t))}exports.TABBABLE_SELECTOR=t;exports.tabbablesWithin=n;

package/dist/utils/tabbable.d.cts

@@ -0,0 +1,9 @@
+/**
+ * Elements a `Tab` press can land on — tabbable elements for manual tab-order walks.
+ * @internal
+ */
+export declare const TABBABLE_SELECTOR: string;
+/**
+ * Every tabbable element inside `container`, in document order. @internal
+ */
+export declare function tabbablesWithin(container: Element): HTMLElement[];

package/dist/utils/tabbable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Elements a `Tab` press can land on — tabbable elements for manual tab-order walks.
+ * @internal
+ */
+export declare const TABBABLE_SELECTOR: string;
+/**
+ * Every tabbable element inside `container`, in document order. @internal
+ */
+export declare function tabbablesWithin(container: Element): HTMLElement[];

package/dist/utils/tabbable.js

@@ -0,0 +1 @@
+var t=["a[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function e(e){return Array.from(e.querySelectorAll(t))}export{t as TABBABLE_SELECTOR,e as tabbablesWithin};

package/dist/utils/useBodyScrollLock.d.cts

@@ -1,9 +1,7 @@
 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`.
+ * Lock body scroll while enabled, compensating for scrollbar width.
+ * Reference-counted: only 0→1 and 1→0 transitions modify `document.body.style`.
  * @internal
  */
 export declare function useBodyScrollLock(enabled: Ref<boolean>): void;

package/dist/utils/useBodyScrollLock.d.ts

@@ -1,9 +1,7 @@
 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`.
+ * Lock body scroll while enabled, compensating for scrollbar width.
+ * Reference-counted: only 0→1 and 1→0 transitions modify `document.body.style`.
  * @internal
  */
 export declare function useBodyScrollLock(enabled: Ref<boolean>): void;

package/dist/utils/useDismiss.cjs

@@ -1 +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;
+let f=require("vue");function E({enabled:e,onEscapeKeyDown:o,onPointerDownOutside:l,onFocusOutside:y,onInteractOutside:r},b){if(typeof document>"u")return;let i;const u=t=>!b.some(n=>n.value?.contains(t)),c=t=>{t.key==="Escape"&&o?.(t)},s=t=>{const n=t.target;n&&u(n)&&(r?.(t),l?.(t))},d=t=>{const n=t.target;if(!n||n===document.body||!u(n))return;const m=new CustomEvent("focus-outside",{detail:t,cancelable:!0});r?.(m),y?.(m)};function w(){document.addEventListener("keydown",c),i=setTimeout(()=>{document.addEventListener("pointerdown",s,!0),document.addEventListener("focusin",d,!0)},0)}function a(){document.removeEventListener("keydown",c),clearTimeout(i),document.removeEventListener("pointerdown",s,!0),document.removeEventListener("focusin",d,!0)}(0,f.watch)(e,t=>{a(),t&&w()},{immediate:!0}),(0,f.onBeforeUnmount)(a)}function p(e,o){return!o||e.target!==o?null:e instanceof PointerEvent?e:new PointerEvent("pointerdown",{bubbles:!0,cancelable:!0,composed:!0,pointerType:"mouse",clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY,button:e.button,buttons:e.buttons,ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,altKey:e.altKey,metaKey:e.metaKey})}exports.backdropPointerDown=p;exports.useDismiss=E;