@skdx/web-components-blocks 0.34.0 → 0.36.0

package/dist/confirm-dialog/ConfirmDialog.js

@@ -0,0 +1,38 @@
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var t=(s,o,a,r)=>{for(var d=r>1?void 0:r?h(o,a):o,c=s.length-1,g;c>=0;c--)(g=s[c])&&(d=(r?g(o,a,d):g(d))||d);return r&&d&&u(o,a,d),d};import{html as l,LitElement as m,nothing as n}from"lit";import{property as i}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{hasUnslottedChild as b,placeSlotted as y}from"../internal/slots.js";import"@skdx/web-components/primitives/dialog";var p="data-skdx-confirm-dialog-generated",k={fromAttribute:s=>s!=="false"},e=class extends m{constructor(){super(...arguments);this.defaultOpen=!1;this.confirmLabel="Confirm";this.cancelLabel="Cancel";this.destructive=!1;this.pending=!1;this.disabled=!1}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(a){return this.querySelector(`.skdx-confirm-dialog__${a}`)}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasBody(){return b(this,p)||(this.region("body")?.hasChildNodes()??!1)}updated(){y(this,p,{trigger:this.querySelector("skdx-dialog-trigger")},this.region("body"))}render(){return l`
+      <skdx-dialog-root
+        role="alertdialog"
+        data-skdx-confirm-dialog-generated
+        .open=${this.open}
+        ?default-open=${this.defaultOpen}
+        dismiss=${this.pending?"none":"escape"}
+      >
+        ${this.hasTrigger?l`<skdx-dialog-trigger></skdx-dialog-trigger>`:n}
+        <skdx-dialog-overlay></skdx-dialog-overlay>
+        <skdx-dialog-content
+          .size=${this.size}
+          .status=${this.destructive?"danger":void 0}
+        >
+          <skdx-dialog-title class="skdx-confirm-dialog__title"
+            >${this.title??""}</skdx-dialog-title
+          >
+          ${this.description?l`<skdx-dialog-description class="skdx-confirm-dialog__description"
+                  >${this.description}</skdx-dialog-description
+                >`:n}
+          ${this.hasBody?l`<div class="skdx-confirm-dialog__body"></div>`:n}
+          <div class="skdx-confirm-dialog__footer">
+            <skdx-dialog-cancel
+              class="skdx-confirm-dialog__cancel"
+              ?disabled=${this.pending}
+              >${this.cancelLabel}</skdx-dialog-cancel
+            >
+            <skdx-dialog-action
+              class="skdx-confirm-dialog__confirm"
+              data-status=${this.destructive?"danger":n}
+              ?data-loading=${this.pending}
+              ?disabled=${this.pending||this.disabled}
+              >${this.confirmLabel}</skdx-dialog-action
+            >
+          </div>
+        </skdx-dialog-content>
+      </skdx-dialog-root>
+    `}};t([i({converter:k})],e.prototype,"open",2),t([i({type:Boolean,attribute:"default-open"})],e.prototype,"defaultOpen",2),t([i({type:String})],e.prototype,"title",2),t([i({type:String})],e.prototype,"description",2),t([i({type:String,attribute:"confirm-label"})],e.prototype,"confirmLabel",2),t([i({type:String,attribute:"cancel-label"})],e.prototype,"cancelLabel",2),t([i({type:Boolean})],e.prototype,"destructive",2),t([i({type:Boolean})],e.prototype,"pending",2),t([i({type:Boolean})],e.prototype,"disabled",2),t([i({type:String})],e.prototype,"size",2),e=t([f("skdx-confirm-dialog","confirm-dialog","root")],e);export{e as SkdxConfirmDialog};

package/dist/confirm-dialog/index.cjs

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

package/dist/confirm-dialog/index.d.cts

@@ -0,0 +1 @@
+export { SkdxConfirmDialog } from './ConfirmDialog.cjs';

package/dist/confirm-dialog/index.d.ts

@@ -0,0 +1 @@
+export { SkdxConfirmDialog } from './ConfirmDialog.js';

package/dist/confirm-dialog/index.js

@@ -0,0 +1 @@
+import{SkdxConfirmDialog as f}from"./ConfirmDialog.js";export{f as SkdxConfirmDialog};

package/dist/conversation-list/ConversationList.cjs

