@skdx/vue 0.28.0 → 0.30.0

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

@@ -1,12 +1,6 @@
 import { type TransferDirection, type TransferFilterMatchMode, type TransferItemData, type TransferListScrollDetail, type TransferMoveDetail, type TransferSearchResultsDetail, type TransferTargetOrder } from './context.cjs';
 /**
- * Two-list transfer (pick list / dual listbox): items move between source and target sides
- * via move triggers. Membership (`value`) is the only stored state; both lists derive
- * from `items` plus that array. Marked items clear when leaving a side.
- *
- * Keyboard accessible: each list is one Tab stop with roving focus; move triggers have names
- * with direction and count; focus lands on the item that took the moved slot's place.
- * Controlled (`v-model:value` or `@value-change`) or uncontrolled (`default-value`).
+ * Two-list transfer (pick list / dual listbox) that moves items between source and target sides.
  *
  * @example
  * ```vue
@@ -27,10 +21,10 @@ import { type TransferDirection, type TransferFilterMatchMode, type TransferItem
 type __VLS_Props = {
     /** All items; each side derives from this plus `value` — one source of truth. */
     items: TransferItemData[];
-    /** Target-side ids for controlled usage (pair with `v-model:value` or `@value-change`). Rendering order follows `items`, not this array. @default undefined — uncontrolled. */
-    value?: string[];
+    /** 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[];
+    defaultValue?: string[] | undefined;
     /** Disables lists and triggers; individual items disable via `TransferItemData.disabled`. @default false */
     disabled?: boolean;
     /** Form field name; each target-side id submits as its own entry (like `<select multiple>`). @default undefined — no submission. */
@@ -40,31 +34,46 @@ type __VLS_Props = {
     /** 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;
-    /** Query match mode for built-in matcher; ignored when `filter` is given. Declarative half of `filter` (functions cannot cross HTML attribute boundary). */
+    filter?: ((item: TransferItemData, query: string) => boolean) | undefined;
+    /** Query match mode for the built-in matcher; ignored when `filter` is given. */
     filterMatchMode?: TransferFilterMatchMode;
-    /** Compute accessible names for move triggers (live counts; static `aria-label` cannot express them). `all` distinguishes move-all, `count` includes zero. @default undefined — English wording. */
-    getMoveLabel?: (count: number, direction: TransferDirection, all: boolean) => string;
+    /** 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;
-    /** Announce when search query settles (filtering changes no screen-reader-visible attribute); per side, when `searchable`. Return `''` for silent. @default undefined — English. */
-    getSearchResultsAnnouncement?: (detail: TransferSearchResultsDetail) => string;
+    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;
-    /** Empty-state text: `empty` (no items), `noMatch` (filter result). Literal `{query}` replaced with search text. Strings (not callback) for Web Components serialization. @default { empty: 'Nothing here.', noMatch: 'No match for "{query}".' } */
+    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;
-    };
-    /** Include move-all trigger per direction (off by default: destructive on long lists). Ignored when slot supplies parts. @default false */
+    } | undefined;
+    /** Include a move-all trigger per direction, off by default since it is destructive on long lists. @default false */
     showMoveAll?: boolean;
