@skdx/web-components 0.27.0 → 0.29.0

package/dist/link/Link.js

@@ -0,0 +1,47 @@
+var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var r=(e,s,t,a)=>{for(var n=a>1?void 0:a?f(s,t):s,d=e.length-1,u;d>=0;d--)(u=e[d])&&(n=(a?u(s,t,n):u(n))||n);return a&&n&&h(s,t,n),n};import{css as p,LitElement as m,nothing as l}from"lit";import{property as i}from"lit/decorators.js";import{html as g}from"lit/static-html.js";import{customElement as y}from"../internal/define.js";import{reflectHostState as v}from"../internal/part.js";import{resolveRel as b}from"../internal/rel.js";import{controlBoxOnHost as w,delegatesFocusShadowRootOptions as x,hiddenHostStyles as R}from"../internal/styles.js";import{resolveTag as $}from"../utils/polymorphic.js";function E(e){if(!e)return!1;try{return typeof document>"u"?/^(?:https?:)?\/\//i.test(e):new URL(e,document.baseURI).origin!==window.location.origin}catch{return!1}}var c={fromAttribute:e=>{if(e!==null)return e===""?!0:e},toAttribute:e=>e===void 0||e===!1?null:e===!0?"":e},o=class extends m{constructor(){super(...arguments);this.underline="auto";this.disabled=!1;this.as="a";this.handleClick=t=>{this.disabled&&(t.preventDefault(),t.stopPropagation())};this.handleKeydown=t=>{!this.disabled||t.key!=="Enter"||t.preventDefault()}}updated(){let t=this.external??E(this.href);v(this,{"data-underline":this.underline,"data-external":t?"":null,"data-disabled":this.disabled?"":null})}focus(t){this.shadowRoot?.querySelector("a")?.focus(t)}render(){let t=$(this.as,"a"),a=b(this.target,this.rel),n=c.toAttribute(this.download);return g`<${t}
+      part="root"
+      href=${this.href??l}
+      target=${this.target??l}
+      rel=${a??l}
+      download=${n??l}
+      aria-disabled=${this.disabled?"true":l}
+      tabindex=${this.disabled?"-1":l}
+      @click=${this.handleClick}
+      @keydown=${this.handleKeydown}
+      ><slot></slot
+    ></${t}>`}};o.shadowRootOptions=x,o.styles=[R,p`
+      :host {
+        display: inline-block;
+      }
+      a {
+        font: inherit;
+        color: var(--skdx-link-color, inherit);
+        text-underline-offset: var(--skdx-link-underline-offset, auto);
+      }
+      a:hover {
+        color: var(--skdx-link-color-hover, var(--skdx-link-color, inherit));
+      }
+      a:visited {
+        color: var(--skdx-link-color-visited, var(--skdx-link-color, inherit));
+      }
+      :host([data-underline='always']) a {
+        text-decoration: underline;
+      }
+      :host([data-underline='hover']) a {
+        text-decoration: none;
+      }
+      :host([data-underline='hover']) a:hover {
+        text-decoration: underline;
+      }
+      :host([data-underline='none']) a {
+        text-decoration: none;
+      }
+      :host([data-underline='auto']) a {
+        text-decoration: none;
+      }
+      :host([data-disabled]) a {
+        color: var(--skdx-color-text-disabled, inherit);
+        text-decoration: none;
+        cursor: not-allowed;
+      }
+    `,w],r([i({type:String})],o.prototype,"href",2),r([i({type:String})],o.prototype,"target",2),r([i({type:String})],o.prototype,"rel",2),r([i({converter:c})],o.prototype,"download",2),r([i({type:String,reflect:!0})],o.prototype,"underline",2),r([i({type:Boolean})],o.prototype,"external",2),r([i({type:Boolean,reflect:!0})],o.prototype,"disabled",2),r([i({type:String,reflect:!0})],o.prototype,"as",2),o=r([y("skdx-link","link","root")],o);export{o as SkdxLink};

package/dist/link/index.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var p=(o,k)=>{for(var x in k)d(o,x,{get:k[x],enumerable:!0})},t=(o,k,x,e)=>{if(k&&typeof k=="object"||typeof k=="function")for(let r of m(k))!n.call(o,r)&&r!==x&&d(o,r,{get:()=>k[r],enumerable:!(e=i(k,r))||e.enumerable});return o};var L=o=>t(d({},"__esModule",{value:!0}),o);var S={};p(S,{SkdxLink:()=>f.SkdxLink});module.exports=L(S);var f=require("./Link.cjs");0&&(module.exports={SkdxLink});

package/dist/link/index.d.cts

@@ -0,0 +1 @@
+export { SkdxLink } from './Link.cjs';

package/dist/link/index.d.ts

@@ -0,0 +1 @@
+export { SkdxLink } from './Link.js';

package/dist/link/index.js

@@ -0,0 +1 @@
+import{SkdxLink as r}from"./Link.js";export{r as SkdxLink};

package/dist/list/List.cjs

@@ -0,0 +1,38 @@
+"use strict";var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var A=(a,e)=>{for(var t in e)m(a,t,{get:e[t],enumerable:!0})},M=(a,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of T(e))!E.call(a,i)&&i!==t&&m(a,i,{get:()=>e[i],enumerable:!(r=u(e,i))||r.enumerable});return a};var S=a=>M(m({},"__esModule",{value:!0}),a),o=(a,e,t,r)=>{for(var i=r>1?void 0:r?u(e,t):e,p=a.length-1,d;p>=0;p--)(d=a[p])&&(i=(r?d(e,t,i):d(i))||i);return r&&i&&m(e,t,i),i};var H={};A(H,{SkdxList:()=>s});module.exports=S(H);var l=require("lit"),n=require("lit/decorators.js"),y=require("lit/static-html.js"),g=require("../internal/authored.cjs"),v=require("../internal/define.cjs"),f=require("../internal/options.cjs"),c=require("../internal/part.cjs"),b=require("../internal/space.cjs"),k=require("../internal/styles.cjs"),P=require("../utils/polymorphic.cjs"),h=require("./ListAnatomy.cjs");var[N]=h.LIST_RENDER_SLOTS,$={fromAttribute(a){return a!=="false"}},s=class extends l.LitElement{constructor(){super(...arguments);this.as="ul";this.markers=!0;this.reversed=!1;this.orientation="horizontal";this.observer=new MutationObserver(()=>this.applyPairParts());this.applying=!1;this.fillAnatomy=()=>{this.as!=="dl"||(0,g.hasAuthoredParts)(this,h.LIST_ANATOMY_GENERATED)||((0,h.fillListAnatomy)(this),this.applyPairParts())}}connectedCallback(){super.connectedCallback(),this.observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["class"]}),this.applyPairParts(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}applyPairParts(){if(!(this.as!=="dl"||this.applying)){this.applying=!0;try{for(let t of this.children)if(t.localName==="div"){(0,c.applyHostPart)(t,"list","item");for(let r of t.children)this.applyPairPart(r)}else this.applyPairPart(t)}finally{queueMicrotask(()=>{this.applying=!1})}}}applyPairPart(t){t.localName==="dt"?(0,c.applyHostPart)(t,"list","term"):t.localName==="dd"&&(0,c.applyHostPart)(t,"list","description")}updated(t){(t.has("items")||t.has("as"))&&this.fillAnatomy(),(0,c.reflectHostState)(this,{"data-markers":this.markers?void 0:"false","data-orientation":this.orientation})}getDefaultIcon(){let t=(0,f.renderSlotContent)(this,N),[r]=t.values();return r?(0,f.stampRenderSlot)(r):void 0}render(){let t=(0,P.resolveTag)(this.as,"ul"),r=this.as==="dl",i=!this.markers&&!r,p=this.as==="ol",d=(0,b.resolveSpace)(this.spacing);return y.html`<${t}
+      part="root"
+      role=${i?"list":l.nothing}
+      data-orientation=${r?this.orientation:l.nothing}
+      style=${d?`gap: ${d}`:l.nothing}
+      start=${p&&this.start!==void 0?this.start:l.nothing}
+      ?reversed=${p&&this.reversed}
+      ><slot @slotchange=${this.fillAnatomy}></slot
+    ></${t}>`}};s.styles=[k.hiddenHostStyles,l.css`
+      /* The indent is the host's, not the inner list's: the skin paints the
+         host too, and both carrying it indents the list twice. */
+      :host {
+        display: block;
+        padding-inline-start: var(--skdx-list-indent, 1.5em);
+      }
+      [part='root'] {
+        /* flex column, not block: gap has no effect on a block-flowing list. */
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        padding-inline-start: 0;
+        gap: var(--skdx-list-gap, 0);
+      }
+      :host([data-markers='false']) {
+        padding-inline-start: 0;
+      }
+      :host([data-markers='false']) [part='root'] {
+        list-style: none;
+      }
+      /* A description list is the skin's own grid container, so neither the host
+         nor the <dl> may take a box of its own or the pairs stop being its items. */
+      :host([as='dl']) {
+        display: contents;
+      }
+      :host([as='dl']) [part='root'] {
+        display: contents;
+      }
+    `],o([(0,n.property)({type:String,reflect:!0})],s.prototype,"as",2),o([(0,n.property)({converter:$})],s.prototype,"markers",2),o([(0,n.property)({type:String})],s.prototype,"spacing",2),o([(0,n.property)({type:Number})],s.prototype,"start",2),o([(0,n.property)({type:Boolean})],s.prototype,"reversed",2),o([(0,n.property)({attribute:!1})],s.prototype,"items",2),o([(0,n.property)({type:String,reflect:!0})],s.prototype,"orientation",2),o([(0,n.property)({type:String,reflect:!0,attribute:"data-density"})],s.prototype,"density",2),s=o([(0,v.customElement)("skdx-list","list","root")],s);0&&(module.exports={SkdxList});

package/dist/list/List.d.cts

@@ -0,0 +1,88 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { type SkdxSpace } from '../internal/space.cjs';
+/** How each pair of an `as="dl"` list reads, emitted as `data-orientation` for the skin to lay out. */
+export type SkdxListOrientation = 'horizontal' | 'vertical';
+/** One label/value pair of an `as="dl"` list: the whole of what `items` takes. */
+export interface SkdxListItemDescriptor {
+    /** The term — rendered as the pair's `<dt>`. */
+    label: string;
+    /** The description — rendered as the pair's `<dd>`. */
+    value: string;
+}
+/**
+ * Renders `<ul>` (or `<ol>` via `as`) holding `<skdx-list-item>` children, with
+ * `markers={false}` switching to `role="list"` semantics. Under `as="dl"` it is a
+ * description list instead: `<dt>`/`<dd>` pairs, written by hand or derived from
+ * `items`, and no role at all.
+ *
+ * @slot - The list's `<skdx-list-item>` children.
+ * @slot icon - Default marker cloned into every item without its own `icon` slot.
+ *
+ * @example
+ * ```html
+ * <skdx-list markers="false" spacing="2">
+ *   <skdx-list-item>One</skdx-list-item>
+ *   <skdx-list-item>Two</skdx-list-item>
+ * </skdx-list>
+ * ```
+ *
+ * @csspart root - The rendered `<ul>`/`<ol>`/`<dl>` inside the shadow root.
+ */
+export declare class SkdxList extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Element to render: `<ul>`, `<ol>`, or `<dl>` (`dl` is for styling only — items are still `<li>`).
+     * @default 'ul'
+     */
+    as: 'ul' | 'ol' | 'dl';
+    /** Shows the native marker/numbering; `false` sets `role="list"` on the container instead.
+     * @default true
+     */
+    markers: boolean;
+    /** Gap between items. A scale key resolves to a token; any other string passes through.
+     * @default undefined
+     */
+    spacing?: SkdxSpace;
+    /** Starting value for an `<ol>`; ignored unless `as="ol"`.
+     * @default undefined
+     */
+    start?: number;
+    /** Numbers the `<ol>` in reverse; ignored unless `as="ol"`.
+     * @default false
+     */
+    reversed: boolean;
+    /**
+     * The label/value pairs an `as="dl"` list renders itself from — one `<div>`
+     * wrapping a `<dt>` and a `<dd>` per entry. Read only under `as="dl"`.
+     * @default undefined — nothing is derived, and hand-written pairs stand.
+     */
+    items?: readonly SkdxListItemDescriptor[];
+    /**
+     * How each pair reads under `as="dl"`: `'horizontal'` puts the description
+     * beside its term, `'vertical'` stacks it underneath.
+     * @default 'horizontal'
+     */
+    orientation: SkdxListOrientation;
+    /**
+     * Vertical rhythm rung the skin applies, reflected as `data-density`; may be
+     * written as that attribute directly.
+     * @default undefined — the skin's own default.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    private readonly observer;
+    private applying;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly fillAnatomy;
+    /** A `<dt>`/`<dd>` pair is the consumer's own markup, so the part classes are pushed onto it. */
+    private applyPairParts;
+    private applyPairPart;
+    protected updated(changed: Map<string, unknown>): void;
+    /** Returns a fresh clone of the light-DOM `icon` slot content for a descendant item with no icon of its own. */
+    getDefaultIcon(): Element | undefined;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-list': SkdxList;
+    }
+}

package/dist/list/List.d.ts

@@ -0,0 +1,88 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { type SkdxSpace } from '../internal/space.js';
+/** How each pair of an `as="dl"` list reads, emitted as `data-orientation` for the skin to lay out. */
+export type SkdxListOrientation = 'horizontal' | 'vertical';
+/** One label/value pair of an `as="dl"` list: the whole of what `items` takes. */
+export interface SkdxListItemDescriptor {
+    /** The term — rendered as the pair's `<dt>`. */
+    label: string;
+    /** The description — rendered as the pair's `<dd>`. */
+    value: string;
+}
+/**
+ * Renders `<ul>` (or `<ol>` via `as`) holding `<skdx-list-item>` children, with
+ * `markers={false}` switching to `role="list"` semantics. Under `as="dl"` it is a
+ * description list instead: `<dt>`/`<dd>` pairs, written by hand or derived from
+ * `items`, and no role at all.
+ *
+ * @slot - The list's `<skdx-list-item>` children.
+ * @slot icon - Default marker cloned into every item without its own `icon` slot.
+ *
+ * @example
+ * ```html
+ * <skdx-list markers="false" spacing="2">
+ *   <skdx-list-item>One</skdx-list-item>
+ *   <skdx-list-item>Two</skdx-list-item>
+ * </skdx-list>
+ * ```
+ *
+ * @csspart root - The rendered `<ul>`/`<ol>`/`<dl>` inside the shadow root.
+ */
+export declare class SkdxList extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Element to render: `<ul>`, `<ol>`, or `<dl>` (`dl` is for styling only — items are still `<li>`).
+     * @default 'ul'
+     */
+    as: 'ul' | 'ol' | 'dl';
+    /** Shows the native marker/numbering; `false` sets `role="list"` on the container instead.
+     * @default true
+     */
+    markers: boolean;
+    /** Gap between items. A scale key resolves to a token; any other string passes through.
+     * @default undefined
+     */
+    spacing?: SkdxSpace;
+    /** Starting value for an `<ol>`; ignored unless `as="ol"`.
+     * @default undefined
+     */
+    start?: number;
+    /** Numbers the `<ol>` in reverse; ignored unless `as="ol"`.
+     * @default false
+     */
+    reversed: boolean;
+    /**
+     * The label/value pairs an `as="dl"` list renders itself from — one `<div>`
+     * wrapping a `<dt>` and a `<dd>` per entry. Read only under `as="dl"`.
+     * @default undefined — nothing is derived, and hand-written pairs stand.
+     */
+    items?: readonly SkdxListItemDescriptor[];
+    /**
+     * How each pair reads under `as="dl"`: `'horizontal'` puts the description
+     * beside its term, `'vertical'` stacks it underneath.
+     * @default 'horizontal'
+     */
+    orientation: SkdxListOrientation;
+    /**
+     * Vertical rhythm rung the skin applies, reflected as `data-density`; may be
+     * written as that attribute directly.
+     * @default undefined — the skin's own default.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    private readonly observer;
+    private applying;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly fillAnatomy;
+    /** A `<dt>`/`<dd>` pair is the consumer's own markup, so the part classes are pushed onto it. */
+    private applyPairParts;
+    private applyPairPart;
+    protected updated(changed: Map<string, unknown>): void;
+    /** Returns a fresh clone of the light-DOM `icon` slot content for a descendant item with no icon of its own. */
+    getDefaultIcon(): Element | undefined;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-list': SkdxList;
+    }
+}

package/dist/list/List.js

@@ -0,0 +1,38 @@
+var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var i=(l,p,t,r)=>{for(var s=r>1?void 0:r?m(p,t):p,o=l.length-1,n;o>=0;o--)(n=l[o])&&(s=(r?n(p,t,s):n(s))||s);return r&&s&&h(p,t,s),s};import{css as f,LitElement as u,nothing as d}from"lit";import{property as a}from"lit/decorators.js";import{html as y}from"lit/static-html.js";import{hasAuthoredParts as g}from"../internal/authored.js";import{customElement as v}from"../internal/define.js";import{renderSlotContent as b,stampRenderSlot as k}from"../internal/options.js";import{applyHostPart as c,reflectHostState as P}from"../internal/part.js";import{resolveSpace as T}from"../internal/space.js";import{hiddenHostStyles as E}from"../internal/styles.js";import{resolveTag as A}from"../utils/polymorphic.js";import{fillListAnatomy as M,LIST_ANATOMY_GENERATED as S,LIST_RENDER_SLOTS as N}from"./ListAnatomy.js";var[$]=N,H={fromAttribute(l){return l!=="false"}},e=class extends u{constructor(){super(...arguments);this.as="ul";this.markers=!0;this.reversed=!1;this.orientation="horizontal";this.observer=new MutationObserver(()=>this.applyPairParts());this.applying=!1;this.fillAnatomy=()=>{this.as!=="dl"||g(this,S)||(M(this),this.applyPairParts())}}connectedCallback(){super.connectedCallback(),this.observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["class"]}),this.applyPairParts(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}applyPairParts(){if(!(this.as!=="dl"||this.applying)){this.applying=!0;try{for(let t of this.children)if(t.localName==="div"){c(t,"list","item");for(let r of t.children)this.applyPairPart(r)}else this.applyPairPart(t)}finally{queueMicrotask(()=>{this.applying=!1})}}}applyPairPart(t){t.localName==="dt"?c(t,"list","term"):t.localName==="dd"&&c(t,"list","description")}updated(t){(t.has("items")||t.has("as"))&&this.fillAnatomy(),P(this,{"data-markers":this.markers?void 0:"false","data-orientation":this.orientation})}getDefaultIcon(){let t=b(this,$),[r]=t.values();return r?k(r):void 0}render(){let t=A(this.as,"ul"),r=this.as==="dl",s=!this.markers&&!r,o=this.as==="ol",n=T(this.spacing);return y`<${t}
+      part="root"
+      role=${s?"list":d}
+      data-orientation=${r?this.orientation:d}
+      style=${n?`gap: ${n}`:d}
+      start=${o&&this.start!==void 0?this.start:d}
+      ?reversed=${o&&this.reversed}
+      ><slot @slotchange=${this.fillAnatomy}></slot
+    ></${t}>`}};e.styles=[E,f`
+      /* The indent is the host's, not the inner list's: the skin paints the
+         host too, and both carrying it indents the list twice. */
+      :host {
+        display: block;
+        padding-inline-start: var(--skdx-list-indent, 1.5em);
+      }
+      [part='root'] {
+        /* flex column, not block: gap has no effect on a block-flowing list. */
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        padding-inline-start: 0;
+        gap: var(--skdx-list-gap, 0);
+      }
+      :host([data-markers='false']) {
+        padding-inline-start: 0;
+      }
+      :host([data-markers='false']) [part='root'] {
+        list-style: none;
+      }
+      /* A description list is the skin's own grid container, so neither the host
+         nor the <dl> may take a box of its own or the pairs stop being its items. */
+      :host([as='dl']) {
+        display: contents;
+      }
+      :host([as='dl']) [part='root'] {
+        display: contents;
+      }
+    `],i([a({type:String,reflect:!0})],e.prototype,"as",2),i([a({converter:H})],e.prototype,"markers",2),i([a({type:String})],e.prototype,"spacing",2),i([a({type:Number})],e.prototype,"start",2),i([a({type:Boolean})],e.prototype,"reversed",2),i([a({attribute:!1})],e.prototype,"items",2),i([a({type:String,reflect:!0})],e.prototype,"orientation",2),i([a({type:String,reflect:!0,attribute:"data-density"})],e.prototype,"density",2),e=i([v("skdx-list","list","root")],e);export{e as SkdxList};

package/dist/list/ListAnatomy.cjs

@@ -0,0 +1,6 @@
+"use strict";var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var p=(d,t)=>{for(var i in t)a(d,i,{get:t[i],enumerable:!0})},x=(d,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of n(t))!m.call(d,e)&&e!==i&&a(d,e,{get:()=>t[e],enumerable:!(o=l(t,e))||o.enumerable});return d};var L=d=>x(a({},"__esModule",{value:!0}),d);var E={};p(E,{LIST_ANATOMY_GENERATED:()=>c,LIST_RENDER_SLOTS:()=>S,fillListAnatomy:()=>f});module.exports=L(E);var s=require("lit"),r=require("lit/directives/repeat.js"),S=["icon"],c="data-skdx-list-generated";function f(d){(0,s.render)((0,r.repeat)(d.items??[],t=>t.label,t=>s.html`
+        <div data-skdx-list-generated>
+          <dt>${t.label}</dt>
+          <dd>${t.value}</dd>
+        </div>
+      `),d,{host:d})}0&&(module.exports={LIST_ANATOMY_GENERATED,LIST_RENDER_SLOTS,fillListAnatomy});

package/dist/list/ListAnatomy.d.cts

@@ -0,0 +1,11 @@
+import type { SkdxList } from './List.cjs';
+/** @internal The named slot `<skdx-list>` claims from its own light DOM to supply items' default marker. */
+export declare const LIST_RENDER_SLOTS: readonly ["icon"];
+/** @internal Marks a direct child of `<skdx-list>` this module generated; written literally below, since Lit cannot interpolate an attribute name. */
+export declare const LIST_ANATOMY_GENERATED = "data-skdx-list-generated";
+/**
+ * Builds one `<div>`-wrapped `<dt>`/`<dd>` pair per `items` entry, in the same
+ * DOM a hand-composed description list would write.
+ * @internal
+ */
+export declare function fillListAnatomy(root: SkdxList): void;

package/dist/list/ListAnatomy.d.ts

@@ -0,0 +1,11 @@
+import type { SkdxList } from './List.js';
+/** @internal The named slot `<skdx-list>` claims from its own light DOM to supply items' default marker. */
+export declare const LIST_RENDER_SLOTS: readonly ["icon"];
+/** @internal Marks a direct child of `<skdx-list>` this module generated; written literally below, since Lit cannot interpolate an attribute name. */
+export declare const LIST_ANATOMY_GENERATED = "data-skdx-list-generated";
+/**
+ * Builds one `<div>`-wrapped `<dt>`/`<dd>` pair per `items` entry, in the same
+ * DOM a hand-composed description list would write.
+ * @internal
+ */
+export declare function fillListAnatomy(root: SkdxList): void;

package/dist/list/ListAnatomy.js

@@ -0,0 +1,6 @@
+import{html as e,render as i}from"lit";import{repeat as s}from"lit/directives/repeat.js";var r=["icon"],l="data-skdx-list-generated";function n(d){i(s(d.items??[],t=>t.label,t=>e`
+        <div data-skdx-list-generated>
+          <dt>${t.label}</dt>
+          <dd>${t.value}</dd>
+        </div>
+      `),d,{host:d})}export{l as LIST_ANATOMY_GENERATED,r as LIST_RENDER_SLOTS,n as fillListAnatomy};

package/dist/list/ListItem.cjs

@@ -0,0 +1,40 @@
+"use strict";var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var g=(o,t)=>{for(var s in t)r(o,s,{get:t[s],enumerable:!0})},x=(o,t,s,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!k.call(o,e)&&e!==s&&r(o,e,{get:()=>t[e],enumerable:!(n=h(t,e))||n.enumerable});return o};var b=o=>x(r({},"__esModule",{value:!0}),o),d=(o,t,s,n)=>{for(var e=n>1?void 0:n?h(t,s):t,a=o.length-1,c;a>=0;a--)(c=o[a])&&(e=(n?c(t,s,e):c(e))||e);return n&&e&&r(t,s,e),e};var $={};g($,{SkdxListItem:()=>l});module.exports=b($);var i=require("lit"),p=require("lit/decorators.js"),u=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),f=require("../list-item/ListItemAnatomy.cjs");var[m]=f.LIST_ITEM_RENDER_SLOTS,l=class extends i.LitElement{constructor(){super(...arguments);this.list=null;this.onIconSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.list=this.closest("skdx-list"),this.setAttribute("role","listitem")}render(){let s=this.querySelector(`:scope > [slot="${m}"]`)!==null,n=s?void 0:this.list?.getDefaultIcon(),e=s||n!==void 0;return i.html`<li
+      part="item"
+      role="presentation"
+      value=${this.value??i.nothing}
+      style=${e?"list-style: none":i.nothing}
+    >
+      ${e?i.html`<span part="indicator"
+              ><slot
+                name=${m}
+                @slotchange=${this.onIconSlotChange}
+                >${n}</slot
+              ></span
+            >`:i.html`<slot
+              name=${m}
+              @slotchange=${this.onIconSlotChange}
+              hidden
+            ></slot>`}<slot></slot>
+    </li>`}};l.styles=[v.hiddenHostStyles,i.css`
+      :host {
+        display: contents;
+      }
+      li {
+        font: inherit;
+        color: inherit;
+      }
+      li::marker {
+        color: var(--skdx-list-marker-color, currentColor);
+      }
+      /* Shadow content can't be reached by the light-DOM skin stylesheet, so the indicator's box lives here. */
+      [part='indicator'] {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        inline-size: var(--skdx-icon-size-sm, 1em);
+        block-size: var(--skdx-icon-size-sm, 1em);
+        margin-inline-end: var(--skdx-space-2, 0.5em);
+        color: var(--skdx-list-marker-color, currentColor);
+      }
+    `],d([(0,p.property)({type:Number})],l.prototype,"value",2),l=d([(0,u.customElement)("skdx-list-item","list","item")],l);0&&(module.exports={SkdxListItem});

package/dist/list/ListItem.d.cts

@@ -0,0 +1,31 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Renders `<li>` inside `<skdx-list>`, showing an icon — its own or the ancestor list's default — as an `indicator` part in place of the native marker.
+ *
+ * @slot - The item's content.
+ * @slot icon - Overrides the ancestor List's default marker for this item only.
+ *
+ * @example
+ * ```html
+ * <skdx-list-item><span slot="icon">✓</span>Done</skdx-list-item>
+ * ```
+ *
+ * @csspart item - The rendered `<li>` inside the shadow root.
+ * @csspart indicator - The wrapper around the item's icon, present only when one renders.
+ */
+export declare class SkdxListItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** `<li value>` passthrough; meaningful only inside an ancestor `<ol>`.
+     * @default undefined
+     */
+    value?: number;
+    private list;
+    connectedCallback(): void;
+    private readonly onIconSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-list-item': SkdxListItem;
+    }
+}

package/dist/list/ListItem.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Renders `<li>` inside `<skdx-list>`, showing an icon — its own or the ancestor list's default — as an `indicator` part in place of the native marker.
+ *
+ * @slot - The item's content.
+ * @slot icon - Overrides the ancestor List's default marker for this item only.
+ *
+ * @example
+ * ```html
+ * <skdx-list-item><span slot="icon">✓</span>Done</skdx-list-item>
+ * ```
+ *
+ * @csspart item - The rendered `<li>` inside the shadow root.
+ * @csspart indicator - The wrapper around the item's icon, present only when one renders.
+ */
+export declare class SkdxListItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** `<li value>` passthrough; meaningful only inside an ancestor `<ol>`.
+     * @default undefined
+     */
+    value?: number;
+    private list;
+    connectedCallback(): void;
+    private readonly onIconSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-list-item': SkdxListItem;
+    }
+}

package/dist/list/ListItem.js

@@ -0,0 +1,40 @@
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(n,i,o,t)=>{for(var e=t>1?void 0:t?p(i,o):i,l=n.length-1,r;l>=0;l--)(r=n[l])&&(e=(t?r(i,o,e):r(e))||e);return t&&e&&h(i,o,e),e};import{css as u,html as c,LitElement as v,nothing as m}from"lit";import{property as f}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{hiddenHostStyles as k}from"../internal/styles.js";import{LIST_ITEM_RENDER_SLOTS as g}from"../list-item/ListItemAnatomy.js";var[d]=g,s=class extends v{constructor(){super(...arguments);this.list=null;this.onIconSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.list=this.closest("skdx-list"),this.setAttribute("role","listitem")}render(){let o=this.querySelector(`:scope > [slot="${d}"]`)!==null,t=o?void 0:this.list?.getDefaultIcon(),e=o||t!==void 0;return c`<li
+      part="item"
+      role="presentation"
+      value=${this.value??m}
+      style=${e?"list-style: none":m}
+    >
+      ${e?c`<span part="indicator"
+              ><slot
+                name=${d}
+                @slotchange=${this.onIconSlotChange}
+                >${t}</slot
+              ></span
+            >`:c`<slot
+              name=${d}
+              @slotchange=${this.onIconSlotChange}
+              hidden
+            ></slot>`}<slot></slot>
+    </li>`}};s.styles=[k,u`
+      :host {
+        display: contents;
+      }
+      li {
+        font: inherit;
+        color: inherit;
+      }
+      li::marker {
+        color: var(--skdx-list-marker-color, currentColor);
+      }
+      /* Shadow content can't be reached by the light-DOM skin stylesheet, so the indicator's box lives here. */
+      [part='indicator'] {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        inline-size: var(--skdx-icon-size-sm, 1em);
+        block-size: var(--skdx-icon-size-sm, 1em);
+        margin-inline-end: var(--skdx-space-2, 0.5em);
+        color: var(--skdx-list-marker-color, currentColor);
+      }
+    `],a([f({type:Number})],s.prototype,"value",2),s=a([y("skdx-list-item","list","item")],s);export{s as SkdxListItem};

package/dist/list/index.cjs

@@ -0,0 +1 @@
+"use strict";var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var k=(r,t)=>{for(var i in t)o(r,i,{get:t[i],enumerable:!0})},S=(r,t,i,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of L(t))!d.call(r,e)&&e!==i&&o(r,e,{get:()=>t[e],enumerable:!(x=p(t,e))||x.enumerable});return r};var f=r=>S(o({},"__esModule",{value:!0}),r);var n={};k(n,{SkdxList:()=>s.SkdxList,SkdxListItem:()=>m.SkdxListItem});module.exports=f(n);var s=require("./List.cjs"),m=require("./ListItem.cjs");0&&(module.exports={SkdxList,SkdxListItem});

package/dist/list/index.d.cts

@@ -0,0 +1,3 @@
+export { SkdxList } from './List.cjs';
+export type { SkdxListItemDescriptor, SkdxListOrientation } from './List.cjs';
+export { SkdxListItem } from './ListItem.cjs';

package/dist/list/index.d.ts

@@ -0,0 +1,3 @@
+export { SkdxList } from './List.js';
+export type { SkdxListItemDescriptor, SkdxListOrientation } from './List.js';
+export { SkdxListItem } from './ListItem.js';

package/dist/list/index.js

@@ -0,0 +1 @@
+import{SkdxList as e}from"./List.js";import{SkdxListItem as o}from"./ListItem.js";export{e as SkdxList,o as SkdxListItem};

package/dist/list-item/ListItemAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var I=(c,o)=>{for(var s in o)t(c,s,{get:o[s],enumerable:!0})},L=(c,o,s,E)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of T(o))!_.call(c,n)&&n!==s&&t(c,n,{get:()=>o[n],enumerable:!(E=S(o,n))||E.enumerable});return c};var R=c=>L(t({},"__esModule",{value:!0}),c);var e={};I(e,{LIST_ITEM_RENDER_SLOTS:()=>a});module.exports=R(e);var a=["icon"];0&&(module.exports={LIST_ITEM_RENDER_SLOTS});

package/dist/list-item/ListItemAnatomy.d.cts

@@ -0,0 +1,2 @@
+/** @internal The named slot `<skdx-list-item>` renders, overriding the ancestor `<skdx-list>`'s default marker for this item only. */
+export declare const LIST_ITEM_RENDER_SLOTS: readonly ["icon"];

package/dist/list-item/ListItemAnatomy.d.ts

@@ -0,0 +1,2 @@
+/** @internal The named slot `<skdx-list-item>` renders, overriding the ancestor `<skdx-list>`'s default marker for this item only. */
+export declare const LIST_ITEM_RENDER_SLOTS: readonly ["icon"];

package/dist/list-item/ListItemAnatomy.js

@@ -0,0 +1 @@
+var o=["icon"];export{o as LIST_ITEM_RENDER_SLOTS};

package/dist/listbox/Listbox.cjs

@@ -1,5 +1,5 @@
-"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var E=(i,t)=>{for(var e in t)c(i,e,{get:t[e],enumerable:!0})},w=(i,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of g(t))!A.call(i,l)&&l!==e&&c(i,l,{get:()=>t[l],enumerable:!(r=m(t,l))||r.enumerable});return i};var k=i=>w(c({},"__esModule",{value:!0}),i),n=(i,t,e,r)=>{for(var l=r>1?void 0:r?m(t,e):t,a=i.length-1,u;a>=0;a--)(u=i[a])&&(l=(r?u(t,e,l):u(l))||l);return r&&l&&c(t,e,l),l};var C={};E(C,{OPTION_SELECTOR:()=>y,SkdxListbox:()=>s,findListboxRoot:()=>V});module.exports=k(C);var d=require("lit"),o=require("lit/decorators.js"),v=require("../internal/define.cjs"),h=require("../internal/selection.cjs"),b=require("../internal/styles.cjs"),p=require("../internal/typeahead.cjs");var y='[role="option"]:not([data-disabled])';function V(i){for(let t=i.parentElement;t!==null;t=t.parentElement)if(t instanceof s||t.localName==="skdx-listbox")return t;return null}var f={fromAttribute:i=>i??void 0,toAttribute:i=>Array.isArray(i)||i===void 0?null:i},s=class extends d.LitElement{constructor(){super(...arguments);this.multiple=!1;this.disabled=!1;this.activeValue=null;this.typeahead=new p.Typeahead;this.handleKeyDown=e=>{let r=this.options,l=r.indexOf(e.target);if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),r.length===0)return;let u=e.key==="ArrowDown"?1:-1;r[Math.min(r.length-1,Math.max(0,l+u))]?.focus();return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),(e.key==="Home"?r[0]:r[r.length-1])?.focus();return}if(e.defaultPrevented||!(0,p.isTypeaheadKey)(e))return;let a=this.typeahead.match(e.key,r.map(x),l);a!==-1&&(e.preventDefault(),r[a].focus())};this.handleSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.addEventListener("keydown",this.handleKeyDown),this.syncHostState()}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.typeahead.clear(),super.disconnectedCallback()}willUpdate(){this.hasUpdated||(this.value??(this.value=this.defaultValue)),this.activeValue===null&&this.seedActiveValue()}updated(e){this.syncHostState(),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-listbox-internal-update"))}syncHostState(){this.multiple?(this.setAttribute("aria-multiselectable","true"),this.setAttribute("data-multiple","")):(this.removeAttribute("aria-multiselectable"),this.removeAttribute("data-multiple")),this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"))}seedActiveValue(){let e=this.options,l=(e.find(a=>this.isSelected(a.getAttribute("data-value")??""))??e[0])?.getAttribute("data-value");l&&(this.activeValue=l)}get options(){return Array.from(this.querySelectorAll(y))}get selectedValues(){return(0,h.toValues)(this.value)}isSelected(e){return this.selectedValues.includes(e)}selectItem(e){let r=(0,h.nextSelection)(this.selectedValues,e,this.multiple);this.value=r,this.dispatchEvent(new CustomEvent("value-change",{detail:r,bubbles:!0,composed:!0}))}setActiveValue(e){this.activeValue=e}render(){return d.html`<slot @slotchange=${this.handleSlotChange}></slot>`}};s.styles=[b.hiddenHostStyles,d.css`
+"use strict";var v=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var _=(l,a)=>{for(var e in a)v(l,e,{get:a[e],enumerable:!0})},R=(l,a,e,t)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of D(a))!L.call(l,i)&&i!==e&&v(l,i,{get:()=>a[i],enumerable:!(t=w(a,i))||t.enumerable});return l};var C=l=>R(v({},"__esModule",{value:!0}),l),o=(l,a,e,t)=>{for(var i=t>1?void 0:t?w(a,e):a,r=l.length-1,d;r>=0;r--)(d=l[r])&&(i=(t?d(a,e,i):d(i))||i);return t&&i&&v(a,e,i),i};var P={};_(P,{OPTION_SELECTOR:()=>K,SkdxListbox:()=>s,findListboxRoot:()=>B});module.exports=C(P);var p=require("lit"),u=require("lit/decorators.js"),g=require("../internal/authored.cjs"),V=require("../internal/define.cjs"),A=require("../internal/direction.cjs"),T=require("../internal/events.cjs"),f=require("../internal/roving-tab-stop.cjs"),c=require("../internal/selection.cjs"),E=require("../internal/selection-attribute.cjs"),k=require("../internal/styles.cjs"),b=require("../internal/typeahead.cjs"),M=require("./family.cjs"),m=require("./ListboxAnatomy.cjs");var K='[role="option"]:not([data-disabled])';function x(l,a){return l.length===a.length&&l.every((e,t)=>e===a[t])}function B(l){let a=customElements.get("skdx-listbox");for(let e=l.parentElement;e!==null;e=e.parentElement)if(e.localName==="skdx-listbox"||a!==void 0&&e instanceof a)return e;return null}var S=10,s=class extends p.LitElement{constructor(){super(...arguments);this._values=[];this._valueSet=!1;this.multiple=!1;this.disabled=!1;this.allowSelectAll=!0;this.orientation="vertical";this.focusOnHover=!1;this.disallowEmptySelection=!1;this.activeValue=null;this.typeahead=new b.Typeahead;this.selectionAnchor=null;this.fillAnatomy=()=>{if((0,g.hasAuthoredParts)(this,m.LISTBOX_ANATOMY_GENERATED,m.LISTBOX_RENDER_SLOTS)){this._anatomyOptionsRef=void 0;return}(this.options!==this._anatomyOptionsRef||!(0,g.hasGeneratedContent)(this,m.LISTBOX_ANATOMY_GENERATED))&&(this._anatomyOptionsRef=this.options,(0,m.fillListboxAnatomy)(this))};this.handleKeyDown=e=>{if(e.defaultPrevented)return;let t=this.renderedOptions,i=t.indexOf(e.target);if(this.handleSelectionKeys(e,t,i)||this.roveByPage(e,t,i)||this.roveByArrow(e,t,i))return;if(e.key==="Home"||e.key==="End"){e.preventDefault(),(e.key==="Home"?t[0]:t[t.length-1])?.focus();return}if(e.defaultPrevented||!(0,b.isTypeaheadKey)(e))return;let r=this.typeahead.match(e.key,t.map(I),i);r!==-1&&(e.preventDefault(),t[r].focus())};this.handleSlotChange=()=>{this.fillAnatomy(),this.requestUpdate()}}get value(){return this._values}set value(e){let t=(0,c.toSelectionValues)(e,{multiple:this.isMultiple,label:"Listbox value"}),i=this._values;this._valueSet=!0,this._values=t,this.requestUpdate("value",i)}get isMultiple(){return this.multiple||!this.hasUpdated&&this.hasAttribute("multiple")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.addEventListener("keydown",this.handleKeyDown),this.syncHostState(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.typeahead.clear(),super.disconnectedCallback()}willUpdate(){!this.hasUpdated&&!this._valueSet&&(this.value=(0,c.toSelectionValues)(this.defaultValue,{multiple:this.isMultiple,label:"Listbox defaultValue"})),this.seedActiveValue()}updated(e){this.syncHostState(),this.fillAnatomy(),e.size>0&&M.LISTBOX_FAMILY.notify(this)}syncHostState(){this.multiple?(this.setAttribute("aria-multiselectable","true"),this.setAttribute("data-multiple","")):(this.removeAttribute("aria-multiselectable"),this.removeAttribute("data-multiple")),this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled")),this.setAttribute("aria-orientation",this.orientation),this.setAttribute("data-orientation",this.orientation)}seedActiveValue(){let e=(0,f.rovingItemIds)(this.renderedOptions,"data-value"),t=(0,f.resolveTabStopId)(e,e.filter(i=>this.isSelected(i)),this.activeValue);t&&(this.activeValue=t)}get renderedOptions(){return(0,f.enabledRovingItems)(this,K)}get selectedValues(){return this.value}isSelected(e){return this.selectedValues.includes(e)}selectItem(e,t){this.multiple&&this.disallowEmptySelection&&this.selectedValues.length===1&&this.selectedValues[0]===e||(this.selectionAnchor=e,this.commit((0,c.nextSelection)(this.selectedValues,e,this.multiple),t))}commit(e,t){let i=this.selectedValues;x(e,i)||(this.value=e,(0,T.emit)(this,"value-change",{value:e,previousValue:i,reason:t,selectedValue:(0,c.selectedValueOf)(e)}))}selectRange(e){let t=this.selectedValues;this.commit([...t,...e.filter(i=>!t.includes(i))],"keyboard")}readAnchor(){return this.selectedValues.length===0&&(this.selectionAnchor=null),this.selectionAnchor}setActiveValue(e){this.activeValue=e}handleSelectionKeys(e,t,i){return!this.multiple||i===-1?!1:this.extendWithArrow(e,t,i)||this.extendFromAnchor(e,t,i)||this.extendToEdge(e,t,i)||this.toggleSelectAll(e,t)}extendWithArrow(e,t,i){let r=this.orientation==="horizontal"?"ArrowRight":"ArrowDown",d=this.orientation==="horizontal"?"ArrowLeft":"ArrowUp",n=(0,A.directionalKey)(e.key,this);if(n!==r&&n!==d||!e.shiftKey)return!1;e.preventDefault();let h=t[i+(n===r?1:-1)];return h&&(h.focus(),this.selectItem(y(h),"keyboard")),!0}extendFromAnchor(e,t,i){if(e.key!==" "||!e.shiftKey)return!1;e.preventDefault();let r=this.readAnchor(),d=t.findIndex(H=>y(H)===r),n=d===-1?i:d,h=Math.min(n,i),O=Math.max(n,i);return this.selectRange(t.slice(h,O+1).map(y)),!0}extendToEdge(e,t,i){if(!e.ctrlKey||!e.shiftKey||e.key!=="Home"&&e.key!=="End")return!1;e.preventDefault();let[r,d]=e.key==="Home"?[0,i]:[i,t.length-1];return this.selectRange(t.slice(r,d+1).map(y)),!0}toggleSelectAll(e,t){if(!this.allowSelectAll||!e.ctrlKey&&!e.metaKey||e.key.toLowerCase()!=="a")return!1;e.preventDefault();let i=t.map(y),r=this.selectedValues;return i.every(n=>r.includes(n))?this.multiple&&this.disallowEmptySelection||this.commit(r.filter(n=>!i.includes(n)),"keyboard"):this.commit([...r,...i.filter(n=>!r.includes(n))],"keyboard"),!0}roveByPage(e,t,i){if(e.key!=="PageUp"&&e.key!=="PageDown"||i===-1)return!1;e.preventDefault();let r=e.key==="PageDown"?S:-S;return t[Math.min(t.length-1,Math.max(0,i+r))]?.focus(),!0}roveByArrow(e,t,i){let r=this.orientation==="horizontal"?"ArrowRight":"ArrowDown",d=this.orientation==="horizontal"?"ArrowLeft":"ArrowUp",n=(0,A.directionalKey)(e.key,this);if(n!==r&&n!==d)return!1;if(e.preventDefault(),t.length===0)return!0;let h=n===r?1:-1;return t[Math.min(t.length-1,Math.max(0,i+h))]?.focus(),!0}render(){return p.html`<slot @slotchange=${this.handleSlotChange}></slot>`}};s.styles=[k.hiddenHostStyles,p.css`
       :host {
         display: block;
       }
-    `],n([(0,o.property)({converter:f,reflect:!0})],s.prototype,"value",2),n([(0,o.property)({converter:f,attribute:"default-value"})],s.prototype,"defaultValue",2),n([(0,o.property)({type:Boolean,reflect:!0})],s.prototype,"multiple",2),n([(0,o.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),n([(0,o.state)()],s.prototype,"activeValue",2),s=n([(0,v.customElement)("skdx-listbox","listbox","root")],s);function x(i){return i.getAttribute("data-text-value")??i.textContent??""}0&&(module.exports={OPTION_SELECTOR,SkdxListbox,findListboxRoot});
+    `],o([(0,u.property)({converter:E.selectionAttributeConverter,reflect:!0,noAccessor:!0})],s.prototype,"value",1),o([(0,u.property)({converter:E.selectionAttributeConverter,attribute:"default-value"})],s.prototype,"defaultValue",2),o([(0,u.property)({type:Boolean,reflect:!0})],s.prototype,"multiple",2),o([(0,u.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),o([(0,u.property)({type:Boolean,attribute:"allow-select-all"})],s.prototype,"allowSelectAll",2),o([(0,u.property)({type:String,reflect:!0})],s.prototype,"orientation",2),o([(0,u.property)({type:Boolean,attribute:"focus-on-hover"})],s.prototype,"focusOnHover",2),o([(0,u.property)({type:Boolean,attribute:"disallow-empty-selection"})],s.prototype,"disallowEmptySelection",2),o([(0,u.property)({attribute:!1})],s.prototype,"options",2),o([(0,u.property)({type:String,reflect:!0,attribute:"data-density"})],s.prototype,"density",2),o([(0,u.property)({type:String,reflect:!0,attribute:"data-shape"})],s.prototype,"shape",2),o([(0,u.property)({type:String,reflect:!0,attribute:"data-size"})],s.prototype,"size",2),o([(0,u.state)()],s.prototype,"activeValue",2),s=o([(0,V.customElement)("skdx-listbox","listbox","root")],s);function I(l){return l.getAttribute("data-text-value")??l.textContent??""}function y(l){return l.getAttribute("data-value")??""}0&&(module.exports={OPTION_SELECTOR,SkdxListbox,findListboxRoot});