@skdx/web-components 0.26.0

package/dist/transfer/TransferControls.d.cts

@@ -0,0 +1,35 @@
+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.
+ *
+ * @example
+ * ```html
+ * <skdx-transfer-controls>
+ *   <skdx-transfer-move-trigger direction="toTarget">→</skdx-transfer-move-trigger>
+ *   <skdx-transfer-move-trigger direction="toSource">←</skdx-transfer-move-trigger>
+ * </skdx-transfer-controls>
+ * ```
+ */
+export declare class SkdxTransferControls extends LitElement {
+    static styles: import("lit").CSSResult;
+    private transfer;
+    private readonly onTransferUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-controls': SkdxTransferControls;
+    }
+}

package/dist/transfer/TransferControls.d.ts

@@ -0,0 +1,35 @@
+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.
+ *
+ * @example
+ * ```html
+ * <skdx-transfer-controls>
+ *   <skdx-transfer-move-trigger direction="toTarget">→</skdx-transfer-move-trigger>
+ *   <skdx-transfer-move-trigger direction="toSource">←</skdx-transfer-move-trigger>
+ * </skdx-transfer-controls>
+ * ```
+ */
+export declare class SkdxTransferControls extends LitElement {
+    static styles: import("lit").CSSResult;
+    private transfer;
+    private readonly onTransferUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-controls': SkdxTransferControls;
+    }
+}

package/dist/transfer/TransferControls.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var n=(a,t,i,s)=>{for(var e=s>1?void 0:s?b(t,i):t,d=a.length-1,l;d>=0;d--)(l=a[d])&&(e=(s?l(t,i,e):l(e))||e);return s&&e&&c(t,i,e),e};import{css as h,html as p,LitElement as f}from"lit";import{customElement as m}from"../internal/define.js";import{TRANSFER_INTERNAL_UPDATE as o}from"./Transfer.js";var r=class extends f{constructor(){super(...arguments);this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(o,this.onTransferUpdate),this.setAttribute("role","group"),!this.hasAttribute("aria-label")&&!this.hasAttribute("aria-labelledby")&&this.setAttribute("aria-label","Move items")}disconnectedCallback(){this.transfer?.removeEventListener(o,this.onTransferUpdate),super.disconnectedCallback()}updated(){this.transfer?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return p`<slot></slot>`}};r.styles=h`
+    :host {
+      display: block;
+    }
+  `,r=n([m("skdx-transfer-controls","transfer","controls")],r);export{r as SkdxTransferControls};

package/dist/transfer/TransferEmpty.cjs

@@ -0,0 +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`
+      :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});

package/dist/transfer/TransferEmpty.d.cts

@@ -0,0 +1,36 @@
+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.
+ *
+ * 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`.
+ *
+ * @example
+ * ```html
+ * <skdx-transfer-list side="source"></skdx-transfer-list>
+ * <skdx-transfer-empty side="source">Nothing left to add.</skdx-transfer-empty>
+ * ```
+ */
+export declare class SkdxTransferEmpty extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Which list this message stands in for. Required. */
+    side: TransferSide;
+    private transfer;
+    private readonly onTransferUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-empty': SkdxTransferEmpty;
+    }
+}

package/dist/transfer/TransferEmpty.d.ts

@@ -0,0 +1,36 @@
+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.
+ *
+ * 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`.
+ *
+ * @example
+ * ```html
+ * <skdx-transfer-list side="source"></skdx-transfer-list>
+ * <skdx-transfer-empty side="source">Nothing left to add.</skdx-transfer-empty>
+ * ```
+ */
+export declare class SkdxTransferEmpty extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Which list this message stands in for. Required. */
+    side: TransferSide;
+    private transfer;
+    private readonly onTransferUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-empty': SkdxTransferEmpty;
+    }
+}

package/dist/transfer/TransferEmpty.js

@@ -0,0 +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`
+      :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};

package/dist/transfer/TransferItem.cjs

@@ -0,0 +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});

package/dist/transfer/TransferItem.d.cts

@@ -0,0 +1,39 @@
+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.
+ */
+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;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-item': SkdxTransferItem;
+    }
+}

package/dist/transfer/TransferItem.d.ts

