@skdx/vue 0.26.0

package/dist/tour/context.d.ts

@@ -0,0 +1,90 @@
+import type { ComputedRef, CSSProperties, InjectionKey, Ref } from 'vue';
+import type { Align, PhysicalSide, Side } from '../utils/popper.js';
+/**
+ * How a step presents itself. `tooltip` and `floating` both anchor to the
+ * step's target; `dialog` renders centred even when a target is present, so a
+ * step can spotlight an element while explaining it from the middle of the
+ * screen. Published as `data-type` on `SkdxTourContent` either way.
+ */
+export type TourStepType = 'tooltip' | 'dialog' | 'floating';
+/** One step of a tour. Steps are data, not markup — the whole list is passed to `SkdxTour`. */
+export interface TourStep {
+    /**
+     * The element this step points at: a CSS selector, the element itself, or a
+     * template ref holding it. A step with no target renders centred and
+     * spotlights nothing — that is how a tour opens and closes.
+     * @default undefined — the step is centred, with no spotlight and no anchoring.
+     */
+    target?: string | HTMLElement | Ref<HTMLElement | null> | null;
+    /**
+     * Short name for the step, announced to screen readers alongside its
+     * position. Purely for the announcement — render the visible heading with
+     * `SkdxTourTitle`.
+     * @default undefined — only the position ("Step 2 of 5") is announced.
+     */
+    title?: string;
+    /**
+     * Side of the target this step's content is placed against, fed straight to
+     * the shared popper layer. `start`/`end` are logical and mirror under RTL.
+     * @default undefined — falls back to `SkdxTourContent`'s own `side`, which defaults to `bottom`.
+     */
+    placement?: Side;
+    /**
+     * Alignment along `placement`.
+     * @default undefined — falls back to `SkdxTourContent`'s own `align`, which defaults to `center`.
+     */
+    align?: Align;
+    /**
+     * How this step presents itself. `dialog` forces centred content even with a
+     * target set; the other two anchor.
+     * @default undefined — anchored when the step has a target, centred when it does not.
+     */
+    type?: TourStepType;
+}
+/** @internal Shared, reactive state an `SkdxTour` distributes to its parts. */
+export interface TourContext {
+    steps: ComputedRef<TourStep[]>;
+    step: ComputedRef<number>;
+    total: ComputedRef<number>;
+    activeStep: ComputedRef<TourStep | undefined>;
+    open: ComputedRef<boolean>;
+    /** True when the active step's content is positioned against a resolved target rather than centred. */
+    anchored: ComputedRef<boolean>;
+    target: Readonly<Ref<HTMLElement | null>>;
+    /** The `--skdx-tour-x/-y/-width/-height` bag, already padded and clamped to the viewport. */
+    spotlightStyle: ComputedRef<Record<string, string>>;
+    contentRef: Ref<HTMLElement | null>;
+    contentId: string;
+    titleId: string;
+    descriptionId: string;
+    closeOnEscape: ComputedRef<boolean>;
+    closeOnInteractOutside: ComputedRef<boolean>;
+    setOpen(open: boolean): void;
+    goTo(index: number): void;
+    next(): void;
+    prev(): void;
+    skip(): void;
+    complete(): void;
+}
+/** @internal Injection key an `SkdxTour` provides so its parts share the step list, the active index and the spotlight geometry. */
+export declare const TOUR_CONTEXT: InjectionKey<TourContext>;
+/**
+ * @internal What `SkdxTourContent` hands its renderless positioner: the two
+ * element refs the shared popper layer needs, and the four result refs the
+ * positioner writes back into.
+ *
+ * It exists because `usePopperPosition` reads its anchor element and its
+ * `side`/`align` once, when it is enabled — and a tour re-anchors and
+ * re-places on every step. Remounting the positioner is what makes those
+ * re-read, without reaching into the shared util.
+ */
+export interface TourPositionContext {
+    contentRef: Ref<HTMLElement | null>;
+    arrowRef: Ref<HTMLElement | null>;
+    style: Ref<CSSProperties>;
+    arrowStyle: Ref<CSSProperties>;
+    placedSide: Ref<PhysicalSide>;
+    placedAlign: Ref<Align>;
+}
+/** @internal Injection key `SkdxTourContent` provides so its renderless positioner can position the panel it owns. */
+export declare const TOUR_POSITION: InjectionKey<TourPositionContext>;

package/dist/tour/context.js

@@ -0,0 +1 @@
+var o=/* @__PURE__ */Symbol("skdx-tour-context"),t=/* @__PURE__ */Symbol("skdx-tour-position");export{o as TOUR_CONTEXT,t as TOUR_POSITION};