@@ -0,0 +1,52 @@
+"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var v=(r,n)=>{for(var e in n)d(r,e,{get:n[e],enumerable:!0})},h=(r,n,e,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of x(n))!b.call(r,s)&&s!==e&&d(r,s,{get:()=>n[s],enumerable:!(i=c(n,s))||i.enumerable});return r};var k=r=>h(d({},"__esModule",{value:!0}),r),l=(r,n,e,i)=>{for(var s=i>1?void 0:i?c(n,e):n,u=r.length-1,p;u>=0;u--)(p=r[u])&&(s=(i?p(n,e,s):p(s))||s);return i&&s&&d(n,e,s),s};var $={};v($,{SkdxConversationList:()=>a});module.exports=k($);var t=require("lit"),o=require("lit/decorators.js"),m=require("../internal/define.cjs"),g=require("../internal/events.cjs"),V=require("@skdx/web-components/badge"),w=require("@skdx/web-components/primitives/listbox"),T=require("@skdx/web-components/skeleton"),D=require("@skdx/web-components/time"),I=require("@skdx/web-components/visually-hidden"),L=require("../empty-state/index.cjs");var f=[0,1,2];function y(r){let n=new Map([[void 0,[]]]);for(let e of r){let i=n.get(e.group);i?i.push(e):n.set(e.group,[e])}return[...n].filter(([,e])=>e.length>0)}var a=class extends t.LitElement{constructor(){super(...arguments);this.label="Conversations";this.unreadLabel="Unread";this.emptyTitle="No conversations";this.loading=!1;this.handleValueChange=e=>{e.stopPropagation();let i=e.detail,s=i.selectedValue??"";this.uncontrolledValue=s,this.requestUpdate(),(0,g.emit)(this,"value-change",{value:s,previousValue:i.previousValue[0]??null,reason:i.reason})}}createRenderRoot(){return this}get selected(){return this.value??this.uncontrolledValue??this.defaultValue??""}updated(){this.setAttribute("aria-busy",String(this.loading));let e=this.querySelector(":scope > skdx-listbox");e&&(e.value=this.selected)}row(e){let i=e.timestamp!==void 0||e.badge!==void 0;return t.html`<skdx-listbox-item
+      class="skdx-conversation-list__item"
+      value=${e.id}
+      text-value=${e.title}
+      ?disabled=${e.disabled===!0}
+      ?data-unread=${e.unread===!0}
+    >
+      ${this.renderLeading?t.html`<span
+              class="skdx-conversation-list__leading"
+              aria-hidden="true"
+            >
+              ${this.renderLeading(e)}
+            </span>`:t.nothing}
+      <span class="skdx-conversation-list__body">
+        <span class="skdx-conversation-list__title"
+          >${e.title}${e.unread===!0?t.html`<skdx-visually-hidden> ${this.unreadLabel}</skdx-visually-hidden>`:t.nothing}</span
+        >
+        ${e.preview?t.html`<span class="skdx-conversation-list__preview">${e.preview}</span>`:t.nothing}
+      </span>
+      ${i?t.html`<span class="skdx-conversation-list__meta">
+              ${e.timestamp===void 0?t.nothing:t.html`<skdx-time
+                      class="skdx-conversation-list__time"
+                      relative
+                      .value=${e.timestamp}
+                      .now=${this.now}
+                    ></skdx-time>`}
+              ${e.badge===void 0?t.nothing:t.html`<skdx-badge
+                      class="skdx-conversation-list__badge"
+                      .size=${"sm"}
+                      .label=${e.badge}
+                    ></skdx-badge>`}
+            </span>`:t.nothing}
+    </skdx-listbox-item>`}section(e,i){return e===void 0?t.html`${i.map(s=>this.row(s))}`:t.html`<skdx-listbox-group class="skdx-conversation-list__group">
+      <skdx-listbox-label class="skdx-conversation-list__group-label">${e}</skdx-listbox-label>
+      ${i.map(s=>this.row(s))}
+    </skdx-listbox-group>`}render(){let e=this.items??[];return this.loading?t.html`<div
+        class="skdx-conversation-list__loading"
+        aria-hidden="true"
+      >
+        ${f.map(()=>t.html`<skdx-skeleton></skdx-skeleton>`)}
+      </div>`:e.length===0?t.html`<skdx-empty-state
+        class="skdx-conversation-list__empty"
+        .title=${this.emptyTitle}
+        .description=${this.emptyDescription}
+        .size=${"sm"}
+      ></skdx-empty-state>`:t.html`<skdx-listbox
+      class="skdx-conversation-list__list"
+      aria-label=${this.label}
+      @value-change=${this.handleValueChange}
+    >
+      ${y(e).map(([i,s])=>this.section(i,s))}
+    </skdx-listbox>`}};l([(0,o.property)({attribute:!1})],a.prototype,"items",2),l([(0,o.property)({type:String})],a.prototype,"value",2),l([(0,o.property)({type:String,attribute:"default-value"})],a.prototype,"defaultValue",2),l([(0,o.property)({type:String})],a.prototype,"label",2),l([(0,o.property)({type:String,attribute:"unread-label"})],a.prototype,"unreadLabel",2),l([(0,o.property)({type:String,attribute:"empty-title"})],a.prototype,"emptyTitle",2),l([(0,o.property)({type:String,attribute:"empty-description"})],a.prototype,"emptyDescription",2),l([(0,o.property)({type:Boolean})],a.prototype,"loading",2),l([(0,o.property)({attribute:!1})],a.prototype,"now",2),l([(0,o.property)({attribute:!1})],a.prototype,"renderLeading",2),a=l([(0,m.customElement)("skdx-conversation-list","conversation-list","root")],a);0&&(module.exports={SkdxConversationList});

package/dist/conversation-list/ConversationList.d.cts

@@ -0,0 +1,124 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/badge';
+import '@skdx/web-components/primitives/listbox';
+import '@skdx/web-components/skeleton';
+import '@skdx/web-components/time';
+import '@skdx/web-components/visually-hidden';
+import '../empty-state/index.cjs';
+/** One conversation or thread row of a `<skdx-conversation-list>`. */
+export interface SkdxConversationListItem {
+    /** Identifier committed as the list's selected value when this row is chosen. */
+    id: string;
+    /** Primary line of the row, and the text the list's typeahead matches on. */
+    title: string;
+    /** Secondary line under the title, clamped by the skin. @default undefined — no preview line renders. */
+    preview?: string;
+    /** Instant rendered as a relative timestamp in the row's meta column. @default undefined — no timestamp renders. */
+    timestamp?: Date | string;
+    /** Marks the row as not yet read, mirrored to `data-unread` on the option. @default false */
+    unread?: boolean;
+    /** Short count or status text rendered into a small Badge beside the timestamp. @default undefined — no badge renders. */
+    badge?: string;
+    /** Heading this row belongs under; rows sharing it render inside one group. @default undefined — the row renders ungrouped. */
+    group?: string;
+    /** Excludes this row from selection and from keyboard and typeahead navigation. @default false */
+    disabled?: boolean;
+}
+/** What a `value-change` event carries: the chosen conversation, the one it replaced, and what drove the move. */
+export interface SkdxConversationListValueChangeDetail {
+    /** The newly selected conversation's id, empty when the selection was cleared. */
+    value: string;
+    /** The conversation selected before this change, or `null` when there was none. */
+    previousValue: string | null;
+    /** What drove the change. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
+/**
+ * Conversation navigation block: a single-select listbox of threads with a
+ * title, preview, relative timestamp, unread mark and badge, plus grouping and
+ * its own loading and empty states. It routes nowhere — it reports the chosen
+ * conversation and the consumer navigates.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-conversation-list` on the host, then `__loading`, `__empty`,
+ * `__list`, `__group`, `__group-label`, `__item`, `__leading`, `__body`,
+ * `__title`, `__preview`, `__meta`, `__time` and `__badge`. `data-unread` sits
+ * on a row that has not been read.
+ *
+ * @example
+ * ```html
+ * <skdx-conversation-list id="threads" default-value="ada"></skdx-conversation-list>
+ * <script>
+ *   const threads = document.getElementById('threads');
+ *   threads.items = [{ id: 'ada', title: 'Ada Lovelace', preview: 'Sounds good', unread: true }];
+ *   threads.addEventListener('value-change', (event) => open(event.detail.value));
+ * </script>
+ * ```
+ *
+ * @fires value-change - Fires with `{ value, previousValue, reason }` whenever the selection moves by pointer or keyboard.
+ */
+export declare class SkdxConversationList extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** The conversations to render, in order, each one a selectable option keyed by its id. */
+    items: readonly SkdxConversationListItem[];
+    /**
+     * Selected conversation's id, for controlled usage paired with `value-change`.
+     * @default undefined — uncontrolled, following `defaultValue`.
+     */
+    value?: string | undefined;
+    /**
+     * Conversation selected on first render, used only while uncontrolled.
+     * @default undefined — nothing is selected until a row is chosen.
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Accessible name of the derived listbox holding the conversation rows.
+     * @default 'Conversations'
+     */
+    label: string;
+    /**
+     * Visually hidden text appended to an unread row's title, so the mark is spoken.
+     * @default 'Unread'
+     */
+    unreadLabel: string;
+    /**
+     * Heading of the derived EmptyState shown when there is nothing to list.
+     * @default 'No conversations'
+     */
+    emptyTitle: string;
+    /**
+     * Supporting copy under the empty state's heading, explaining the gap.
+     * @default undefined — the empty state renders its heading alone.
+     */
+    emptyDescription?: string | undefined;
+    /**
+     * Replaces the rows with decorative placeholder lines and marks the host `aria-busy`.
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Reference instant the relative row timestamps are measured from.
+     * @default undefined — each Time reads the instant once at render.
+     */
+    now?: Date | number | undefined;
+    /**
+     * Renders a decorative leading region for one row, such as an avatar or a status dot.
+     * @default undefined — no leading region renders in any row.
+     */
+    renderLeading?: ((item: SkdxConversationListItem) => unknown) | undefined;
+    /** What the list last chose; outranked by `value` whenever the consumer controls the selection. */
+    private uncontrolledValue?;
+    /** The conversation selected right now, controlled or not. */
+    private get selected();
+    private readonly handleValueChange;
+    protected updated(): void;
+    private row;
+    private section;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-conversation-list': SkdxConversationList;
+    }
+}

