@skdx/web-components 0.29.0 → 0.31.0

package/dist/table/TableHeaderCell.js

@@ -1,44 +1,57 @@
-var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var o=(c,l,e,t)=>{for(var r=t>1?void 0:t?f(l,e):l,d=c.length-1,a;d>=0;d--)(a=c[d])&&(r=(t?a(l,e,r):a(r))||r);return t&&r&&v(l,e,r),r};import{css as $,html as u,LitElement as x,nothing as s}from"lit";import{property as n}from"lit/decorators.js";import{customElement as w}from"../internal/define.js";import{reflectHostState as S}from"../internal/part.js";import{resetNativeControl as R}from"../internal/styles.js";import{findTableRoot as k,optionalStringAttribute as W,TABLE_INTERNAL_UPDATE as m}from"./column-context.js";import{ColumnResizeController as K}from"./column-resize.js";var i=class extends x{constructor(){super(...arguments);this.resizable=!1;this.minWidth=40;this.maxWidth=1e3;this.resizeLabel="Resize column";this.resizeStep=8;this.resize=new K(this);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleSlotChange=()=>this.requestUpdate();this.activate=()=>{let e=this.resizeColumnKey;if(!this.isSortable||e===void 0)return;let t=this.textContent?.trim();this.root?.toggleSort(e,t||e)}}connectedCallback(){super.connectedCallback(),this.root=k(this),this.root?.addEventListener(m,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(m,this.onRootUpdate),super.disconnectedCallback()}get resizeColumnKey(){return this.columnKey}get isSortable(){return(this.sortable??!1)&&this.resizeColumnKey!==void 0}get resizeMinWidth(){return this.minWidth}get resizeMaxWidth(){return this.maxWidth}get resizeStepPx(){return this.resizeStep}get resizeTable(){return this.root}resizeMeasureCell(){return this}updated(){let e=this.resize.storedWidth;this.style.width=e===void 0?"":`${e}px`,e===void 0?this.style.removeProperty("--skdx-table-column-width"):this.style.setProperty("--skdx-table-column-width",`${e}px`),S(this,{"aria-sort":this.shadowRoot?.querySelector("th")?.getAttribute("aria-sort")??null})}hasSlotted(e){let t=this.querySelector(e);return t!==null&&t.closest("skdx-table-header-cell")===this}ariaSortFor(e,t){return e?t==="asc"?"ascending":t==="desc"?"descending":"none":s}render(){let e=this.isSortable,t=this.resizeColumnKey,r=e?this.root?.sortList.find(z=>z.columnKey===t)?.direction:void 0,d=this.ariaSortFor(e,r),a=this.resizable&&this.resizeColumnKey!==void 0,h=this.resize.storedWidth,b=h===void 0?s:`width:${h}px;--skdx-table-column-width:${h}px`,p=u`<slot @slotchange=${this.handleSlotChange}></slot>`,y=e&&!this.hasSlotted("skdx-table-column-header-sort-trigger"),g=a&&!this.hasSlotted("skdx-table-column-resize-trigger");return u`
+var v=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var n=(m,d,e,t)=>{for(var r=t>1?void 0:t?$(d,e):d,l=m.length-1,o;l>=0;l--)(o=m[l])&&(r=(t?o(d,e,r):o(r))||r);return t&&r&&v(d,e,r),r};import{css as w,html as h,LitElement as R,nothing as s}from"lit";import{property as a}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{reflectHostState as S}from"../internal/part.js";import{resetNativeControl as k}from"../internal/styles.js";import{findTableRoot as L,optionalStringAttribute as F,TABLE_INTERNAL_UPDATE as f}from"./column-context.js";import{ColumnResizeController as K}from"./column-resize.js";var i=class extends R{constructor(){super(...arguments);this.resizable=!1;this.minWidth=40;this.maxWidth=1e3;this.resizeLabel="Resize column";this.resizeStep=8;this.resize=new K(this);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleSlotChange=()=>this.requestUpdate();this.activate=()=>{let e=this.resizeColumnKey;if(!this.isSortable||e===void 0)return;let t=this.textContent?.trim();this.root?.toggleSort(e,t||e)};this.onFilterInput=e=>{let t=this.resizeColumnKey;t!==void 0&&this.root?.setColumnFilter(t,e.target.value)}}connectedCallback(){super.connectedCallback(),this.root=L(this),this.root?.addEventListener(f,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(f,this.onRootUpdate),super.disconnectedCallback()}get resizeColumnKey(){return this.columnKey}get isSortable(){return(this.sortable??!1)&&this.resizeColumnKey!==void 0}get isFilterable(){return(this.filterable??!1)&&this.resizeColumnKey!==void 0}get filterValue(){let e=this.resizeColumnKey;return e===void 0?"":this.root?.filterMap[e]??""}get resizeMinWidth(){return this.minWidth}get resizeMaxWidth(){return this.maxWidth}get resizeStepPx(){return this.resizeStep}get resizeTable(){return this.root}resizeMeasureCell(){return this}updated(){let e=this.resize.storedWidth;this.style.width=e===void 0?"":`${e}px`,e===void 0?this.style.removeProperty("--skdx-table-column-width"):this.style.setProperty("--skdx-table-column-width",`${e}px`),S(this,{"aria-sort":this.shadowRoot?.querySelector("th")?.getAttribute("aria-sort")??null})}hasSlotted(e){let t=this.querySelector(e);return t!==null&&t.closest("skdx-table-header-cell")===this}ariaSortFor(e,t){return e?t==="asc"?"ascending":t==="desc"?"descending":"none":s}renderFilterInput(e,t){return h`
+      <input
+        type="search"
+        part="filter-input"
+        data-skdx-table-filter-input
+        aria-label=${this.filterLabel??`Filter ${e}`}
+        data-filtered=${t===""?s:""}
+        .value=${t}
+        @input=${this.onFilterInput}
+      />
+    `}renderResizer(e){return h`
+      <span
+        part="resizer"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label=${this.resizeLabel}
+        aria-valuenow=${Math.round(e??this.minWidth)}
+        aria-valuemin=${this.minWidth}
+        aria-valuemax=${this.maxWidth}
+        tabindex="0"
+        data-skdx-table-resizer
+        data-dragging=${this.resize.dragging?"":s}
+        @pointerdown=${this.resize.handlePointerDown}
+        @pointermove=${this.resize.handlePointerMove}
+        @pointerup=${this.resize.handlePointerUp}
+        @pointercancel=${this.resize.handlePointerUp}
+        @keydown=${this.resize.handleKeyDown}
+        @keyup=${this.resize.handleKeyUp}
+      ></span>
+    `}renderState(){let e=this.isSortable,t=this.resizeColumnKey,r=e?this.root?.sortList.find(c=>c.columnKey===t)?.direction:void 0,l=this.resizable&&t!==void 0,o=this.resize.storedWidth,u=this.isFilterable,p=this.filterValue;return{columnId:t,sortable:e,direction:r,ariaSort:this.ariaSortFor(e,r),canResize:l,width:o,style:o===void 0?s:`width:${o}px;--skdx-table-column-width:${o}px`,filterable:u,filterValue:p,ownSortButton:e&&!this.hasSlotted("skdx-table-column-header-sort-trigger"),ownResizer:l&&!this.hasSlotted("skdx-table-column-resize-trigger"),ownFilter:u&&!this.hasSlotted("skdx-table-column-header-filter-input")}}render(){let{columnId:e,direction:t,ariaSort:r,canResize:l,width:o,style:u,filterable:p,filterValue:c,ownSortButton:y,ownResizer:g,ownFilter:z}=this.renderState(),b=h`<slot @slotchange=${this.handleSlotChange}></slot>`;return h`
       <th
         part="header-cell"
-        aria-sort=${d}
-        data-sort-direction=${r??s}
-        data-resizable=${a?"":s}
-        style=${b}
+        aria-sort=${r}
+        data-sort-direction=${t??s}
+        data-filterable=${p?"":s}
+        data-filtered=${p&&c!==""?"":s}
+        data-resizable=${l?"":s}
+        style=${u}
       >
-        ${y?u`
+        ${y?h`
                 <button
                   type="button"
                   part="sort-trigger"
                   data-skdx-table-sort-trigger
-                  data-sort-direction=${r??s}
+                  data-sort-direction=${t??s}
                   @click=${this.activate}
                 >
-                  ${p}
+                  ${b}
                 </button>
-              `:p}
-        ${g?u`
-                <span
-                  part="resizer"
-                  role="separator"
-                  aria-orientation="vertical"
-                  aria-label=${this.resizeLabel}
-                  aria-valuenow=${Math.round(h??this.minWidth)}
-                  aria-valuemin=${this.minWidth}
-                  aria-valuemax=${this.maxWidth}
-                  tabindex="0"
-                  data-skdx-table-resizer
-                  data-dragging=${this.resize.dragging?"":s}
-                  @pointerdown=${this.resize.handlePointerDown}
-                  @pointermove=${this.resize.handlePointerMove}
-                  @pointerup=${this.resize.handlePointerUp}
-                  @pointercancel=${this.resize.handlePointerUp}
-                  @keydown=${this.resize.handleKeyDown}
-                  @keyup=${this.resize.handleKeyUp}
-                ></span>
-              `:s}
+              `:b}
+        ${z?this.renderFilterInput(e,c):s}
+        ${g?this.renderResizer(o):s}
       </th>
-    `}};i.styles=[R,$`
+    `}};i.styles=[k,w`
       /* Host takes the display role, native element gives up its box — see Table.ts. */
       :host {
         display: table-cell;
@@ -47,4 +60,4 @@ var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var o=(c,l,e,t
       :host > th {
         display: contents;
       }
-    `],o([n({type:String,attribute:"column-key",converter:W})],i.prototype,"columnKey",2),o([n({type:Boolean})],i.prototype,"sortable",2),o([n({type:Boolean})],i.prototype,"resizable",2),o([n({type:Number,attribute:"min-width"})],i.prototype,"minWidth",2),o([n({type:Number,attribute:"max-width"})],i.prototype,"maxWidth",2),o([n({type:String,attribute:"resize-label"})],i.prototype,"resizeLabel",2),o([n({type:Number,attribute:"resize-step"})],i.prototype,"resizeStep",2),i=o([w("skdx-table-header-cell","table","header-cell")],i);export{i as SkdxTableHeaderCell};
+    `],n([a({type:String,attribute:"column-key",converter:F})],i.prototype,"columnKey",2),n([a({type:Boolean})],i.prototype,"sortable",2),n([a({type:Boolean})],i.prototype,"filterable",2),n([a({type:String,attribute:"filter-label"})],i.prototype,"filterLabel",2),n([a({type:Boolean})],i.prototype,"resizable",2),n([a({type:Number,attribute:"min-width"})],i.prototype,"minWidth",2),n([a({type:Number,attribute:"max-width"})],i.prototype,"maxWidth",2),n([a({type:String,attribute:"resize-label"})],i.prototype,"resizeLabel",2),n([a({type:Number,attribute:"resize-step"})],i.prototype,"resizeStep",2),i=n([x("skdx-table-header-cell","table","header-cell")],i);export{i as SkdxTableHeaderCell};

package/dist/table/index.cjs

@@ -1 +1 @@
-"use strict";var r=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(o,e)=>{for(var t in e)r(o,t,{get:e[t],enumerable:!0})},c=(o,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of d(e))!m.call(o,l)&&l!==t&&r(o,l,{get:()=>e[l],enumerable:!(a=T(e,l))||a.enumerable});return o};var i=o=>c(r({},"__esModule",{value:!0}),o);var k={};f(k,{SkdxTable:()=>S.SkdxTable,SkdxTableCell:()=>p.SkdxTableCell,SkdxTableRow:()=>b.SkdxTableRow,defaultRowId:()=>x.defaultRowId});module.exports=i(k);var S=require("./Table.cjs"),b=require("./TableRow.cjs"),p=require("./TableCell.cjs"),x=require("./TableAnatomy.cjs");0&&(module.exports={SkdxTable,SkdxTableCell,SkdxTableRow,defaultRowId});
+"use strict";var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(o,e)=>{for(var l in e)r(o,l,{get:e[l],enumerable:!0})},i=(o,e,l,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of d(e))!m.call(o,t)&&t!==l&&r(o,t,{get:()=>e[t],enumerable:!(a=x(e,t))||a.enumerable});return o};var c=o=>i(r({},"__esModule",{value:!0}),o);var k={};f(k,{SkdxTable:()=>S.SkdxTable,SkdxTableCell:()=>T.SkdxTableCell,SkdxTableRow:()=>b.SkdxTableRow,defaultRowId:()=>p.defaultRowId});module.exports=c(k);var S=require("./Table.cjs"),b=require("./TableRow.cjs"),T=require("./TableCell.cjs"),p=require("./TableAnatomy.cjs");0&&(module.exports={SkdxTable,SkdxTableCell,SkdxTableRow,defaultRowId});

package/dist/table/index.d.cts

@@ -2,4 +2,4 @@ export { SkdxTable } from './Table.cjs';
 export { SkdxTableRow } from './TableRow.cjs';
 export { SkdxTableCell } from './TableCell.cjs';
 export { defaultRowId, type SkdxTableColumn } from './TableAnatomy.cjs';
-export type { SortDirection, TableSort, TableSortState, TableSelectAllScope, TableSelectionMode, TableColumnWidths, } from './types.cjs';
+export type { SortDirection, TableSort, TableSortState, TableFilterState, TableSelectAllScope, TableSelectionMode, TableColumnWidths, } from './types.cjs';

package/dist/table/index.d.ts

@@ -2,4 +2,4 @@ export { SkdxTable } from './Table.js';
 export { SkdxTableRow } from './TableRow.js';
 export { SkdxTableCell } from './TableCell.js';
 export { defaultRowId, type SkdxTableColumn } from './TableAnatomy.js';
-export type { SortDirection, TableSort, TableSortState, TableSelectAllScope, TableSelectionMode, TableColumnWidths, } from './types.js';
+export type { SortDirection, TableSort, TableSortState, TableFilterState, TableSelectAllScope, TableSelectionMode, TableColumnWidths, } from './types.js';

package/dist/table/index.js

@@ -1 +1 @@
-import{SkdxTable as l}from"./Table.js";import{SkdxTableRow as r}from"./TableRow.js";import{SkdxTableCell as S}from"./TableCell.js";import{defaultRowId as p}from"./TableAnatomy.js";export{l as SkdxTable,S as SkdxTableCell,r as SkdxTableRow,p as defaultRowId};
+import{SkdxTable as t}from"./Table.js";import{SkdxTableRow as r}from"./TableRow.js";import{SkdxTableCell as S}from"./TableCell.js";import{defaultRowId as T}from"./TableAnatomy.js";export{t as SkdxTable,S as SkdxTableCell,r as SkdxTableRow,T as defaultRowId};

package/dist/table/primitives.cjs

@@ -1 +1 @@
-"use strict";var t=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var H=(o,e)=>{for(var x in e)t(o,x,{get:e[x],enumerable:!0})},R=(o,e,x,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of u(e))!E.call(o,r)&&r!==x&&t(o,r,{get:()=>e[r],enumerable:!(a=C(e,r))||a.enumerable});return o};var h=o=>R(t({},"__esModule",{value:!0}),o);var w={};H(w,{SkdxTableBody:()=>S.SkdxTableBody,SkdxTableCaption:()=>m.SkdxTableCaption,SkdxTableColumnHeaderSortTrigger:()=>c.SkdxTableColumnHeaderSortTrigger,SkdxTableColumnResizeTrigger:()=>n.SkdxTableColumnResizeTrigger,SkdxTableEmpty:()=>f.SkdxTableEmpty,SkdxTableExpandTrigger:()=>T.SkdxTableExpandTrigger,SkdxTableExpandedRow:()=>k.SkdxTableExpandedRow,SkdxTableFooter:()=>p.SkdxTableFooter,SkdxTableHeader:()=>d.SkdxTableHeader,SkdxTableHeaderCell:()=>b.SkdxTableHeaderCell,SkdxTableRowSelectCheckbox:()=>i.SkdxTableRowSelectCheckbox,SkdxTableSelectAllCheckbox:()=>l.SkdxTableSelectAllCheckbox,SkdxTableSortIndicator:()=>g.SkdxTableSortIndicator,defaultSelectAllLabel:()=>l.defaultSelectAllLabel});module.exports=h(w);var d=require("./TableHeader.cjs"),S=require("./TableBody.cjs"),p=require("./TableFooter.cjs"),b=require("./TableHeaderCell.cjs"),m=require("./TableCaption.cjs"),T=require("./TableExpandTrigger.cjs"),k=require("./TableExpandedRow.cjs"),f=require("./TableEmpty.cjs"),c=require("./TableColumnHeaderSortTrigger.cjs"),g=require("./TableSortIndicator.cjs"),l=require("./TableSelectAllCheckbox.cjs"),i=require("./TableRowSelectCheckbox.cjs"),n=require("./TableColumnResizeTrigger.cjs");0&&(module.exports={SkdxTableBody,SkdxTableCaption,SkdxTableColumnHeaderSortTrigger,SkdxTableColumnResizeTrigger,SkdxTableEmpty,SkdxTableExpandTrigger,SkdxTableExpandedRow,SkdxTableFooter,SkdxTableHeader,SkdxTableHeaderCell,SkdxTableRowSelectCheckbox,SkdxTableSelectAllCheckbox,SkdxTableSortIndicator,defaultSelectAllLabel});
+"use strict";var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var R=(r,e)=>{for(var x in e)t(r,x,{get:e[x],enumerable:!0})},h=(r,e,x,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of H(e))!E.call(r,o)&&o!==x&&t(r,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return r};var w=r=>h(t({},"__esModule",{value:!0}),r);var y={};R(y,{SkdxTableBody:()=>p.SkdxTableBody,SkdxTableCaption:()=>b.SkdxTableCaption,SkdxTableColumnHeaderFilterInput:()=>i.SkdxTableColumnHeaderFilterInput,SkdxTableColumnHeaderSortTrigger:()=>n.SkdxTableColumnHeaderSortTrigger,SkdxTableColumnResizeTrigger:()=>g.SkdxTableColumnResizeTrigger,SkdxTableEmpty:()=>f.SkdxTableEmpty,SkdxTableExpandTrigger:()=>T.SkdxTableExpandTrigger,SkdxTableExpandedRow:()=>k.SkdxTableExpandedRow,SkdxTableFooter:()=>S.SkdxTableFooter,SkdxTableHeader:()=>d.SkdxTableHeader,SkdxTableHeaderCell:()=>m.SkdxTableHeaderCell,SkdxTableRowSelectCheckbox:()=>c.SkdxTableRowSelectCheckbox,SkdxTableSelectAllCheckbox:()=>l.SkdxTableSelectAllCheckbox,SkdxTableSortIndicator:()=>C.SkdxTableSortIndicator,defaultSelectAllLabel:()=>l.defaultSelectAllLabel});module.exports=w(y);var d=require("./TableHeader.cjs"),p=require("./TableBody.cjs"),S=require("./TableFooter.cjs"),m=require("./TableHeaderCell.cjs"),b=require("./TableCaption.cjs"),T=require("./TableExpandTrigger.cjs"),k=require("./TableExpandedRow.cjs"),f=require("./TableEmpty.cjs"),n=require("./TableColumnHeaderSortTrigger.cjs"),i=require("./TableColumnHeaderFilterInput.cjs"),C=require("./TableSortIndicator.cjs"),l=require("./TableSelectAllCheckbox.cjs"),c=require("./TableRowSelectCheckbox.cjs"),g=require("./TableColumnResizeTrigger.cjs");0&&(module.exports={SkdxTableBody,SkdxTableCaption,SkdxTableColumnHeaderFilterInput,SkdxTableColumnHeaderSortTrigger,SkdxTableColumnResizeTrigger,SkdxTableEmpty,SkdxTableExpandTrigger,SkdxTableExpandedRow,SkdxTableFooter,SkdxTableHeader,SkdxTableHeaderCell,SkdxTableRowSelectCheckbox,SkdxTableSelectAllCheckbox,SkdxTableSortIndicator,defaultSelectAllLabel});

package/dist/table/primitives.d.cts

@@ -37,6 +37,7 @@ export { SkdxTableExpandTrigger } from './TableExpandTrigger.cjs';
 export { SkdxTableExpandedRow } from './TableExpandedRow.cjs';
 export { SkdxTableEmpty } from './TableEmpty.cjs';
 export { SkdxTableColumnHeaderSortTrigger } from './TableColumnHeaderSortTrigger.cjs';
+export { SkdxTableColumnHeaderFilterInput } from './TableColumnHeaderFilterInput.cjs';
 export { SkdxTableSortIndicator } from './TableSortIndicator.cjs';
 export { SkdxTableSelectAllCheckbox, defaultSelectAllLabel } from './TableSelectAllCheckbox.cjs';
 export { SkdxTableRowSelectCheckbox } from './TableRowSelectCheckbox.cjs';

package/dist/table/primitives.d.ts

@@ -37,6 +37,7 @@ export { SkdxTableExpandTrigger } from './TableExpandTrigger.js';
 export { SkdxTableExpandedRow } from './TableExpandedRow.js';
 export { SkdxTableEmpty } from './TableEmpty.js';
 export { SkdxTableColumnHeaderSortTrigger } from './TableColumnHeaderSortTrigger.js';
+export { SkdxTableColumnHeaderFilterInput } from './TableColumnHeaderFilterInput.js';
 export { SkdxTableSortIndicator } from './TableSortIndicator.js';
 export { SkdxTableSelectAllCheckbox, defaultSelectAllLabel } from './TableSelectAllCheckbox.js';
 export { SkdxTableRowSelectCheckbox } from './TableRowSelectCheckbox.js';

package/dist/table/primitives.js

@@ -1 +1 @@
-import{SkdxTableHeader as r}from"./TableHeader.js";import{SkdxTableBody as l}from"./TableBody.js";import{SkdxTableFooter as a}from"./TableFooter.js";import{SkdxTableHeaderCell as S}from"./TableHeaderCell.js";import{SkdxTableCaption as b}from"./TableCaption.js";import{SkdxTableExpandTrigger as T}from"./TableExpandTrigger.js";import{SkdxTableExpandedRow as f}from"./TableExpandedRow.js";import{SkdxTableEmpty as g}from"./TableEmpty.js";import{SkdxTableColumnHeaderSortTrigger as n}from"./TableColumnHeaderSortTrigger.js";import{SkdxTableSortIndicator as u}from"./TableSortIndicator.js";import{SkdxTableSelectAllCheckbox as H,defaultSelectAllLabel as R}from"./TableSelectAllCheckbox.js";import{SkdxTableRowSelectCheckbox as w}from"./TableRowSelectCheckbox.js";import{SkdxTableColumnResizeTrigger as A}from"./TableColumnResizeTrigger.js";export{l as SkdxTableBody,b as SkdxTableCaption,n as SkdxTableColumnHeaderSortTrigger,A as SkdxTableColumnResizeTrigger,g as SkdxTableEmpty,T as SkdxTableExpandTrigger,f as SkdxTableExpandedRow,a as SkdxTableFooter,r as SkdxTableHeader,S as SkdxTableHeaderCell,w as SkdxTableRowSelectCheckbox,H as SkdxTableSelectAllCheckbox,u as SkdxTableSortIndicator,R as defaultSelectAllLabel};
+import{SkdxTableHeader as o}from"./TableHeader.js";import{SkdxTableBody as l}from"./TableBody.js";import{SkdxTableFooter as a}from"./TableFooter.js";import{SkdxTableHeaderCell as p}from"./TableHeaderCell.js";import{SkdxTableCaption as m}from"./TableCaption.js";import{SkdxTableExpandTrigger as T}from"./TableExpandTrigger.js";import{SkdxTableExpandedRow as f}from"./TableExpandedRow.js";import{SkdxTableEmpty as i}from"./TableEmpty.js";import{SkdxTableColumnHeaderSortTrigger as c}from"./TableColumnHeaderSortTrigger.js";import{SkdxTableColumnHeaderFilterInput as u}from"./TableColumnHeaderFilterInput.js";import{SkdxTableSortIndicator as E}from"./TableSortIndicator.js";import{SkdxTableSelectAllCheckbox as h,defaultSelectAllLabel as w}from"./TableSelectAllCheckbox.js";import{SkdxTableRowSelectCheckbox as A}from"./TableRowSelectCheckbox.js";import{SkdxTableColumnResizeTrigger as I}from"./TableColumnResizeTrigger.js";export{l as SkdxTableBody,m as SkdxTableCaption,u as SkdxTableColumnHeaderFilterInput,c as SkdxTableColumnHeaderSortTrigger,I as SkdxTableColumnResizeTrigger,i as SkdxTableEmpty,T as SkdxTableExpandTrigger,f as SkdxTableExpandedRow,a as SkdxTableFooter,o as SkdxTableHeader,p as SkdxTableHeaderCell,A as SkdxTableRowSelectCheckbox,h as SkdxTableSelectAllCheckbox,E as SkdxTableSortIndicator,w as defaultSelectAllLabel};

package/dist/table/types.cjs

@@ -1 +1 @@
-"use strict";var l=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var c=(t,e,p,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of n(e))!a.call(t,o)&&o!==p&&l(t,o,{get:()=>e[o],enumerable:!(r=i(e,o))||r.enumerable});return t};var S=t=>c(l({},"__esModule",{value:!0}),t);var b={};module.exports=S(b);
+"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var c=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of n(e))!a.call(t,r)&&r!==i&&l(t,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return t};var S=t=>c(l({},"__esModule",{value:!0}),t);var b={};module.exports=S(b);

