@skdx/vue 0.27.0 → 0.29.0

package/dist/utils/mirroredValues.d.ts

@@ -0,0 +1,15 @@
+/** What {@link mirroredFormValues} needs beyond the selection itself. */
+export interface MirroredFormValuesOptions {
+    /**
+     * Whether the control is `required`; an empty selection then still mirrors one empty-valued control so `valueMissing` can fire.
+     * @defaultValue false
+     */
+    required?: boolean | undefined;
+    /**
+     * True for a control that holds at most one value, where an empty selection still submits one empty entry, like a native single `<select>`.
+     * @defaultValue false
+     */
+    singleValued?: boolean | undefined;
+}
+/** Mirrors an array-valued control as one visually-hidden native control per value, all sharing one `name`, read via `formData.getAll(name)`. */
+export declare function mirroredFormValues(values: readonly string[], options?: MirroredFormValuesOptions): string[];

package/dist/utils/mirroredValues.js

@@ -0,0 +1 @@
+function e(e,r={}){return e.length>0?[...e]:r.required||r.singleValued?[""]:[]}export{e as mirroredFormValues};

package/dist/utils/numberFormat.d.cts

@@ -1,19 +1,4 @@
-/**
- * `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.
- */
+/** Intl.NumberFormat-based number formatter; without `locale`/`formatOptions`, round-trips through `String` unchanged. */
 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.
- */
+/** Parses text into a number, tolerating everything {@link formatNumberValue} can emit; 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

@@ -1,19 +1,4 @@
-/**
- * `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.
- */
+/** Intl.NumberFormat-based number formatter; without `locale`/`formatOptions`, round-trips through `String` unchanged. */
 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.
- */
+/** Parses text into a number, tolerating everything {@link formatNumberValue} can emit; returns `NaN` when the text holds no number. */
 export declare function parseNumberValue(text: string, locale?: string, formatOptions?: Intl.NumberFormatOptions): number;

package/dist/utils/pin-chars.cjs

@@ -0,0 +1 @@
+var u={text:null,numeric:/^[0-9]$/,alphanumeric:/^[a-zA-Z0-9]$/,alphabetic:/^[a-zA-Z]$/};function c(t,n){if(n){const i=new RegExp(n);return r=>i.test(r)}const e=u[t]??null;return e?i=>e.test(i):()=>!0}function p(t,n){return`Digit ${t} of ${n}`}exports.pinCharAcceptor=c;exports.pinInputDigitLabel=p;

package/dist/utils/pin-chars.d.cts

@@ -0,0 +1,13 @@
+/** The character sets `type` names, in the spelling the contract declares. */
+export type PinInputType = 'text' | 'numeric' | 'alphanumeric' | 'alphabetic';
+/** Builds the per-character predicate used to accept or reject each keystroke. */
+export declare function pinCharAcceptor(type: PinInputType, pattern?: string): (char: string) => boolean;
+/** Returns the pattern source {@link pinCharAcceptor} applies, defaulting to `'.'` for `'text'`. */
+export declare function pinCharPattern(type: PinInputType, pattern?: string): string;
+/**
+ * The default accessible name for a pin box. `index` is 1-based (read aloud).
+ *
+ * @param index the box's position, counting from 1
+ * @param length how many boxes the code has
+ */
+export declare function pinInputDigitLabel(index: number, length: number): string;

package/dist/utils/pin-chars.d.ts

@@ -0,0 +1,13 @@
+/** The character sets `type` names, in the spelling the contract declares. */
+export type PinInputType = 'text' | 'numeric' | 'alphanumeric' | 'alphabetic';
+/** Builds the per-character predicate used to accept or reject each keystroke. */
+export declare function pinCharAcceptor(type: PinInputType, pattern?: string): (char: string) => boolean;
+/** Returns the pattern source {@link pinCharAcceptor} applies, defaulting to `'.'` for `'text'`. */
+export declare function pinCharPattern(type: PinInputType, pattern?: string): string;
+/**
+ * The default accessible name for a pin box. `index` is 1-based (read aloud).
+ *
+ * @param index the box's position, counting from 1
+ * @param length how many boxes the code has
+ */
+export declare function pinInputDigitLabel(index: number, length: number): string;

package/dist/utils/pin-chars.js