package/dist/tour/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Tour.vue.cjs"),e=require("./TourTrigger.vue.cjs"),u=require("./TourPortal.vue.cjs"),o=require("./TourBackdrop.vue.cjs"),i=require("./TourSpotlight.vue.cjs"),t=require("./TourContent.vue.cjs"),T=require("./TourArrow.vue.cjs"),d=require("./TourTitle.vue.cjs"),q=require("./TourDescription.vue.cjs"),g=require("./TourProgressText.vue.cjs"),l=require("./TourNextTrigger.vue.cjs"),n=require("./TourPrevTrigger.vue.cjs"),s=require("./TourSkipTrigger.vue.cjs"),a=require("./TourCloseTrigger.vue.cjs");exports.SkdxTour=r.default;exports.SkdxTourArrow=T.default;exports.SkdxTourBackdrop=o.default;exports.SkdxTourCloseTrigger=a.default;exports.SkdxTourContent=t.default;exports.SkdxTourDescription=q.default;exports.SkdxTourNextTrigger=l.default;exports.SkdxTourPortal=u.default;exports.SkdxTourPrevTrigger=n.default;exports.SkdxTourProgressText=g.default;exports.SkdxTourSkipTrigger=s.default;exports.SkdxTourSpotlight=i.default;exports.SkdxTourTitle=d.default;exports.SkdxTourTrigger=e.default;

package/dist/tour/index.d.cts

@@ -0,0 +1,15 @@
+export { default as SkdxTour } from './Tour.vue.cjs';
+export { default as SkdxTourTrigger } from './TourTrigger.vue.cjs';
+export { default as SkdxTourPortal } from './TourPortal.vue.cjs';
+export { default as SkdxTourBackdrop } from './TourBackdrop.vue.cjs';
+export { default as SkdxTourSpotlight } from './TourSpotlight.vue.cjs';
+export { default as SkdxTourContent } from './TourContent.vue.cjs';
+export { default as SkdxTourArrow } from './TourArrow.vue.cjs';
+export { default as SkdxTourTitle } from './TourTitle.vue.cjs';
+export { default as SkdxTourDescription } from './TourDescription.vue.cjs';
+export { default as SkdxTourProgressText } from './TourProgressText.vue.cjs';
+export { default as SkdxTourNextTrigger } from './TourNextTrigger.vue.cjs';
+export { default as SkdxTourPrevTrigger } from './TourPrevTrigger.vue.cjs';
+export { default as SkdxTourSkipTrigger } from './TourSkipTrigger.vue.cjs';
+export { default as SkdxTourCloseTrigger } from './TourCloseTrigger.vue.cjs';
+export type { TourStep, TourStepType } from './context.cjs';

package/dist/tour/index.d.ts

@@ -0,0 +1,15 @@
+export { default as SkdxTour } from './Tour.vue.js';
+export { default as SkdxTourTrigger } from './TourTrigger.vue.js';
+export { default as SkdxTourPortal } from './TourPortal.vue.js';
+export { default as SkdxTourBackdrop } from './TourBackdrop.vue.js';
+export { default as SkdxTourSpotlight } from './TourSpotlight.vue.js';
+export { default as SkdxTourContent } from './TourContent.vue.js';
+export { default as SkdxTourArrow } from './TourArrow.vue.js';
+export { default as SkdxTourTitle } from './TourTitle.vue.js';
+export { default as SkdxTourDescription } from './TourDescription.vue.js';
+export { default as SkdxTourProgressText } from './TourProgressText.vue.js';
+export { default as SkdxTourNextTrigger } from './TourNextTrigger.vue.js';
+export { default as SkdxTourPrevTrigger } from './TourPrevTrigger.vue.js';
+export { default as SkdxTourSkipTrigger } from './TourSkipTrigger.vue.js';
+export { default as SkdxTourCloseTrigger } from './TourCloseTrigger.vue.js';
+export type { TourStep, TourStepType } from './context.js';

package/dist/tour/index.js

@@ -0,0 +1 @@
+import r from"./Tour.vue.js";import o from"./TourTrigger.vue.js";import u from"./TourPortal.vue.js";import T from"./TourBackdrop.vue.js";import e from"./TourSpotlight.vue.js";import s from"./TourContent.vue.js";import i from"./TourArrow.vue.js";import t from"./TourTitle.vue.js";import m from"./TourDescription.vue.js";import g from"./TourProgressText.vue.js";import p from"./TourNextTrigger.vue.js";import x from"./TourPrevTrigger.vue.js";import a from"./TourSkipTrigger.vue.js";import k from"./TourCloseTrigger.vue.js";export{r as SkdxTour,i as SkdxTourArrow,T as SkdxTourBackdrop,k as SkdxTourCloseTrigger,s as SkdxTourContent,m as SkdxTourDescription,p as SkdxTourNextTrigger,u as SkdxTourPortal,x as SkdxTourPrevTrigger,g as SkdxTourProgressText,a as SkdxTourSkipTrigger,e as SkdxTourSpotlight,t as SkdxTourTitle,o as SkdxTourTrigger};