+    /**
+     * 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 var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -79,33 +88,23 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     }) => 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;
-    "onList-scroll"?: ((detail: TransferListScrollDetail) => any) | undefined;
+    }) => any;
+    "onList-scroll"?: (detail: TransferListScrollDetail) => any;
 }>, {
-    filter: (item: TransferItemData, query: string) => boolean;
+    filter: ((item: TransferItemData, query: string) => boolean) | undefined;
     disabled: boolean;
-    value: string[];
-    defaultValue: string[];
-    renderItem: (item: TransferItemData) => unknown;
-    titles: {
-        source?: string;
-        target?: string;
-    };
+    size: "sm" | "lg" | (string & {}) | undefined;
+    shape: "square" | "rounded" | (string & {}) | undefined;
+    density: "compact" | (string & {}) | undefined;
     searchable: boolean;
-    emptyText: {
-        empty?: string;
-        noMatch?: string;
-    };
     showMoveAll: boolean;
     filterMatchMode: TransferFilterMatchMode;
-    getMoveLabel: (count: number, direction: TransferDirection, all: boolean) => string;
-    getMoveAnnouncement: (detail: TransferMoveDetail) => string;
-    getSearchResultsAnnouncement: (detail: TransferSearchResultsDetail) => string;
+    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>;

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

@@ -1,12 +1,6 @@
 import { type TransferDirection, type TransferFilterMatchMode, type TransferItemData, type TransferListScrollDetail, type TransferMoveDetail, type TransferSearchResultsDetail, type TransferTargetOrder } from './context.js';
 /**
- * Two-list transfer (pick list / dual listbox): items move between source and target sides
- * via move triggers. Membership (`value`) is the only stored state; both lists derive
- * from `items` plus that array. Marked items clear when leaving a side.
- *
- * Keyboard accessible: each list is one Tab stop with roving focus; move triggers have names
- * with direction and count; focus lands on the item that took the moved slot's place.
- * Controlled (`v-model:value` or `@value-change`) or uncontrolled (`default-value`).
+ * Two-list transfer (pick list / dual listbox) that moves items between source and target sides.
  *
  * @example
  * ```vue
@@ -27,10 +21,10 @@ import { type TransferDirection, type TransferFilterMatchMode, type TransferItem
 type __VLS_Props = {
     /** All items; each side derives from this plus `value` — one source of truth. */
     items: TransferItemData[];
-    /** Target-side ids for controlled usage (pair with `v-model:value` or `@value-change`). Rendering order follows `items`, not this array. @default undefined — uncontrolled. */
-    value?: string[];
+    /** 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[];
+    defaultValue?: string[] | undefined;
     /** Disables lists and triggers; individual items disable via `TransferItemData.disabled`. @default false */
     disabled?: boolean;
     /** Form field name; each target-side id submits as its own entry (like `<select multiple>`). @default undefined — no submission. */
@@ -40,31 +34,46 @@ type __VLS_Props = {
     /** 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;
-    /** Query match mode for built-in matcher; ignored when `filter` is given. Declarative half of `filter` (functions cannot cross HTML attribute boundary). */
+    filter?: ((item: TransferItemData, query: string) => boolean) | undefined;
+    /** Query match mode for the built-in matcher; ignored when `filter` is given. */
     filterMatchMode?: TransferFilterMatchMode;
-    /** Compute accessible names for move triggers (live counts; static `aria-label` cannot express them). `all` distinguishes move-all, `count` includes zero. @default undefined — English wording. */
-    getMoveLabel?: (count: number, direction: TransferDirection, all: boolean) => string;
+    /** 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;
-    /** Announce when search query settles (filtering changes no screen-reader-visible attribute); per side, when `searchable`. Return `''` for silent. @default undefined — English. */
-    getSearchResultsAnnouncement?: (detail: TransferSearchResultsDetail) => string;
+    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;
-    /** Empty-state text: `empty` (no items), `noMatch` (filter result). Literal `{query}` replaced with search text. Strings (not callback) for Web Components serialization. @default { empty: 'Nothing here.', noMatch: 'No match for "{query}".' } */
+    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;
-    };
-    /** Include move-all trigger per direction (off by default: destructive on long lists). Ignored when slot supplies parts. @default false */
+    } | undefined;
+    /** Include a move-all trigger per direction, off by default since it is destructive on long lists. @default false */
     showMoveAll?: boolean;