package/dist/table/types.d.cts

@@ -7,6 +7,8 @@ export interface TableSortState {
 }
 /** A whole table's sort state: the sorted columns, most significant first, or `[]` when nothing is sorted. */
 export type TableSort = TableSortState[];
+/** Active column filters: each key is a `columnKey`, each value the text its rows must contain. */
+export type TableFilterState = Record<string, string>;
 /** Which rows an `<skdx-table-select-all-checkbox>` covers: only the ids it was handed (`'page'`) or the entire dataset (`'all'`). */
 export type TableSelectAllScope = 'page' | 'all';
 /** How many rows a table allows selected at once: one, many, or no selection. */

package/dist/table/types.d.ts

@@ -7,6 +7,8 @@ export interface TableSortState {
 }
 /** A whole table's sort state: the sorted columns, most significant first, or `[]` when nothing is sorted. */
 export type TableSort = TableSortState[];
+/** Active column filters: each key is a `columnKey`, each value the text its rows must contain. */
+export type TableFilterState = Record<string, string>;
 /** Which rows an `<skdx-table-select-all-checkbox>` covers: only the ids it was handed (`'page'`) or the entire dataset (`'all'`). */
 export type TableSelectAllScope = 'page' | 'all';
 /** How many rows a table allows selected at once: one, many, or no selection. */

