@skdx/web-components 0.26.0 → 0.28.0

package/dist/transfer/Transfer.js

@@ -1,5 +1,5 @@
-var y=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var a=(n,l,e,t)=>{for(var r=t>1?void 0:t?E(l,e):l,o=n.length-1,d;o>=0;o--)(d=n[o])&&(r=(t?d(l,e,r):d(r))||r);return t&&r&&y(l,e,r),r};import{css as D,html as M,LitElement as A}from"lit";import{property as u,state as h}from"lit/decorators.js";import{customElement as S}from"../internal/define.js";import{nextId as R}from"../internal/ids.js";import{announce as $}from"../utils/live-announcer.js";var L='[role="option"]:not([data-disabled])',C="skdx-transfer-internal-update",N={toTarget:"source",toSource:"target"},p={toTarget:"target",toSource:"source"},b={source:"available",target:"selected"};function w(n,l,e){let t=b[p[l]],r=e?"Move all":"Move";return n===0?`${r} items to ${t}, ${e?"nothing to move":"nothing selected"}`:`${r} ${n} ${n===1?"item":"items"} to ${t}`}function q({moved:n,remaining:l,from:e,to:t}){return`${n} ${n===1?"item":"items"} moved to ${b[t]}. ${l} remaining in ${b[e]}.`}function F(n,l){return n.label.toLowerCase().includes(l.trim().toLowerCase())}var i=class extends A{constructor(){super(...arguments);this.items=[];this.value=[];this.defaultValue=[];this.disabled=!1;this.searchable=!1;this.filter=F;this.baseId=R("skdx-transfer");this._marked={source:[],target:[]};this._query={source:"",target:""};this._active={source:null,target:null};this._labelled={source:!1,target:!1};this.anchor={source:null,target:null};this.listEls={source:null,target:null};this._initialized=!1}moveLabel(e,t,r){return(this.getMoveLabel??w)(e,t,r)}connectedCallback(){super.connectedCallback(),this._initialized||(this.defaultValue.length>0&&(this.value=[...this.defaultValue]),this._initialized=!0)}get sideItems(){return{source:this.items.filter(e=>!this.value.includes(e.value)),target:this.items.filter(e=>this.value.includes(e.value))}}get visibleItems(){let e=this.sideItems;if(!this.searchable)return e;let t=r=>this._query[r].trim()===""?e[r]:e[r].filter(o=>this.filter(o,this._query[r]));return{source:t("source"),target:t("target")}}get marked(){let e=this.sideItems,t=r=>this._marked[r].filter(o=>e[r].some(d=>d.value===o));return{source:t("source"),target:t("target")}}getQuery(e){return this._query[e]}getActive(e){return this._active[e]}isLabelled(e){return this._labelled[e]}headerId(e){return`${this.baseId}-${e}-header`}listId(e){return`${this.baseId}-${e}-list`}setMarked(e,t){this._marked={...this._marked,[e]:t},this.broadcast()}setQuery(e,t){this._query[e]!==t&&(this._query={...this._query,[e]:t},this.broadcast())}setActive(e,t){this._active[e]!==t&&(this._active={...this._active,[e]:t},this.broadcast())}registerHeader(e,t){this._labelled[e]!==t&&(this._labelled={...this._labelled,[e]:t},this.broadcast())}move(e,t){if(this.disabled)return;let r=N[e],o=p[e],c=this.sideItems[r],f=t.map(s=>c.find(v=>v.value===s)).filter(s=>s!==void 0&&!s.disabled);if(f.length===0)return;let m=f.map(s=>s.value),T=this.visibleItems[r].filter(s=>!s.disabled),g=m.map(s=>T.findIndex(v=>v.value===s)).filter(s=>s>=0),_=g.length>0?Math.min(...g):0;this.value=e==="toTarget"?[...this.value,...m.filter(s=>!this.value.includes(s))]:this.value.filter(s=>!m.includes(s)),this._marked={...this._marked,[r]:this._marked[r].filter(s=>!m.includes(s))},this.dispatchEvent(new CustomEvent("value-change",{detail:this.value,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("move",{detail:{items:f,direction:e},bubbles:!0,composed:!0})),this.broadcast();let I={moved:f.length,remaining:c.length-f.length,direction:e,from:r,to:o};$((this.getMoveAnnouncement??q)(I)),this.restoreFocus(r,_)}async restoreFocus(e,t){await this.updateComplete;let r=this.listEls[e];if(!r)return;await r.updateComplete;let o=Array.from(r.querySelectorAll(L)),d=o[Math.min(t,o.length-1)];if(d){let c=d.getAttribute("data-value");c&&this.setActive(e,c),d.focus()}else r.focus()}broadcast(){this.dispatchEvent(new CustomEvent(C))}updated(e){(e.has("items")||e.has("value")||e.has("disabled")||e.has("searchable"))&&this.broadcast(),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return M`<slot></slot>`}};i.styles=D`
+var S=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var i=(a,n,e,r)=>{for(var t=r>1?void 0:r?E(n,e):n,u=a.length-1,d;u>=0;u--)(d=a[u])&&(t=(r?d(n,e,t):d(t))||t);return r&&t&&S(n,e,t),t};import{css as D,html as R,LitElement as w}from"lit";import{property as l,state as f}from"lit/decorators.js";import{hasAuthoredParts as $}from"../internal/authored.js";import{customElement as L}from"../internal/define.js";import{FormAssociated as O}from"../internal/form-associated.js";import{nextId as x}from"../internal/ids.js";import{announce as b}from"../utils/live-announcer.js";import{fillTransferAnatomy as N,TRANSFER_ANATOMY_GENERATED as F}from"./TransferAnatomy.js";var q={empty:"Nothing here.",noMatch:'No match for "{query}".'},C={fromAttribute(a){if(!a)return{};try{let n=JSON.parse(a);if(typeof n!="object"||n===null)throw new Error("emptyText attribute must be a JSON object");return n}catch{return console.warn(`[skdx] <skdx-transfer> emptyText attribute is not valid JSON and was ignored: ${a}`),{}}}},H='[role="option"]:not([data-disabled])',k="skdx-transfer-internal-update",V={toTarget:"source",toSource:"target"},y={toTarget:"target",toSource:"source"},v={source:"available",target:"selected"};function B(a,n,e){let r=v[y[n]],t=e?"Move all":"Move";return a===0?`${t} items to ${r}, ${e?"nothing to move":"nothing selected"}`:`${t} ${a} ${a===1?"item":"items"} to ${r}`}function P({moved:a,remaining:n,from:e,to:r}){return`${a} ${a===1?"item":"items"} moved to ${v[r]}. ${n} remaining in ${v[e]}.`}function Q({shown:a,total:n,side:e}){return`${a} of ${n} ${n===1?"item":"items"} shown in ${v[e]}.`}function Z(a,n){return _(a,n,"contains")}function _(a,n,e="contains"){let r=n.trim().toLowerCase();if(r==="")return!0;let t=a.label.toLowerCase();return e==="startsWith"?t.startsWith(r):e==="endsWith"?t.endsWith(r):t.includes(r)}var s=class extends O(w){constructor(){super(...arguments);this.items=[];this.value=[];this.defaultValue=[];this.disabled=!1;this.searchable=!1;this.filterMatchMode="contains";this.targetOrder="items";this.emptyText={};this.showMoveAll=!1;this.baseId=x("skdx-transfer");this._marked={source:[],target:[]};this._query={source:"",target:""};this._active={source:null,target:null};this._labelled={source:!1,target:!1};this.anchor={source:null,target:null};this.listEls={source:null,target:null};this._initialized=!1;this._anatomyBuilt=!1;this._fillAnatomy=()=>{if($(this,F)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,N(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()};this.headerIdOverrides={};this.announcedQuery={source:"",target:""}}moveLabel(e,r,t){return(this.getMoveLabel??B)(e,r,t)}getEmptyText(e,r=""){let t={...q,...this.emptyText};return((e==="empty"?t.empty:t.noMatch)??"").replaceAll("{query}",r)}connectedCallback(){super.connectedCallback(),this._initialized||(this.defaultValue.length>0&&(this.value=[...this.defaultValue]),this._initialized=!0),queueMicrotask(this._fillAnatomy)}get sideItems(){let e=this.items.filter(t=>!this.value.includes(t.value));if(this.targetOrder==="items")return{source:e,target:this.items.filter(t=>this.value.includes(t.value))};let r=new Map(this.items.map(t=>[t.value,t]));return{source:e,target:this.value.map(t=>r.get(t)).filter(t=>t!==void 0)}}get visibleItems(){let e=this.sideItems;if(!this.searchable)return e;let r=t=>this._query[t].trim()===""?e[t]:e[t].filter(u=>this.filter?this.filter(u,this._query[t]):_(u,this._query[t],this.filterMatchMode));return{source:r("source"),target:r("target")}}get marked(){let e=this.sideItems,r=t=>this._marked[t].filter(u=>e[t].some(d=>d.value===u));return{source:r("source"),target:r("target")}}getQuery(e){return this._query[e]}getActive(e){return this._active[e]}isLabelled(e){return this._labelled[e]}headerId(e){return this.headerIdOverrides[e]??`${this.baseId}-${e}-header`}setHeaderId(e,r){this.headerIdOverrides[e]=r}listId(e){return`${this.baseId}-${e}-list`}setMarked(e,r){this._marked={...this._marked,[e]:r},this.broadcast()}setQuery(e,r){this._query[e]!==r&&(this._query={...this._query,[e]:r},this.broadcast())}setActive(e,r){this._active[e]!==r&&(this._active={...this._active,[e]:r},this.broadcast())}registerHeader(e,r){this._labelled[e]!==r&&(this._labelled={...this._labelled,[e]:r},this.broadcast())}move(e,r){if(this.disabled)return;let t=V[e],u=y[e],c=this.sideItems[t],h=r.map(o=>c.find(g=>g.value===o)).filter(o=>o!==void 0&&!o.disabled);if(h.length===0)return;let m=h.map(o=>o.value),I=this.visibleItems[t].filter(o=>!o.disabled),p=m.map(o=>I.findIndex(g=>g.value===o)).filter(o=>o>=0),A=p.length>0?Math.min(...p):0,T=m.filter(o=>!this.value.includes(o));this.value=e==="toTarget"?this.targetOrder==="prepend"?[...T,...this.value]:[...this.value,...T]:this.value.filter(o=>!m.includes(o)),this._marked={...this._marked,[t]:this._marked[t].filter(o=>!m.includes(o))},this.dispatchEvent(new CustomEvent("value-change",{detail:this.value,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("move",{detail:{items:h,direction:e},bubbles:!0,composed:!0})),this.broadcast();let M={moved:h.length,remaining:c.length-h.length,direction:e,from:t,to:u};b((this.getMoveAnnouncement??P)(M)),this.restoreFocus(t,A)}async restoreFocus(e,r){await this.updateComplete;let t=this.listEls[e];if(!t)return;await t.updateComplete;let u=Array.from(t.querySelectorAll(H)),d=u[Math.min(r,u.length-1)];if(d){let c=d.getAttribute("data-value");c&&this.setActive(e,c),d.focus()}else t.focus()}emitListScroll(e,r){let t={side:e,scrollTop:r.scrollTop,scrollHeight:r.scrollHeight,clientHeight:r.clientHeight};this.dispatchEvent(new CustomEvent("list-scroll",{detail:t,bubbles:!0,composed:!0}))}announceSearchResults(){let e=this.sideItems,r=this.visibleItems;for(let t of["source","target"])this._query[t]!==this.announcedQuery[t]&&(this.announcedQuery[t]=this._query[t],b((this.getSearchResultsAnnouncement??Q)({shown:r[t].length,total:e[t].length,side:t,query:this._query[t]})))}broadcast(){this.dispatchEvent(new CustomEvent(k))}formResetCallback(){this.value=[...this.defaultValue]}updated(e){this.broadcast(),(e.has("value")||e.has("name"))&&this.setFormValue(this.multiFormValue(this.value)),this.searchable&&this.announceSearchResults(),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),e.has("titles")||e.has("searchable")||e.has("showMoveAll")?this._rebuildAnatomy():this._fillAnatomy()}render(){return R`<slot @slotchange=${this._fillAnatomy}></slot>`}};s.styles=D`
     :host {
       display: contents;
     }
-  `,a([u({type:Array})],i.prototype,"items",2),a([u({type:Array})],i.prototype,"value",2),a([u({type:Array,attribute:"default-value"})],i.prototype,"defaultValue",2),a([u({type:Boolean,reflect:!0})],i.prototype,"disabled",2),a([u({type:Boolean,reflect:!0})],i.prototype,"searchable",2),a([u({attribute:!1})],i.prototype,"filter",2),a([u({attribute:!1})],i.prototype,"getMoveLabel",2),a([u({attribute:!1})],i.prototype,"getMoveAnnouncement",2),a([h()],i.prototype,"_marked",2),a([h()],i.prototype,"_query",2),a([h()],i.prototype,"_active",2),a([h()],i.prototype,"_labelled",2),i=a([S("skdx-transfer","transfer","root")],i);export{p as DESTINATION_OF,L as OPTION_SELECTOR,N as ORIGIN_OF,b as SIDE_NOUN,i as SkdxTransfer,C as TRANSFER_INTERNAL_UPDATE,F as defaultTransferFilter,q as moveAnnouncement,w as moveTriggerLabel};
+  `,i([l({type:Array})],s.prototype,"items",2),i([l({type:Array})],s.prototype,"value",2),i([l({type:Array,attribute:"default-value"})],s.prototype,"defaultValue",2),i([l({type:Boolean,reflect:!0})],s.prototype,"disabled",2),i([l({type:String,reflect:!0})],s.prototype,"name",2),i([l({type:Boolean,reflect:!0})],s.prototype,"searchable",2),i([l({attribute:!1})],s.prototype,"filter",2),i([l({type:String,attribute:"filter-match-mode"})],s.prototype,"filterMatchMode",2),i([l({attribute:!1})],s.prototype,"getMoveLabel",2),i([l({attribute:!1})],s.prototype,"getMoveAnnouncement",2),i([l({attribute:!1})],s.prototype,"getSearchResultsAnnouncement",2),i([l({type:String,attribute:"target-order"})],s.prototype,"targetOrder",2),i([l({attribute:!1})],s.prototype,"titles",2),i([l({attribute:!1})],s.prototype,"renderItem",2),i([l({converter:C})],s.prototype,"emptyText",2),i([l({type:Boolean,reflect:!0,attribute:"show-move-all"})],s.prototype,"showMoveAll",2),i([f()],s.prototype,"_marked",2),i([f()],s.prototype,"_query",2),i([f()],s.prototype,"_active",2),i([f()],s.prototype,"_labelled",2),s=i([L("skdx-transfer","transfer","root")],s);export{y as DESTINATION_OF,H as OPTION_SELECTOR,V as ORIGIN_OF,v as SIDE_NOUN,s as SkdxTransfer,k as TRANSFER_INTERNAL_UPDATE,Z as defaultTransferFilter,_ as matchesFilterMode,P as moveAnnouncement,B as moveTriggerLabel,Q as searchResultsAnnouncement};

package/dist/transfer/TransferAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var p=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},u=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of l(t))!f.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=m(t,r))||s.enumerable});return e};var x=e=>u(i({},"__esModule",{value:!0}),e);var T={};p(T,{TRANSFER_ANATOMY_GENERATED:()=>c,fillTransferAnatomy:()=>A});module.exports=x(T);var E=require("./TransferListHeader.cjs"),h=require("./TransferList.cjs"),k=require("./TransferListSearch.cjs"),b=require("./TransferEmpty.cjs"),S=require("./TransferControls.cjs"),y=require("./TransferMoveTrigger.cjs"),C=require("./TransferMoveAllTrigger.cjs"),c="data-skdx-transfer-generated";function d(e,t){let n=[],s=e.titles?.[t];if(s){let o=document.createElement("skdx-transfer-list-header");o.setAttribute("side",t),o.textContent=s,n.push(o)}if(e.searchable){let o=document.createElement("skdx-transfer-list-search");o.setAttribute("side",t),n.push(o)}let r=document.createElement("skdx-transfer-list");r.setAttribute("side",t),n.push(r);let a=document.createElement("skdx-transfer-empty");a.setAttribute("side",t),n.push(a);for(let o of n)o.setAttribute(c,"");return n}function A(e){let t=document.createElement("skdx-transfer-controls");if(t.setAttribute(c,""),e.showMoveAll){let r=document.createElement("skdx-transfer-move-all-trigger");r.setAttribute("direction","toTarget"),r.textContent="\u21E5",t.append(r)}let n=document.createElement("skdx-transfer-move-trigger");n.setAttribute("direction","toTarget"),n.textContent="\u2192";let s=document.createElement("skdx-transfer-move-trigger");if(s.setAttribute("direction","toSource"),s.textContent="\u2190",t.append(n,s),e.showMoveAll){let r=document.createElement("skdx-transfer-move-all-trigger");r.setAttribute("direction","toSource"),r.textContent="\u21E4",t.append(r)}e.replaceChildren(...d(e,"source"),t,...d(e,"target"))}0&&(module.exports={TRANSFER_ANATOMY_GENERATED,fillTransferAnatomy});

