@skdx/vue 0.27.0 → 0.29.0

package/dist/tour/index.d.ts

@@ -1,15 +1,2 @@
 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';
+export type { TourStep, TourStepChange, TourStepType } from './context.js';

package/dist/tour/index.js

@@ -1 +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};
+import o from"./Tour.vue.js";export{o as SkdxTour};

package/dist/tour/primitives.cjs

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

package/dist/tour/primitives.d.cts

@@ -0,0 +1,40 @@
+/**
+ * Advanced primitives for custom `SkdxTour` layouts.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxTour, SkdxTourBackdrop, SkdxTourContent, SkdxTourNextTrigger, SkdxTourPortal, SkdxTourSpotlight, SkdxTourTitle, SkdxTourTrigger } from '@skdx/vue/primitives/tour';
+ * </script>
+ *
+ * <template>
+ *   <SkdxTour :steps="steps">
+ *     <SkdxTourTrigger>Take the tour</SkdxTourTrigger>
+ *     <SkdxTourPortal>
+ *       <SkdxTourBackdrop />
+ *       <SkdxTourSpotlight />
+ *       <SkdxTourContent>
+ *         <SkdxTourTitle>Your inbox</SkdxTourTitle>
+ *         <SkdxTourNextTrigger>Next</SkdxTourNextTrigger>
+ *       </SkdxTourContent>
+ *     </SkdxTourPortal>
+ *   </SkdxTour>
+ * </template>
+ * ```
+ */
+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 SkdxTourActions } from './TourActions.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/primitives.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Advanced primitives for custom `SkdxTour` layouts.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { SkdxTour, SkdxTourBackdrop, SkdxTourContent, SkdxTourNextTrigger, SkdxTourPortal, SkdxTourSpotlight, SkdxTourTitle, SkdxTourTrigger } from '@skdx/vue/primitives/tour';
+ * </script>
+ *
+ * <template>
+ *   <SkdxTour :steps="steps">
+ *     <SkdxTourTrigger>Take the tour</SkdxTourTrigger>
+ *     <SkdxTourPortal>
+ *       <SkdxTourBackdrop />
+ *       <SkdxTourSpotlight />
+ *       <SkdxTourContent>
+ *         <SkdxTourTitle>Your inbox</SkdxTourTitle>
+ *         <SkdxTourNextTrigger>Next</SkdxTourNextTrigger>
+ *       </SkdxTourContent>
+ *     </SkdxTourPortal>
+ *   </SkdxTour>
+ * </template>
+ * ```
+ */
+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 SkdxTourActions } from './TourActions.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/primitives.js

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

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

@@ -1,24 +1,6 @@
-import { type TransferDirection, type TransferItemData, type TransferMoveDetail } from './context.cjs';
+import { type TransferDirection, type TransferFilterMatchMode, type TransferItemData, type TransferListScrollDetail, type TransferMoveDetail, type TransferSearchResultsDetail, type TransferTargetOrder } 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`).
+ * Two-list transfer (pick list / dual listbox) that moves items between source and target sides.
  *
  * @example
  * ```vue
@@ -26,12 +8,10 @@ import { type TransferDirection, type TransferItemData, type TransferMoveDetail
  *   <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>
@@ -39,62 +19,61 @@ import { type TransferDirection, type TransferItemData, type TransferMoveDetail
  * ```
  */
 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.
-     */
+    /** All items; each side derives from this plus `value` — one source of truth. */
     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
-     */
+    /** Target-side ids for controlled usage; render order follows `items`, not this array. @default undefined — uncontrolled. */
+    value?: string[] | undefined;
+    /** Initial target-side ids for uncontrolled usage of the transfer. @default undefined — source side. */
+    defaultValue?: string[] | undefined;
+    /** Disables lists and triggers; individual items disable 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.
-     */
+    /** Form field name; each target-side id submits as its own entry (like `<select multiple>`). @default undefined — no submission. */
+    name?: string;
+    /** Form id for Transfer outside the form DOM (e.g. portalled dialog). @default undefined — nearest ancestor form. */
+    form?: string;
+    /** Enable per-list filtering; when false, search renders nothing. @default false — show all items. */
     searchable?: boolean;