@@ -0,0 +1 @@
+var t={text:null,numeric:/^[0-9]$/,alphanumeric:/^[a-zA-Z0-9]$/,alphabetic:/^[a-zA-Z]$/};function n(n,e){if(e){const t=new RegExp(e);return n=>t.test(n)}const i=t[n]??null;return i?t=>i.test(t):()=>!0}function e(t,n){return`Digit ${t} of ${n}`}export{n as pinCharAcceptor,e as pinInputDigitLabel};

package/dist/utils/placement.cjs

@@ -0,0 +1 @@
+function O(t,e){return e==="center"?t:`${t}-${e}`}function g(t){const[e,i="center"]=t.split("-");return[e,i]}var w={start:"0%",center:"50%",end:"100%"};function c(t,e,i){const{availableWidth:r,availableHeight:d,triggerWidth:a,side:n,align:o}=i,s=w[o],p=n==="top"||n==="bottom"?`${s} ${n==="top"?"100%":"0%"}`:`${n==="left"?"100%":"0%"} ${s}`;t.style.setProperty(`--skdx-${e}-available-width`,`${r}px`),t.style.setProperty(`--skdx-${e}-available-height`,`${d}px`),t.style.setProperty(`--skdx-${e}-trigger-width`,`${a}px`),t.style.setProperty(`--skdx-${e}-transform-origin`,p)}var m={top:"bottom",right:"left",bottom:"top",left:"right"};function S(t,e){const i=m[e],r={position:"absolute",left:t?.x!=null?`${t.x}px`:"",top:t?.y!=null?`${t.y}px`:"",right:"",bottom:"",transform:""};return i==="top"&&Object.assign(r,{top:"0px",transform:"translateY(-100%)"}),i==="bottom"&&Object.assign(r,{bottom:"0px",transform:"translateY(100%)"}),i==="left"&&Object.assign(r,{left:"0px",transform:"translateX(-100%)"}),i==="right"&&Object.assign(r,{right:"0px",transform:"translateX(100%)"}),r}function v(t,e){const{sideOffset:i=0,alignOffset:r=0,avoidCollisions:d=!0,collisionPadding:a=8,collisionBoundary:n,component:o,arrow:s,arrowPadding:p=0,hideWhenDetached:f=!1}=e,l=n?{boundary:n}:{};return[t.offset({mainAxis:i,alignmentAxis:r}),...d?[t.flip({padding:a,...l}),t.shift({padding:a,limiter:t.limitShift(),...l})]:[],t.size({padding:a,...l,apply({availableWidth:h,availableHeight:y,elements:b,rects:x,placement:P}){if(!o)return;const[$,u]=g(P);c(b.floating,o,{availableWidth:h,availableHeight:y,triggerWidth:x.reference.width,side:$,align:u})}}),...s?[t.arrow({element:s,padding:p})]:[],...f?[t.hide({strategy:"referenceHidden",...l})]:[]]}exports.OPPOSITE_SIDE=m;exports.arrowStyle=S;exports.placementParts=g;exports.positioningMiddleware=v;exports.setMeasurementProperties=c;exports.toPlacement=O;

package/dist/utils/placement.d.cts