+    /**
+     * 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 var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -79,33 +88,23 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     }) => 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;
-    "onList-scroll"?: ((detail: TransferListScrollDetail) => any) | undefined;
+    }) => any;
+    "onList-scroll"?: (detail: TransferListScrollDetail) => any;
 }>, {
-    filter: (item: TransferItemData, query: string) => boolean;
+    filter: ((item: TransferItemData, query: string) => boolean) | undefined;
     disabled: boolean;
-    value: string[];
-    defaultValue: string[];
-    renderItem: (item: TransferItemData) => unknown;
-    titles: {
-        source?: string;
-        target?: string;
-    };
+    size: "sm" | "lg" | (string & {}) | undefined;
+    shape: "square" | "rounded" | (string & {}) | undefined;
+    density: "compact" | (string & {}) | undefined;
     searchable: boolean;
-    emptyText: {
-        empty?: string;
-        noMatch?: string;
-    };
     showMoveAll: boolean;
     filterMatchMode: TransferFilterMatchMode;
-    getMoveLabel: (count: number, direction: TransferDirection, all: boolean) => string;
-    getMoveAnnouncement: (detail: TransferMoveDetail) => string;
-    getSearchResultsAnnouncement: (detail: TransferSearchResultsDetail) => string;
+    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>;

package/dist/transfer/Transfer.vue_vue_type_script_setup_true_lang.cjs

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

@@ -3,26 +3,44 @@ type __VLS_Props = {
     titles?: {
         source?: string;
         target?: string;
-    };
-    searchable?: boolean;
-    renderItem?: (item: TransferItemData) => unknown;
+    } | undefined;
+    searchable?: boolean | undefined;
+    renderItem?: ((item: TransferItemData) => unknown) | undefined;
     emptyText?: {
         empty?: string;
         noMatch?: string;
-    };
-    showMoveAll?: boolean;
+    } | 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<{}>, {
-    renderItem: (item: TransferItemData) => unknown;
+    size: "sm" | "lg" | (string & {}) | undefined;
+    shape: "square" | "rounded" | (string & {}) | undefined;
+    density: "compact" | (string & {}) | undefined;
+    renderItem: ((item: TransferItemData) => unknown) | undefined;
     titles: {
         source?: string;
         target?: string;
-    };
-    searchable: boolean;
+    } | undefined;
+    searchable: boolean | undefined;
     emptyText: {
         empty?: string;
         noMatch?: string;
-    };
-    showMoveAll: boolean;
+    } | undefined;
+    showMoveAll: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -3,26 +3,44 @@ type __VLS_Props = {
     titles?: {
         source?: string;
         target?: string;
-    };
-    searchable?: boolean;
-    renderItem?: (item: TransferItemData) => unknown;
+    } | undefined;
+    searchable?: boolean | undefined;
+    renderItem?: ((item: TransferItemData) => unknown) | undefined;
     emptyText?: {
         empty?: string;
         noMatch?: string;
-    };
-    showMoveAll?: boolean;
+    } | 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<{}>, {
-    renderItem: (item: TransferItemData) => unknown;
+    size: "sm" | "lg" | (string & {}) | undefined;
+    shape: "square" | "rounded" | (string & {}) | undefined;
+    density: "compact" | (string & {}) | undefined;
+    renderItem: ((item: TransferItemData) => unknown) | undefined;
     titles: {
         source?: string;
         target?: string;
-    };
-    searchable: boolean;
+    } | undefined;
+    searchable: boolean | undefined;
     emptyText: {
         empty?: string;
         noMatch?: string;
-    };
-    showMoveAll: boolean;
+    } | undefined;
+    showMoveAll: boolean | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/transfer/TransferAnatomy.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const x=require("./context.cjs"),V=require("./TransferControls.vue.cjs"),i=require("./TransferEmpty.vue.cjs"),c=require("./TransferList.vue.cjs"),s=require("./TransferListHeader.vue.cjs"),f=require("./TransferListSearch.vue.cjs"),m=require("./TransferMoveAllTrigger.vue.cjs"),T=require("./TransferMoveTrigger.vue.cjs");let e=require("vue");var q=(0,e.defineComponent)({__name:"TransferAnatomy",props:{titles:{default:void 0},searchable:{type:Boolean,default:!1},renderItem:{type:Function,default:void 0},emptyText:{default:void 0},showMoveAll:{type:Boolean,default:!1}},setup(r){const l={empty:"Nothing here.",noMatch:'No match for "{query}".'},d=r;if(!(0,e.inject)(x.TRANSFER_CONTEXT))throw new Error("TransferAnatomy must be used within SkdxTransfer.");const y=(0,e.computed)(()=>d.emptyText?.empty??l.empty),N=(0,e.computed)(()=>d.emptyText?.noMatch??l.noMatch),n=(u,t)=>u==="empty"?y.value:N.value.replaceAll("{query}",t);return(u,t)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(s.default,{side:"source"},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.titles?.source??"Available"),1)]),_:1}),r.searchable?((0,e.openBlock)(),(0,e.createBlock)(f.default,{key:0,side:"source"})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(c.default,{side:"source","render-item":r.renderItem},null,8,["render-item"]),(0,e.createVNode)(i.default,{side:"source"},{default:(0,e.withCtx)(({reason:o,query:a})=>[(0,e.createTextVNode)((0,e.toDisplayString)(n(o,a)),1)]),_:1}),(0,e.createVNode)(V.default,null,{default:(0,e.withCtx)(()=>[r.showMoveAll?((0,e.openBlock)(),(0,e.createBlock)(m.default,{key:0,direction:"toTarget"},{default:(0,e.withCtx)(()=>[...t[0]||(t[0]=[(0,e.createTextVNode)("⇥",-1)])]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(T.default,{direction:"toTarget"},{default:(0,e.withCtx)(()=>[...t[1]||(t[1]=[(0,e.createTextVNode)("→",-1)])]),_:1}),(0,e.createVNode)(T.default,{direction:"toSource"},{default:(0,e.withCtx)(()=>[...t[2]||(t[2]=[(0,e.createTextVNode)("←",-1)])]),_:1}),r.showMoveAll?((0,e.openBlock)(),(0,e.createBlock)(m.default,{key:1,direction:"toSource"},{default:(0,e.withCtx)(()=>[...t[3]||(t[3]=[(0,e.createTextVNode)("⇤",-1)])]),_:1})):(0,e.createCommentVNode)("",!0)]),_:1}),(0,e.createVNode)(s.default,{side:"target"},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(r.titles?.target??"Selected"),1)]),_:1}),r.searchable?((0,e.openBlock)(),(0,e.createBlock)(f.default,{key:1,side:"target"})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(c.default,{side:"target","render-item":r.renderItem},null,8,["render-item"]),(0,e.createVNode)(i.default,{side:"target"},{default:(0,e.withCtx)(({reason:o,query:a})=>[(0,e.createTextVNode)((0,e.toDisplayString)(n(o,a)),1)]),_:1})],64))}});exports.default=q;
+const r=require("../utils/Glyph.vue.cjs"),N=require("../utils/injectRequired.cjs"),V=require("./context.cjs"),g=require("./TransferControls.vue.cjs"),c=require("./TransferEmpty.vue.cjs"),s=require("./TransferList.vue.cjs"),f=require("./TransferListHeader.vue.cjs"),m=require("./TransferListSearch.vue.cjs"),h=require("./TransferMoveAllTrigger.vue.cjs"),y=require("./TransferMoveTrigger.vue.cjs");let e=require("vue");var v=(0,e.defineComponent)({__name:"TransferAnatomy",props:{titles:{default:void 0},searchable:{type:Boolean,default:!1},renderItem:{type:Function,default:void 0},emptyText:{default:void 0},showMoveAll:{type:Boolean,default:!1},density:{default:void 0},shape:{default:void 0},size:{default:void 0}},setup(t){const i={empty:"Nothing here.",noMatch:'No match for "{query}".'},d=t;N.injectRequired(V.TRANSFER_CONTEXT,"TransferAnatomy must be used within SkdxTransfer.");const T=(0,e.computed)(()=>d.emptyText?.empty??i.empty),q=(0,e.computed)(()=>d.emptyText?.noMatch??i.noMatch),l=(n,u)=>n==="empty"?T.value:q.value.replaceAll("{query}",u);return(n,u)=>((0,e.openBlock)(),(0,e.createElementBlock)(e.Fragment,null,[(0,e.createVNode)(f.default,{side:"source"},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.titles?.source??"Available items"),1)]),_:1}),t.searchable?((0,e.openBlock)(),(0,e.createBlock)(m.default,{key:0,side:"source"})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(s.default,{side:"source","render-item":t.renderItem,density:t.density,shape:t.shape,size:t.size},null,8,["render-item","density","shape","size"]),(0,e.createVNode)(c.default,{side:"source"},{default:(0,e.withCtx)(({reason:a,query:o})=>[(0,e.createTextVNode)((0,e.toDisplayString)(l(a,o)),1)]),_:1}),(0,e.createVNode)(g.default,null,{default:(0,e.withCtx)(()=>[t.showMoveAll?((0,e.openBlock)(),(0,e.createBlock)(h.default,{key:0,direction:"toTarget"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(r.default,{name:"chevrons-right"})]),_:1})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(y.default,{direction:"toTarget"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(r.default,{name:"arrow-right"})]),_:1}),(0,e.createVNode)(y.default,{direction:"toSource"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(r.default,{name:"arrow-left"})]),_:1}),t.showMoveAll?((0,e.openBlock)(),(0,e.createBlock)(h.default,{key:1,direction:"toSource"},{default:(0,e.withCtx)(()=>[(0,e.createVNode)(r.default,{name:"chevrons-left"})]),_:1})):(0,e.createCommentVNode)("",!0)]),_:1}),(0,e.createVNode)(f.default,{side:"target"},{default:(0,e.withCtx)(()=>[(0,e.createTextVNode)((0,e.toDisplayString)(t.titles?.target??"Selected items"),1)]),_:1}),t.searchable?((0,e.openBlock)(),(0,e.createBlock)(m.default,{key:1,side:"target"})):(0,e.createCommentVNode)("",!0),(0,e.createVNode)(s.default,{side:"target","render-item":t.renderItem,density:t.density,shape:t.shape,size:t.size},null,8,["render-item","density","shape","size"]),(0,e.createVNode)(c.default,{side:"target"},{default:(0,e.withCtx)(({reason:a,query:o})=>[(0,e.createTextVNode)((0,e.toDisplayString)(l(a,o)),1)]),_:1})],64))}});exports.default=v;

package/dist/transfer/TransferAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TRANSFER_CONTEXT as e}from"./context.js";import t from"./TransferControls.vue.js";import r from"./TransferEmpty.vue.js";import o from"./TransferList.vue.js";import a from"./TransferListHeader.vue.js";import s from"./TransferListSearch.vue.js";import l from"./TransferMoveAllTrigger.vue.js";import n from"./TransferMoveTrigger.vue.js";import{Fragment as i,computed as d,createBlock as u,createCommentVNode as m,createElementBlock as f,createTextVNode as c,createVNode as p,defineComponent as T,inject as v,openBlock as y,toDisplayString as g,withCtx as h}from"vue";var _=/* @__PURE__ */T({__name:"TransferAnatomy",props:{titles:{default:void 0},searchable:{type:Boolean,default:!1},renderItem:{type:Function,default:void 0},emptyText:{default:void 0},showMoveAll:{type:Boolean,default:!1}},setup(T){const _=T;if(!v(e))throw new Error("TransferAnatomy must be used within SkdxTransfer.");const j=d(()=>_.emptyText?.empty??"Nothing here."),A=d(()=>_.emptyText?.noMatch??'No match for "{query}".'),k=(e,t)=>"empty"===e?j.value:A.value.replaceAll("{query}",t);return(e,d)=>(y(),f(i,null,[p(a,{side:"source"},{default:h(()=>[c(g(T.titles?.source??"Available"),1)]),_:1}),T.searchable?(y(),u(s,{key:0,side:"source"})):m("",!0),p(o,{side:"source","render-item":T.renderItem},null,8,["render-item"]),p(r,{side:"source"},{default:h(({reason:e,query:t})=>[c(g(k(e,t)),1)]),_:1}),p(t,null,{default:h(()=>[T.showMoveAll?(y(),u(l,{key:0,direction:"toTarget"},{default:h(()=>[...d[0]||(d[0]=[c("⇥",-1)])]),_:1})):m("",!0),p(n,{direction:"toTarget"},{default:h(()=>[...d[1]||(d[1]=[c("→",-1)])]),_:1}),p(n,{direction:"toSource"},{default:h(()=>[...d[2]||(d[2]=[c("←",-1)])]),_:1}),T.showMoveAll?(y(),u(l,{key:1,direction:"toSource"},{default:h(()=>[...d[3]||(d[3]=[c("⇤",-1)])]),_:1})):m("",!0)]),_:1}),p(a,{side:"target"},{default:h(()=>[c(g(T.titles?.target??"Selected"),1)]),_:1}),T.searchable?(y(),u(s,{key:1,side:"target"})):m("",!0),p(o,{side:"target","render-item":T.renderItem},null,8,["render-item"]),p(r,{side:"target"},{default:h(({reason:e,query:t})=>[c(g(k(e,t)),1)]),_:1})],64))}});export{_ as default};
+import e from"../utils/Glyph.vue.js";import{injectRequired as t}from"../utils/injectRequired.js";import{TRANSFER_CONTEXT as r}from"./context.js";import s from"./TransferControls.vue.js";import a from"./TransferEmpty.vue.js";import o from"./TransferList.vue.js";import i from"./TransferListHeader.vue.js";import n from"./TransferListSearch.vue.js";import d from"./TransferMoveAllTrigger.vue.js";import l from"./TransferMoveTrigger.vue.js";import{Fragment as u,computed as m,createBlock as f,createCommentVNode as p,createElementBlock as c,createTextVNode as y,createVNode as v,defineComponent as h,openBlock as T,toDisplayString as g,withCtx as j}from"vue";var _=/* @__PURE__ */h({__name:"TransferAnatomy",props:{titles:{default:void 0},searchable:{type:Boolean,default:!1},renderItem:{type:Function,default:void 0},emptyText:{default:void 0},showMoveAll:{type:Boolean,default:!1},density:{default:void 0},shape:{default:void 0},size:{default:void 0}},setup(h){const _=h;t(r,"TransferAnatomy must be used within SkdxTransfer.");const A=m(()=>_.emptyText?.empty??"Nothing here."),k=m(()=>_.emptyText?.noMatch??'No match for "{query}".'),x=(e,t)=>"empty"===e?A.value:k.value.replaceAll("{query}",t);return(t,r)=>(T(),c(u,null,[v(i,{side:"source"},{default:j(()=>[y(g(h.titles?.source??"Available items"),1)]),_:1}),h.searchable?(T(),f(n,{key:0,side:"source"})):p("",!0),v(o,{side:"source","render-item":h.renderItem,density:h.density,shape:h.shape,size:h.size},null,8,["render-item","density","shape","size"]),v(a,{side:"source"},{default:j(({reason:e,query:t})=>[y(g(x(e,t)),1)]),_:1}),v(s,null,{default:j(()=>[h.showMoveAll?(T(),f(d,{key:0,direction:"toTarget"},{default:j(()=>[v(e,{name:"chevrons-right"})]),_:1})):p("",!0),v(l,{direction:"toTarget"},{default:j(()=>[v(e,{name:"arrow-right"})]),_:1}),v(l,{direction:"toSource"},{default:j(()=>[v(e,{name:"arrow-left"})]),_:1}),h.showMoveAll?(T(),f(d,{key:1,direction:"toSource"},{default:j(()=>[v(e,{name:"chevrons-left"})]),_:1})):p("",!0)]),_:1}),v(i,{side:"target"},{default:j(()=>[y(g(h.titles?.target??"Selected items"),1)]),_:1}),h.searchable?(T(),f(n,{key:1,side:"target"})):p("",!0),v(o,{side:"target","render-item":h.renderItem,density:h.density,shape:h.shape,size:h.size},null,8,["render-item","density","shape","size"]),v(a,{side:"target"},{default:j(({reason:e,query:t})=>[y(g(x(e,t)),1)]),_:1})],64))}});export{_ as default};

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