+    /** Decides item survival in search query (consulted when `searchable`). @default undefined — substring match. */
+    filter?: ((item: TransferItemData, query: string) => boolean) | undefined;
+    /** Query match mode for the built-in matcher; ignored when `filter` is given. */
+    filterMatchMode?: TransferFilterMatchMode;
+    /** Computes accessible names for move triggers from live counts. @default undefined — English wording. */
+    getMoveLabel?: ((count: number, direction: TransferDirection, all: boolean) => string) | undefined;
+    /** Polite live-region announcement after each move; return `''` for silent. @default undefined — English wording. */
+    getMoveAnnouncement?: ((detail: TransferMoveDetail) => string) | undefined;
+    /** Announces when a search query settles, per side, when `searchable`; return `''` for silent. @default undefined — English. */
+    getSearchResultsAnnouncement?: ((detail: TransferSearchResultsDetail) => string) | undefined;
+    /** Item placement on target side: `'items'` (collection order), `'append'`, or `'prepend'`. @default 'items' */
+    targetOrder?: TransferTargetOrder;
+    /** Headers for derived list headers; ignored when slot supplies parts. @default undefined — "Available" and "Selected". */
+    titles?: {
+        source?: string;
+        target?: string;
+    } | undefined;
+    /** Render item content in derived lists. @default undefined — item's own `label`. */
+    renderItem?: ((item: TransferItemData) => unknown) | undefined;
+    /** Empty-state text for `empty` and `noMatch`, with `{query}` replaced by the search text. @default { empty: 'Nothing here.', noMatch: 'No match for "{query}".' } */
+    emptyText?: {
+        empty?: string;
+        noMatch?: string;
+    } | undefined;
+    /** Include a move-all trigger per direction, off by default since it is destructive on long lists. @default false */
+    showMoveAll?: boolean;
     /**
-     * Decides whether an item survives its list's current query. Only consulted
-     * while `searchable`.
-     * @default undefined — case-insensitive substring match against `item.label`.
+     * How tightly the skin packs each list's options, applied to the derived List parts.
+     * @default undefined — falls back to a `data-density` attribute.
      */
-    filter?: (item: TransferItemData, query: string) => boolean;
+    density?: 'compact' | (string & {}) | undefined;
     /**
-     * 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").
+     * Outline the skin gives each list, applied to the derived List parts.
+     * @default undefined — falls back to a `data-shape` attribute.
      */
-    getMoveLabel?: (count: number, direction: TransferDirection, all: boolean) => string;
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
     /**
-     * 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.").
+     * Size rung the skin renders each list at, applied to the derived List parts.
+     * @default undefined — falls back to a `data-size` attribute.
      */
-    getMoveAnnouncement?: (detail: TransferMoveDetail) => string;
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -107,21 +86,26 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
         items: TransferItemData[];
         direction: TransferDirection;
     }) => any;