@@ -0,0 +1,39 @@
+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.
+ */
+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;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-item': SkdxTransferItem;
+    }
+}

package/dist/transfer/TransferItem.js

@@ -0,0 +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};

package/dist/transfer/TransferList.cjs

@@ -0,0 +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});

package/dist/transfer/TransferList.d.cts

@@ -0,0 +1,81 @@
+import { SkdxListbox } from '../listbox/Listbox.cjs';
+import type { 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.
+ *
+ * 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.
+ */
+export declare class SkdxTransferList extends SkdxListbox {
+    /** Which of the two lists this is. Required. */
+    side: TransferSide;
+    private transfer;
+    private readonly onTransferUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The items this side renders right now. */
+    private get visible();
+    /** 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. */
+    selectItem(value: string): void;
+    /** Moves the roving focus, mirroring it onto the parent transfer's side. */
+    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.
+     */
+    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.
+     */
+    private syncDefaultOptions;
+    /** Hands the list back to the consumer, taking every row this element put there. */
+    private removeGeneratedOptions;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-list': SkdxTransferList;
+    }
+}

package/dist/transfer/TransferList.d.ts

@@ -0,0 +1,81 @@
+import { SkdxListbox } from '../listbox/Listbox.js';
+import type { TransferSide } from './types.js';
+import './TransferItem.js';
+/**
+ * `<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.
+ *
+ * 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.
+ */
+export declare class SkdxTransferList extends SkdxListbox {
+    /** Which of the two lists this is. Required. */
+    side: TransferSide;
+    private transfer;
+    private readonly onTransferUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The items this side renders right now. */
+    private get visible();
+    /** 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. */
+    selectItem(value: string): void;
+    /** Moves the roving focus, mirroring it onto the parent transfer's side. */
+    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.
+     */
+    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.
+     */
+    private syncDefaultOptions;
+    /** Hands the list back to the consumer, taking every row this element put there. */
+    private removeGeneratedOptions;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-list': SkdxTransferList;
+    }
+}

package/dist/transfer/TransferList.js