@@ -1,6 +1,5 @@
 /**
- * The named `role="group"` holding move triggers so they announce as controls
- * that move items between the lists. Purely a wrapper, but use it for accessibility.
+ * The named `role="group"` holding move triggers so they announce as controls that move items between lists.
  *
  * @example
  * ```vue

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

@@ -1,6 +1,5 @@
 /**
- * The named `role="group"` holding move triggers so they announce as controls
- * that move items between the lists. Purely a wrapper, but use it for accessibility.
+ * The named `role="group"` holding move triggers so they announce as controls that move items between lists.
  *
  * @example
  * ```vue

package/dist/transfer/TransferControls.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +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;
+const a=require("../utils/injectRequired.cjs"),n=require("./context.cjs");let e=require("vue");var s=["data-disabled"],o=(0,e.defineComponent)({__name:"TransferControls",setup(d){const r=a.injectRequired(n.TRANSFER_CONTEXT,"SkdxTransferControls must be used within SkdxTransfer.");return(t,l)=>((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)(r).disabled.value?"":void 0},[(0,e.renderSlot)(t.$slots,"default")],8,s))}});exports.default=o;

package/dist/transfer/TransferControls.vue_vue_type_script_setup_true_lang.js

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

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

@@ -1,8 +1,6 @@
 import { type TransferSide } from './context.cjs';
 /**
- * Message shown while one side is empty or filtered to nothing. Sibling of
- * TransferList (role=”listbox” can't contain bare paragraphs). data-reason
- * ('empty'/'no-results'), data-query published. Use inside SkdxTransfer.
+ * Message shown while one side is empty or filtered to nothing, publishing `data-reason` and `data-query`.
  *
  * @example
  * ```vue
@@ -16,12 +14,12 @@ type __VLS_Props = {
     /** Which side's emptiness this message covers. */
     side: TransferSide;
 };