@@ -0,0 +1,102 @@
+/** A physical edge of the anchor. */
+export type PhysicalSide = 'top' | 'right' | 'bottom' | 'left';
+/** Side the floating content is placed against; `start`/`end` are logical and resolve under `dir`. */
+export type Side = PhysicalSide | 'start' | 'end';
+/** Alignment of the floating element along the chosen {@link Side}. */
+export type Align = 'start' | 'center' | 'end';
+/** Minimum distance from the collision boundary, for every side or per side. */
+export type CollisionPadding = number | Partial<Record<PhysicalSide, number>>;
+/** The floating-ui placement string for a resolved side and alignment. */
+export declare function toPlacement(side: PhysicalSide, align: Align): string;
+/** The side and alignment a floating-ui placement string resolved to. */
+export declare function placementParts(placement: string): [PhysicalSide, Align];
+/**
+ * Writes the four `--skdx-<component>-*` measurement properties onto the floating element after a reposition, with the transform origin derived from the resolved side/alignment so a flipped panel grows from the edge it actually sits on.
+ */
+export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
+    availableWidth: number;
+    availableHeight: number;
+    triggerWidth: number;
+    side: PhysicalSide;
+    align: Align;
+}): void;
+/** The edge an arrow sits on: opposite the side the panel was placed against. */
+export declare const OPPOSITE_SIDE: Record<PhysicalSide, PhysicalSide>;
+/** Inline style for an arrow element given floating-ui's arrow offsets and the resolved side. */
+export declare function arrowStyle(offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): {
+    position: 'absolute';
+    left: string;
+    top: string;
+    right: string;
+    bottom: string;
+    transform: string;
+};
+/** Applies {@link arrowStyle} to an arrow element in place. */
+export declare function styleArrow(el: HTMLElement, offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): void;
+/** What the `size` middleware reports after flip/shift settled. */
+export interface SizeState {
+    availableWidth: number;
+    availableHeight: number;
+    elements: {
+        floating: HTMLElement;
+    };
+    rects: {
+        reference: {
+            width: number;
+        };
+    };
+    placement: string;
+}
+/** The floating-ui middleware factories an adapter injects — `M` is its `Middleware`, `L` its shift limiter, `E` what its `arrow` accepts as the element. */
+export interface FloatingMiddleware<M, L, E> {
+    offset(options: {
+        mainAxis: number;
+        alignmentAxis: number;
+    }): M;
+    flip(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+    }): M;
+    shift(options: {
+        padding: CollisionPadding;
+        limiter: L;
+        boundary?: Element | Element[];
+    }): M;
+    limitShift(): L;
+    size(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+        apply(state: SizeState): void;
+    }): M;
+    arrow(options: {
+        element: E;
+        padding: number;
+    }): M;
+    hide(options: {
+        strategy: 'referenceHidden';
+        boundary?: Element | Element[];
+    }): M;
+}
+/** The options {@link positioningMiddleware} turns into a middleware list. */
+export interface PositioningOptions<E> {
+    sideOffset?: number | undefined;
+    alignOffset?: number | undefined;
+    avoidCollisions?: boolean | undefined;
+    collisionPadding?: CollisionPadding | undefined;
+    collisionBoundary?: Element | Element[] | null | undefined;
+    /** Kebab-case component name the measurement properties are written under; omitted, none are written. */
+    component?: string | undefined;
+    arrow?: E | null | undefined;
+    arrowPadding?: number | undefined;
+    hideWhenDetached?: boolean | undefined;
+}
+/**
+ * The one middleware order every panel uses: offset, then flip/shift when collisions are avoided, then `size` (so it measures the placement the content landed on), the arrow, and `hide` last so visibility is judged against the settled placement.
+ */
+export declare function positioningMiddleware<M, L, E>(fu: FloatingMiddleware<M, L, E>, options: PositioningOptions<E>): M[];

package/dist/utils/placement.d.ts