package/dist/transfer/TransferAnatomy.d.cts

@@ -0,0 +1,22 @@
+import type { SkdxTransfer } from './Transfer.cjs';
+import './TransferListHeader.cjs';
+import './TransferList.cjs';
+import './TransferListSearch.cjs';
+import './TransferEmpty.cjs';
+import './TransferControls.cjs';
+import './TransferMoveTrigger.cjs';
+import './TransferMoveAllTrigger.cjs';
+/** Titles for the derived anatomy's two `SkdxTransferListHeader`s. */
+export interface SkdxTransferTitles {
+    /** Heading text for the source (available) side. */
+    source?: string;
+    /** Heading text for the target (selected) side. */
+    target?: string;
+}
+/** @internal Marks a direct child of `<skdx-transfer>` this module generated. */
+export declare const TRANSFER_ANATOMY_GENERATED = "data-skdx-transfer-generated";
+/**
+ * @internal Builds the canonical anatomy: source side, controls, target side.
+ * Called only when the root has no consumer-authored composition.
+ */
+export declare function fillTransferAnatomy(root: SkdxTransfer): void;

package/dist/transfer/TransferAnatomy.d.ts

@@ -0,0 +1,22 @@
+import type { SkdxTransfer } from './Transfer.js';
+import './TransferListHeader.js';
+import './TransferList.js';
+import './TransferListSearch.js';
+import './TransferEmpty.js';
+import './TransferControls.js';
+import './TransferMoveTrigger.js';
+import './TransferMoveAllTrigger.js';
+/** Titles for the derived anatomy's two `SkdxTransferListHeader`s. */
+export interface SkdxTransferTitles {
+    /** Heading text for the source (available) side. */
+    source?: string;
+    /** Heading text for the target (selected) side. */
+    target?: string;
+}
+/** @internal Marks a direct child of `<skdx-transfer>` this module generated. */
+export declare const TRANSFER_ANATOMY_GENERATED = "data-skdx-transfer-generated";
+/**
+ * @internal Builds the canonical anatomy: source side, controls, target side.
+ * Called only when the root has no consumer-authored composition.
+ */
+export declare function fillTransferAnatomy(root: SkdxTransfer): void;