package/dist/tag-group/TagGroupAnatomy.cjs

@@ -1,9 +1,9 @@
-"use strict";var l=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var n=(a,e)=>{for(var r in e)l(a,r,{get:e[r],enumerable:!0})},x=(a,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of s(e))!m.call(a,t)&&t!==r&&l(a,t,{get:()=>e[t],enumerable:!(o=i(e,t))||o.enumerable});return a};var b=a=>x(l({},"__esModule",{value:!0}),a);var k={};n(k,{TAG_GROUP_ANATOMY_GENERATED:()=>u,fillTagGroupAnatomy:()=>f});module.exports=b(k);var d=require("lit"),p=require("lit/directives/repeat.js"),g=require("../internal/glyphs.cjs"),T=require("../badge/Badge.cjs"),$=require("../badge/BadgeDelete.cjs"),u="data-skdx-tag-group-generated";function f(a){a.tags&&(0,d.render)((0,p.repeat)(a.tags,e=>e.value,(e,r)=>d.html`
+"use strict";var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var m=(a,e)=>{for(var d in e)l(a,d,{get:e[d],enumerable:!0})},n=(a,e,d,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of i(e))!s.call(a,r)&&r!==d&&l(a,r,{get:()=>e[r],enumerable:!(p=g(e,r))||p.enumerable});return a};var u=a=>n(l({},"__esModule",{value:!0}),a);var f={};m(f,{TAG_GROUP_ANATOMY_GENERATED:()=>x,fillTagGroupAnatomy:()=>b});module.exports=u(f);var t=require("lit"),o=require("lit/directives/repeat.js"),T=require("../badge/Badge.cjs"),k=require("../badge/BadgeDelete.cjs"),x="data-skdx-tag-group-generated";function b(a){a.tags&&(0,t.render)((0,o.repeat)(a.tags,e=>e.value,(e,d)=>t.html`
         <skdx-badge
           data-skdx-tag-group-generated
-          .index=${r}
+          .index=${d}
           label=${e.label}
           ?disabled=${e.disabled??!1}
-          >${e.label}${a.removable?d.html`<skdx-badge-delete>${g.closeGlyph}</skdx-badge-delete>`:d.nothing}</skdx-badge
-        >
+          ?deletable=${a.removable}
+        ></skdx-badge>
       `),a,{host:a})}0&&(module.exports={TAG_GROUP_ANATOMY_GENERATED,fillTagGroupAnatomy});

package/dist/tag-group/TagGroupAnatomy.d.cts

@@ -3,5 +3,9 @@ import '../badge/BadgeDelete.cjs';
 import type { SkdxTagGroup } from './TagGroup.cjs';
 /** @internal Marks generated children. */
 export declare const TAG_GROUP_ANATOMY_GENERATED = "data-skdx-tag-group-generated";
-/** @internal Builds one `<skdx-badge>` per entry with an optional `<skdx-badge-delete>`, keyed by tag value so removal preserves the roving tab stop. */
+/**
+ * @internal Builds one `<skdx-badge>` per entry, keyed by tag value so removal preserves the
+ * roving tab stop. Sets `label` and `deletable` only — no light-DOM text child — so each
+ * badge derives its own Label and Delete parts instead of duplicating the label as raw content.
+ */
 export declare function fillTagGroupAnatomy(root: SkdxTagGroup): void;

package/dist/tag-group/TagGroupAnatomy.d.ts

@@ -3,5 +3,9 @@ import '../badge/BadgeDelete.js';
 import type { SkdxTagGroup } from './TagGroup.js';
 /** @internal Marks generated children. */
 export declare const TAG_GROUP_ANATOMY_GENERATED = "data-skdx-tag-group-generated";
-/** @internal Builds one `<skdx-badge>` per entry with an optional `<skdx-badge-delete>`, keyed by tag value so removal preserves the roving tab stop. */
+/**
+ * @internal Builds one `<skdx-badge>` per entry, keyed by tag value so removal preserves the
+ * roving tab stop. Sets `label` and `deletable` only — no light-DOM text child — so each
+ * badge derives its own Label and Delete parts instead of duplicating the label as raw content.
+ */
 export declare function fillTagGroupAnatomy(root: SkdxTagGroup): void;

package/dist/tag-group/TagGroupAnatomy.js

@@ -1,9 +1,9 @@
-import{html as d,render as t,nothing as l}from"lit";import{repeat as o}from"lit/directives/repeat.js";import{closeGlyph as p}from"../internal/glyphs.js";import"../badge/Badge.js";import"../badge/BadgeDelete.js";var x="data-skdx-tag-group-generated";function b(e){e.tags&&t(o(e.tags,a=>a.value,(a,r)=>d`
+import{html as r,render as t}from"lit";import{repeat as l}from"lit/directives/repeat.js";import"../badge/Badge.js";import"../badge/BadgeDelete.js";var s="data-skdx-tag-group-generated";function m(e){e.tags&&t(l(e.tags,a=>a.value,(a,d)=>r`
         <skdx-badge
           data-skdx-tag-group-generated
-          .index=${r}
+          .index=${d}
           label=${a.label}
           ?disabled=${a.disabled??!1}
-          >${a.label}${e.removable?d`<skdx-badge-delete>${p}</skdx-badge-delete>`:l}</skdx-badge
-        >
-      `),e,{host:e})}export{x as TAG_GROUP_ANATOMY_GENERATED,b as fillTagGroupAnatomy};
+          ?deletable=${e.removable}
+        ></skdx-badge>
+      `),e,{host:e})}export{s as TAG_GROUP_ANATOMY_GENERATED,m as fillTagGroupAnatomy};

package/dist/tags-input/TagsInputInput.cjs

@@ -1,9 +1,10 @@
-"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var t in e)l(o,t,{get:e[t],enumerable:!0})},E=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of g(e))!f.call(o,a)&&a!==t&&l(o,a,{get:()=>e[a],enumerable:!(r=m(e,a))||r.enumerable});return o};var T=o=>E(l({},"__esModule",{value:!0}),o),u=(o,e,t,r)=>{for(var a=r>1?void 0:r?m(e,t):e,p=o.length-1,h;p>=0;p--)(h=o[p])&&(a=(r?h(e,t,a):h(a))||a);return r&&a&&l(e,t,a),a};var k={};b(k,{SkdxTagsInputInput:()=>n});module.exports=T(k);var i=require("lit"),c=require("lit/decorators.js"),v=require("../internal/define.cjs"),y=require("../internal/light-dom-styles.cjs"),s=require("./family.cjs"),d=require("./TagsInput.cjs");var n=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{this.root?.setInputValue(t.target.value)};this.handleKeydown=t=>{!this.root||this.root.disabled||this.root.readOnly||(t.key==="Enter"||(0,d.commitsOnKey)(t.key,this.root.delimiter)?(t.preventDefault(),this.root.addTag(this.text),this._clearDraft(t.target)):t.key==="Backspace"&&this.text===""&&this.root.value.length>0&&this.root.removeTag(this.root.value.length-1))};this.handleBlur=t=>{let r=this.root;!r||r.disabled||r.readOnly||r.blurBehavior==="keep"||(r.blurBehavior==="commit"&&r.addTag(this.text),this._clearDraft(t.target))};this.handlePaste=t=>{!this.root||this.root.disabled||this.root.readOnly||!this.root.addOnPaste||(t.preventDefault(),this.root.addTags((0,d.splitOnDelimiters)(t.clipboardData?.getData("text")??"",this.root.delimiter)),this._clearDraft(t.target))}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}get text(){return this.root?.inputValue??""}connectedCallback(){if(super.connectedCallback(),(0,y.installLightDomStyles)(),this.root=s.TAGS_INPUT_FAMILY.root(this),!this.root)throw new Error("<skdx-tags-input-input> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-field",""),this.root.addEventListener(s.TAGS_INPUT_FAMILY.event,this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(s.TAGS_INPUT_FAMILY.event,this.handleRootUpdate),super.disconnectedCallback()}_clearDraft(t){this.root?.setInputValue(""),t.value=""}render(){let t=this.root;return t?i.html`
+"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var t in e)n(o,t,{get:e[t],enumerable:!0})},E=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of g(e))!f.call(o,a)&&a!==t&&n(o,a,{get:()=>e[a],enumerable:!(r=c(e,a))||r.enumerable});return o};var $=o=>E(n({},"__esModule",{value:!0}),o),s=(o,e,t,r)=>{for(var a=r>1?void 0:r?c(e,t):e,p=o.length-1,u;p>=0;p--)(u=o[p])&&(a=(r?u(e,t,a):u(a))||a);return r&&a&&n(e,t,a),a};var T={};b(T,{SkdxTagsInputInput:()=>l});module.exports=$(T);var i=require("lit"),m=require("lit/decorators.js"),v=require("../internal/define.cjs"),y=require("../internal/light-dom-styles.cjs"),d=require("./family.cjs"),h=require("./TagsInput.cjs");var l=class extends i.LitElement{constructor(){super(...arguments);this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{this.root?.setInputValue(t.target.value)};this.handleKeydown=t=>{!this.root||this.root.disabled||this.root.readOnly||(t.key==="Enter"||(0,h.commitsOnKey)(t.key,this.root.delimiter)?(t.preventDefault(),this.root.addTag(this.text),this._clearDraft(t.target)):t.key==="Backspace"&&this.text===""&&this.root.value.length>0&&this.root.removeTag(this.root.value.length-1))};this.handleBlur=t=>{let r=this.root;!r||r.disabled||r.readOnly||r.blurBehavior==="keep"||(r.blurBehavior==="commit"&&r.addTag(this.text),this._clearDraft(t.target))};this.handlePaste=t=>{!this.root||this.root.disabled||this.root.readOnly||!this.root.addOnPaste||(t.preventDefault(),this.root.addTags((0,h.splitOnDelimiters)(t.clipboardData?.getData("text")??"",this.root.delimiter)),this._clearDraft(t.target))}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}get text(){return this.root?.inputValue??""}connectedCallback(){if(super.connectedCallback(),(0,y.installLightDomStyles)(),this.root=d.TAGS_INPUT_FAMILY.root(this),!this.root)throw new Error("<skdx-tags-input-input> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-field",""),this.root.addEventListener(d.TAGS_INPUT_FAMILY.event,this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(d.TAGS_INPUT_FAMILY.event,this.handleRootUpdate),super.disconnectedCallback()}_clearDraft(t){this.root?.setInputValue(""),t.value=""}render(){let t=this.root;return t?i.html`
       <input
         part="input"
         type="text"
         style="padding: revert"
         placeholder=${this.placeholder??i.nothing}
+        list=${this.list??i.nothing}
         aria-label=${t.inputLabel||i.nothing}
         ?disabled=${t.disabled}
         ?readonly=${t.readOnly}
@@ -18,4 +19,4 @@
         @blur=${this.handleBlur}
         @paste=${this.handlePaste}
       />
-    `:i.html``}};u([(0,c.property)({type:String})],n.prototype,"placeholder",2),n=u([(0,v.customElement)("skdx-tags-input-input","tags-input","input")],n);0&&(module.exports={SkdxTagsInputInput});
+    `:i.html``}};s([(0,m.property)({type:String})],l.prototype,"placeholder",2),s([(0,m.property)({type:String})],l.prototype,"list",2),l=s([(0,v.customElement)("skdx-tags-input-input","tags-input","input")],l);0&&(module.exports={SkdxTagsInputInput});

package/dist/tags-input/TagsInputInput.d.cts

@@ -16,6 +16,11 @@ export declare class SkdxTagsInputInput extends LitElement {
      * @default undefined
      */
     placeholder?: string;
+    /**
+     * Id of a `<datalist>` backing the input, forwarded to the native input's `list` attribute.
+     * @default undefined
+     */
+    list?: string;
     private root;
     /** The draft text, owned by the root so a consumer can control it. */
     private get text();

package/dist/tags-input/TagsInputInput.d.ts

@@ -16,6 +16,11 @@ export declare class SkdxTagsInputInput extends LitElement {
      * @default undefined
      */
     placeholder?: string;
+    /**
+     * Id of a `<datalist>` backing the input, forwarded to the native input's `list` attribute.
+     * @default undefined
+     */
+    list?: string;
     private root;
     /** The draft text, owned by the root so a consumer can control it. */
     private get text();

package/dist/tags-input/TagsInputInput.js

@@ -1,21 +1,22 @@
-var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(n,i,t,e)=>{for(var r=e>1?void 0:e?m(i,t):i,l=n.length-1,s;l>=0;l--)(s=n[l])&&(r=(e?s(i,t,r):s(r))||r);return e&&r&&u(i,t,r),r};import{html as h,LitElement as c,nothing as a}from"lit";import{property as v}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{installLightDomStyles as g}from"../internal/light-dom-styles.js";import{TAGS_INPUT_FAMILY as p}from"./family.js";import{commitsOnKey as f,splitOnDelimiters as b}from"./TagsInput.js";var o=class extends c{constructor(){super(...arguments);this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{this.root?.setInputValue(t.target.value)};this.handleKeydown=t=>{!this.root||this.root.disabled||this.root.readOnly||(t.key==="Enter"||f(t.key,this.root.delimiter)?(t.preventDefault(),this.root.addTag(this.text),this._clearDraft(t.target)):t.key==="Backspace"&&this.text===""&&this.root.value.length>0&&this.root.removeTag(this.root.value.length-1))};this.handleBlur=t=>{let e=this.root;!e||e.disabled||e.readOnly||e.blurBehavior==="keep"||(e.blurBehavior==="commit"&&e.addTag(this.text),this._clearDraft(t.target))};this.handlePaste=t=>{!this.root||this.root.disabled||this.root.readOnly||!this.root.addOnPaste||(t.preventDefault(),this.root.addTags(b(t.clipboardData?.getData("text")??"",this.root.delimiter)),this._clearDraft(t.target))}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}get text(){return this.root?.inputValue??""}connectedCallback(){if(super.connectedCallback(),g(),this.root=p.root(this),!this.root)throw new Error("<skdx-tags-input-input> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-field",""),this.root.addEventListener(p.event,this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(p.event,this.handleRootUpdate),super.disconnectedCallback()}_clearDraft(t){this.root?.setInputValue(""),t.value=""}render(){let t=this.root;return t?h`
+var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(n,o,t,e)=>{for(var i=e>1?void 0:e?c(o,t):o,s=n.length-1,d;s>=0;s--)(d=n[s])&&(i=(e?d(o,t,i):d(i))||i);return e&&i&&m(o,t,i),i};import{html as p,LitElement as v,nothing as r}from"lit";import{property as u}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{installLightDomStyles as g}from"../internal/light-dom-styles.js";import{TAGS_INPUT_FAMILY as h}from"./family.js";import{commitsOnKey as f,splitOnDelimiters as b}from"./TagsInput.js";var a=class extends v{constructor(){super(...arguments);this.root=null;this.handleRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{this.root?.setInputValue(t.target.value)};this.handleKeydown=t=>{!this.root||this.root.disabled||this.root.readOnly||(t.key==="Enter"||f(t.key,this.root.delimiter)?(t.preventDefault(),this.root.addTag(this.text),this._clearDraft(t.target)):t.key==="Backspace"&&this.text===""&&this.root.value.length>0&&this.root.removeTag(this.root.value.length-1))};this.handleBlur=t=>{let e=this.root;!e||e.disabled||e.readOnly||e.blurBehavior==="keep"||(e.blurBehavior==="commit"&&e.addTag(this.text),this._clearDraft(t.target))};this.handlePaste=t=>{!this.root||this.root.disabled||this.root.readOnly||!this.root.addOnPaste||(t.preventDefault(),this.root.addTags(b(t.clipboardData?.getData("text")??"",this.root.delimiter)),this._clearDraft(t.target))}}createRenderRoot(){return this}focus(t){this.querySelector("input")?.focus(t)}get text(){return this.root?.inputValue??""}connectedCallback(){if(super.connectedCallback(),g(),this.root=h.root(this),!this.root)throw new Error("<skdx-tags-input-input> must be used inside <skdx-tags-input>.");this.setAttribute("data-skdx-tags-input-field",""),this.root.addEventListener(h.event,this.handleRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(h.event,this.handleRootUpdate),super.disconnectedCallback()}_clearDraft(t){this.root?.setInputValue(""),t.value=""}render(){let t=this.root;return t?p`
       <input
         part="input"
         type="text"
         style="padding: revert"
-        placeholder=${this.placeholder??a}
-        aria-label=${t.inputLabel||a}
+        placeholder=${this.placeholder??r}
+        list=${this.list??r}
+        aria-label=${t.inputLabel||r}
         ?disabled=${t.disabled}
         ?readonly=${t.readOnly}
-        aria-invalid=${t.invalid?"true":a}
-        aria-readonly=${t.readOnly?"true":a}
-        data-disabled=${t.disabled?"":a}
-        data-invalid=${t.invalid?"":a}
-        data-readonly=${t.readOnly?"":a}
+        aria-invalid=${t.invalid?"true":r}
+        aria-readonly=${t.readOnly?"true":r}
+        data-disabled=${t.disabled?"":r}
+        data-invalid=${t.invalid?"":r}
+        data-readonly=${t.readOnly?"":r}
         .value=${this.text}
         @input=${this.handleInput}
         @keydown=${this.handleKeydown}
         @blur=${this.handleBlur}
         @paste=${this.handlePaste}
       />
-    `:h``}};d([v({type:String})],o.prototype,"placeholder",2),o=d([y("skdx-tags-input-input","tags-input","input")],o);export{o as SkdxTagsInputInput};
+    `:p``}};l([u({type:String})],a.prototype,"placeholder",2),l([u({type:String})],a.prototype,"list",2),a=l([y("skdx-tags-input-input","tags-input","input")],a);export{a as SkdxTagsInputInput};

package/dist/text-field/TextField.cjs

@@ -1,4 +1,4 @@
-"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var M=(l,r)=>{for(var e in r)d(l,e,{get:r[e],enumerable:!0})},I=(l,r,e,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of A(r))!L.call(l,s)&&s!==e&&d(l,s,{get:()=>r[s],enumerable:!(n=m(r,s))||n.enumerable});return l};var V=l=>I(d({},"__esModule",{value:!0}),l),i=(l,r,e,n)=>{for(var s=n>1?void 0:n?m(r,e):r,h=l.length-1,f;h>=0;h--)(f=l[h])&&(s=(n?f(r,e,s):f(s))||s);return n&&s&&d(r,e,s),s};var B={};M(B,{SkdxTextField:()=>t});module.exports=V(B);var o=require("lit"),a=require("lit/decorators.js"),v=require("../internal/authored.cjs"),c=require("../internal/define.cjs"),p=require("../internal/derive.cjs"),b=require("../internal/events.cjs"),g=require("../internal/form-associated.cjs"),E=require("../internal/ids.cjs"),y=require("./family.cjs"),u=require("./TextFieldAnatomy.cjs");var t=class extends(0,g.FormAssociated)(o.LitElement){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.defaultValue="";this.clearable=!1;this.clearLabel="Clear";this.type="text";this.readOnly=!1;this.ariaDescribedBy=null;this.ariaLabelledBy=null;this.ariaInvalid=null;this.inputId=(0,E.nextId)("skdx-text-field");this.hasUpdatedOnce=!1;this.seeded=!1;this.fillAnatomy=()=>{(0,v.hasAuthoredParts)(this,u.TEXT_FIELD_ANATOMY_GENERATED,u.TEXT_FIELD_RENDER_SLOTS)||(0,u.fillTextFieldAnatomy)(this)}}get validity(){return this.internals.validity??this.inputElement?.validity??null}get validationMessage(){return this.internals.validationMessage||(this.inputElement?.validationMessage??"")}setValue(e){this.value!==e&&(this.value=e,(0,b.emit)(this,"value-change",e))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let e=this.inputElement;e?this.mirrorValidity(e):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value=this.defaultValue}updated(e){let n=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("value"))&&(n||y.TEXT_FIELD_FAMILY.notify(this),this.syncFormState()),!n&&(e.has("ariaDescribedBy")||e.has("ariaLabelledBy")||e.has("ariaInvalid"))&&y.TEXT_FIELD_FAMILY.notify(this),(e.has("clearable")||e.has("clearLabel")||e.has("placeholder")||e.has("type")||e.has("readOnly"))&&this.fillAnatomy(),(0,p.threadAppearance)(this,{size:this.size,variant:this.variant},[...(0,p.derivedParts)(this,"skdx-text-field-input")])}render(){return o.html`
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var M=(l,r)=>{for(var t in r)d(l,t,{get:r[t],enumerable:!0})},I=(l,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of A(r))!L.call(l,s)&&s!==t&&d(l,s,{get:()=>r[s],enumerable:!(n=m(r,s))||n.enumerable});return l};var V=l=>I(d({},"__esModule",{value:!0}),l),i=(l,r,t,n)=>{for(var s=n>1?void 0:n?m(r,t):r,p=l.length-1,f;p>=0;p--)(f=l[p])&&(s=(n?f(r,t,s):f(s))||s);return n&&s&&d(r,t,s),s};var B={};M(B,{SkdxTextField:()=>e});module.exports=V(B);var o=require("lit"),a=require("lit/decorators.js"),v=require("../internal/authored.cjs"),c=require("../internal/define.cjs"),h=require("../internal/derive.cjs"),b=require("../internal/events.cjs"),g=require("../internal/form-associated.cjs"),E=require("../internal/ids.cjs"),y=require("./family.cjs"),u=require("./TextFieldAnatomy.cjs");var e=class extends(0,g.FormAssociated)(o.LitElement){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.defaultValue="";this.clearable=!1;this.clearLabel="Clear";this.type="text";this.readOnly=!1;this.ariaDescribedBy=null;this.ariaLabelledBy=null;this.ariaInvalid=null;this.inputId=(0,E.nextId)("skdx-text-field");this.hasUpdatedOnce=!1;this.seeded=!1;this.fillAnatomy=()=>{(0,v.hasAuthoredParts)(this,u.TEXT_FIELD_ANATOMY_GENERATED,u.TEXT_FIELD_RENDER_SLOTS)||(0,u.fillTextFieldAnatomy)(this)}}get validity(){return this.internals.validity??this.inputElement?.validity??null}get validationMessage(){return this.internals.validationMessage||(this.inputElement?.validationMessage??"")}setValue(t){this.value!==t&&(this.value=t,(0,b.emit)(this,"value-change",t))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let t=this.inputElement;t?this.mirrorValidity(t):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value=this.defaultValue}updated(t){let n=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(t.has("disabled")||t.has("invalid")||t.has("required")||t.has("value"))&&(n||y.TEXT_FIELD_FAMILY.notify(this),this.syncFormState()),!n&&(t.has("ariaDescribedBy")||t.has("ariaLabelledBy")||t.has("ariaInvalid"))&&y.TEXT_FIELD_FAMILY.notify(this),(t.has("clearable")||t.has("clearLabel")||t.has("placeholder")||t.has("type")||t.has("readOnly"))&&this.fillAnatomy(),(0,h.threadAppearance)(this,{size:this.size,variant:this.variant},[...(0,h.derivedParts)(this,"skdx-text-field-input")])}render(){return o.html`
       <div
         part="root"
         data-disabled=${this.disabled?"":o.nothing}
@@ -6,7 +6,7 @@
       >
         <slot @slotchange=${this.fillAnatomy}></slot>
       </div>
-    `}};t.styles=o.css`
+    `}};e.styles=o.css`
     :host {
       display: block;
     }
@@ -14,10 +14,14 @@
       display: none;
     }
     /* The shared skin's .skdx-text-field flex rule targets the light-DOM host
-       and never reaches this shadow root, so the layout is redeclared here. */
+       and never reaches this shadow root, so the layout is redeclared here.
+       inline-size is explicit: a shadow-root block child does not reliably
+       inherit :host's externally stretched width, so it shrinks to the
+       slotted input's intrinsic size instead of filling the host. */
     div {
       display: flex;
       align-items: center;
       gap: var(--skdx-control-gap-md);
+      inline-size: 100%;
     }
-  `,i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"required",2),i([(0,a.property)({type:String})],t.prototype,"value",2),i([(0,a.property)({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([(0,a.property)({type:String,reflect:!0})],t.prototype,"name",2),i([(0,a.property)({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([(0,a.property)({type:Boolean,reflect:!0})],t.prototype,"clearable",2),i([(0,a.property)({type:String,attribute:"clear-label"})],t.prototype,"clearLabel",2),i([(0,a.property)({type:String})],t.prototype,"placeholder",2),i([(0,a.property)({type:String})],t.prototype,"type",2),i([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([(0,a.property)({type:String,attribute:"aria-describedby"})],t.prototype,"ariaDescribedBy",2),i([(0,a.property)({type:String,attribute:"aria-labelledby"})],t.prototype,"ariaLabelledBy",2),i([(0,a.property)({type:String,attribute:"aria-invalid"})],t.prototype,"ariaInvalid",2),i([(0,a.property)({type:String,reflect:!0,attribute:"data-size"})],t.prototype,"size",2),i([(0,a.property)({type:String,reflect:!0,attribute:"data-variant"})],t.prototype,"variant",2),t=i([(0,c.customElement)("skdx-text-field","text-field","root")],t);0&&(module.exports={SkdxTextField});
+  `,i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"invalid",2),i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"required",2),i([(0,a.property)({type:String})],e.prototype,"value",2),i([(0,a.property)({type:String,attribute:"default-value"})],e.prototype,"defaultValue",2),i([(0,a.property)({type:String,reflect:!0})],e.prototype,"name",2),i([(0,a.property)({attribute:"required-message"})],e.prototype,"requiredMessage",2),i([(0,a.property)({type:Boolean,reflect:!0})],e.prototype,"clearable",2),i([(0,a.property)({type:String,attribute:"clear-label"})],e.prototype,"clearLabel",2),i([(0,a.property)({type:String})],e.prototype,"placeholder",2),i([(0,a.property)({type:String})],e.prototype,"type",2),i([(0,a.property)({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),i([(0,a.property)({type:String,attribute:"aria-describedby"})],e.prototype,"ariaDescribedBy",2),i([(0,a.property)({type:String,attribute:"aria-labelledby"})],e.prototype,"ariaLabelledBy",2),i([(0,a.property)({type:String,attribute:"aria-invalid"})],e.prototype,"ariaInvalid",2),i([(0,a.property)({type:String,reflect:!0,attribute:"data-size"})],e.prototype,"size",2),i([(0,a.property)({type:String,reflect:!0,attribute:"data-variant"})],e.prototype,"variant",2),e=i([(0,c.customElement)("skdx-text-field","text-field","root")],e);0&&(module.exports={SkdxTextField});

package/dist/text-field/TextField.js

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,l,e,r)=>{for(var s=r>1?void 0:r?f(l,e):l,o=n.length-1,u;o>=0;o--)(u=n[o])&&(s=(r?u(l,e,s):u(s))||s);return r&&s&&h(l,e,s),s};import{css as y,html as m,LitElement as v,nothing as d}from"lit";import{property as a}from"lit/decorators.js";import{hasAuthoredParts as c}from"../internal/authored.js";import{customElement as b}from"../internal/define.js";import{derivedParts as g,threadAppearance as E}from"../internal/derive.js";import{emit as A}from"../internal/events.js";import{FormAssociated as L}from"../internal/form-associated.js";import{nextId as M}from"../internal/ids.js";import{TEXT_FIELD_FAMILY as p}from"./family.js";import{fillTextFieldAnatomy as I,TEXT_FIELD_ANATOMY_GENERATED as V,TEXT_FIELD_RENDER_SLOTS as B}from"./TextFieldAnatomy.js";var t=class extends L(v){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.defaultValue="";this.clearable=!1;this.clearLabel="Clear";this.type="text";this.readOnly=!1;this.ariaDescribedBy=null;this.ariaLabelledBy=null;this.ariaInvalid=null;this.inputId=M("skdx-text-field");this.hasUpdatedOnce=!1;this.seeded=!1;this.fillAnatomy=()=>{c(this,V,B)||I(this)}}get validity(){return this.internals.validity??this.inputElement?.validity??null}get validationMessage(){return this.internals.validationMessage||(this.inputElement?.validationMessage??"")}setValue(e){this.value!==e&&(this.value=e,A(this,"value-change",e))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let e=this.inputElement;e?this.mirrorValidity(e):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value=this.defaultValue}updated(e){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("value"))&&(r||p.notify(this),this.syncFormState()),!r&&(e.has("ariaDescribedBy")||e.has("ariaLabelledBy")||e.has("ariaInvalid"))&&p.notify(this),(e.has("clearable")||e.has("clearLabel")||e.has("placeholder")||e.has("type")||e.has("readOnly"))&&this.fillAnatomy(),E(this,{size:this.size,variant:this.variant},[...g(this,"skdx-text-field-input")])}render(){return m`
+var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,l,t,r)=>{for(var s=r>1?void 0:r?f(l,t):l,o=n.length-1,u;o>=0;o--)(u=n[o])&&(s=(r?u(l,t,s):u(s))||s);return r&&s&&p(l,t,s),s};import{css as y,html as m,LitElement as v,nothing as d}from"lit";import{property as a}from"lit/decorators.js";import{hasAuthoredParts as c}from"../internal/authored.js";import{customElement as b}from"../internal/define.js";import{derivedParts as g,threadAppearance as E}from"../internal/derive.js";import{emit as A}from"../internal/events.js";import{FormAssociated as L}from"../internal/form-associated.js";import{nextId as M}from"../internal/ids.js";import{TEXT_FIELD_FAMILY as h}from"./family.js";import{fillTextFieldAnatomy as I,TEXT_FIELD_ANATOMY_GENERATED as V,TEXT_FIELD_RENDER_SLOTS as B}from"./TextFieldAnatomy.js";var e=class extends L(v){constructor(){super(...arguments);this.disabled=!1;this.invalid=!1;this.required=!1;this.value="";this.defaultValue="";this.clearable=!1;this.clearLabel="Clear";this.type="text";this.readOnly=!1;this.ariaDescribedBy=null;this.ariaLabelledBy=null;this.ariaInvalid=null;this.inputId=M("skdx-text-field");this.hasUpdatedOnce=!1;this.seeded=!1;this.fillAnatomy=()=>{c(this,V,B)||I(this)}}get validity(){return this.internals.validity??this.inputElement?.validity??null}get validationMessage(){return this.internals.validationMessage||(this.inputElement?.validationMessage??"")}setValue(t){this.value!==t&&(this.value=t,A(this,"value-change",t))}get inputElement(){return this.querySelector("skdx-text-field-input input")}syncFormState(){this.setFormValue(this.value);let t=this.inputElement;t?this.mirrorValidity(t):this.setValueMissing(this.required&&!this.value,"Please fill out this field.")}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue)),queueMicrotask(this.fillAnatomy)}formResetCallback(){this.value=this.defaultValue}updated(t){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,(t.has("disabled")||t.has("invalid")||t.has("required")||t.has("value"))&&(r||h.notify(this),this.syncFormState()),!r&&(t.has("ariaDescribedBy")||t.has("ariaLabelledBy")||t.has("ariaInvalid"))&&h.notify(this),(t.has("clearable")||t.has("clearLabel")||t.has("placeholder")||t.has("type")||t.has("readOnly"))&&this.fillAnatomy(),E(this,{size:this.size,variant:this.variant},[...g(this,"skdx-text-field-input")])}render(){return m`
       <div
         part="root"
         data-disabled=${this.disabled?"":d}
@@ -6,7 +6,7 @@ var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,l,e,r
       >
         <slot @slotchange=${this.fillAnatomy}></slot>
       </div>
-    `}};t.styles=y`
+    `}};e.styles=y`
     :host {
       display: block;
     }
@@ -14,10 +14,14 @@ var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,l,e,r
       display: none;
     }
     /* The shared skin's .skdx-text-field flex rule targets the light-DOM host
-       and never reaches this shadow root, so the layout is redeclared here. */
+       and never reaches this shadow root, so the layout is redeclared here.
+       inline-size is explicit: a shadow-root block child does not reliably
+       inherit :host's externally stretched width, so it shrinks to the
+       slotted input's intrinsic size instead of filling the host. */
     div {
       display: flex;
       align-items: center;
       gap: var(--skdx-control-gap-md);
+      inline-size: 100%;
     }
-  `,i([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([a({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([a({type:Boolean,reflect:!0})],t.prototype,"required",2),i([a({type:String})],t.prototype,"value",2),i([a({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([a({type:String,reflect:!0})],t.prototype,"name",2),i([a({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([a({type:Boolean,reflect:!0})],t.prototype,"clearable",2),i([a({type:String,attribute:"clear-label"})],t.prototype,"clearLabel",2),i([a({type:String})],t.prototype,"placeholder",2),i([a({type:String})],t.prototype,"type",2),i([a({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([a({type:String,attribute:"aria-describedby"})],t.prototype,"ariaDescribedBy",2),i([a({type:String,attribute:"aria-labelledby"})],t.prototype,"ariaLabelledBy",2),i([a({type:String,attribute:"aria-invalid"})],t.prototype,"ariaInvalid",2),i([a({type:String,reflect:!0,attribute:"data-size"})],t.prototype,"size",2),i([a({type:String,reflect:!0,attribute:"data-variant"})],t.prototype,"variant",2),t=i([b("skdx-text-field","text-field","root")],t);export{t as SkdxTextField};
+  `,i([a({type:Boolean,reflect:!0})],e.prototype,"disabled",2),i([a({type:Boolean,reflect:!0})],e.prototype,"invalid",2),i([a({type:Boolean,reflect:!0})],e.prototype,"required",2),i([a({type:String})],e.prototype,"value",2),i([a({type:String,attribute:"default-value"})],e.prototype,"defaultValue",2),i([a({type:String,reflect:!0})],e.prototype,"name",2),i([a({attribute:"required-message"})],e.prototype,"requiredMessage",2),i([a({type:Boolean,reflect:!0})],e.prototype,"clearable",2),i([a({type:String,attribute:"clear-label"})],e.prototype,"clearLabel",2),i([a({type:String})],e.prototype,"placeholder",2),i([a({type:String})],e.prototype,"type",2),i([a({type:Boolean,reflect:!0,attribute:"read-only"})],e.prototype,"readOnly",2),i([a({type:String,attribute:"aria-describedby"})],e.prototype,"ariaDescribedBy",2),i([a({type:String,attribute:"aria-labelledby"})],e.prototype,"ariaLabelledBy",2),i([a({type:String,attribute:"aria-invalid"})],e.prototype,"ariaInvalid",2),i([a({type:String,reflect:!0,attribute:"data-size"})],e.prototype,"size",2),i([a({type:String,reflect:!0,attribute:"data-variant"})],e.prototype,"variant",2),e=i([b("skdx-text-field","text-field","root")],e);export{e as SkdxTextField};

package/dist/timeline/Timeline.cjs

@@ -1,4 +1,4 @@
-"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var A=(i,t)=>{for(var r in t)m(i,r,{get:t[r],enumerable:!0})},b=(i,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!v.call(i,e)&&e!==r&&m(i,e,{get:()=>t[e],enumerable:!(o=f(t,e))||o.enumerable});return i};var E=i=>b(m({},"__esModule",{value:!0}),i),a=(i,t,r,o)=>{for(var e=o>1?void 0:o?f(t,r):t,d=i.length-1,c;d>=0;d--)(c=i[d])&&(e=(o?c(t,r,e):c(e))||e);return o&&e&&m(t,r,e),e};var M={};A(M,{SkdxTimeline:()=>n});module.exports=E(M);var l=require("lit"),s=require("lit/decorators.js"),u=require("../internal/authored.cjs"),g=require("../internal/define.cjs"),h=require("../internal/part.cjs"),p=require("./TimelineAnatomy.cjs");var n=class extends l.LitElement{constructor(){super(...arguments);this.orientation="vertical";this.fillAnatomy=()=>{(0,u.hasAuthoredParts)(this,p.TIMELINE_ANATOMY_GENERATED)||(0,p.fillTimelineAnatomy)(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(r){(0,h.reflectHostState)(this,{"data-orientation":this.orientation}),(r.has("items")||r.has("renderContent"))&&this.fillAnatomy()}render(){return l.html`<ol
+"use strict";var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var v=(r,t)=>{for(var i in t)m(r,i,{get:t[i],enumerable:!0})},A=(r,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!b.call(r,e)&&e!==i&&m(r,e,{get:()=>t[e],enumerable:!(o=h(t,e))||o.enumerable});return r};var w=r=>A(m({},"__esModule",{value:!0}),r),a=(r,t,i,o)=>{for(var e=o>1?void 0:o?h(t,i):t,d=r.length-1,c;d>=0;d--)(c=r[d])&&(e=(o?c(t,i,e):c(e))||e);return o&&e&&m(t,i,e),e};var x={};v(x,{SkdxTimeline:()=>n});module.exports=w(x);var l=require("lit"),s=require("lit/decorators.js"),u=require("../internal/authored.cjs"),f=require("../internal/define.cjs"),g=require("../internal/part.cjs"),p=require("./TimelineAnatomy.cjs");var n=class extends l.LitElement{constructor(){super(...arguments);this.orientation="vertical";this.fillAnatomy=()=>{(0,u.hasAuthoredParts)(this,p.TIMELINE_ANATOMY_GENERATED)||(0,p.fillTimelineAnatomy)(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(i){(0,g.reflectHostState)(this,{"data-orientation":this.orientation}),(i.has("items")||i.has("renderContent")||i.has("renderOpposite"))&&this.fillAnatomy()}render(){return l.html`<ol
       part="timeline"
       role="list"
       data-orientation=${this.orientation}
@@ -15,4 +15,11 @@
       padding: 0;
       list-style: none;
     }
-  `,a([(0,s.property)({type:String})],n.prototype,"orientation",2),a([(0,s.property)({attribute:!1})],n.prototype,"items",2),a([(0,s.property)({attribute:!1})],n.prototype,"renderContent",2),a([(0,s.property)({type:String,reflect:!0,attribute:"data-align"})],n.prototype,"align",2),n=a([(0,g.customElement)("skdx-timeline","timeline","root")],n);0&&(module.exports={SkdxTimeline});
+    /* The host is display: contents, so the skin's own [data-orientation='horizontal']
+       rule — written against the light-DOM host — never reaches this shadow-root box,
+       which is the element that actually establishes the flex container. */
+    [part='timeline'][data-orientation='horizontal'] {
+      flex-direction: row;
+      align-items: start;
+    }
+  `,a([(0,s.property)({type:String})],n.prototype,"orientation",2),a([(0,s.property)({attribute:!1})],n.prototype,"items",2),a([(0,s.property)({attribute:!1})],n.prototype,"renderContent",2),a([(0,s.property)({attribute:!1})],n.prototype,"renderOpposite",2),a([(0,s.property)({type:String,reflect:!0,attribute:"data-align"})],n.prototype,"align",2),n=a([(0,f.customElement)("skdx-timeline","timeline","root")],n);0&&(module.exports={SkdxTimeline});

package/dist/timeline/Timeline.d.cts

@@ -3,7 +3,7 @@ import { LitElement, type TemplateResult } from 'lit';
 export interface SkdxTimelineItemDescriptor {
     /** The event itself — the Item's body text. */
     content: string;
-    /** Metadata on the far side of the marker: a timestamp, an actor, an elapsed time. */
+    /** Metadata on the far side of the marker: a timestamp, an actor, an elapsed time — plain text; use `renderOpposite` for markup. */
     opposite?: string;
     /**
      * Text, a glyph, or a rendered icon inside the marker. An Indicator given
@@ -59,6 +59,13 @@ export declare class SkdxTimeline extends LitElement {
      * @default undefined — the entry's `content` is rendered as text.
      */
     renderContent?: (item: SkdxTimelineItemDescriptor, index: number) => unknown;
+    /**
+     * Renders each event's opposite metadata, in place of its `opposite`
+     * string — return anything Lit can render. Property only: a function has
+     * no attribute form.
+     * @default undefined — the entry's `opposite` is rendered as text.
+     */
+    renderOpposite?: (item: SkdxTimelineItemDescriptor, index: number) => unknown;
     /**
      * Which side items sit on relative to the rail, reflected as `data-align`; may be written as that attribute directly.
      * @default undefined — the skin’s own default.

package/dist/timeline/Timeline.d.ts

@@ -3,7 +3,7 @@ import { LitElement, type TemplateResult } from 'lit';
 export interface SkdxTimelineItemDescriptor {
     /** The event itself — the Item's body text. */
     content: string;
-    /** Metadata on the far side of the marker: a timestamp, an actor, an elapsed time. */
+    /** Metadata on the far side of the marker: a timestamp, an actor, an elapsed time — plain text; use `renderOpposite` for markup. */
     opposite?: string;
     /**
      * Text, a glyph, or a rendered icon inside the marker. An Indicator given
@@ -59,6 +59,13 @@ export declare class SkdxTimeline extends LitElement {
      * @default undefined — the entry's `content` is rendered as text.
      */
     renderContent?: (item: SkdxTimelineItemDescriptor, index: number) => unknown;
+    /**
+     * Renders each event's opposite metadata, in place of its `opposite`
+     * string — return anything Lit can render. Property only: a function has
+     * no attribute form.
+     * @default undefined — the entry's `opposite` is rendered as text.
+     */
+    renderOpposite?: (item: SkdxTimelineItemDescriptor, index: number) => unknown;
     /**
      * Which side items sit on relative to the rail, reflected as `data-align`; may be written as that attribute directly.
      * @default undefined — the skin’s own default.

package/dist/timeline/Timeline.js

@@ -1,4 +1,4 @@
-var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=(l,n,i,o)=>{for(var e=o>1?void 0:o?d(n,i):n,s=l.length-1,m;s>=0;s--)(m=l[s])&&(e=(o?m(n,i,e):m(e))||e);return o&&e&&p(n,i,e),e};import{css as c,html as f,LitElement as u}from"lit";import{property as a}from"lit/decorators.js";import{hasAuthoredParts as g}from"../internal/authored.js";import{customElement as h}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{fillTimelineAnatomy as v,TIMELINE_ANATOMY_GENERATED as A}from"./TimelineAnatomy.js";var t=class extends u{constructor(){super(...arguments);this.orientation="vertical";this.fillAnatomy=()=>{g(this,A)||v(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(i){y(this,{"data-orientation":this.orientation}),(i.has("items")||i.has("renderContent"))&&this.fillAnatomy()}render(){return f`<ol
+var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=(s,n,e,a)=>{for(var i=a>1?void 0:a?d(n,e):n,l=s.length-1,m;l>=0;l--)(m=s[l])&&(i=(a?m(n,e,i):m(i))||i);return a&&i&&p(n,e,i),i};import{css as c,html as h,LitElement as u}from"lit";import{property as o}from"lit/decorators.js";import{hasAuthoredParts as f}from"../internal/authored.js";import{customElement as g}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{fillTimelineAnatomy as b,TIMELINE_ANATOMY_GENERATED as v}from"./TimelineAnatomy.js";var t=class extends u{constructor(){super(...arguments);this.orientation="vertical";this.fillAnatomy=()=>{f(this,v)||b(this)}}connectedCallback(){super.connectedCallback(),queueMicrotask(this.fillAnatomy)}updated(e){y(this,{"data-orientation":this.orientation}),(e.has("items")||e.has("renderContent")||e.has("renderOpposite"))&&this.fillAnatomy()}render(){return h`<ol
       part="timeline"
       role="list"
       data-orientation=${this.orientation}
@@ -15,4 +15,11 @@ var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=(l,n,i,o
       padding: 0;
       list-style: none;
     }
-  `,r([a({type:String})],t.prototype,"orientation",2),r([a({attribute:!1})],t.prototype,"items",2),r([a({attribute:!1})],t.prototype,"renderContent",2),r([a({type:String,reflect:!0,attribute:"data-align"})],t.prototype,"align",2),t=r([h("skdx-timeline","timeline","root")],t);export{t as SkdxTimeline};
+    /* The host is display: contents, so the skin's own [data-orientation='horizontal']
+       rule — written against the light-DOM host — never reaches this shadow-root box,
+       which is the element that actually establishes the flex container. */
+    [part='timeline'][data-orientation='horizontal'] {
+      flex-direction: row;
+      align-items: start;
+    }
+  `,r([o({type:String})],t.prototype,"orientation",2),r([o({attribute:!1})],t.prototype,"items",2),r([o({attribute:!1})],t.prototype,"renderContent",2),r([o({attribute:!1})],t.prototype,"renderOpposite",2),r([o({type:String,reflect:!0,attribute:"data-align"})],t.prototype,"align",2),t=r([g("skdx-timeline","timeline","root")],t);export{t as SkdxTimeline};