@@ -0,0 +1,102 @@
+/** A physical edge of the anchor. */
+export type PhysicalSide = 'top' | 'right' | 'bottom' | 'left';
+/** Side the floating content is placed against; `start`/`end` are logical and resolve under `dir`. */
+export type Side = PhysicalSide | 'start' | 'end';
+/** Alignment of the floating element along the chosen {@link Side}. */
+export type Align = 'start' | 'center' | 'end';
+/** Minimum distance from the collision boundary, for every side or per side. */
+export type CollisionPadding = number | Partial<Record<PhysicalSide, number>>;
+/** The floating-ui placement string for a resolved side and alignment. */
+export declare function toPlacement(side: PhysicalSide, align: Align): string;
+/** The side and alignment a floating-ui placement string resolved to. */
+export declare function placementParts(placement: string): [PhysicalSide, Align];
+/**
+ * Writes the four `--skdx-<component>-*` measurement properties onto the floating element after a reposition, with the transform origin derived from the resolved side/alignment so a flipped panel grows from the edge it actually sits on.
+ */
+export declare function setMeasurementProperties(floating: HTMLElement, component: string, measurements: {
+    availableWidth: number;
+    availableHeight: number;
+    triggerWidth: number;
+    side: PhysicalSide;
+    align: Align;
+}): void;
+/** The edge an arrow sits on: opposite the side the panel was placed against. */
+export declare const OPPOSITE_SIDE: Record<PhysicalSide, PhysicalSide>;
+/** Inline style for an arrow element given floating-ui's arrow offsets and the resolved side. */
+export declare function arrowStyle(offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): {
+    position: 'absolute';
+    left: string;
+    top: string;
+    right: string;
+    bottom: string;
+    transform: string;
+};
+/** Applies {@link arrowStyle} to an arrow element in place. */
+export declare function styleArrow(el: HTMLElement, offsets: {
+    x?: number | undefined;
+    y?: number | undefined;
+} | undefined, side: PhysicalSide): void;
+/** What the `size` middleware reports after flip/shift settled. */
+export interface SizeState {
+    availableWidth: number;
+    availableHeight: number;
+    elements: {
+        floating: HTMLElement;
+    };
+    rects: {
+        reference: {
+            width: number;
+        };
+    };
+    placement: string;
+}
+/** The floating-ui middleware factories an adapter injects — `M` is its `Middleware`, `L` its shift limiter, `E` what its `arrow` accepts as the element. */
+export interface FloatingMiddleware<M, L, E> {
+    offset(options: {
+        mainAxis: number;
+        alignmentAxis: number;
+    }): M;
+    flip(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+    }): M;
+    shift(options: {
+        padding: CollisionPadding;
+        limiter: L;
+        boundary?: Element | Element[];
+    }): M;
+    limitShift(): L;
+    size(options: {
+        padding: CollisionPadding;
+        boundary?: Element | Element[];
+        apply(state: SizeState): void;
+    }): M;
+    arrow(options: {
+        element: E;
+        padding: number;
+    }): M;
+    hide(options: {
+        strategy: 'referenceHidden';
+        boundary?: Element | Element[];
+    }): M;
+}
+/** The options {@link positioningMiddleware} turns into a middleware list. */
+export interface PositioningOptions<E> {
+    sideOffset?: number | undefined;
+    alignOffset?: number | undefined;
+    avoidCollisions?: boolean | undefined;
+    collisionPadding?: CollisionPadding | undefined;
+    collisionBoundary?: Element | Element[] | null | undefined;
+    /** Kebab-case component name the measurement properties are written under; omitted, none are written. */
+    component?: string | undefined;
+    arrow?: E | null | undefined;
+    arrowPadding?: number | undefined;
+    hideWhenDetached?: boolean | undefined;
+}
+/**
+ * The one middleware order every panel uses: offset, then flip/shift when collisions are avoided, then `size` (so it measures the placement the content landed on), the arrow, and `hide` last so visibility is judged against the settled placement.
+ */
+export declare function positioningMiddleware<M, L, E>(fu: FloatingMiddleware<M, L, E>, options: PositioningOptions<E>): M[];

package/dist/utils/placement.js

@@ -0,0 +1 @@
+function t(t,e){return"center"===e?t:`${t}-${e}`}function e(t){const[e,i="center"]=t.split("-");return[e,i]}var i={start:"0%",center:"50%",end:"100%"};function a(t,e,a){const{availableWidth:r,availableHeight:n,triggerWidth:s,side:o,align:l}=a,d=i[l],p="top"===o||"bottom"===o?`${d} ${"top"===o?"100%":"0%"}`:`${"left"===o?"100%":"0%"} ${d}`;t.style.setProperty(`--skdx-${e}-available-width`,`${r}px`),t.style.setProperty(`--skdx-${e}-available-height`,`${n}px`),t.style.setProperty(`--skdx-${e}-trigger-width`,`${s}px`),t.style.setProperty(`--skdx-${e}-transform-origin`,p)}var r={top:"bottom",right:"left",bottom:"top",left:"right"};function n(t,e){const i=r[e],a={position:"absolute",left:null!=t?.x?`${t.x}px`:"",top:null!=t?.y?`${t.y}px`:"",right:"",bottom:"",transform:""};return"top"===i&&Object.assign(a,{top:"0px",transform:"translateY(-100%)"}),"bottom"===i&&Object.assign(a,{bottom:"0px",transform:"translateY(100%)"}),"left"===i&&Object.assign(a,{left:"0px",transform:"translateX(-100%)"}),"right"===i&&Object.assign(a,{right:"0px",transform:"translateX(100%)"}),a}function s(t,i){const{sideOffset:r=0,alignOffset:n=0,avoidCollisions:s=!0,collisionPadding:o=8,collisionBoundary:l,component:d,arrow:p,arrowPadding:g=0,hideWhenDetached:f=!1}=i,c=l?{boundary:l}:{};return[t.offset({mainAxis:r,alignmentAxis:n}),...s?[t.flip({padding:o,...c}),t.shift({padding:o,limiter:t.limitShift(),...c})]:[],t.size({padding:o,...c,apply({availableWidth:t,availableHeight:i,elements:r,rects:n,placement:s}){if(!d)return;const[o,l]=e(s);a(r.floating,d,{availableWidth:t,availableHeight:i,triggerWidth:n.reference.width,side:o,align:l})}}),...p?[t.arrow({element:p,padding:g})]:[],...f?[t.hide({strategy:"referenceHidden",...c})]:[]]}export{r as OPPOSITE_SIDE,n as arrowStyle,e as placementParts,s as positioningMiddleware,a as setMeasurementProperties,t as toPlacement};