package/dist/transfer/TransferAnatomy.js

@@ -0,0 +1 @@
+import"./TransferListHeader.js";import"./TransferList.js";import"./TransferListSearch.js";import"./TransferEmpty.js";import"./TransferControls.js";import"./TransferMoveTrigger.js";import"./TransferMoveAllTrigger.js";var a="data-skdx-transfer-generated";function c(n,t){let e=[],o=n.titles?.[t];if(o){let s=document.createElement("skdx-transfer-list-header");s.setAttribute("side",t),s.textContent=o,e.push(s)}if(n.searchable){let s=document.createElement("skdx-transfer-list-search");s.setAttribute("side",t),e.push(s)}let r=document.createElement("skdx-transfer-list");r.setAttribute("side",t),e.push(r);let i=document.createElement("skdx-transfer-empty");i.setAttribute("side",t),e.push(i);for(let s of e)s.setAttribute(a,"");return e}function A(n){let t=document.createElement("skdx-transfer-controls");if(t.setAttribute(a,""),n.showMoveAll){let r=document.createElement("skdx-transfer-move-all-trigger");r.setAttribute("direction","toTarget"),r.textContent="\u21E5",t.append(r)}let e=document.createElement("skdx-transfer-move-trigger");e.setAttribute("direction","toTarget"),e.textContent="\u2192";let o=document.createElement("skdx-transfer-move-trigger");if(o.setAttribute("direction","toSource"),o.textContent="\u2190",t.append(e,o),n.showMoveAll){let r=document.createElement("skdx-transfer-move-all-trigger");r.setAttribute("direction","toSource"),r.textContent="\u21E4",t.append(r)}n.replaceChildren(...c(n,"source"),t,...c(n,"target"))}export{a as TRANSFER_ANATOMY_GENERATED,A as fillTransferAnatomy};

package/dist/transfer/TransferControls.d.cts

@@ -1,15 +1,8 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-transfer-controls>` — the named `role="group"` holding the move
- * triggers. Without it the buttons are announced as loose controls stranded
- * between two lists; with it they are announced as the thing that moves items
- * between them.
- *
- * Purely a wrapper — it owns no state and changes no behaviour, so the triggers
- * work outside it too. Use it anyway.
- *
- * The role goes on this host element rather than in shadow DOM, so the buttons
- * slotted into it are real descendants of the group in the accessibility tree.
+ * `<skdx-transfer-controls>` — the named `role="group"` holding move triggers,
+ * so buttons are announced as the thing that moves items between lists, not
+ * as loose controls. Purely a wrapper; triggers work outside it too.
  *
  * @example
  * ```html

package/dist/transfer/TransferControls.d.ts

@@ -1,15 +1,8 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-transfer-controls>` — the named `role="group"` holding the move
- * triggers. Without it the buttons are announced as loose controls stranded
- * between two lists; with it they are announced as the thing that moves items
- * between them.
- *
- * Purely a wrapper — it owns no state and changes no behaviour, so the triggers
- * work outside it too. Use it anyway.
- *
- * The role goes on this host element rather than in shadow DOM, so the buttons
- * slotted into it are real descendants of the group in the accessibility tree.
+ * `<skdx-transfer-controls>` — the named `role="group"` holding move triggers,
+ * so buttons are announced as the thing that moves items between lists, not
+ * as loose controls. Purely a wrapper; triggers work outside it too.
  *
  * @example
  * ```html

package/dist/transfer/TransferEmpty.cjs