package/dist/conversation-list/ConversationList.d.ts

@@ -0,0 +1,124 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/badge';
+import '@skdx/web-components/primitives/listbox';
+import '@skdx/web-components/skeleton';
+import '@skdx/web-components/time';
+import '@skdx/web-components/visually-hidden';
+import '../empty-state/index.js';
+/** One conversation or thread row of a `<skdx-conversation-list>`. */
+export interface SkdxConversationListItem {
+    /** Identifier committed as the list's selected value when this row is chosen. */
+    id: string;
+    /** Primary line of the row, and the text the list's typeahead matches on. */
+    title: string;
+    /** Secondary line under the title, clamped by the skin. @default undefined — no preview line renders. */
+    preview?: string;
+    /** Instant rendered as a relative timestamp in the row's meta column. @default undefined — no timestamp renders. */
+    timestamp?: Date | string;
+    /** Marks the row as not yet read, mirrored to `data-unread` on the option. @default false */
+    unread?: boolean;
+    /** Short count or status text rendered into a small Badge beside the timestamp. @default undefined — no badge renders. */
+    badge?: string;
+    /** Heading this row belongs under; rows sharing it render inside one group. @default undefined — the row renders ungrouped. */
+    group?: string;
+    /** Excludes this row from selection and from keyboard and typeahead navigation. @default false */
+    disabled?: boolean;
+}
+/** What a `value-change` event carries: the chosen conversation, the one it replaced, and what drove the move. */
+export interface SkdxConversationListValueChangeDetail {
+    /** The newly selected conversation's id, empty when the selection was cleared. */
+    value: string;
+    /** The conversation selected before this change, or `null` when there was none. */
+    previousValue: string | null;
+    /** What drove the change. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
+/**
+ * Conversation navigation block: a single-select listbox of threads with a
+ * title, preview, relative timestamp, unread mark and badge, plus grouping and
+ * its own loading and empty states. It routes nowhere — it reports the chosen
+ * conversation and the consumer navigates.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-conversation-list` on the host, then `__loading`, `__empty`,
+ * `__list`, `__group`, `__group-label`, `__item`, `__leading`, `__body`,
+ * `__title`, `__preview`, `__meta`, `__time` and `__badge`. `data-unread` sits
+ * on a row that has not been read.
+ *
+ * @example
+ * ```html
+ * <skdx-conversation-list id="threads" default-value="ada"></skdx-conversation-list>
+ * <script>
+ *   const threads = document.getElementById('threads');
+ *   threads.items = [{ id: 'ada', title: 'Ada Lovelace', preview: 'Sounds good', unread: true }];
+ *   threads.addEventListener('value-change', (event) => open(event.detail.value));
+ * </script>
+ * ```
+ *
+ * @fires value-change - Fires with `{ value, previousValue, reason }` whenever the selection moves by pointer or keyboard.
+ */
+export declare class SkdxConversationList extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** The conversations to render, in order, each one a selectable option keyed by its id. */
+    items: readonly SkdxConversationListItem[];
+    /**
+     * Selected conversation's id, for controlled usage paired with `value-change`.
+     * @default undefined — uncontrolled, following `defaultValue`.
+     */
+    value?: string | undefined;
+    /**
+     * Conversation selected on first render, used only while uncontrolled.
+     * @default undefined — nothing is selected until a row is chosen.
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Accessible name of the derived listbox holding the conversation rows.
+     * @default 'Conversations'
+     */
+    label: string;
+    /**
+     * Visually hidden text appended to an unread row's title, so the mark is spoken.
+     * @default 'Unread'
+     */
+    unreadLabel: string;
+    /**
+     * Heading of the derived EmptyState shown when there is nothing to list.
+     * @default 'No conversations'
+     */
+    emptyTitle: string;
+    /**
+     * Supporting copy under the empty state's heading, explaining the gap.
+     * @default undefined — the empty state renders its heading alone.
+     */
+    emptyDescription?: string | undefined;
+    /**
+     * Replaces the rows with decorative placeholder lines and marks the host `aria-busy`.
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Reference instant the relative row timestamps are measured from.
+     * @default undefined — each Time reads the instant once at render.
+     */
+    now?: Date | number | undefined;
+    /**
+     * Renders a decorative leading region for one row, such as an avatar or a status dot.
+     * @default undefined — no leading region renders in any row.
+     */
+    renderLeading?: ((item: SkdxConversationListItem) => unknown) | undefined;
+    /** What the list last chose; outranked by `value` whenever the consumer controls the selection. */
+    private uncontrolledValue?;
+    /** The conversation selected right now, controlled or not. */
+    private get selected();
+    private readonly handleValueChange;
+    protected updated(): void;
+    private row;
+    private section;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-conversation-list': SkdxConversationList;
+    }
+}