package/dist/utils/polymorphic.d.cts

@@ -0,0 +1,4 @@
+/** Kept in step with `@skdx/shared`'s `polymorphic.ts` contract; copied rather than imported since `@skdx/shared` is a devDependency, invisible at runtime. */
+export declare const POLYMORPHIC_TAGS: readonly ["a", "article", "aside", "footer", "header", "main", "nav", "section", "blockquote", "button", "caption", "code", "div", "dd", "dl", "dt", "em", "fieldset", "figcaption", "figure", "form", "h1", "h2", "h3", "h4", "h5", "h6", "kbd", "label", "legend", "li", "mark", "ol", "p", "pre", "small", "span", "strong", "table", "tbody", "td", "tfoot", "th", "thead", "time", "tr", "ul"];
+/** One of {@link POLYMORPHIC_TAGS} — the type of every part's `as` prop. */
+export type PolymorphicTag = (typeof POLYMORPHIC_TAGS)[number];

package/dist/utils/polymorphic.d.ts

@@ -0,0 +1,4 @@
+/** Kept in step with `@skdx/shared`'s `polymorphic.ts` contract; copied rather than imported since `@skdx/shared` is a devDependency, invisible at runtime. */
+export declare const POLYMORPHIC_TAGS: readonly ["a", "article", "aside", "footer", "header", "main", "nav", "section", "blockquote", "button", "caption", "code", "div", "dd", "dl", "dt", "em", "fieldset", "figcaption", "figure", "form", "h1", "h2", "h3", "h4", "h5", "h6", "kbd", "label", "legend", "li", "mark", "ol", "p", "pre", "small", "span", "strong", "table", "tbody", "td", "tfoot", "th", "thead", "time", "tr", "ul"];
+/** One of {@link POLYMORPHIC_TAGS} — the type of every part's `as` prop. */
+export type PolymorphicTag = (typeof POLYMORPHIC_TAGS)[number];

package/dist/utils/popper.cjs

@@ -1 +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;
+const O=require("./direction.cjs"),a=require("./placement.cjs");let i=require("vue"),o=require("@floating-ui/dom");var G={offset:o.offset,flip:o.flip,shift:o.shift,limitShift:o.limitShift,size:o.size,arrow:o.arrow,hide:o.hide},I=Symbol("skdx-popper-context"),L=Symbol("skdx-popper-arrow-context");function M(r,s,c,F={},W){function d(){const{side:e="bottom",align:t="center",sideOffset:p=0,alignOffset:v=0,avoidCollisions:m=!0,collisionPadding:h=8,collisionBoundary:P,component:g,arrowPadding:w=0,hideWhenDetached:y=!1}=(0,i.toValue)(F);return{side:e,align:t,sideOffset:p,alignOffset:v,avoidCollisions:m,collisionPadding:h,collisionBoundary:P,component:g,arrowPadding:w,hideWhenDetached:y}}const X=O.useDirection(),k=()=>{const e=r.value;return e&&"nodeType"in e?e:e?.contextElement??null},E=e=>O.resolvePhysicalSide(e,O.resolveDirection(k(),X())),x=d(),S=(0,i.ref)(E(x.side)),T=(0,i.ref)(x.align),A=(0,i.shallowRef)({position:"fixed",left:"0px",top:"0px"}),_=(0,i.shallowRef)({position:"absolute"});let l,n,q=0;function u(){const e=r.value,t=s.value;if(!e||!t)return;const{side:p,align:v,sideOffset:m,alignOffset:h,avoidCollisions:P,collisionPadding:g,collisionBoundary:w,component:y,arrowPadding:B,hideWhenDetached:D}=d(),R=++q;(0,o.computePosition)(e,t,{strategy:"fixed",placement:a.toPlacement(E(p),v),middleware:a.positioningMiddleware(G,{sideOffset:m,alignOffset:h,avoidCollisions:P,collisionPadding:g,collisionBoundary:w,component:y,arrow:W?.value,arrowPadding:B,hideWhenDetached:D})}).then(({x:$,y:z,placement:H,middlewareData:N})=>{if(R!==q)return;const U=N.hide?.referenceHidden===!0;A.value={position:"fixed",left:`${$}px`,top:`${z}px`,...U&&{visibility:"hidden",pointerEvents:"none"}};const[b,j]=a.placementParts(H);S.value=b,T.value=j,_.value=a.arrowStyle(N.arrow,b)})}function C(){n=void 0;const e=r.value,t=s.value;!e||!t||l||(l=(0,o.autoUpdate)(e,t,u))}function f(){n!==void 0&&cancelAnimationFrame(n),n=void 0,l?.(),l=void 0}return typeof document<"u"&&((0,i.watch)(c,e=>{e?n===void 0&&(n=requestAnimationFrame(C)):f()},{immediate:!0}),(0,i.watch)([r,s],([e,t])=>{c.value&&(f(),!(!e||!t)&&(n=requestAnimationFrame(C)))}),(0,i.watch)(()=>Object.values(d()),()=>{c.value&&u()}),(0,i.onBeforeUnmount)(f)),{style:(0,i.computed)(()=>A.value),arrowStyle:(0,i.computed)(()=>_.value),placedSide:(0,i.computed)(()=>S.value),placedAlign:(0,i.computed)(()=>T.value),reposition:u}}exports.ARROW_CONTEXT=L;exports.POPPER_CONTEXT=I;exports.usePopperPosition=M;