@@ -1,5 +1,5 @@
-"use strict";var o=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(r,e)=>{for(var s in e)o(r,s,{get:e[s],enumerable:!0})},T=(r,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of y(e))!u.call(r,t)&&t!==s&&o(r,t,{get:()=>e[t],enumerable:!(i=m(e,t))||i.enumerable});return r};var k=r=>T(o({},"__esModule",{value:!0}),r),c=(r,e,s,i)=>{for(var t=i>1?void 0:i?m(e,s):e,d=r.length-1,l;d>=0;d--)(l=r[d])&&(t=(i?l(e,s,t):l(t))||t);return i&&t&&o(e,s,t),t};var A={};b(A,{SkdxTransferEmpty:()=>n});module.exports=k(A);var a=require("lit"),f=require("lit/decorators.js"),h=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),p=require("./Transfer.cjs");var n=class extends a.LitElement{constructor(){super(...arguments);this.side="source";this.transfer=null;this.onTransferUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(p.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.sync()}disconnectedCallback(){this.transfer?.removeEventListener(p.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),super.disconnectedCallback()}updated(){this.sync()}sync(){this.setAttribute("data-side",this.side);let s=(this.transfer?.visibleItems[this.side].length??0)===0;this.hidden=!s,s?this.setAttribute("data-empty",""):this.removeAttribute("data-empty")}render(){return a.html`<slot></slot>`}};n.styles=[v.hiddenHostStyles,a.css`
+"use strict";var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var b=(r,e)=>{for(var t in e)o(r,t,{get:e[t],enumerable:!0})},g=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of v(e))!y.call(r,s)&&s!==t&&o(r,s,{get:()=>e[s],enumerable:!(i=c(e,s))||i.enumerable});return r};var T=r=>g(o({},"__esModule",{value:!0}),r),h=(r,e,t,i)=>{for(var s=i>1?void 0:i?c(e,t):e,d=r.length-1,l;d>=0;d--)(l=r[d])&&(s=(i?l(e,t,s):l(s))||s);return i&&s&&o(e,t,s),s};var A={};b(A,{SkdxTransferEmpty:()=>a});module.exports=T(A);var n=require("lit"),m=require("lit/decorators.js"),f=require("../internal/define.cjs"),u=require("../internal/styles.cjs"),p=require("./Transfer.cjs");var a=class extends n.LitElement{constructor(){super(...arguments);this.side="source";this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(p.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.sync()}disconnectedCallback(){this.transfer?.removeEventListener(p.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),super.disconnectedCallback()}updated(){this.sync()}get reason(){return(this.transfer?.sideItems[this.side].length??0)===0?"empty":"no-results"}get activeQuery(){return this.reason==="no-results"?this.transfer?.getQuery(this.side)??"":""}sync(){this.setAttribute("data-side",this.side);let t=(this.transfer?.visibleItems[this.side].length??0)===0;this.hidden=!t,t?this.setAttribute("data-empty",""):this.removeAttribute("data-empty"),this.setAttribute("data-reason",this.reason),this.setAttribute("data-query",this.activeQuery)}render(){let t=this.transfer?this.transfer.getEmptyText(this.reason,this.activeQuery):"";return n.html`<slot name=${this.reason}></slot><slot>${t}</slot>`}};a.styles=[u.hiddenHostStyles,n.css`
       :host {
         display: block;
       }
-    `],c([(0,f.property)({type:String,reflect:!0})],n.prototype,"side",2),n=c([(0,h.customElement)("skdx-transfer-empty","transfer","empty")],n);0&&(module.exports={SkdxTransferEmpty});
+    `],h([(0,m.property)({type:String,reflect:!0})],a.prototype,"side",2),a=h([(0,f.customElement)("skdx-transfer-empty","transfer","empty")],a);0&&(module.exports={SkdxTransferEmpty});

package/dist/transfer/TransferEmpty.d.cts

@@ -1,20 +1,23 @@
 import { LitElement } from 'lit';
 import type { TransferSide } from './types.cjs';
 /**
- * `<skdx-transfer-empty>` — the message shown while one side has nothing to
- * render, either genuinely empty or filtered down to nothing. Hidden (via
- * `hidden` + `:host([hidden])`) otherwise, so it is safe to leave in the tree
- * permanently.
+ * `<skdx-transfer-empty>` — message shown while a side has nothing to render,
+ * either genuinely empty or filtered to nothing. A sibling of `<skdx-transfer-list>`,
+ * not a child, because `role="listbox"` may not contain paragraphs. Publishes
+ * `data-reason` (`"empty"` / `"no-results"`) and `data-query` so named slots
+ * can differentiate the messages.
  *
- * It is a sibling of its `<skdx-transfer-list>`, not a child: a
- * `role="listbox"` may only contain options and groups, and a bare paragraph
- * inside one is invalid ARIA that some screen readers drop entirely. Hence its
- * own `side`.
+ * @slot - The message shown for either reason.
+ * @slot empty - The message shown while the side genuinely holds nothing.
+ * @slot no-results - The message shown while a query filtered the side to nothing.
  *
  * @example
  * ```html
  * <skdx-transfer-list side="source"></skdx-transfer-list>
- * <skdx-transfer-empty side="source">Nothing left to add.</skdx-transfer-empty>
+ * <skdx-transfer-empty side="source">
+ *   <span slot="empty">Nothing left to add.</span>
+ *   <span slot="no-results">No match for that search.</span>
+ * </skdx-transfer-empty>
  * ```
  */
 export declare class SkdxTransferEmpty extends LitElement {
@@ -26,6 +29,8 @@ export declare class SkdxTransferEmpty extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
+    private get reason();
+    private get activeQuery();
     private sync;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/transfer/TransferEmpty.d.ts

@@ -1,20 +1,23 @@
 import { LitElement } from 'lit';
 import type { TransferSide } from './types.js';
 /**
- * `<skdx-transfer-empty>` — the message shown while one side has nothing to
- * render, either genuinely empty or filtered down to nothing. Hidden (via
- * `hidden` + `:host([hidden])`) otherwise, so it is safe to leave in the tree
- * permanently.
+ * `<skdx-transfer-empty>` — message shown while a side has nothing to render,
+ * either genuinely empty or filtered to nothing. A sibling of `<skdx-transfer-list>`,
+ * not a child, because `role="listbox"` may not contain paragraphs. Publishes
+ * `data-reason` (`"empty"` / `"no-results"`) and `data-query` so named slots
+ * can differentiate the messages.
  *
- * It is a sibling of its `<skdx-transfer-list>`, not a child: a
- * `role="listbox"` may only contain options and groups, and a bare paragraph
- * inside one is invalid ARIA that some screen readers drop entirely. Hence its
- * own `side`.
+ * @slot - The message shown for either reason.
+ * @slot empty - The message shown while the side genuinely holds nothing.
+ * @slot no-results - The message shown while a query filtered the side to nothing.
  *
  * @example
  * ```html
  * <skdx-transfer-list side="source"></skdx-transfer-list>
- * <skdx-transfer-empty side="source">Nothing left to add.</skdx-transfer-empty>
+ * <skdx-transfer-empty side="source">
+ *   <span slot="empty">Nothing left to add.</span>
+ *   <span slot="no-results">No match for that search.</span>
+ * </skdx-transfer-empty>
  * ```
  */
 export declare class SkdxTransferEmpty extends LitElement {
@@ -26,6 +29,8 @@ export declare class SkdxTransferEmpty extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(): void;
+    private get reason();
+    private get activeQuery();
     private sync;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/transfer/TransferEmpty.js

@@ -1,5 +1,5 @@
-var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(n,s,t,i)=>{for(var e=i>1?void 0:i?p(s,t):s,a=n.length-1,o;a>=0;a--)(o=n[a])&&(e=(i?o(s,t,e):o(e))||e);return i&&e&&c(s,t,e),e};import{css as m,html as f,LitElement as h}from"lit";import{property as v}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";import{TRANSFER_INTERNAL_UPDATE as l}from"./Transfer.js";var r=class extends h{constructor(){super(...arguments);this.side="source";this.transfer=null;this.onTransferUpdate=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(l,this.onTransferUpdate),this.sync()}disconnectedCallback(){this.transfer?.removeEventListener(l,this.onTransferUpdate),super.disconnectedCallback()}updated(){this.sync()}sync(){this.setAttribute("data-side",this.side);let t=(this.transfer?.visibleItems[this.side].length??0)===0;this.hidden=!t,t?this.setAttribute("data-empty",""):this.removeAttribute("data-empty")}render(){return f`<slot></slot>`}};r.styles=[u,m`
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(a,r,e,i)=>{for(var t=i>1?void 0:i?p(r,e):r,n=a.length-1,o;n>=0;n--)(o=a[n])&&(t=(i?o(r,e,t):o(t))||t);return i&&t&&h(r,e,t),t};import{css as c,html as m,LitElement as f}from"lit";import{property as u}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{hiddenHostStyles as y}from"../internal/styles.js";import{TRANSFER_INTERNAL_UPDATE as l}from"./Transfer.js";var s=class extends f{constructor(){super(...arguments);this.side="source";this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(l,this.onTransferUpdate),this.sync()}disconnectedCallback(){this.transfer?.removeEventListener(l,this.onTransferUpdate),super.disconnectedCallback()}updated(){this.sync()}get reason(){return(this.transfer?.sideItems[this.side].length??0)===0?"empty":"no-results"}get activeQuery(){return this.reason==="no-results"?this.transfer?.getQuery(this.side)??"":""}sync(){this.setAttribute("data-side",this.side);let e=(this.transfer?.visibleItems[this.side].length??0)===0;this.hidden=!e,e?this.setAttribute("data-empty",""):this.removeAttribute("data-empty"),this.setAttribute("data-reason",this.reason),this.setAttribute("data-query",this.activeQuery)}render(){let e=this.transfer?this.transfer.getEmptyText(this.reason,this.activeQuery):"";return m`<slot name=${this.reason}></slot><slot>${e}</slot>`}};s.styles=[y,c`
       :host {
         display: block;
       }
-    `],d([v({type:String,reflect:!0})],r.prototype,"side",2),r=d([y("skdx-transfer-empty","transfer","empty")],r);export{r as SkdxTransferEmpty};
+    `],d([u({type:String,reflect:!0})],s.prototype,"side",2),s=d([v("skdx-transfer-empty","transfer","empty")],s);export{s as SkdxTransferEmpty};

package/dist/transfer/TransferItem.cjs

@@ -1 +1 @@
-"use strict";var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var E=(r,t)=>{for(var e in t)o(r,e,{get:t[e],enumerable:!0})},b=(r,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of k(t))!T.call(r,s)&&s!==e&&o(r,s,{get:()=>t[s],enumerable:!(i=c(t,s))||i.enumerable});return r};var y=r=>b(o({},"__esModule",{value:!0}),r),v=(r,t,e,i)=>{for(var s=i>1?void 0:i?c(t,e):t,a=r.length-1,n;a>=0;a--)(n=r[a])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&o(t,e,s),s};var x={};E(x,{SkdxTransferItem:()=>d});module.exports=y(x);var u=require("../internal/define.cjs"),m=require("../internal/part.cjs"),p=require("../listbox/ListboxItem.cjs"),l=require("./Transfer.cjs");function L(r){let t=r.closest('[role="listbox"]');return t?Array.from(t.querySelectorAll(l.OPTION_SELECTOR),e=>e.getAttribute("data-value")).filter(e=>e!==null):[]}var d=class extends p.SkdxListboxItem{constructor(){super(...arguments);this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate();this.handleTransferClick=e=>{let i=this.transfer;if(this.isTransferDisabled||!i)return;if(!e.shiftKey){this.markPlain();return}let s=this.side,a=L(this),n=i.anchor[s]??this.value,f=a.indexOf(n),h=a.indexOf(this.value);i.setMarked(s,f===-1||h===-1?[this.value]:a.slice(Math.min(f,h),Math.max(f,h)+1))};this.handleTransferKeyDown=e=>{(e.key===" "||e.key==="Enter")&&this.markPlain()}}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(l.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.addEventListener("click",this.handleTransferClick),this.addEventListener("keydown",this.handleTransferKeyDown)}disconnectedCallback(){this.transfer?.removeEventListener(l.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.removeEventListener("click",this.handleTransferClick),this.removeEventListener("keydown",this.handleTransferKeyDown),super.disconnectedCallback()}get side(){return this.closest("skdx-transfer-list")?.side??"source"}get isTransferDisabled(){return this.disabled||(this.transfer?.disabled??!1)}updated(){super.updated();let e=this.side;(0,m.reflectHostState)(this,{"data-side":e,"data-selected":this.transfer?.marked[e].includes(this.value)?"":null})}markPlain(){!this.isTransferDisabled&&this.transfer&&(this.transfer.anchor[this.side]=this.value)}};d=v([(0,u.customElement)("skdx-transfer-item","transfer","item")],d);0&&(module.exports={SkdxTransferItem});
+"use strict";var o=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var E=(r,t)=>{for(var e in t)o(r,e,{get:t[e],enumerable:!0})},b=(r,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of k(t))!T.call(r,s)&&s!==e&&o(r,s,{get:()=>t[s],enumerable:!(i=c(t,s))||i.enumerable});return r};var y=r=>b(o({},"__esModule",{value:!0}),r),u=(r,t,e,i)=>{for(var s=i>1?void 0:i?c(t,e):t,a=r.length-1,n;a>=0;a--)(n=r[a])&&(s=(i?n(t,e,s):n(s))||s);return i&&s&&o(t,e,s),s};var x={};E(x,{SkdxTransferItem:()=>d});module.exports=y(x);var v=require("../internal/define.cjs"),m=require("../internal/part.cjs"),p=require("../listbox/ListboxItem.cjs"),l=require("./Transfer.cjs");function L(r){let t=r.closest('[role="listbox"]');return t?Array.from(t.querySelectorAll(l.OPTION_SELECTOR),e=>e.getAttribute("data-value")).filter(e=>e!==null):[]}var d=class extends p.SkdxListboxItem{constructor(){super(...arguments);this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate();this.handleTransferClick=e=>{let i=this.transfer;if(this.isTransferDisabled||!i)return;if(!e.shiftKey){this.markPlain();return}let s=this.side,a=L(this),n=i.anchor[s]??this.value,f=a.indexOf(n),h=a.indexOf(this.value);i.setMarked(s,f===-1||h===-1?[this.value]:a.slice(Math.min(f,h),Math.max(f,h)+1))};this.handleTransferKeyDown=e=>{!e.shiftKey&&(e.key===" "||e.key==="Enter")&&this.markPlain()}}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(l.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.addEventListener("click",this.handleTransferClick),this.addEventListener("keydown",this.handleTransferKeyDown)}disconnectedCallback(){this.transfer?.removeEventListener(l.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.removeEventListener("click",this.handleTransferClick),this.removeEventListener("keydown",this.handleTransferKeyDown),super.disconnectedCallback()}get side(){return this.closest("skdx-transfer-list")?.side??"source"}get isTransferDisabled(){return this.disabled||(this.transfer?.disabled??!1)}updated(){super.updated();let e=this.side;(0,m.reflectHostState)(this,{"data-side":e,"data-selected":this.transfer?.marked[e].includes(this.value)?"":null})}markPlain(){!this.isTransferDisabled&&this.transfer&&(this.transfer.anchor[this.side]=this.value)}};d=u([(0,v.customElement)("skdx-transfer-item","transfer","item")],d);0&&(module.exports={SkdxTransferItem});

package/dist/transfer/TransferItem.d.cts

@@ -1,33 +1,18 @@
 import { SkdxListboxItem } from '../listbox/ListboxItem.cjs';
 /**
  * `<skdx-transfer-item>` — one option inside a `<skdx-transfer-list>`: an
- * `<skdx-listbox-item>` that also knows which side it is on. Marking it does
- * **not** move it: marking is the transient "I want to move this" state, and a
- * `<skdx-transfer-move-trigger>` (or the outward arrow key) is what commits the
- * move.
- *
- * Click, Enter, or Space toggles it into the marked set; **Shift+Click** marks
- * the whole range from the anchor — the last option marked without Shift —
- * mirroring Shift+ArrowUp/Down.
- *
- * Publishes `data-side` and `data-selected` while marked, plus everything
- * `<skdx-listbox-item>` already emits (`aria-selected`, `data-value`,
- * `data-state`, `data-disabled`).
- *
- * You only render this yourself when `<skdx-transfer-list>`'s default rendering
- * is not enough — it otherwise renders one per visible item on its side.
+ * `<skdx-listbox-item>` that publishes `data-side` and `data-selected` (marked).
+ * Marking does not move: a `<skdx-transfer-move-trigger>` commits the move.
+ * Shift+Click marks the range from the last unshifted option to this one.
  */
 export declare class SkdxTransferItem extends SkdxListboxItem {
     private transfer;
     private readonly onTransferUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** Which list this option is in. Read from the DOM, not a prop — the list is always its ancestor. */
     private get side();
-    /** Named apart from `<skdx-listbox-item>`'s own private `isDisabled` — a subclass may not redeclare it. */
     private get isTransferDisabled();
     protected updated(): void;
-    /** Records where a subsequent Shift range should start. */
     private markPlain;
     private readonly handleTransferClick;
     private readonly handleTransferKeyDown;

package/dist/transfer/TransferItem.d.ts

@@ -1,33 +1,18 @@
 import { SkdxListboxItem } from '../listbox/ListboxItem.js';
 /**
  * `<skdx-transfer-item>` — one option inside a `<skdx-transfer-list>`: an
- * `<skdx-listbox-item>` that also knows which side it is on. Marking it does
- * **not** move it: marking is the transient "I want to move this" state, and a
- * `<skdx-transfer-move-trigger>` (or the outward arrow key) is what commits the
- * move.
- *
- * Click, Enter, or Space toggles it into the marked set; **Shift+Click** marks
- * the whole range from the anchor — the last option marked without Shift —
- * mirroring Shift+ArrowUp/Down.
- *
- * Publishes `data-side` and `data-selected` while marked, plus everything
- * `<skdx-listbox-item>` already emits (`aria-selected`, `data-value`,
- * `data-state`, `data-disabled`).
- *
- * You only render this yourself when `<skdx-transfer-list>`'s default rendering
- * is not enough — it otherwise renders one per visible item on its side.
+ * `<skdx-listbox-item>` that publishes `data-side` and `data-selected` (marked).
+ * Marking does not move: a `<skdx-transfer-move-trigger>` commits the move.
+ * Shift+Click marks the range from the last unshifted option to this one.
  */
 export declare class SkdxTransferItem extends SkdxListboxItem {
     private transfer;
     private readonly onTransferUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** Which list this option is in. Read from the DOM, not a prop — the list is always its ancestor. */
     private get side();
-    /** Named apart from `<skdx-listbox-item>`'s own private `isDisabled` — a subclass may not redeclare it. */
     private get isTransferDisabled();
     protected updated(): void;
-    /** Records where a subsequent Shift range should start. */
     private markPlain;
     private readonly handleTransferClick;
     private readonly handleTransferKeyDown;

package/dist/transfer/TransferItem.js

@@ -1 +1 @@
-var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=(a,s,e,r)=>{for(var t=r>1?void 0:r?v(s,e):s,i=a.length-1,n;i>=0;i--)(n=a[i])&&(t=(r?n(s,e,t):n(t))||t);return r&&t&&c(s,e,t),t};import{customElement as u}from"../internal/define.js";import{reflectHostState as m}from"../internal/part.js";import{SkdxListboxItem as p}from"../listbox/ListboxItem.js";import{OPTION_SELECTOR as k,TRANSFER_INTERNAL_UPDATE as h}from"./Transfer.js";function T(a){let s=a.closest('[role="listbox"]');return s?Array.from(s.querySelectorAll(k),e=>e.getAttribute("data-value")).filter(e=>e!==null):[]}var d=class extends p{constructor(){super(...arguments);this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate();this.handleTransferClick=e=>{let r=this.transfer;if(this.isTransferDisabled||!r)return;if(!e.shiftKey){this.markPlain();return}let t=this.side,i=T(this),n=r.anchor[t]??this.value,l=i.indexOf(n),o=i.indexOf(this.value);r.setMarked(t,l===-1||o===-1?[this.value]:i.slice(Math.min(l,o),Math.max(l,o)+1))};this.handleTransferKeyDown=e=>{(e.key===" "||e.key==="Enter")&&this.markPlain()}}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(h,this.onTransferUpdate),this.addEventListener("click",this.handleTransferClick),this.addEventListener("keydown",this.handleTransferKeyDown)}disconnectedCallback(){this.transfer?.removeEventListener(h,this.onTransferUpdate),this.removeEventListener("click",this.handleTransferClick),this.removeEventListener("keydown",this.handleTransferKeyDown),super.disconnectedCallback()}get side(){return this.closest("skdx-transfer-list")?.side??"source"}get isTransferDisabled(){return this.disabled||(this.transfer?.disabled??!1)}updated(){super.updated();let e=this.side;m(this,{"data-side":e,"data-selected":this.transfer?.marked[e].includes(this.value)?"":null})}markPlain(){!this.isTransferDisabled&&this.transfer&&(this.transfer.anchor[this.side]=this.value)}};d=f([u("skdx-transfer-item","transfer","item")],d);export{d as SkdxTransferItem};
+var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=(a,s,e,r)=>{for(var t=r>1?void 0:r?u(s,e):s,i=a.length-1,n;i>=0;i--)(n=a[i])&&(t=(r?n(s,e,t):n(t))||t);return r&&t&&c(s,e,t),t};import{customElement as v}from"../internal/define.js";import{reflectHostState as m}from"../internal/part.js";import{SkdxListboxItem as p}from"../listbox/ListboxItem.js";import{OPTION_SELECTOR as k,TRANSFER_INTERNAL_UPDATE as h}from"./Transfer.js";function T(a){let s=a.closest('[role="listbox"]');return s?Array.from(s.querySelectorAll(k),e=>e.getAttribute("data-value")).filter(e=>e!==null):[]}var d=class extends p{constructor(){super(...arguments);this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate();this.handleTransferClick=e=>{let r=this.transfer;if(this.isTransferDisabled||!r)return;if(!e.shiftKey){this.markPlain();return}let t=this.side,i=T(this),n=r.anchor[t]??this.value,l=i.indexOf(n),o=i.indexOf(this.value);r.setMarked(t,l===-1||o===-1?[this.value]:i.slice(Math.min(l,o),Math.max(l,o)+1))};this.handleTransferKeyDown=e=>{!e.shiftKey&&(e.key===" "||e.key==="Enter")&&this.markPlain()}}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(h,this.onTransferUpdate),this.addEventListener("click",this.handleTransferClick),this.addEventListener("keydown",this.handleTransferKeyDown)}disconnectedCallback(){this.transfer?.removeEventListener(h,this.onTransferUpdate),this.removeEventListener("click",this.handleTransferClick),this.removeEventListener("keydown",this.handleTransferKeyDown),super.disconnectedCallback()}get side(){return this.closest("skdx-transfer-list")?.side??"source"}get isTransferDisabled(){return this.disabled||(this.transfer?.disabled??!1)}updated(){super.updated();let e=this.side;m(this,{"data-side":e,"data-selected":this.transfer?.marked[e].includes(this.value)?"":null})}markPlain(){!this.isTransferDisabled&&this.transfer&&(this.transfer.anchor[this.side]=this.value)}};d=f([v("skdx-transfer-item","transfer","item")],d);export{d as SkdxTransferItem};

package/dist/transfer/TransferList.cjs

@@ -1 +1 @@
-"use strict";var h=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var x=(a,n)=>{for(var e in n)h(a,e,{get:n[e],enumerable:!0})},T=(a,n,e,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of E(n))!k.call(a,t)&&t!==e&&h(a,t,{get:()=>n[t],enumerable:!(s=b(n,t))||s.enumerable});return a};var w=a=>T(h({},"__esModule",{value:!0}),a),c=(a,n,e,s)=>{for(var t=s>1?void 0:s?b(n,e):n,i=a.length-1,r;i>=0;i--)(r=a[i])&&(t=(s?r(n,e,t):r(t))||t);return s&&t&&h(n,e,t),t};var S={};x(S,{SkdxTransferList:()=>d});module.exports=w(S);var p=require("lit/decorators.js"),f=require("../internal/authored.cjs"),v=require("../internal/define.cjs"),A=require("../internal/direction.cjs"),g=require("../listbox/Listbox.cjs"),o=require("./Transfer.cjs"),V=require("./TransferItem.cjs");var u="data-skdx-transfer-generated",C={source:"Available items",target:"Selected items"},L={source:"ArrowRight",target:"ArrowLeft"};function M(a,n,e){let s=a.indexOf(n),t=a.indexOf(e);return s===-1||t===-1?a.includes(e)?[e]:[]:a.slice(Math.min(s,t),Math.max(s,t)+1)}function D(a,n,e){return Math.min(Math.max(a,n),e)}var d=class extends g.SkdxListbox{constructor(){super(...arguments);this.side="source";this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate();this.handleTransferKeyDown=e=>{let s=this.transfer;if(!s||s.disabled)return;let t=this.optionValues();if(t.length===0)return;let i=e.target.getAttribute?.("data-value")??null,r=s.marked[this.side];if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault(),s.setMarked(this.side,t);return}if(e.shiftKey&&(e.key==="ArrowDown"||e.key==="ArrowUp")){let l=i===null?-1:t.indexOf(i);if(l===-1)return;let y=D(l+(e.key==="ArrowDown"?1:-1),0,t.length-1),m=s.anchor[this.side]??t[l];s.anchor[this.side]=m,s.setMarked(this.side,M(t,m,t[y]));return}if((0,A.directionalKey)(e.key,this)===L[this.side]){let l=r.length>0?r:i?[i]:[];if(l.length===0)return;e.preventDefault(),s.move(this.side==="source"?"toTarget":"toSource",l)}}}connectedCallback(){this.multiple=!0,super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(o.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.transfer&&(this.transfer.listEls[this.side]=this,this.id||(this.id=this.transfer.listId(this.side))),this.addEventListener("keydown",this.handleTransferKeyDown)}disconnectedCallback(){this.transfer?.removeEventListener(o.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.transfer?.listEls[this.side]===this&&(this.transfer.listEls[this.side]=null),this.removeEventListener("keydown",this.handleTransferKeyDown),super.disconnectedCallback()}get visible(){return this.transfer?.visibleItems[this.side]??[]}optionValues(){return Array.from(this.querySelectorAll(o.OPTION_SELECTOR),e=>e.getAttribute("data-value")).filter(e=>e!==null)}willUpdate(){this.value=this.transfer?.marked[this.side]??[],this.disabled=this.transfer?.disabled??!1,super.willUpdate();let e=this.transfer?.getActive(this.side)??null;e!==null&&this.optionValues().includes(e)?this.activeValue=e:this.activeValue!==null&&!this.optionValues().includes(this.activeValue)&&(this.activeValue=null)}updated(e){this.transfer&&(this.hasAuthoredChildren?this.removeGeneratedOptions():this.syncDefaultOptions()),super.updated(e);let s=this.visible,t=this.transfer?.isLabelled(this.side)??!1;this.setAttribute("data-side",this.side),s.length===0?this.setAttribute("data-empty",""):this.removeAttribute("data-empty"),t&&this.transfer?(this.setAttribute("aria-labelledby",this.transfer.headerId(this.side)),this.removeAttribute("aria-label")):(this.removeAttribute("aria-labelledby"),this.setAttribute("aria-label",C[this.side]));let i=s.some(r=>!r.disabled);!this.disabled&&!i?this.tabIndex=0:this.removeAttribute("tabindex")}selectItem(e){if(this.disabled)return;let s=this.transfer?.marked[this.side]??[],t=s.includes(e)?s.filter(i=>i!==e):[...s,e];this.transfer?.setMarked(this.side,t),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0}))}setActiveValue(e){super.setActiveValue(e),this.transfer?.setActive(this.side,e)}get hasAuthoredChildren(){return(0,f.hasAuthoredContent)(this,u)}syncDefaultOptions(){let e=this.visible,s=new Map(Array.from(this.querySelectorAll(`:scope > skdx-transfer-item[${u}]`),i=>[i.getAttribute("value")??"",i])),t=null;for(let i of e){let r=s.get(i.value);r||(r=document.createElement("skdx-transfer-item"),r.setAttribute("value",i.value),r.setAttribute(u,"")),s.delete(i.value),r.setAttribute("text-value",i.label),i.disabled?r.setAttribute("disabled",""):r.removeAttribute("disabled"),r.textContent!==i.label&&(r.textContent=i.label);let l=t===null?this.firstElementChild:t.nextElementSibling;l!==r&&this.insertBefore(r,l),t=r}for(let i of s.values())i.remove()}removeGeneratedOptions(){(0,f.removeGeneratedContent)(this,u)}};c([(0,p.property)({type:String,reflect:!0})],d.prototype,"side",2),d=c([(0,v.customElement)("skdx-transfer-list")],d);0&&(module.exports={SkdxTransferList});
+"use strict";var u=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var x=(l,a)=>{for(var e in a)u(l,e,{get:a[e],enumerable:!0})},L=(l,a,e,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of T(a))!w.call(l,t)&&t!==e&&u(l,t,{get:()=>a[t],enumerable:!(s=y(a,t))||s.enumerable});return l};var M=l=>L(u({},"__esModule",{value:!0}),l),f=(l,a,e,s)=>{for(var t=s>1?void 0:s?y(a,e):a,n=l.length-1,r;n>=0;n--)(r=l[n])&&(t=(s?r(a,e,t):r(t))||t);return s&&t&&u(a,e,t),t};var C={};x(C,{SkdxTransferList:()=>d});module.exports=M(C);var E=require("lit"),v=require("lit/decorators.js"),m=require("../internal/authored.cjs"),p=require("../internal/define.cjs"),A=require("../internal/direction.cjs"),k=require("../listbox/Listbox.cjs"),h=require("./Transfer.cjs"),O=require("./TransferItem.cjs");var c="data-skdx-transfer-generated",D={source:"Available items",target:"Selected items"},I={source:"ArrowRight",target:"ArrowLeft"};function b(l,a,e){let s=l.indexOf(a),t=l.indexOf(e);return s===-1||t===-1?l.includes(e)?[e]:[]:l.slice(Math.min(s,t),Math.max(s,t)+1)}function S(l,a,e){return Math.min(Math.max(l,a),e)}var d=class extends k.SkdxListbox{constructor(){super(...arguments);this.side="source";this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate();this.handleFocusIn=e=>{let s=e.relatedTarget;if(s&&this.contains(s))return;let t=this.transfer?.marked[this.side]??[],n=this.optionElements();if(n.length===0)return;let r=(t.length>0?n.find(i=>t.includes(i.getAttribute("data-value")??"")):void 0)??n[0];e.target!==r&&r.focus()};this.handleScroll=()=>{this.transfer?.emitListScroll(this.side,this)};this.handleTransferKeyDown=e=>{let s=this.transfer;if(!s||s.disabled)return;let t=this.optionValues();if(t.length===0)return;let n=e.target.getAttribute?.("data-value")??null,r=s.marked[this.side];if(e.shiftKey&&(e.ctrlKey||e.metaKey)&&(e.key==="Home"||e.key==="End")){if(n===null)return;e.preventDefault();let i=e.key==="Home"?t[0]:t[t.length-1];s.setMarked(this.side,b(t,n,i));let o=this.optionElements();o[e.key==="Home"?0:o.length-1]?.focus();return}if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault();let i=t.every(o=>r.includes(o));s.setMarked(this.side,i?[]:t);return}if(e.shiftKey&&e.key===" "){if(n===null)return;e.preventDefault();let i=s.anchor[this.side]??n;s.anchor[this.side]=i,s.setMarked(this.side,b(t,i,n));return}if(e.shiftKey&&(e.key==="ArrowDown"||e.key==="ArrowUp")){let i=n===null?-1:t.indexOf(n);if(i===-1)return;let o=S(i+(e.key==="ArrowDown"?1:-1),0,t.length-1),g=s.anchor[this.side]??t[i];s.anchor[this.side]=g,s.setMarked(this.side,b(t,g,t[o]));return}if((0,A.directionalKey)(e.key,this)===I[this.side]){let i=r.length>0?r:n?[n]:[];if(i.length===0)return;e.preventDefault(),s.move(this.side==="source"?"toTarget":"toSource",i)}}}connectedCallback(){this.multiple=!0,super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(h.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.addEventListener("keydown",this.handleTransferKeyDown),this.addEventListener("scroll",this.handleScroll),this.addEventListener("focusin",this.handleFocusIn),this.transfer&&(0,p.whenUpgraded)(this.transfer,()=>{this.transfer&&(this.transfer.listEls[this.side]=this,this.id||(this.id=this.transfer.listId(this.side)))})}disconnectedCallback(){this.transfer?.removeEventListener(h.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.transfer?.listEls[this.side]===this&&(this.transfer.listEls[this.side]=null),this.removeEventListener("keydown",this.handleTransferKeyDown),this.removeEventListener("scroll",this.handleScroll),this.removeEventListener("focusin",this.handleFocusIn),super.disconnectedCallback()}get visible(){return this.transfer?.visibleItems[this.side]??[]}optionElements(){return Array.from(this.querySelectorAll(h.OPTION_SELECTOR))}optionValues(){return Array.from(this.optionElements(),e=>e.getAttribute("data-value")).filter(e=>e!==null)}willUpdate(){this.value=this.transfer?.marked[this.side]??[],this.disabled=this.transfer?.disabled??!1,super.willUpdate();let e=this.transfer?.getActive(this.side)??null;e!==null&&this.optionValues().includes(e)?this.activeValue=e:this.activeValue!==null&&!this.optionValues().includes(this.activeValue)&&(this.activeValue=null)}updated(e){this.transfer&&(this.hasAuthoredChildren?this.removeGeneratedOptions():this.syncDefaultOptions()),super.updated(e);let s=this.visible,t=this.transfer?.isLabelled(this.side)??!1;this.setAttribute("data-side",this.side),s.length===0?this.setAttribute("data-empty",""):this.removeAttribute("data-empty"),t&&this.transfer?(this.setAttribute("aria-labelledby",this.transfer.headerId(this.side)),this.removeAttribute("aria-label")):(this.removeAttribute("aria-labelledby"),this.setAttribute("aria-label",D[this.side]));let n=s.some(r=>!r.disabled);!this.disabled&&!n?this.tabIndex=0:this.removeAttribute("tabindex")}selectItem(e){if(this.disabled)return;let s=this.transfer?.marked[this.side]??[],t=s.includes(e)?s.filter(n=>n!==e):[...s,e];this.transfer?.setMarked(this.side,t),this.dispatchEvent(new CustomEvent("value-change",{detail:t,bubbles:!0,composed:!0}))}setActiveValue(e){super.setActiveValue(e),this.transfer?.setActive(this.side,e)}get hasAuthoredChildren(){return(0,m.hasAuthoredContent)(this,c)}syncDefaultOptions(){let e=this.visible,s=this.renderItem??this.transfer?.renderItem,t=new Map(Array.from(this.querySelectorAll(`:scope > skdx-transfer-item[${c}]`),r=>[r.getAttribute("value")??"",r])),n=null;for(let r of e){let i=t.get(r.value);i||(i=document.createElement("skdx-transfer-item"),i.setAttribute("value",r.value),i.setAttribute(c,"")),t.delete(r.value),i.setAttribute("text-value",r.label),r.disabled?i.setAttribute("disabled",""):i.removeAttribute("disabled"),s?(0,E.render)(s(r,{side:this.side}),i,{host:this.transfer}):i.textContent!==r.label&&(i.textContent=r.label);let o=n===null?this.firstElementChild:n.nextElementSibling;o!==i&&this.insertBefore(i,o),n=i}for(let r of t.values())r.remove()}removeGeneratedOptions(){(0,m.removeGeneratedContent)(this,c)}};f([(0,v.property)({type:String,reflect:!0})],d.prototype,"side",2),f([(0,v.property)({attribute:!1})],d.prototype,"renderItem",2),d=f([(0,p.customElement)("skdx-transfer-list")],d);0&&(module.exports={SkdxTransferList});

package/dist/transfer/TransferList.d.cts

@@ -1,77 +1,69 @@
 import { SkdxListbox } from '../listbox/Listbox.cjs';
-import type { TransferSide } from './types.cjs';
+import type { TransferItemData, TransferSide } from './types.cjs';
 import './TransferItem.cjs';
 /**
- * `<skdx-transfer-list>` — one side of a `<skdx-transfer>`: a multi-select
- * `role="listbox"` extending `<skdx-listbox>`, with its own tab stop, its own
- * roving focus, its own typeahead, and its own marked-for-move selection. The
- * two lists are two independent roving-focus groups — Tab moves *between*
- * them, arrows only ever move within one.
+ * One side of a `<skdx-transfer>`: multi-select `role="listbox"` with roving
+ * focus, typeahead, and marked-for-move selection. Tab moves between lists,
+ * arrows only within one. Renders one `<skdx-transfer-item>` per visible item
+ * (label as text-value), replaced entirely if slot has content. Adds
+ * Shift+ArrowUp/Down (extend from anchor), Ctrl/Cmd+A (toggle all visible),
+ * outward horizontal arrow (move marked to other list; alone if unmarked).
+ * Focus from outside retargets to first marked option or first option (APG
+ * multi-select rule). Publishes `data-side` and `data-empty` (with
+ * `tabindex="0"` so empty list stays focusable). Fires `list-scroll` on scroll.
  *
- * Renders one `<skdx-transfer-item>` per visible item on its side, using each
- * item's `label` as both its content and its typeahead `text-value` — but only
- * while it is empty. Slot anything in and that rendering stops entirely, the
- * same rule as React's `{children ?? visible.map(…)}`; slotted options still
- * get their side, their marked state, and their tab stop from the root.
- *
- * Beyond what `<skdx-listbox>` already handles it adds three keyboard paths:
- *
- * - **Shift+ArrowUp/Down** extends the marked range from the anchor (the last
- *   option marked without Shift), the keyboard equivalent of Shift+Click.
- * - **Ctrl/Cmd+A** marks every enabled option currently visible in this list.
- * - **The outward horizontal arrow** moves the marked items to the other list —
- *   ArrowRight from the source under LTR, and ArrowLeft under `dir="rtl"`,
- *   because the target list is on the left there. With nothing marked it moves
- *   the focused option alone.
- *
- * Publishes `data-side` and, while it has nothing focusable to render,
- * `data-empty` plus `tabindex="0"` — an empty list stays reachable so focus
- * after a move that empties it has somewhere to land.
- *
- * @fires value-change - Fired with this side's new marked values (`string[]`) whenever an item is marked or unmarked.
+ * @fires value-change - Fired with this side's new marked values whenever an item is marked or unmarked.
  */
 export declare class SkdxTransferList extends SkdxListbox {
     /** Which of the two lists this is. Required. */
     side: TransferSide;
+    /**
+     * Renders item content (replaces label). Falls back to root's `renderItem` or plain text.
+     * Property-only, not an attribute.
+     * @default undefined
+     */
+    renderItem?: (item: TransferItemData, state: {
+        side: TransferSide;
+    }) => unknown;
     private transfer;
     private readonly onTransferUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * APG multi-select rule: focus from outside lands on first marked option or
+     * first option (never the roving tab stop), especially needed after search
+     * moves focused option. `relatedTarget` distinguishes outer focus (act) from
+     * inner sibling move (skip, avoid loop when refocusing).
+     */
+    private readonly handleFocusIn;
+    /**
+     * Re-emit scroll geometry to root (list is the scroll container).
+     */
+    private readonly handleScroll;
     /** The items this side renders right now. */
     private get visible();
+    /** Option elements of this list in DOM order, skipping the disabled ones. */
+    private optionElements;
     /** Option values of this list in DOM order, skipping the disabled ones. */
     private optionValues;
     protected willUpdate(): void;
     protected updated(changed: Map<string, unknown>): void;
-    /** The root owns the marked set; `<skdx-listbox>`'s own commit routes into it. */
+    /** Route listbox commit to root's marked set. */
     selectItem(value: string): void;
-    /** Moves the roving focus, mirroring it onto the parent transfer's side. */
+    /** Sync the roving focus position with the root transfer element. */
     setActiveValue(value: string | null): void;
     private readonly handleTransferKeyDown;
     /**
-     * Whether the consumer slotted anything of their own, which replaces the
-     * default rendering entirely.
-     *
-     * *Anything*, not "an option": React renders `{children ?? visible.map(…)}`
-     * (`packages/react/src/transfer/TransferList.tsx:157`), so a list holding
-     * only a header renders that header and nothing else. Asking the narrower
-     * question this used to ask — "is there a `<skdx-transfer-item>` or a
-     * `[role=option]` in here?" — answers "no children" for that consumer and
-     * then generates the rows underneath what they wrote, which is the
-     * duplicate-content defect already fixed in Angular.
+     * Whether consumer slotted anything (replaces default rendering).
+     * Checks *anything*, not just options (header alone blocks render).
      */
     private get hasAuthoredChildren();
     /**
-     * Reconciles one `<skdx-transfer-item>` per visible item, in place.
-     *
-     * Written by hand into the light DOM rather than as a `lit-html` template
-     * because the options have to be real `role="option"` *children* of this
-     * `role="listbox"` host (a template would render into the shadow root, where
-     * `<skdx-listbox>`'s `querySelectorAll` could not see them), and because the
-     * consumer's own authored options have to survive untouched.
+     * Reconcile one `<skdx-transfer-item>` per visible item, in place.
+     * Hand-written to light DOM (not shadow) so listbox's `querySelectorAll` finds them.
      */
     private syncDefaultOptions;
-    /** Hands the list back to the consumer, taking every row this element put there. */
+    /** Remove generated rows, return list to consumer. */
     private removeGeneratedOptions;
 }
 declare global {