package/dist/conversation-list/ConversationList.js

@@ -0,0 +1,52 @@
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(d,l,e,t)=>{for(var s=t>1?void 0:t?m(l,e):l,u=d.length-1,p;u>=0;u--)(p=d[u])&&(s=(t?p(l,e,s):p(s))||s);return t&&s&&c(l,e,s),s};import{html as n,LitElement as g,nothing as o}from"lit";import{property as r}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{emit as b}from"../internal/events.js";import"@skdx/web-components/badge";import"@skdx/web-components/primitives/listbox";import"@skdx/web-components/skeleton";import"@skdx/web-components/time";import"@skdx/web-components/visually-hidden";import"../empty-state/index.js";var v=[0,1,2];function h(d){let l=new Map([[void 0,[]]]);for(let e of d){let t=l.get(e.group);t?t.push(e):l.set(e.group,[e])}return[...l].filter(([,e])=>e.length>0)}var i=class extends g{constructor(){super(...arguments);this.label="Conversations";this.unreadLabel="Unread";this.emptyTitle="No conversations";this.loading=!1;this.handleValueChange=e=>{e.stopPropagation();let t=e.detail,s=t.selectedValue??"";this.uncontrolledValue=s,this.requestUpdate(),b(this,"value-change",{value:s,previousValue:t.previousValue[0]??null,reason:t.reason})}}createRenderRoot(){return this}get selected(){return this.value??this.uncontrolledValue??this.defaultValue??""}updated(){this.setAttribute("aria-busy",String(this.loading));let e=this.querySelector(":scope > skdx-listbox");e&&(e.value=this.selected)}row(e){let t=e.timestamp!==void 0||e.badge!==void 0;return n`<skdx-listbox-item
+      class="skdx-conversation-list__item"
+      value=${e.id}
+      text-value=${e.title}
+      ?disabled=${e.disabled===!0}
+      ?data-unread=${e.unread===!0}
+    >
+      ${this.renderLeading?n`<span
+              class="skdx-conversation-list__leading"
+              aria-hidden="true"
+            >
+              ${this.renderLeading(e)}
+            </span>`:o}
+      <span class="skdx-conversation-list__body">
+        <span class="skdx-conversation-list__title"
+          >${e.title}${e.unread===!0?n`<skdx-visually-hidden> ${this.unreadLabel}</skdx-visually-hidden>`:o}</span
+        >
+        ${e.preview?n`<span class="skdx-conversation-list__preview">${e.preview}</span>`:o}
+      </span>
+      ${t?n`<span class="skdx-conversation-list__meta">
+              ${e.timestamp===void 0?o:n`<skdx-time
+                      class="skdx-conversation-list__time"
+                      relative
+                      .value=${e.timestamp}
+                      .now=${this.now}
+                    ></skdx-time>`}
+              ${e.badge===void 0?o:n`<skdx-badge
+                      class="skdx-conversation-list__badge"
+                      .size=${"sm"}
+                      .label=${e.badge}
+                    ></skdx-badge>`}
+            </span>`:o}
+    </skdx-listbox-item>`}section(e,t){return e===void 0?n`${t.map(s=>this.row(s))}`:n`<skdx-listbox-group class="skdx-conversation-list__group">
+      <skdx-listbox-label class="skdx-conversation-list__group-label">${e}</skdx-listbox-label>
+      ${t.map(s=>this.row(s))}
+    </skdx-listbox-group>`}render(){let e=this.items??[];return this.loading?n`<div
+        class="skdx-conversation-list__loading"
+        aria-hidden="true"
+      >
+        ${v.map(()=>n`<skdx-skeleton></skdx-skeleton>`)}
+      </div>`:e.length===0?n`<skdx-empty-state
+        class="skdx-conversation-list__empty"
+        .title=${this.emptyTitle}
+        .description=${this.emptyDescription}
+        .size=${"sm"}
+      ></skdx-empty-state>`:n`<skdx-listbox
+      class="skdx-conversation-list__list"
+      aria-label=${this.label}
+      @value-change=${this.handleValueChange}
+    >
+      ${h(e).map(([t,s])=>this.section(t,s))}
+    </skdx-listbox>`}};a([r({attribute:!1})],i.prototype,"items",2),a([r({type:String})],i.prototype,"value",2),a([r({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),a([r({type:String})],i.prototype,"label",2),a([r({type:String,attribute:"unread-label"})],i.prototype,"unreadLabel",2),a([r({type:String,attribute:"empty-title"})],i.prototype,"emptyTitle",2),a([r({type:String,attribute:"empty-description"})],i.prototype,"emptyDescription",2),a([r({type:Boolean})],i.prototype,"loading",2),a([r({attribute:!1})],i.prototype,"now",2),a([r({attribute:!1})],i.prototype,"renderLeading",2),i=a([x("skdx-conversation-list","conversation-list","root")],i);export{i as SkdxConversationList};

package/dist/conversation-list/index.cjs

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

package/dist/conversation-list/index.d.cts

@@ -0,0 +1 @@
+export { SkdxConversationList, type SkdxConversationListItem, type SkdxConversationListValueChangeDetail, } from './ConversationList.cjs';

package/dist/conversation-list/index.d.ts

@@ -0,0 +1 @@
+export { SkdxConversationList, type SkdxConversationListItem, type SkdxConversationListValueChangeDetail, } from './ConversationList.js';

package/dist/conversation-list/index.js

@@ -0,0 +1 @@
+import{SkdxConversationList as o}from"./ConversationList.js";export{o as SkdxConversationList};

package/dist/empty-state/EmptyState.cjs

@@ -0,0 +1,29 @@
+"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var x=(a,t)=>{for(var e in t)l(a,e,{get:t[e],enumerable:!0})},k=(a,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of v(t))!y.call(a,s)&&s!==e&&l(a,s,{get:()=>t[s],enumerable:!(r=m(t,s))||r.enumerable});return a};var $=a=>k(l({},"__esModule",{value:!0}),a),d=(a,t,e,r)=>{for(var s=r>1?void 0:r?m(t,e):t,p=a.length-1,c;p>=0;p--)(c=a[p])&&(s=(r?c(t,e,s):c(s))||s);return r&&s&&l(t,e,s),s};var b={};x(b,{SkdxEmptyState:()=>n});module.exports=$(b);var i=require("lit"),o=require("lit/decorators.js"),u=require("../internal/define.cjs"),h=require("../internal/slots.cjs"),T=require("@skdx/web-components/heading"),L=require("@skdx/web-components/text");var g="data-skdx-empty-state-generated",_=0,n=class extends i.LitElement{constructor(){super(...arguments);this.headingLevel=3;this.align="center";this.titleId=`skdx-empty-state-title-${++_}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-empty-state__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get hasContent(){return(0,h.hasUnslottedChild)(this,g)||(this.region("content")?.hasChildNodes()??!1)}updated(){this.setAttribute("data-align",this.align),this.size===void 0?this.removeAttribute("data-size"):this.setAttribute("data-size",this.size),(0,h.placeSlotted)(this,g,{icon:this.region("icon"),actions:this.region("actions")},this.region("content"))}render(){return i.html`
+      ${this.hasSlotted("icon")?i.html`<div
+              class="skdx-empty-state__icon"
+              aria-hidden="true"
+              data-skdx-empty-state-generated
+            ></div>`:i.nothing}
+      <skdx-heading
+        class="skdx-empty-state__title"
+        as=${`h${this.headingLevel}`}
+        id=${this.titleId}
+        data-skdx-empty-state-generated
+        >${this.title??""}</skdx-heading
+      >
+      ${this.description?i.html`<skdx-text
+              class="skdx-empty-state__description"
+              as="p"
+              .tone=${"muted"}
+              data-skdx-empty-state-generated
+              >${this.description}</skdx-text
+            >`:i.nothing}
+      ${this.hasContent?i.html`<div
+              class="skdx-empty-state__content"
+              data-skdx-empty-state-generated
+            ></div>`:i.nothing}
+      ${this.hasSlotted("actions")?i.html`<div
+              class="skdx-empty-state__actions"
+              data-skdx-empty-state-generated
+            ></div>`:i.nothing}
+    `}};d([(0,o.property)({type:String})],n.prototype,"title",2),d([(0,o.property)({type:String})],n.prototype,"description",2),d([(0,o.property)({type:Number,attribute:"heading-level"})],n.prototype,"headingLevel",2),d([(0,o.property)({type:String})],n.prototype,"size",2),d([(0,o.property)({type:String})],n.prototype,"align",2),n=d([(0,u.customElement)("skdx-empty-state","empty-state","root")],n);0&&(module.exports={SkdxEmptyState});

package/dist/empty-state/EmptyState.d.cts

@@ -0,0 +1,69 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/text';
+/** Whether a consumer child bound for the default region is still waiting to be placed. */
+/**
+ * Placeholder block for a region with nothing to show — no content yet, no
+ * results, first use, or disconnected — composing a Heading, a Text
+ * description and consumer-supplied icon and actions.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-empty-state` on the host, then `__icon`, `__title`,
+ * `__description`, `__content` and `__actions`. `data-size` and `data-align`
+ * sit on the host for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-empty-state
+ *   title="No invoices yet"
+ *   description="Invoices you create will show up here."
+ * >
+ *   <svg slot="icon"></svg>
+ *   <skdx-button slot="actions">Create invoice</skdx-button>
+ * </skdx-empty-state>
+ * ```
+ *
+ * @slot - Extra content rendered between the description and the actions region.
+ * @slot icon - Decorative illustration or glyph rendered above the title.
+ * @slot actions - Primary and secondary controls rendered below the content.
+ */
+export declare class SkdxEmptyState extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Heading text naming the empty region, rendered into a derived Heading. */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, explaining why the region is empty.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Outline level of the derived title heading, lowered or raised to fit the surrounding outline.
+     * @default 3
+     */
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Visual size rung, written to `data-size` on the host; the skin scales the icon, spacing and title by it.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Text and content alignment rung, written to `data-align` on the host.
+     * @default 'center'
+     */
+    align: 'center' | 'start' | (string & {});
+    /** Generated title id, so a consumer can name a surrounding landmark with it. */
+    private readonly titleId;
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private get hasContent();
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-empty-state': SkdxEmptyState;
+    }
+}

package/dist/empty-state/EmptyState.d.ts

@@ -0,0 +1,69 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/text';
+/** Whether a consumer child bound for the default region is still waiting to be placed. */
+/**
+ * Placeholder block for a region with nothing to show — no content yet, no
+ * results, first use, or disconnected — composing a Heading, a Text
+ * description and consumer-supplied icon and actions.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-empty-state` on the host, then `__icon`, `__title`,
+ * `__description`, `__content` and `__actions`. `data-size` and `data-align`
+ * sit on the host for the skin to read.
+ *
+ * @example
+ * ```html
+ * <skdx-empty-state
+ *   title="No invoices yet"
+ *   description="Invoices you create will show up here."
+ * >
+ *   <svg slot="icon"></svg>
+ *   <skdx-button slot="actions">Create invoice</skdx-button>
+ * </skdx-empty-state>
+ * ```
+ *
+ * @slot - Extra content rendered between the description and the actions region.
+ * @slot icon - Decorative illustration or glyph rendered above the title.
+ * @slot actions - Primary and secondary controls rendered below the content.
+ */
+export declare class SkdxEmptyState extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /** Heading text naming the empty region, rendered into a derived Heading. */
+    title: string;
+    /**
+     * Supporting copy rendered below the title, explaining why the region is empty.
+     * @default undefined — no description region renders.
+     */
+    description?: string | undefined;
+    /**
+     * Outline level of the derived title heading, lowered or raised to fit the surrounding outline.
+     * @default 3
+     */
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Visual size rung, written to `data-size` on the host; the skin scales the icon, spacing and title by it.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Text and content alignment rung, written to `data-align` on the host.
+     * @default 'center'
+     */
+    align: 'center' | 'start' | (string & {});
+    /** Generated title id, so a consumer can name a surrounding landmark with it. */
+    private readonly titleId;
+    connectedCallback(): void;
+    private region;
+    /** Whether the consumer supplied anything for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private get hasContent();
+    protected updated(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-empty-state': SkdxEmptyState;
+    }
+}

package/dist/empty-state/EmptyState.js

@@ -0,0 +1,29 @@
+var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,a,e,d)=>{for(var s=d>1?void 0:d?g(a,e):a,h=l.length-1,p;h>=0;h--)(p=l[h])&&(s=(d?p(a,e,s):p(s))||s);return d&&s&&m(a,e,s),s};import{html as n,LitElement as u,nothing as o}from"lit";import{property as r}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{hasUnslottedChild as y,placeSlotted as x}from"../internal/slots.js";import"@skdx/web-components/heading";import"@skdx/web-components/text";var c="data-skdx-empty-state-generated",k=0,t=class extends u{constructor(){super(...arguments);this.headingLevel=3;this.align="center";this.titleId=`skdx-empty-state-title-${++k}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-empty-state__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get hasContent(){return y(this,c)||(this.region("content")?.hasChildNodes()??!1)}updated(){this.setAttribute("data-align",this.align),this.size===void 0?this.removeAttribute("data-size"):this.setAttribute("data-size",this.size),x(this,c,{icon:this.region("icon"),actions:this.region("actions")},this.region("content"))}render(){return n`
+      ${this.hasSlotted("icon")?n`<div
+              class="skdx-empty-state__icon"
+              aria-hidden="true"
+              data-skdx-empty-state-generated
+            ></div>`:o}
+      <skdx-heading
+        class="skdx-empty-state__title"
+        as=${`h${this.headingLevel}`}
+        id=${this.titleId}
+        data-skdx-empty-state-generated
+        >${this.title??""}</skdx-heading
+      >
+      ${this.description?n`<skdx-text
+              class="skdx-empty-state__description"
+              as="p"
+              .tone=${"muted"}
+              data-skdx-empty-state-generated
+              >${this.description}</skdx-text
+            >`:o}
+      ${this.hasContent?n`<div
+              class="skdx-empty-state__content"
+              data-skdx-empty-state-generated
+            ></div>`:o}
+      ${this.hasSlotted("actions")?n`<div
+              class="skdx-empty-state__actions"
+              data-skdx-empty-state-generated
+            ></div>`:o}
+    `}};i([r({type:String})],t.prototype,"title",2),i([r({type:String})],t.prototype,"description",2),i([r({type:Number,attribute:"heading-level"})],t.prototype,"headingLevel",2),i([r({type:String})],t.prototype,"size",2),i([r({type:String})],t.prototype,"align",2),t=i([v("skdx-empty-state","empty-state","root")],t);export{t as SkdxEmptyState};

package/dist/empty-state/index.cjs

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

package/dist/empty-state/index.d.cts

@@ -0,0 +1 @@
+export { SkdxEmptyState } from './EmptyState.cjs';

package/dist/empty-state/index.d.ts

@@ -0,0 +1 @@
+export { SkdxEmptyState } from './EmptyState.js';