+    "list-scroll": (detail: TransferListScrollDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string[]) => any) | undefined;
-    "onValue-change"?: ((value: string[]) => any) | undefined;
-    onMove?: ((detail: {
+    "onUpdate:value"?: (value: string[]) => any;
+    "onValue-change"?: (value: string[]) => any;
+    onMove?: (detail: {
         items: TransferItemData[];
         direction: TransferDirection;
-    }) => any) | undefined;
+    }) => any;
+    "onList-scroll"?: (detail: TransferListScrollDetail) => any;
 }>, {
+    filter: ((item: TransferItemData, query: string) => boolean) | undefined;
     disabled: boolean;
-    filter: (item: TransferItemData, query: string) => boolean;
-    value: string[];
-    defaultValue: string[];
+    size: "sm" | "lg" | (string & {}) | undefined;
+    shape: "square" | "rounded" | (string & {}) | undefined;
+    density: "compact" | (string & {}) | undefined;
     searchable: boolean;
-    getMoveLabel: (count: number, direction: TransferDirection, all: boolean) => string;
-    getMoveAnnouncement: (detail: TransferMoveDetail) => string;
+    showMoveAll: boolean;
+    filterMatchMode: TransferFilterMatchMode;
+    getMoveLabel: ((count: number, direction: TransferDirection, all: boolean) => string) | undefined;
+    targetOrder: TransferTargetOrder;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,24 +1,6 @@
-import { type TransferDirection, type TransferItemData, type TransferMoveDetail } from './context.js';
+import { type TransferDirection, type TransferFilterMatchMode, type TransferItemData, type TransferListScrollDetail, type TransferMoveDetail, type TransferSearchResultsDetail, type TransferTargetOrder } 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`).
+ * Two-list transfer (pick list / dual listbox) that moves items between source and target sides.
  *
  * @example
  * ```vue
@@ -26,12 +8,10 @@ import { type TransferDirection, type TransferItemData, type TransferMoveDetail
  *   <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>
@@ -39,62 +19,61 @@ import { type TransferDirection, type TransferItemData, type TransferMoveDetail
  * ```
  */
 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.
-     */
+    /** All items; each side derives from this plus `value` — one source of truth. */
     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
-     */
+    /** Target-side ids for controlled usage; render order follows `items`, not this array. @default undefined — uncontrolled. */
+    value?: string[] | undefined;
+    /** Initial target-side ids for uncontrolled usage of the transfer. @default undefined — source side. */
+    defaultValue?: string[] | undefined;
+    /** Disables lists and triggers; individual items disable 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.
-     */
+    /** Form field name; each target-side id submits as its own entry (like `<select multiple>`). @default undefined — no submission. */
+    name?: string;
+    /** Form id for Transfer outside the form DOM (e.g. portalled dialog). @default undefined — nearest ancestor form. */
+    form?: string;
+    /** Enable per-list filtering; when false, search renders nothing. @default false — show all items. */
     searchable?: boolean;
+    /** Decides item survival in search query (consulted when `searchable`). @default undefined — substring match. */
+    filter?: ((item: TransferItemData, query: string) => boolean) | undefined;
+    /** Query match mode for the built-in matcher; ignored when `filter` is given. */
+    filterMatchMode?: TransferFilterMatchMode;
+    /** Computes accessible names for move triggers from live counts. @default undefined — English wording. */
+    getMoveLabel?: ((count: number, direction: TransferDirection, all: boolean) => string) | undefined;
+    /** Polite live-region announcement after each move; return `''` for silent. @default undefined — English wording. */
+    getMoveAnnouncement?: ((detail: TransferMoveDetail) => string) | undefined;
+    /** Announces when a search query settles, per side, when `searchable`; return `''` for silent. @default undefined — English. */
+    getSearchResultsAnnouncement?: ((detail: TransferSearchResultsDetail) => string) | undefined;
+    /** Item placement on target side: `'items'` (collection order), `'append'`, or `'prepend'`. @default 'items' */
+    targetOrder?: TransferTargetOrder;
+    /** Headers for derived list headers; ignored when slot supplies parts. @default undefined — "Available" and "Selected". */
+    titles?: {
+        source?: string;
+        target?: string;
+    } | undefined;
+    /** Render item content in derived lists. @default undefined — item's own `label`. */
+    renderItem?: ((item: TransferItemData) => unknown) | undefined;
+    /** Empty-state text for `empty` and `noMatch`, with `{query}` replaced by the search text. @default { empty: 'Nothing here.', noMatch: 'No match for "{query}".' } */
+    emptyText?: {
+        empty?: string;
+        noMatch?: string;
+    } | undefined;
+    /** Include a move-all trigger per direction, off by default since it is destructive on long lists. @default false */
+    showMoveAll?: boolean;
     /**
-     * Decides whether an item survives its list's current query. Only consulted
-     * while `searchable`.
-     * @default undefined — case-insensitive substring match against `item.label`.
+     * How tightly the skin packs each list's options, applied to the derived List parts.
+     * @default undefined — falls back to a `data-density` attribute.
      */
-    filter?: (item: TransferItemData, query: string) => boolean;
+    density?: 'compact' | (string & {}) | undefined;
     /**
-     * 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").
+     * Outline the skin gives each list, applied to the derived List parts.
+     * @default undefined — falls back to a `data-shape` attribute.
      */
-    getMoveLabel?: (count: number, direction: TransferDirection, all: boolean) => string;
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
     /**
-     * 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.").
+     * Size rung the skin renders each list at, applied to the derived List parts.
+     * @default undefined — falls back to a `data-size` attribute.
      */
-    getMoveAnnouncement?: (detail: TransferMoveDetail) => string;
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -107,21 +86,26 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
         items: TransferItemData[];
         direction: TransferDirection;
     }) => any;
+    "list-scroll": (detail: TransferListScrollDetail) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:value"?: ((value: string[]) => any) | undefined;
-    "onValue-change"?: ((value: string[]) => any) | undefined;
-    onMove?: ((detail: {
+    "onUpdate:value"?: (value: string[]) => any;
+    "onValue-change"?: (value: string[]) => any;
+    onMove?: (detail: {
         items: TransferItemData[];
         direction: TransferDirection;
-    }) => any) | undefined;
+    }) => any;
+    "onList-scroll"?: (detail: TransferListScrollDetail) => any;
 }>, {
+    filter: ((item: TransferItemData, query: string) => boolean) | undefined;
     disabled: boolean;
-    filter: (item: TransferItemData, query: string) => boolean;
-    value: string[];
-    defaultValue: string[];
+    size: "sm" | "lg" | (string & {}) | undefined;
+    shape: "square" | "rounded" | (string & {}) | undefined;
+    density: "compact" | (string & {}) | undefined;
     searchable: boolean;
-    getMoveLabel: (count: number, direction: TransferDirection, all: boolean) => string;
-    getMoveAnnouncement: (detail: TransferMoveDetail) => string;
+    showMoveAll: boolean;
+    filterMatchMode: TransferFilterMatchMode;
+    getMoveLabel: ((count: number, direction: TransferDirection, all: boolean) => string) | undefined;
+    targetOrder: TransferTargetOrder;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/transfer/Transfer.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +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=$;
+const Y=require("../utils/id.cjs"),w=require("../utils/liveAnnouncer.cjs"),Z=require("../utils/mirroredValues.cjs"),i=require("./context.cjs"),ee=require("./TransferAnatomy.vue.cjs");let a=require("vue");var te=["data-disabled"],ae=["name","^value","disabled","form"],le=(0,a.defineComponent)({inheritAttrs:!1,__name:"Transfer",props:{items:{},value:{},defaultValue:{},disabled:{type:Boolean,default:!1},name:{},form:{},searchable:{type:Boolean,default:!1},filter:{type:Function,default:void 0},filterMatchMode:{default:"contains"},getMoveLabel:{type:Function,default:void 0},getMoveAnnouncement:{},getSearchResultsAnnouncement:{},targetOrder:{default:"items"},titles:{},renderItem:{},emptyText:{},showMoveAll:{type:Boolean,default:!1},density:{default:void 0},shape:{default:void 0},size:{default:void 0}},emits:["update:value","value-change","move","list-scroll"],setup(o,{emit:z}){const r=o,m=(0,a.useAttrs)(),E=(0,a.computed)(()=>r.density??m["data-density"]),L=(0,a.computed)(()=>r.shape??m["data-shape"]),R=(0,a.computed)(()=>r.size??m["data-size"]),_=(0,a.computed)(()=>{const{"data-density":e,"data-shape":t,"data-size":l,...u}=m;return u}),h=z,H=Y.nextId("transfer"),S=(0,a.ref)(r.defaultValue??[]),f=(0,a.computed)(()=>r.value??S.value),g=(0,a.ref)({source:[],target:[]}),d=(0,a.ref)({source:"",target:""}),p=(0,a.ref)({source:null,target:null}),b=(0,a.ref)({source:!1,target:!1}),C={source:null,target:null},x={source:null,target:null},I={current:!1},s=(0,a.computed)(()=>{const e=r.items.filter(l=>!f.value.includes(l.value));if(r.targetOrder==="items")return{source:e,target:r.items.filter(l=>f.value.includes(l.value))};const t=new Map(r.items.map(l=>[l.value,l]));return{source:e,target:f.value.map(l=>t.get(l)).filter(l=>l!==void 0)}}),T=(0,a.computed)(()=>{if(!r.searchable)return s.value;const e=r.filter??((l,u)=>i.matchesFilterMode(l,u,r.filterMatchMode)),t=l=>d.value[l].trim()===""?s.value[l]:s.value[l].filter(u=>e(u,d.value[l]));return{source:t("source"),target:t("target")}}),q=(0,a.computed)(()=>({source:g.value.source.filter(e=>s.value.source.some(t=>t.value===e)),target:g.value.target.filter(e=>s.value.target.some(t=>t.value===e))}));function D(e){r.value===void 0&&(S.value=e),h("update:value",e),h("value-change",e)}function V(e,t){g.value={...g.value,[e]:t}}function P(e,t){d.value[e]!==t&&(d.value={...d.value,[e]:t})}function O(e,t){p.value[e]!==t&&(p.value={...p.value,[e]:t})}function Q(e,t){b.value[e]!==t&&(b.value={...b.value,[e]:t})}function G(e,t){x[e]=t}function X(e,t){const l=x[e];if(!l)return;const u=Array.from(l.querySelectorAll(i.OPTION_SELECTOR)),v=u[Math.min(t,u.length-1)];if(I.current=!0,v){const c=v.getAttribute("data-value");c&&O(e,c),v.focus()}else l.focus()}function $(e,t){if(r.disabled)return;const l=i.ORIGIN_OF[e],u=i.DESTINATION_OF[e],v=s.value[l],c=t.map(n=>v.find(M=>M.value===n)).filter(n=>n!==void 0&&!n.disabled);if(c.length===0)return;const y=c.map(n=>n.value),J=T.value[l].filter(n=>!n.disabled),F=y.map(n=>J.findIndex(M=>M.value===n)).filter(n=>n>=0),K=F.length>0?Math.min(...F):0,A=f.value,U=q.value[l],N=y.filter(n=>!A.includes(n));let k;e==="toTarget"?k=r.targetOrder==="prepend"?[...N,...A]:[...A,...N]:k=A.filter(n=>!y.includes(n)),D(k),V(l,U.filter(n=>!y.includes(n))),h("move",{items:c,direction:e});const W={moved:c.length,remaining:v.length-c.length,direction:e,from:l,to:u};w.announce((r.getMoveAnnouncement??i.moveAnnouncement)(W)),(0,a.nextTick)(()=>X(l,K))}function j(e,t){h("list-scroll",{side:e,scrollTop:t.scrollTop,scrollHeight:t.scrollHeight,clientHeight:t.clientHeight})}const B={source:"",target:""};return(0,a.watch)(d,e=>{if(r.searchable)for(const t of["source","target"])e[t]!==B[t]&&(B[t]=e[t],w.announce((r.getSearchResultsAnnouncement??i.searchResultsAnnouncement)({shown:T.value[t].length,total:s.value[t].length,side:t,query:e[t]})))}),(0,a.provide)(i.TRANSFER_CONTEXT,{baseId:H,disabled:(0,a.computed)(()=>r.disabled),searchable:(0,a.computed)(()=>r.searchable),sideItems:s,visibleItems:T,marked:q,setMarked:V,query:(0,a.computed)(()=>d.value),setQuery:P,active:(0,a.computed)(()=>p.value),setActive:O,anchor:C,labelled:(0,a.computed)(()=>b.value),registerHeader:Q,registerList:G,suppressFocusIn:I,move:$,moveLabel:(e,t,l)=>(r.getMoveLabel??i.moveTriggerLabel)(e,t,l),emitListScroll:j}),(e,t)=>((0,a.openBlock)(),(0,a.createElementBlock)("div",(0,a.mergeProps)({class:"skdx-transfer","data-part":"root","data-skdx-component":"transfer","data-disabled":o.disabled?"":void 0},_.value),[(0,a.renderSlot)(e.$slots,"default",{},()=>[(0,a.createVNode)(ee.default,{titles:o.titles,searchable:o.searchable,"render-item":o.renderItem,"empty-text":o.emptyText,"show-move-all":o.showMoveAll,density:E.value,shape:L.value,size:R.value},null,8,["titles","searchable","render-item","empty-text","show-move-all","density","shape","size"])]),o.name?((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,{key:0},(0,a.renderList)((0,a.unref)(Z.mirroredFormValues)(f.value),(l,u)=>((0,a.openBlock)(),(0,a.createElementBlock)("input",{key:l||u,type:"text","aria-hidden":"true",tabindex:"-1",name:o.name,"^value":l,disabled:o.disabled||void 0,form:o.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,ae))),128)):(0,a.createCommentVNode)("",!0)],16,te))}});exports.default=le;

package/dist/transfer/Transfer.vue_vue_type_script_setup_true_lang.js

@@ -1 +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};
+import{nextId as e}from"../utils/id.js";import{announce as t}from"../utils/liveAnnouncer.js";import{mirroredFormValues as a}from"../utils/mirroredValues.js";import{DESTINATION_OF as l,OPTION_SELECTOR as r,ORIGIN_OF as s,TRANSFER_CONTEXT as n,matchesFilterMode as u,moveAnnouncement as o,moveTriggerLabel as i,searchResultsAnnouncement as d}from"./context.js";import c from"./TransferAnatomy.vue.js";import{Fragment as v,computed as m,createCommentVNode as f,createElementBlock as p,createVNode as g,defineComponent as h,mergeProps as b,nextTick as y,openBlock as A,provide as T,ref as x,renderList as M,renderSlot as I,unref as O,useAttrs as k,watch as F}from"vue";var w=["data-disabled"],L=["name","^value","disabled","form"],N=/* @__PURE__ */h({inheritAttrs:!1,__name:"Transfer",props:{items:{},value:{},defaultValue:{},disabled:{type:Boolean,default:!1},name:{},form:{},searchable:{type:Boolean,default:!1},filter:{type:Function,default:void 0},filterMatchMode:{default:"contains"},getMoveLabel:{type:Function,default:void 0},getMoveAnnouncement:{},getSearchResultsAnnouncement:{},targetOrder:{default:"items"},titles:{},renderItem:{},emptyText:{},showMoveAll:{type:Boolean,default:!1},density:{default:void 0},shape:{default:void 0},size:{default:void 0}},emits:["update:value","value-change","move","list-scroll"],setup(h,{emit:N}){const S=h,R=k(),z=m(()=>S.density??R["data-density"]),E=m(()=>S.shape??R["data-shape"]),V=m(()=>S.size??R["data-size"]),_=m(()=>{const{"data-density":e,"data-shape":t,"data-size":a,...l}=R;return l}),j=N,B=e("transfer"),H=x(S.defaultValue??[]),C=m(()=>S.value??H.value),q=x({source:[],target:[]}),P=x({source:"",target:""}),D=x({source:null,target:null}),G=x({source:!1,target:!1}),Q={source:null,target:null},X={current:!1},$=m(()=>{const e=S.items.filter(e=>!C.value.includes(e.value));if("items"===S.targetOrder)return{source:e,target:S.items.filter(e=>C.value.includes(e.value))};const t=new Map(S.items.map(e=>[e.value,e]));return{source:e,target:C.value.map(e=>t.get(e)).filter(e=>void 0!==e)}}),J=m(()=>{if(!S.searchable)return $.value;const e=S.filter??((e,t)=>u(e,t,S.filterMatchMode)),t=t=>""===P.value[t].trim()?$.value[t]:$.value[t].filter(a=>e(a,P.value[t]));return{source:t("source"),target:t("target")}}),K=m(()=>({source:q.value.source.filter(e=>$.value.source.some(t=>t.value===e)),target:q.value.target.filter(e=>$.value.target.some(t=>t.value===e))}));function U(e,t){q.value={...q.value,[e]:t}}function W(e,t){D.value[e]!==t&&(D.value={...D.value,[e]:t})}const Y={source:"",target:""};return F(P,e=>{if(S.searchable)for(const a of["source","target"])e[a]!==Y[a]&&(Y[a]=e[a],t((S.getSearchResultsAnnouncement??d)({shown:J.value[a].length,total:$.value[a].length,side:a,query:e[a]})))}),T(n,{baseId:B,disabled:m(()=>S.disabled),searchable:m(()=>S.searchable),sideItems:$,visibleItems:J,marked:K,setMarked:U,query:m(()=>P.value),setQuery:function(e,t){P.value[e]!==t&&(P.value={...P.value,[e]:t})},active:m(()=>D.value),setActive:W,anchor:{source:null,target:null},labelled:m(()=>G.value),registerHeader:function(e,t){G.value[e]!==t&&(G.value={...G.value,[e]:t})},registerList:function(e,t){Q[e]=t},suppressFocusIn:X,move:function(e,a){if(S.disabled)return;const n=s[e],u=l[e],i=$.value[n],d=a.map(e=>i.find(t=>t.value===e)).filter(e=>void 0!==e&&!e.disabled);if(0===d.length)return;const c=d.map(e=>e.value),v=J.value[n].filter(e=>!e.disabled),m=c.map(e=>v.findIndex(t=>t.value===e)).filter(e=>e>=0),f=m.length>0?Math.min(...m):0,p=C.value,g=K.value[n],h=c.filter(e=>!p.includes(e));let b;b="toTarget"===e?"prepend"===S.targetOrder?[...h,...p]:[...p,...h]:p.filter(e=>!c.includes(e)),function(e){void 0===S.value&&(H.value=e),j("update:value",e),j("value-change",e)}(b),U(n,g.filter(e=>!c.includes(e))),j("move",{items:d,direction:e});const A={moved:d.length,remaining:i.length-d.length,direction:e,from:n,to:u};t((S.getMoveAnnouncement??o)(A)),y(()=>function(e,t){const a=Q[e];if(!a)return;const l=Array.from(a.querySelectorAll(r)),s=l[Math.min(t,l.length-1)];if(X.current=!0,s){const t=s.getAttribute("data-value");t&&W(e,t),s.focus()}else a.focus()}(n,f))},moveLabel:(e,t,a)=>(S.getMoveLabel??i)(e,t,a),emitListScroll:function(e,t){j("list-scroll",{side:e,scrollTop:t.scrollTop,scrollHeight:t.scrollHeight,clientHeight:t.clientHeight})}}),(e,t)=>(A(),p("div",b({class:"skdx-transfer","data-part":"root","data-skdx-component":"transfer","data-disabled":h.disabled?"":void 0},_.value),[I(e.$slots,"default",{},()=>[g(c,{titles:h.titles,searchable:h.searchable,"render-item":h.renderItem,"empty-text":h.emptyText,"show-move-all":h.showMoveAll,density:z.value,shape:E.value,size:V.value},null,8,["titles","searchable","render-item","empty-text","show-move-all","density","shape","size"])]),h.name?(A(!0),p(v,{key:0},M(O(a)(C.value),(e,t)=>(A(),p("input",{key:e||t,type:"text","aria-hidden":"true",tabindex:"-1",name:h.name,"^value":e,disabled:h.disabled||void 0,form:h.form,style:{position:"absolute","pointer-events":"none",opacity:"0",margin:"0",width:"1px",height:"1px"}},null,8,L))),128)):f("",!0)],16,w))}});export{N as default};

package/dist/transfer/TransferAnatomy.vue.cjs

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

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

@@ -0,0 +1,46 @@
+import { type TransferItemData } from './context.cjs';
+type __VLS_Props = {
+    titles?: {
+        source?: string;
+        target?: string;
+    } | undefined;
+    searchable?: boolean | undefined;
+    renderItem?: ((item: TransferItemData) => unknown) | undefined;
+    emptyText?: {
+        empty?: string;
+        noMatch?: string;
+    } | undefined;
+    showMoveAll?: boolean | undefined;
+    /**
+     * How tightly the skin packs each list's options, applied to the derived List parts.
+     * @default undefined — falls back to a `data-density` attribute.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Outline the skin gives each list, applied to the derived List parts.
+     * @default undefined — falls back to a `data-shape` attribute.
+     */
+    shape?: 'square' | 'rounded' | (string & {}) | undefined;
+    /**
+     * Size rung the skin renders each list at, applied to the derived List parts.
+     * @default undefined — falls back to a `data-size` attribute.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "lg" | (string & {}) | undefined;
+    shape: "square" | "rounded" | (string & {}) | undefined;
+    density: "compact" | (string & {}) | undefined;
+    renderItem: ((item: TransferItemData) => unknown) | undefined;
+    titles: {
+        source?: string;
+        target?: string;
+    } | undefined;
+    searchable: boolean | undefined;
+    emptyText: {
+        empty?: string;
+        noMatch?: string;
+    } | undefined;
+    showMoveAll: boolean | undefined;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;