package/dist/utils/popper.d.cts

@@ -1,27 +1,22 @@
-import { type CSSProperties, type InjectionKey, type MaybeRefOrGetter, type Ref } from 'vue';
+import { type ComputedRef, type CSSProperties, type InjectionKey, type MaybeRefOrGetter, type Ref } from 'vue';
 import { type PhysicalSide } from './direction.cjs';
+import type { VirtualAnchor } from './mentions.cjs';
+import { type Align, type Side } from './placement.cjs';
+export { setMeasurementProperties, type Align, type Side } from './placement.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 positioning layer shared by every floating-content component, wrapping `@floating-ui/dom` with a Radix-like side/align API.
  * @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;
+    /**
+     * Registers the positioning reference. An explicit `Anchor` part passes
+     * `explicit`, which outranks the trigger's own registration however the two
+     * happen to mount.
+     */
+    setAnchor(node: HTMLElement | null, explicit?: boolean): void;
 }
 /** @internal Injection key connecting a PopperRoot to the anchor/trigger parts that register its positioning anchor. */
 export declare const POPPER_CONTEXT: InjectionKey<PopperContext>;
@@ -30,85 +25,45 @@ 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 {
     /** 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;
+    side?: Side | undefined;
+    align?: Align | undefined;
+    sideOffset?: number | undefined;
+    alignOffset?: number | undefined;
+    avoidCollisions?: boolean | undefined;
+    /** 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>> | undefined;
+    /** Element(s) collisions are measured against, instead of the content's clipping ancestors. */
+    collisionBoundary?: Element | Element[] | null | undefined;
     /**
-     * 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`.
+     * Kebab-case component name the measurement CSS custom properties are namespaced under.
+     * @internal
+     * @default undefined — writes no measurement properties.
      */
-    collisionPadding?: number | Partial<Record<PhysicalSide, number>>;
+    component?: string | undefined;
     /**
-     * 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.
+     * Clearance in pixels between the arrow and each end of the panel's edge.
+     * @default 0
      */
-    collisionBoundary?: Element | Element[] | null;
+    arrowPadding?: number | undefined;
     /**
-     * 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.
+     * Hides the panel while the anchor is fully clipped out of view by a scroll container.
+     * @default false
      */
-    component?: string;
+    hideWhenDetached?: boolean | undefined;
 }
 /**
- * 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.
+ * Positions a floating element relative to its anchor, re-running on scroll/resize, with an optional arrow.
  * @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>;
+export declare function usePopperPosition(anchorRef: Ref<HTMLElement | null> | Ref<VirtualAnchor | null>, floatingRef: Ref<HTMLElement | null>, enabled: Ref<boolean>, options?: MaybeRefOrGetter<PopperPositionOptions>, arrowRef?: Ref<HTMLElement | null>): {
+    style: ComputedRef<CSSProperties>;
+    arrowStyle: ComputedRef<CSSProperties>;
+    placedSide: ComputedRef<PhysicalSide>;
+    placedAlign: ComputedRef<Align>;
+    reposition: () => void;
 };