-declare var __VLS_1: {
-    reason: "empty" | "no-results";
-    query: string;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Replacement message, given why the side is empty and the query that filtered it. */
+    default?(props: {
+        reason: 'empty' | 'no-results';
+        query: string;
+    }): unknown;
 };
 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>;

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

@@ -1,8 +1,6 @@
 import { type TransferSide } from './context.js';
 /**
- * Message shown while one side is empty or filtered to nothing. Sibling of
- * TransferList (role=”listbox” can't contain bare paragraphs). data-reason
- * ('empty'/'no-results'), data-query published. Use inside SkdxTransfer.
+ * Message shown while one side is empty or filtered to nothing, publishing `data-reason` and `data-query`.
  *
  * @example
  * ```vue
@@ -16,12 +14,12 @@ type __VLS_Props = {
     /** Which side's emptiness this message covers. */
     side: TransferSide;
 };
-declare var __VLS_1: {
-    reason: "empty" | "no-results";
-    query: string;
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+type __VLS_Slots = {
+    /** Replacement message, given why the side is empty and the query that filtered it. */
+    default?(props: {
+        reason: 'empty' | 'no-results';
+        query: string;
+    }): unknown;
 };
 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>;

package/dist/transfer/TransferEmpty.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const o=require("./context.cjs");let e=require("vue");var l=["data-side","data-reason","data-query"],i=(0,e.defineComponent)({inheritAttrs:!1,__name:"TransferEmpty",props:{side:{}},setup(t){const s=t,n=(0,e.inject)(o.TRANSFER_CONTEXT);if(!n)throw new Error("SkdxTransferEmpty must be used within SkdxTransfer.");const r=n,a=(0,e.computed)(()=>r.sideItems.value[s.side].length===0?"empty":"no-results"),u=(0,e.computed)(()=>a.value==="no-results"?r.query.value[s.side]:"");return(d,c)=>(0,e.unref)(r).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":"","data-reason":a.value,"data-query":u.value},d.$attrs),[(0,e.renderSlot)(d.$slots,"default",{reason:a.value,query:u.value})],16,l)):(0,e.createCommentVNode)("",!0)}});exports.default=i;
+const d=require("../utils/injectRequired.cjs"),i=require("./context.cjs");let e=require("vue");var o=["data-side","data-reason","data-query"],l=(0,e.defineComponent)({inheritAttrs:!1,__name:"TransferEmpty",props:{side:{}},setup(t){const s=t,r=d.injectRequired(i.TRANSFER_CONTEXT,"SkdxTransferEmpty must be used within SkdxTransfer."),a=(0,e.computed)(()=>r.sideItems.value[s.side].length===0?"empty":"no-results"),u=(0,e.computed)(()=>a.value==="no-results"?r.query.value[s.side]:"");return(n,c)=>(0,e.unref)(r).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":"","data-reason":a.value,"data-query":u.value},n.$attrs),[(0,e.renderSlot)(n.$slots,"default",{reason:a.value,query:u.value})],16,o)):(0,e.createCommentVNode)("",!0)}});exports.default=l;

package/dist/transfer/TransferEmpty.vue_vue_type_script_setup_true_lang.js

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