package/dist/transfer/Transfer.vue.cjs

@@ -0,0 +1 @@
+const e=require("./Transfer.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

package/dist/transfer/Transfer.vue.d.cts

@@ -0,0 +1,132 @@
+import { type TransferDirection, type TransferItemData, type TransferMoveDetail } from './context.cjs';
+/**
+ * The Vue implementation of the shared Transfer contract (see `@skdx/shared`'s
+ * `transferContract`). A two-list transfer (also "pick list" or "dual list
+ * box"): a pool of items on one side, the chosen ones on the other, and
+ * triggers that move items between them. Renders a plain `<div>` — the two
+ * `role="listbox"` elements are its `SkdxTransferList` parts.
+ *
+ * Membership is the only stored state: `value` holds the ids on the target
+ * side, and both lists are *derived* from `items` plus that array, so the two
+ * sides cannot drift apart. Each list additionally owns a transient
+ * marked-for-move multi-selection, which is cleared for whichever side an item
+ * leaves.
+ *
+ * Every move is reachable without a pointer. Each list is one Tab stop with its
+ * own roving focus, the move triggers are real buttons with names that say
+ * direction and count, each move is announced politely, and focus lands on the
+ * option that took the moved item's place — never on `<body>`.
+ *
+ * Works controlled (`v-model:value` or `value` + `@value-change`) or
+ * uncontrolled (`default-value`).
+ *
+ * @example
+ * ```vue
+ * <SkdxTransfer :items="FRAMEWORKS" :default-value="['react']">
+ *   <SkdxTransferListHeader side="source">Available</SkdxTransferListHeader>
+ *   <SkdxTransferList side="source" />
+ *   <SkdxTransferEmpty side="source">Nothing left to add.</SkdxTransferEmpty>
+ *
+ *   <SkdxTransferControls>
+ *     <SkdxTransferMoveTrigger direction="toTarget">→</SkdxTransferMoveTrigger>
+ *     <SkdxTransferMoveTrigger direction="toSource">←</SkdxTransferMoveTrigger>
+ *   </SkdxTransferControls>
+ *
+ *   <SkdxTransferListHeader side="target">Selected</SkdxTransferListHeader>
+ *   <SkdxTransferList side="target" />
+ *   <SkdxTransferEmpty side="target">Nothing selected yet.</SkdxTransferEmpty>
+ * </SkdxTransfer>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * The whole collection, both sides at once. Each side is *derived* from this
+     * plus `value`, never stored separately — one array is the source of truth,
+     * so the two lists cannot drift apart.
+     */
+    items: TransferItemData[];
+    /**
+     * The ids currently on the target side, for controlled usage. Pair with
+     * `v-model:value` or `@value-change`. Rendering order always follows
+     * `items`, not this array, so a controlled consumer never has to keep two
+     * orderings in sync.
+     * @default undefined — uncontrolled, tracks its own membership internally.
+     */
+    value?: string[];
+    /**
+     * The ids initially on the target side, for uncontrolled usage.
+     * @default undefined — every item starts on the source side.
+     */
+    defaultValue?: string[];
+    /**
+     * Disables both lists and every move trigger at once. Individual items can
+     * still be disabled on their own via `TransferItemData.disabled`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Enables per-list filtering. While `false`, `SkdxTransferListSearch` renders
+     * nothing and `filter` is never called — so the search box cannot be left
+     * on screen as decoration that does not work.
+     * @default false — both lists show everything on their side.
+     */
+    searchable?: boolean;
+    /**
+     * Decides whether an item survives its list's current query. Only consulted
+     * while `searchable`.
+     * @default undefined — case-insensitive substring match against `item.label`.
+     */
+    filter?: (item: TransferItemData, query: string) => boolean;
+    /**
+     * Words the accessible name of every `SkdxTransferMoveTrigger` and
+     * `SkdxTransferMoveAllTrigger` under this root. `all` distinguishes the two,
+     * and `count` is how many items pressing it would actually move — zero
+     * included, because the trigger stays focusable with nothing to move and
+     * has to say why.
+     *
+     * The only way to translate those names: they are computed from live
+     * counts, so a static `aria-label` on the trigger cannot express them.
+     * @default undefined — the built-in English wording ("Move 3 items to selected").
+     */
+    getMoveLabel?: (count: number, direction: TransferDirection, all: boolean) => string;
+    /**
+     * Words the polite live-region announcement made after each move. Return
+     * `''` to say nothing at all.
+     * @default undefined — the built-in English wording ("3 items moved to selected. 5 remaining in available.").
+     */
+    getMoveAnnouncement?: (detail: TransferMoveDetail) => string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string[]) => any;
+    "value-change": (value: string[]) => any;
+    move: (detail: {
+        items: TransferItemData[];
+        direction: TransferDirection;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string[]) => any) | undefined;
+    "onValue-change"?: ((value: string[]) => any) | undefined;
+    onMove?: ((detail: {
+        items: TransferItemData[];
+        direction: TransferDirection;
+    }) => any) | undefined;
+}>, {
+    disabled: boolean;
+    filter: (item: TransferItemData, query: string) => boolean;
+    value: string[];
+    defaultValue: string[];
+    searchable: boolean;
+    getMoveLabel: (count: number, direction: TransferDirection, all: boolean) => string;
+    getMoveAnnouncement: (detail: TransferMoveDetail) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transfer/Transfer.vue.d.ts

@@ -0,0 +1,132 @@
+import { type TransferDirection, type TransferItemData, type TransferMoveDetail } from './context.js';
+/**
+ * The Vue implementation of the shared Transfer contract (see `@skdx/shared`'s
+ * `transferContract`). A two-list transfer (also "pick list" or "dual list
+ * box"): a pool of items on one side, the chosen ones on the other, and
+ * triggers that move items between them. Renders a plain `<div>` — the two
+ * `role="listbox"` elements are its `SkdxTransferList` parts.
+ *
+ * Membership is the only stored state: `value` holds the ids on the target
+ * side, and both lists are *derived* from `items` plus that array, so the two
+ * sides cannot drift apart. Each list additionally owns a transient
+ * marked-for-move multi-selection, which is cleared for whichever side an item
+ * leaves.
+ *
+ * Every move is reachable without a pointer. Each list is one Tab stop with its
+ * own roving focus, the move triggers are real buttons with names that say
+ * direction and count, each move is announced politely, and focus lands on the
+ * option that took the moved item's place — never on `<body>`.
+ *
+ * Works controlled (`v-model:value` or `value` + `@value-change`) or
+ * uncontrolled (`default-value`).
+ *
+ * @example
+ * ```vue
+ * <SkdxTransfer :items="FRAMEWORKS" :default-value="['react']">
+ *   <SkdxTransferListHeader side="source">Available</SkdxTransferListHeader>
+ *   <SkdxTransferList side="source" />
+ *   <SkdxTransferEmpty side="source">Nothing left to add.</SkdxTransferEmpty>
+ *
+ *   <SkdxTransferControls>
+ *     <SkdxTransferMoveTrigger direction="toTarget">→</SkdxTransferMoveTrigger>
+ *     <SkdxTransferMoveTrigger direction="toSource">←</SkdxTransferMoveTrigger>
+ *   </SkdxTransferControls>
+ *
+ *   <SkdxTransferListHeader side="target">Selected</SkdxTransferListHeader>
+ *   <SkdxTransferList side="target" />
+ *   <SkdxTransferEmpty side="target">Nothing selected yet.</SkdxTransferEmpty>
+ * </SkdxTransfer>
+ * ```
+ */
+type __VLS_Props = {
+    /**
+     * The whole collection, both sides at once. Each side is *derived* from this
+     * plus `value`, never stored separately — one array is the source of truth,
+     * so the two lists cannot drift apart.
+     */
+    items: TransferItemData[];
+    /**
+     * The ids currently on the target side, for controlled usage. Pair with
+     * `v-model:value` or `@value-change`. Rendering order always follows
+     * `items`, not this array, so a controlled consumer never has to keep two
+     * orderings in sync.
+     * @default undefined — uncontrolled, tracks its own membership internally.
+     */
+    value?: string[];
+    /**
+     * The ids initially on the target side, for uncontrolled usage.
+     * @default undefined — every item starts on the source side.
+     */
+    defaultValue?: string[];
+    /**
+     * Disables both lists and every move trigger at once. Individual items can
+     * still be disabled on their own via `TransferItemData.disabled`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Enables per-list filtering. While `false`, `SkdxTransferListSearch` renders
+     * nothing and `filter` is never called — so the search box cannot be left
+     * on screen as decoration that does not work.
+     * @default false — both lists show everything on their side.
+     */
+    searchable?: boolean;
+    /**
+     * Decides whether an item survives its list's current query. Only consulted
+     * while `searchable`.
+     * @default undefined — case-insensitive substring match against `item.label`.
+     */
+    filter?: (item: TransferItemData, query: string) => boolean;
+    /**
+     * Words the accessible name of every `SkdxTransferMoveTrigger` and
+     * `SkdxTransferMoveAllTrigger` under this root. `all` distinguishes the two,
+     * and `count` is how many items pressing it would actually move — zero
+     * included, because the trigger stays focusable with nothing to move and
+     * has to say why.
+     *
+     * The only way to translate those names: they are computed from live
+     * counts, so a static `aria-label` on the trigger cannot express them.
+     * @default undefined — the built-in English wording ("Move 3 items to selected").
+     */
+    getMoveLabel?: (count: number, direction: TransferDirection, all: boolean) => string;
+    /**
+     * Words the polite live-region announcement made after each move. Return
+     * `''` to say nothing at all.
+     * @default undefined — the built-in English wording ("3 items moved to selected. 5 remaining in available.").
+     */
+    getMoveAnnouncement?: (detail: TransferMoveDetail) => string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (value: string[]) => any;
+    "value-change": (value: string[]) => any;
+    move: (detail: {
+        items: TransferItemData[];
+        direction: TransferDirection;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:value"?: ((value: string[]) => any) | undefined;
+    "onValue-change"?: ((value: string[]) => any) | undefined;
+    onMove?: ((detail: {
+        items: TransferItemData[];
+        direction: TransferDirection;
+    }) => any) | undefined;
+}>, {
+    disabled: boolean;
+    filter: (item: TransferItemData, query: string) => boolean;
+    value: string[];
+    defaultValue: string[];
+    searchable: boolean;
+    getMoveLabel: (count: number, direction: TransferDirection, all: boolean) => string;
+    getMoveAnnouncement: (detail: TransferMoveDetail) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transfer/Transfer.vue.js

@@ -0,0 +1 @@
+import e from"./Transfer.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

package/dist/transfer/Transfer.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const P=require("../utils/id.cjs"),Q=require("../utils/liveAnnouncer.cjs"),s=require("./context.cjs");let a=require("vue");var X=["data-disabled"],$=(0,a.defineComponent)({__name:"Transfer",props:{items:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},searchable:{type:Boolean,default:!1},filter:{type:Function,default:void 0},getMoveLabel:{type:Function,default:void 0},getMoveAnnouncement:{type:Function,default:void 0}},emits:["update:value","value-change","move"],setup(T,{emit:O}){const n=T,g=O,M=P.nextId("transfer"),y=(0,a.ref)(n.defaultValue??[]),b=(0,a.computed)(()=>n.value??y.value),d=(0,a.ref)({source:[],target:[]}),c=(0,a.ref)({source:"",target:""}),f=(0,a.ref)({source:null,target:null}),m=(0,a.ref)({source:!1,target:!1}),N={source:null,target:null},I={source:null,target:null},r=(0,a.computed)(()=>({source:n.items.filter(e=>!b.value.includes(e.value)),target:n.items.filter(e=>b.value.includes(e.value))})),q=(0,a.computed)(()=>{if(!n.searchable)return r.value;const e=n.filter??s.defaultTransferFilter,t=u=>c.value[u].trim()===""?r.value[u]:r.value[u].filter(i=>e(i,c.value[u]));return{source:t("source"),target:t("target")}}),A=(0,a.computed)(()=>({source:d.value.source.filter(e=>r.value.source.some(t=>t.value===e)),target:d.value.target.filter(e=>r.value.target.some(t=>t.value===e))}));function V(e){n.value===void 0&&(y.value=e),g("update:value",e),g("value-change",e)}function S(e,t){d.value={...d.value,[e]:t}}function E(e,t){c.value[e]!==t&&(c.value={...c.value,[e]:t})}function k(e,t){f.value[e]!==t&&(f.value={...f.value,[e]:t})}function L(e,t){m.value[e]!==t&&(m.value={...m.value,[e]:t})}function x(e,t){I[e]=t}function B(e,t){const u=I[e];if(!u)return;const i=Array.from(u.querySelectorAll(s.OPTION_SELECTOR)),v=i[Math.min(t,i.length-1)];if(v){const o=v.getAttribute("data-value");o&&k(e,o),v.focus()}else u.focus()}function R(e,t){if(n.disabled)return;const u=s.ORIGIN_OF[e],i=s.DESTINATION_OF[e],v=r.value[u],o=t.map(l=>v.find(_=>_.value===l)).filter(l=>l!==void 0&&!l.disabled);if(o.length===0)return;const p=o.map(l=>l.value),C=q.value[u].filter(l=>!l.disabled),F=p.map(l=>C.findIndex(_=>_.value===l)).filter(l=>l>=0),D=F.length>0?Math.min(...F):0,h=b.value,G=A.value[u];V(e==="toTarget"?[...h,...p.filter(l=>!h.includes(l))]:h.filter(l=>!p.includes(l))),S(u,G.filter(l=>!p.includes(l))),g("move",{items:o,direction:e});const H={moved:o.length,remaining:v.length-o.length,direction:e,from:u,to:i};Q.announce((n.getMoveAnnouncement??s.moveAnnouncement)(H)),(0,a.nextTick)(()=>B(u,D))}return(0,a.provide)(s.TRANSFER_CONTEXT,{baseId:M,disabled:(0,a.computed)(()=>n.disabled),searchable:(0,a.computed)(()=>n.searchable),sideItems:r,visibleItems:q,marked:A,setMarked:S,query:(0,a.computed)(()=>c.value),setQuery:E,active:(0,a.computed)(()=>f.value),setActive:k,anchor:N,labelled:(0,a.computed)(()=>m.value),registerHeader:L,registerList:x,move:R,moveLabel:(e,t,u)=>(n.getMoveLabel??s.moveTriggerLabel)(e,t,u)}),(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",{class:"skdx-transfer","data-part":"root","data-skdx-component":"transfer","data-disabled":T.disabled?"":void 0},[(0,a.renderSlot)(e.$slots,"default")],8,X))}});exports.default=$;

package/dist/transfer/Transfer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{nextId as e}from"../utils/id.js";import{announce as a}from"../utils/liveAnnouncer.js";import{DESTINATION_OF as t,OPTION_SELECTOR as l,ORIGIN_OF as u,TRANSFER_CONTEXT as r,defaultTransferFilter as n,moveAnnouncement as o,moveTriggerLabel as s}from"./context.js";import{computed as i,createElementBlock as v,defineComponent as d,nextTick as c,openBlock as f,provide as m,ref as g,renderSlot as p}from"vue";var b=["data-disabled"],h=/* @__PURE__ */d({__name:"Transfer",props:{items:{},value:{default:void 0},defaultValue:{default:void 0},disabled:{type:Boolean,default:!1},searchable:{type:Boolean,default:!1},filter:{type:Function,default:void 0},getMoveLabel:{type:Function,default:void 0},getMoveAnnouncement:{type:Function,default:void 0}},emits:["update:value","value-change","move"],setup(d,{emit:h}){const T=d,A=h,I=e("transfer"),y=g(T.defaultValue??[]),O=i(()=>T.value??y.value),k=g({source:[],target:[]}),x=g({source:"",target:""}),F=g({source:null,target:null}),M=g({source:!1,target:!1}),E={source:null,target:null},L=i(()=>({source:T.items.filter(e=>!O.value.includes(e.value)),target:T.items.filter(e=>O.value.includes(e.value))})),N=i(()=>{if(!T.searchable)return L.value;const e=T.filter??n,a=a=>""===x.value[a].trim()?L.value[a]:L.value[a].filter(t=>e(t,x.value[a]));return{source:a("source"),target:a("target")}}),_=i(()=>({source:k.value.source.filter(e=>L.value.source.some(a=>a.value===e)),target:k.value.target.filter(e=>L.value.target.some(a=>a.value===e))}));function S(e,a){k.value={...k.value,[e]:a}}function B(e,a){F.value[e]!==a&&(F.value={...F.value,[e]:a})}return m(r,{baseId:I,disabled:i(()=>T.disabled),searchable:i(()=>T.searchable),sideItems:L,visibleItems:N,marked:_,setMarked:S,query:i(()=>x.value),setQuery:function(e,a){x.value[e]!==a&&(x.value={...x.value,[e]:a})},active:i(()=>F.value),setActive:B,anchor:{source:null,target:null},labelled:i(()=>M.value),registerHeader:function(e,a){M.value[e]!==a&&(M.value={...M.value,[e]:a})},registerList:function(e,a){E[e]=a},move:function(e,r){if(T.disabled)return;const n=u[e],s=t[e],i=L.value[n],v=r.map(e=>i.find(a=>a.value===e)).filter(e=>void 0!==e&&!e.disabled);if(0===v.length)return;const d=v.map(e=>e.value),f=N.value[n].filter(e=>!e.disabled),m=d.map(e=>f.findIndex(a=>a.value===e)).filter(e=>e>=0),g=m.length>0?Math.min(...m):0,p=O.value,b=_.value[n];(function(e){void 0===T.value&&(y.value=e),A("update:value",e),A("value-change",e)})("toTarget"===e?[...p,...d.filter(e=>!p.includes(e))]:p.filter(e=>!d.includes(e))),S(n,b.filter(e=>!d.includes(e))),A("move",{items:v,direction:e});const h={moved:v.length,remaining:i.length-v.length,direction:e,from:n,to:s};a((T.getMoveAnnouncement??o)(h)),c(()=>function(e,a){const t=E[e];if(!t)return;const u=Array.from(t.querySelectorAll(l)),r=u[Math.min(a,u.length-1)];if(r){const a=r.getAttribute("data-value");a&&B(e,a),r.focus()}else t.focus()}(n,g))},moveLabel:(e,a,t)=>(T.getMoveLabel??s)(e,a,t)}),(e,a)=>(f(),v("div",{class:"skdx-transfer","data-part":"root","data-skdx-component":"transfer","data-disabled":d.disabled?"":void 0},[p(e.$slots,"default")],8,b))}});export{h as default};

package/dist/transfer/TransferControls.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TransferControls.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

package/dist/transfer/TransferControls.vue.d.cts

@@ -0,0 +1,29 @@
+/**
+ * The named `role="group"` holding the move triggers. Without it the buttons
+ * are announced as loose controls stranded between two lists; with it they are
+ * announced as the thing that moves items between them.
+ *
+ * Purely a wrapper — it owns no state and changes no behaviour, so the triggers
+ * work outside it too. Use it anyway.
+ *
+ * @example
+ * ```vue
+ * <SkdxTransferControls>
+ *   <SkdxTransferMoveTrigger direction="toTarget">→</SkdxTransferMoveTrigger>
+ *   <SkdxTransferMoveTrigger direction="toSource">←</SkdxTransferMoveTrigger>
+ * </SkdxTransferControls>
+ * ```
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transfer/TransferControls.vue.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The named `role="group"` holding the move triggers. Without it the buttons
+ * are announced as loose controls stranded between two lists; with it they are
+ * announced as the thing that moves items between them.
+ *
+ * Purely a wrapper — it owns no state and changes no behaviour, so the triggers
+ * work outside it too. Use it anyway.
+ *
+ * @example
+ * ```vue
+ * <SkdxTransferControls>
+ *   <SkdxTransferMoveTrigger direction="toTarget">→</SkdxTransferMoveTrigger>
+ *   <SkdxTransferMoveTrigger direction="toSource">←</SkdxTransferMoveTrigger>
+ * </SkdxTransferControls>
+ * ```
+ */
+type __VLS_Props = {};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transfer/TransferControls.vue.js

@@ -0,0 +1 @@
+import r from"./TransferControls.vue_vue_type_script_setup_true_lang.js";var e=r;export{e as default};

package/dist/transfer/TransferControls.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const o=require("./context.cjs");let e=require("vue");var a=["data-disabled"],s=(0,e.defineComponent)({__name:"TransferControls",setup(l){const r=(0,e.inject)(o.TRANSFER_CONTEXT);if(!r)throw new Error("SkdxTransferControls must be used within SkdxTransfer.");const t=r;return(n,d)=>((0,e.openBlock)(),(0,e.createElementBlock)("div",{class:"skdx-transfer__controls","data-part":"controls",role:"group","aria-label":"Move items","data-disabled":(0,e.unref)(t).disabled.value?"":void 0},[(0,e.renderSlot)(n.$slots,"default")],8,a))}});exports.default=s;

package/dist/transfer/TransferControls.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TRANSFER_CONTEXT as e}from"./context.js";import{createElementBlock as a,defineComponent as r,inject as s,openBlock as t,renderSlot as o,unref as n}from"vue";var d=["data-disabled"],l=/* @__PURE__ */r({__name:"TransferControls",setup(r){const l=s(e);if(!l)throw new Error("SkdxTransferControls must be used within SkdxTransfer.");const i=l;return(e,r)=>(t(),a("div",{class:"skdx-transfer__controls","data-part":"controls",role:"group","aria-label":"Move items","data-disabled":n(i).disabled.value?"":void 0},[o(e.$slots,"default")],8,d))}});export{l as default};

package/dist/transfer/TransferEmpty.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TransferEmpty.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

package/dist/transfer/TransferEmpty.vue.d.cts

@@ -0,0 +1,36 @@
+import { type TransferSide } from './context.cjs';
+/**
+ * The message shown while one side has nothing to render — either genuinely
+ * empty, or filtered down to nothing. Renders nothing otherwise, so it is safe
+ * to leave in the tree permanently.
+ *
+ * It is a sibling of its `SkdxTransferList`, not a child: a `role="listbox"` may
+ * only contain options and groups, and a bare paragraph inside one is invalid
+ * ARIA that some screen readers drop entirely. Hence its own `side`.
+ *
+ * There is no `renderEmpty` prop. This part *is* the empty state, and a render
+ * prop alongside it would be two ways to say the same thing that disagree the
+ * moment someone uses both.
+ *
+ * @example
+ * ```vue
+ * <SkdxTransferList side="source" />
+ * <SkdxTransferEmpty side="source">Nothing left to add.</SkdxTransferEmpty>
+ * ```
+ */
+type __VLS_Props = {
+    /** Which side's emptiness this message covers. */
+    side: TransferSide;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transfer/TransferEmpty.vue.d.ts

@@ -0,0 +1,36 @@
+import { type TransferSide } from './context.js';
+/**
+ * The message shown while one side has nothing to render — either genuinely
+ * empty, or filtered down to nothing. Renders nothing otherwise, so it is safe
+ * to leave in the tree permanently.
+ *
+ * It is a sibling of its `SkdxTransferList`, not a child: a `role="listbox"` may
+ * only contain options and groups, and a bare paragraph inside one is invalid
+ * ARIA that some screen readers drop entirely. Hence its own `side`.
+ *
+ * There is no `renderEmpty` prop. This part *is* the empty state, and a render
+ * prop alongside it would be two ways to say the same thing that disagree the
+ * moment someone uses both.
+ *
+ * @example
+ * ```vue
+ * <SkdxTransferList side="source" />
+ * <SkdxTransferEmpty side="source">Nothing left to add.</SkdxTransferEmpty>
+ * ```
+ */
+type __VLS_Props = {
+    /** Which side's emptiness this message covers. */
+    side: TransferSide;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transfer/TransferEmpty.vue.js

@@ -0,0 +1 @@
+import e from"./TransferEmpty.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

package/dist/transfer/TransferEmpty.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const n=require("./context.cjs");let e=require("vue");var d=["data-side"],i=(0,e.defineComponent)({inheritAttrs:!1,__name:"TransferEmpty",props:{side:{}},setup(t){const r=(0,e.inject)(n.TRANSFER_CONTEXT);if(!r)throw new Error("SkdxTransferEmpty must be used within SkdxTransfer.");const a=r;return(s,u)=>(0,e.unref)(a).visibleItems.value[t.side].length===0?((0,e.openBlock)(),(0,e.createElementBlock)("div",(0,e.mergeProps)({key:0,class:"skdx-transfer__empty","data-part":"empty","data-side":t.side,"data-empty":""},s.$attrs),[(0,e.renderSlot)(s.$slots,"default")],16,d)):(0,e.createCommentVNode)("",!0)}});exports.default=i;

package/dist/transfer/TransferEmpty.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TRANSFER_CONTEXT as e}from"./context.js";import{createCommentVNode as t,createElementBlock as s,defineComponent as a,inject as r,mergeProps as n,openBlock as o,renderSlot as d,unref as i}from"vue";var m=["data-side"],p=/* @__PURE__ */a({inheritAttrs:!1,__name:"TransferEmpty",props:{side:{}},setup(a){const p=r(e);if(!p)throw new Error("SkdxTransferEmpty must be used within SkdxTransfer.");const f=p;return(e,r)=>0===i(f).visibleItems.value[a.side].length?(o(),s("div",n({key:0,class:"skdx-transfer__empty","data-part":"empty","data-side":a.side,"data-empty":""},e.$attrs),[d(e.$slots,"default")],16,m)):t("",!0)}});export{p as default};

package/dist/transfer/TransferItem.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TransferItem.vue_vue_type_script_setup_true_lang.cjs");var r=e.default;exports.default=r;

package/dist/transfer/TransferItem.vue.d.cts

@@ -0,0 +1,47 @@
+/**
+ * One option inside an `SkdxTransferList` — a `role="option"` that also knows
+ * which side it is on. Marking it does **not** move it: marking is the
+ * transient "I want to move this" state, and an `SkdxTransferMoveTrigger` (or
+ * the outward arrow key) is what commits the move.
+ *
+ * Click, Enter, or Space toggles it into the marked set; **Shift+Click** marks
+ * the whole range from the anchor — the last option marked without Shift —
+ * mirroring Shift+ArrowUp/Down.
+ *
+ * Publishes `aria-selected`, `data-side`, `data-value`, `data-state`,
+ * `data-selected` while marked, `data-disabled`, and the roving `tabindex` its
+ * list owns.
+ *
+ * You only render this yourself when `SkdxTransferList`'s default rendering is
+ * not enough — it otherwise renders one per visible item on its side.
+ */
+type __VLS_Props = {
+    /** The id of the `TransferItemData` entry this option renders. */
+    value: string;
+    /**
+     * Excludes this option from marking, navigation, and moves.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text typeahead matches this option against, published as
+     * `data-text-value`.
+     * @default undefined — falls back to the option's rendered text content, indicator glyph included.
+     */
+    textValue?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    textValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};