@@ -0,0 +1 @@
+var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=(n,a,e,t)=>{for(var s=t>1?void 0:t?b(a,e):a,i=n.length-1,r;i>=0;i--)(r=n[i])&&(s=(t?r(a,e,s):r(s))||s);return t&&s&&m(a,e,s),s};import{property as p}from"lit/decorators.js";import{hasAuthoredContent as v,removeGeneratedContent as A}from"../internal/authored.js";import{customElement as g}from"../internal/define.js";import{directionalKey as y}from"../internal/direction.js";import{SkdxListbox as E}from"../listbox/Listbox.js";import{OPTION_SELECTOR as k,TRANSFER_INTERNAL_UPDATE as f}from"./Transfer.js";import"./TransferItem.js";var o="data-skdx-transfer-generated",x={source:"Available items",target:"Selected items"},T={source:"ArrowRight",target:"ArrowLeft"};function w(n,a,e){let t=n.indexOf(a),s=n.indexOf(e);return t===-1||s===-1?n.includes(e)?[e]:[]:n.slice(Math.min(t,s),Math.max(t,s)+1)}function C(n,a,e){return Math.min(Math.max(n,a),e)}var d=class extends E{constructor(){super(...arguments);this.side="source";this.transfer=null;this.onTransferUpdate=()=>this.requestUpdate();this.handleTransferKeyDown=e=>{let t=this.transfer;if(!t||t.disabled)return;let s=this.optionValues();if(s.length===0)return;let i=e.target.getAttribute?.("data-value")??null,r=t.marked[this.side];if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){e.preventDefault(),t.setMarked(this.side,s);return}if(e.shiftKey&&(e.key==="ArrowDown"||e.key==="ArrowUp")){let l=i===null?-1:s.indexOf(i);if(l===-1)return;let c=C(l+(e.key==="ArrowDown"?1:-1),0,s.length-1),u=t.anchor[this.side]??s[l];t.anchor[this.side]=u,t.setMarked(this.side,w(s,u,s[c]));return}if(y(e.key,this)===T[this.side]){let l=r.length>0?r:i?[i]:[];if(l.length===0)return;e.preventDefault(),t.move(this.side==="source"?"toTarget":"toSource",l)}}}connectedCallback(){this.multiple=!0,super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(f,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(f,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(k),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 t=this.visible,s=this.transfer?.isLabelled(this.side)??!1;this.setAttribute("data-side",this.side),t.length===0?this.setAttribute("data-empty",""):this.removeAttribute("data-empty"),s&&this.transfer?(this.setAttribute("aria-labelledby",this.transfer.headerId(this.side)),this.removeAttribute("aria-label")):(this.removeAttribute("aria-labelledby"),this.setAttribute("aria-label",x[this.side]));let i=t.some(r=>!r.disabled);!this.disabled&&!i?this.tabIndex=0:this.removeAttribute("tabindex")}selectItem(e){if(this.disabled)return;let t=this.transfer?.marked[this.side]??[],s=t.includes(e)?t.filter(i=>i!==e):[...t,e];this.transfer?.setMarked(this.side,s),this.dispatchEvent(new CustomEvent("value-change",{detail:s,bubbles:!0,composed:!0}))}setActiveValue(e){super.setActiveValue(e),this.transfer?.setActive(this.side,e)}get hasAuthoredChildren(){return v(this,o)}syncDefaultOptions(){let e=this.visible,t=new Map(Array.from(this.querySelectorAll(`:scope > skdx-transfer-item[${o}]`),i=>[i.getAttribute("value")??"",i])),s=null;for(let i of e){let r=t.get(i.value);r||(r=document.createElement("skdx-transfer-item"),r.setAttribute("value",i.value),r.setAttribute(o,"")),t.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=s===null?this.firstElementChild:s.nextElementSibling;l!==r&&this.insertBefore(r,l),s=r}for(let i of t.values())i.remove()}removeGeneratedOptions(){A(this,o)}};h([p({type:String,reflect:!0})],d.prototype,"side",2),d=h([g("skdx-transfer-list")],d);export{d as SkdxTransferList};

package/dist/transfer/TransferListHeader.cjs

@@ -0,0 +1,5 @@
+"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(r,e)=>{for(var s in e)n(r,s,{get:e[s],enumerable:!0})},v=(r,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!u.call(r,t)&&t!==s&&n(r,t,{get:()=>e[t],enumerable:!(i=c(e,t))||i.enumerable});return r};var k=r=>v(n({},"__esModule",{value:!0}),r),h=(r,e,s,i)=>{for(var t=i>1?void 0:i?c(e,s):e,o=r.length-1,l;o>=0;o--)(l=r[o])&&(t=(i?l(e,s,t):l(t))||t);return i&&t&&n(e,s,t),t};var y={};b(y,{SkdxTransferListHeader:()=>a});module.exports=k(y);var d=require("lit"),f=require("lit/decorators.js"),p=require("../internal/define.cjs");var a=class extends d.LitElement{constructor(){super(...arguments);this.side="source";this.transfer=null}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer&&(this.id=this.transfer.headerId(this.side)),this.transfer?.registerHeader(this.side,!0),this.setAttribute("data-side",this.side)}disconnectedCallback(){this.transfer?.registerHeader(this.side,!1),super.disconnectedCallback()}updated(s){s.has("side")&&this.transfer&&(this.id=this.transfer.headerId(this.side),this.setAttribute("data-side",this.side),this.transfer.broadcast())}render(){return d.html`<slot></slot>`}};a.styles=d.css`
+    :host {
+      display: block;
+    }
+  `,h([(0,f.property)({type:String,reflect:!0})],a.prototype,"side",2),a=h([(0,p.customElement)("skdx-transfer-list-header","transfer","list-header")],a);0&&(module.exports={SkdxTransferListHeader});

package/dist/transfer/TransferListHeader.d.cts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import type { TransferSide } from './types.cjs';
+/**
+ * `<skdx-transfer-list-header>` — the visible heading naming one of the two
+ * lists, and the element that list points `aria-labelledby` at. Give both sides
+ * one: "Available" and "Selected" next to two otherwise identical listboxes is
+ * the whole difference between a usable widget and two anonymous lists.
+ *
+ * It sits *beside* its `<skdx-transfer-list>`, not inside it — a
+ * `role="listbox"` may only contain options and groups, so a heading inside one
+ * is invalid ARIA. That is also why it takes its own `side`: it has no list
+ * around it to inherit one from.
+ *
+ * Rendering one is what switches its list from a generic fallback name
+ * ("Available items") to this heading's text.
+ *
+ * @example
+ * ```html
+ * <skdx-transfer-list-header side="source">Available</skdx-transfer-list-header>
+ * <skdx-transfer-list side="source"></skdx-transfer-list>
+ * ```
+ */
+export declare class SkdxTransferListHeader extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Which list this heading names. Required. */
+    side: TransferSide;
+    private transfer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-list-header': SkdxTransferListHeader;
+    }
+}

package/dist/transfer/TransferListHeader.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+import type { TransferSide } from './types.js';
+/**
+ * `<skdx-transfer-list-header>` — the visible heading naming one of the two
+ * lists, and the element that list points `aria-labelledby` at. Give both sides
+ * one: "Available" and "Selected" next to two otherwise identical listboxes is
+ * the whole difference between a usable widget and two anonymous lists.
+ *
+ * It sits *beside* its `<skdx-transfer-list>`, not inside it — a
+ * `role="listbox"` may only contain options and groups, so a heading inside one
+ * is invalid ARIA. That is also why it takes its own `side`: it has no list
+ * around it to inherit one from.
+ *
+ * Rendering one is what switches its list from a generic fallback name
+ * ("Available items") to this heading's text.
+ *
+ * @example
+ * ```html
+ * <skdx-transfer-list-header side="source">Available</skdx-transfer-list-header>
+ * <skdx-transfer-list side="source"></skdx-transfer-list>
+ * ```
+ */
+export declare class SkdxTransferListHeader extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Which list this heading names. Required. */
+    side: TransferSide;
+    private transfer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-list-header': SkdxTransferListHeader;
+    }
+}

package/dist/transfer/TransferListHeader.js

@@ -0,0 +1,5 @@
+var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(a,r,s,i)=>{for(var e=i>1?void 0:i?h(r,s):r,d=a.length-1,n;d>=0;d--)(n=a[d])&&(e=(i?n(r,s,e):n(e))||e);return i&&e&&l(r,s,e),e};import{css as c,html as f,LitElement as p}from"lit";import{property as m}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";var t=class extends p{constructor(){super(...arguments);this.side="source";this.transfer=null}connectedCallback(){super.connectedCallback(),this.transfer=this.closest("skdx-transfer"),this.transfer&&(this.id=this.transfer.headerId(this.side)),this.transfer?.registerHeader(this.side,!0),this.setAttribute("data-side",this.side)}disconnectedCallback(){this.transfer?.registerHeader(this.side,!1),super.disconnectedCallback()}updated(s){s.has("side")&&this.transfer&&(this.id=this.transfer.headerId(this.side),this.setAttribute("data-side",this.side),this.transfer.broadcast())}render(){return f`<slot></slot>`}};t.styles=c`
+    :host {
+      display: block;
+    }
+  `,o([m({type:String,reflect:!0})],t.prototype,"side",2),t=o([u("skdx-transfer-list-header","transfer","list-header")],t);export{t as SkdxTransferListHeader};

package/dist/transfer/TransferListSearch.cjs

@@ -0,0 +1,12 @@
+"use strict";var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var g=(s,t)=>{for(var e in t)l(s,e,{get:t[e],enumerable:!0})},E=(s,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of b(t))!y.call(s,r)&&r!==e&&l(s,r,{get:()=>t[r],enumerable:!(i=u(t,r))||i.enumerable});return s};var T=s=>E(l({},"__esModule",{value:!0}),s),o=(s,t,e,i)=>{for(var r=i>1?void 0:i?u(t,e):t,d=s.length-1,p;d>=0;d--)(p=s[d])&&(r=(i?p(t,e,r):p(r))||r);return i&&r&&l(t,e,r),r};var L={};g(L,{SkdxTransferListSearch:()=>a});module.exports=T(L);var n=require("lit"),c=require("lit/decorators.js"),f=require("../internal/aria-label.cjs"),m=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),h=require("./Transfer.cjs");var A={source:"Filter available items",target:"Filter selected items"},a=class extends n.LitElement{constructor(){super(...arguments);this.side="source";this.transfer=null;this.label=null;this.onTransferUpdate=()=>this.requestUpdate();this.handleInput=e=>{this.transfer?.setQuery(this.side,e.target.value)}}createRenderRoot(){return this}focus(e){this.querySelector("input")?.focus(e)}connectedCallback(){super.connectedCallback(),(0,v.installLightDomStyles)(),this.transfer=this.closest("skdx-transfer"),this.transfer?.addEventListener(h.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),this.label??(this.label=(0,f.takeHostAriaLabel)(this))}disconnectedCallback(){this.transfer?.removeEventListener(h.TRANSFER_INTERNAL_UPDATE,this.onTransferUpdate),super.disconnectedCallback()}updated(){this.setAttribute("data-side",this.side),this.hidden=!(this.transfer?.searchable??!1)}render(){let e=this.transfer;return n.html`
+      <input
+        part="input"
+        type="search"
+        .value=${e?.getQuery(this.side)??""}
+        placeholder=${this.placeholder??n.nothing}
+        aria-label=${this.label??A[this.side]}
+        aria-controls=${e?.listId(this.side)??n.nothing}
+        ?disabled=${e?.disabled??!1}
+        @input=${this.handleInput}
+      />
+    `}};o([(0,c.property)({type:String,reflect:!0})],a.prototype,"side",2),o([(0,c.property)({type:String})],a.prototype,"placeholder",2),a=o([(0,m.customElement)("skdx-transfer-list-search","transfer","list-search")],a);0&&(module.exports={SkdxTransferListSearch});

package/dist/transfer/TransferListSearch.d.cts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+import type { TransferSide } from './types.cjs';
+/**
+ * `<skdx-transfer-list-search>` — the filter input for one list: an
+ * `<input type="search">` bound to that side's query. Like
+ * `<skdx-transfer-list-header>` it is a sibling of its list rather than a child,
+ * since a `role="listbox"` may only contain options — so it takes its own
+ * `side`.
+ *
+ * Hidden while the root is not `searchable`. A filter box that stays on screen
+ * but no longer filters is worse than no box at all, so the one prop turns the
+ * input and the filtering on together.
+ *
+ * Filtering narrows what its list renders and therefore what "move all" moves:
+ * "move all" moves what you can see, not what you cannot.
+ *
+ * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow
+ * root), for the same reason `<skdx-combobox-input>` does: `aria-controls` is an
+ * IDREF and an IDREF resolves only within its own tree, so from inside a shadow
+ * root it could never reach the `<skdx-transfer-list>` it names — the attribute
+ * was inert and the box was not announced as controlling the list. It is also
+ * what lets a wrapping `<label>` and `<skdx-field>`'s `findFieldControl()` see
+ * the `<input>` at all. `display: contents` on the `<input>` is not an
+ * alternative: CSS Display 3 computes it to `none` on form controls.
+ *
+ * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
+ * This element renders into the light DOM (see `createRenderRoot` below) and `::part()`
+ * only matches inside a shadow root, so the `part` attribute is inert here. It is kept so
+ * the name matches the shadow-DOM components and the styling-hooks contract. Style it as an
+ * ordinary descendant instead: `skdx-transfer-list-search > input { … }`.
+ *
+ * @example
+ * ```html
+ * <skdx-transfer searchable items="…">
+ *   <skdx-transfer-list-search side="source" placeholder="Filter"></skdx-transfer-list-search>
+ *   <skdx-transfer-list side="source"></skdx-transfer-list>
+ * </skdx-transfer>
+ * ```
+ */
+export declare class SkdxTransferListSearch extends LitElement {
+    /** Light DOM, for the IDREF and labelling reasons in the class docblock. */
+    createRenderRoot(): this;
+    /**
+     * Reaches through to the native `<input>`. The shadow root used to carry
+     * `delegatesFocus`, which did this for free; a light-DOM element has to
+     * forward focus itself.
+     */
+    focus(options?: FocusOptions): void;
+    /** Which list this box filters. Required. */
+    side: TransferSide;
+    /**
+     * Placeholder text for the filter field.
+     * @default undefined — renders no placeholder attribute at all.
+     */
+    placeholder?: string;
+    private transfer;
+    private label;
+    private readonly onTransferUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private readonly handleInput;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-transfer-list-search': SkdxTransferListSearch;
+    }
+}