@skdx/web-components 0.26.0

package/dist/table/column-resize.d.ts

@@ -0,0 +1,57 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SkdxTable } from './Table.js';
+/**
+ * @internal What a column-resize host has to be able to answer. Both
+ * `<skdx-table-header-cell>` (for the inline handle its `resizable` shorthand
+ * renders) and `<skdx-table-column-resize-trigger>` (for the standalone one)
+ * implement this, so the drag/keyboard behaviour is written once.
+ */
+export interface ColumnResizeTarget {
+    /** Where this column's width is stored, or `undefined` if it cannot resize. */
+    readonly resizeColumnKey: string | undefined;
+    readonly resizeMinWidth: number;
+    readonly resizeMaxWidth: number;
+    /** How far one Arrow keypress moves the edge, in pixels. */
+    readonly resizeStepPx: number;
+    readonly resizeTable: SkdxTable | null;
+    /**
+     * The `<th>` this column is laid out as — the fallback starting width for a
+     * first drag on a column that has never been resized.
+     */
+    resizeMeasureCell(): HTMLElement | null | undefined;
+}
+type Host = ReactiveControllerHost & ColumnResizeTarget;
+/**
+ * @internal The pointer and keyboard behaviour of a column-resize handle.
+ *
+ * Kept out of both hosts because the two are the same widget in two positions:
+ * the handle `<skdx-table-header-cell resizable>` renders into its own shadow
+ * root, and the standalone `<skdx-table-column-resize-trigger>` a consumer slots
+ * in to place it differently. Only the markup around them differs.
+ */
+export declare class ColumnResizeController implements ReactiveController {
+    private readonly host;
+    /** True while a pointer drag is in flight — the `data-dragging` styling hook. */
+    dragging: boolean;
+    private drag;
+    constructor(host: Host);
+    hostDisconnected(): void;
+    /** This column's stored width, or `undefined` while it has never been resized. */
+    get storedWidth(): number | undefined;
+    private applyWidth;
+    /**
+     * The stored width, else whatever the browser laid the column out at, else
+     * `minWidth` — a measurement of 0 means nothing was laid out (jsdom, or a
+     * hidden table), and resizing from 0 would be a jump, not a drag.
+     */
+    private currentWidth;
+    private readonly onDocumentKeyDown;
+    private startEscapeWatch;
+    private stopEscapeWatch;
+    private endDrag;
+    readonly handlePointerDown: (event: PointerEvent) => void;
+    readonly handlePointerMove: (event: PointerEvent) => void;
+    readonly handlePointerUp: (event: PointerEvent) => void;
+    readonly handleKeyDown: (event: KeyboardEvent) => void;
+}
+export {};

package/dist/table/column-resize.js

@@ -0,0 +1 @@
+import{directionalKey as s,resolveDirection as o}from"../internal/direction.js";var i=class{constructor(e){this.host=e;this.dragging=!1;this.drag=null;this.onDocumentKeyDown=e=>{if(e.key!=="Escape")return;let t=this.endDrag();t&&this.applyWidth(t.startWidth)};this.handlePointerDown=e=>{e.button===0&&(e.preventDefault(),e.stopPropagation(),this.drag={startX:e.clientX,startWidth:this.currentWidth(),pointerId:e.pointerId},this.dragging=!0,this.startEscapeWatch(),e.currentTarget.setPointerCapture?.(e.pointerId),this.host.requestUpdate())};this.handlePointerMove=e=>{let t=this.drag;if(!t)return;let n=o(e.currentTarget)==="rtl"?t.startX-e.clientX:e.clientX-t.startX;this.applyWidth(t.startWidth+n)};this.handlePointerUp=e=>{let t=this.endDrag();if(!t)return;let r=e.currentTarget;r.hasPointerCapture?.(t.pointerId)&&r.releasePointerCapture(t.pointerId)};this.handleKeyDown=e=>{let t=s(e.key,e.currentTarget);if(t==="ArrowRight")this.applyWidth(this.currentWidth()+this.host.resizeStepPx);else if(t==="ArrowLeft")this.applyWidth(this.currentWidth()-this.host.resizeStepPx);else if(e.key==="Home")this.applyWidth(this.host.resizeMinWidth);else if(e.key==="End")this.applyWidth(this.host.resizeMaxWidth);else return;e.preventDefault(),e.stopPropagation()};e.addController(this)}hostDisconnected(){this.stopEscapeWatch(),this.drag=null,this.dragging=!1}get storedWidth(){let e=this.host.resizeColumnKey;return e===void 0?void 0:this.host.resizeTable?.resolvedColumnWidths[e]}applyWidth(e){let t=this.host.resizeColumnKey;if(t===void 0)return;let r=Math.min(Math.max(Math.round(e),this.host.resizeMinWidth),this.host.resizeMaxWidth);this.host.resizeTable?.setColumnWidth(t,r)}currentWidth(){let e=this.storedWidth;return e!==void 0?e:(this.host.resizeMeasureCell()?.getBoundingClientRect().width??0)||this.host.resizeMinWidth}startEscapeWatch(){document.addEventListener("keydown",this.onDocumentKeyDown)}stopEscapeWatch(){document.removeEventListener("keydown",this.onDocumentKeyDown)}endDrag(){let e=this.drag;return e?(this.drag=null,this.dragging=!1,this.stopEscapeWatch(),this.host.requestUpdate(),e):null}};export{i as ColumnResizeController};

package/dist/table/index.cjs

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

package/dist/table/index.d.cts

@@ -0,0 +1,17 @@
+export { SkdxTable } from './Table.cjs';
+export { SkdxTableHeader } from './TableHeader.cjs';
+export { SkdxTableBody } from './TableBody.cjs';
+export { SkdxTableFooter } from './TableFooter.cjs';
+export { SkdxTableRow } from './TableRow.cjs';
+export { SkdxTableHeaderCell } from './TableHeaderCell.cjs';
+export { SkdxTableCell } from './TableCell.cjs';
+export { SkdxTableCaption } from './TableCaption.cjs';
+export { SkdxTableExpandTrigger } from './TableExpandTrigger.cjs';
+export { SkdxTableExpandedRow } from './TableExpandedRow.cjs';
+export { SkdxTableEmpty } from './TableEmpty.cjs';
+export { SkdxTableColumnHeaderSortTrigger } from './TableColumnHeaderSortTrigger.cjs';
+export { SkdxTableSortIndicator } from './TableSortIndicator.cjs';
+export { SkdxTableSelectAllCheckbox, defaultSelectAllLabel } from './TableSelectAllCheckbox.cjs';
+export { SkdxTableRowSelectCheckbox } from './TableRowSelectCheckbox.cjs';
+export { SkdxTableColumnResizeTrigger } from './TableColumnResizeTrigger.cjs';
+export type { SortDirection, TableSort, TableSortState, TableSelectAllScope, TableSelectionMode, TableColumnWidths, } from './types.cjs';

package/dist/table/index.d.ts

@@ -0,0 +1,17 @@
+export { SkdxTable } from './Table.js';
+export { SkdxTableHeader } from './TableHeader.js';
+export { SkdxTableBody } from './TableBody.js';
+export { SkdxTableFooter } from './TableFooter.js';
+export { SkdxTableRow } from './TableRow.js';
+export { SkdxTableHeaderCell } from './TableHeaderCell.js';
+export { SkdxTableCell } from './TableCell.js';
+export { SkdxTableCaption } from './TableCaption.js';
+export { SkdxTableExpandTrigger } from './TableExpandTrigger.js';
+export { SkdxTableExpandedRow } from './TableExpandedRow.js';
+export { SkdxTableEmpty } from './TableEmpty.js';
+export { SkdxTableColumnHeaderSortTrigger } from './TableColumnHeaderSortTrigger.js';
+export { SkdxTableSortIndicator } from './TableSortIndicator.js';
+export { SkdxTableSelectAllCheckbox, defaultSelectAllLabel } from './TableSelectAllCheckbox.js';
+export { SkdxTableRowSelectCheckbox } from './TableRowSelectCheckbox.js';
+export { SkdxTableColumnResizeTrigger } from './TableColumnResizeTrigger.js';
+export type { SortDirection, TableSort, TableSortState, TableSelectAllScope, TableSelectionMode, TableColumnWidths, } from './types.js';

package/dist/table/index.js

@@ -0,0 +1 @@
+import{SkdxTable as r}from"./Table.js";import{SkdxTableHeader as t}from"./TableHeader.js";import{SkdxTableBody as a}from"./TableBody.js";import{SkdxTableFooter as d}from"./TableFooter.js";import{SkdxTableRow as p}from"./TableRow.js";import{SkdxTableHeaderCell as m}from"./TableHeaderCell.js";import{SkdxTableCell as k}from"./TableCell.js";import{SkdxTableCaption as i}from"./TableCaption.js";import{SkdxTableExpandTrigger as C}from"./TableExpandTrigger.js";import{SkdxTableExpandedRow as u}from"./TableExpandedRow.js";import{SkdxTableEmpty as R}from"./TableEmpty.js";import{SkdxTableColumnHeaderSortTrigger as s}from"./TableColumnHeaderSortTrigger.js";import{SkdxTableSortIndicator as A}from"./TableSortIndicator.js";import{SkdxTableSelectAllCheckbox as H,defaultSelectAllLabel as z}from"./TableSelectAllCheckbox.js";import{SkdxTableRowSelectCheckbox as D}from"./TableRowSelectCheckbox.js";import{SkdxTableColumnResizeTrigger as I}from"./TableColumnResizeTrigger.js";export{r as SkdxTable,a as SkdxTableBody,i as SkdxTableCaption,k as SkdxTableCell,s as SkdxTableColumnHeaderSortTrigger,I as SkdxTableColumnResizeTrigger,R as SkdxTableEmpty,C as SkdxTableExpandTrigger,u as SkdxTableExpandedRow,d as SkdxTableFooter,t as SkdxTableHeader,m as SkdxTableHeaderCell,p as SkdxTableRow,D as SkdxTableRowSelectCheckbox,H as SkdxTableSelectAllCheckbox,A as SkdxTableSortIndicator,z as defaultSelectAllLabel};

package/dist/table/selection-checkbox.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var p=(e,t)=>{for(var o in t)i(e,o,{get:t[o],enumerable:!0})},u=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of b(t))!h.call(e,a)&&a!==o&&i(e,a,{get:()=>t[a],enumerable:!(r=n(t,a))||r.enumerable});return e};var v=e=>u(i({},"__esModule",{value:!0}),e);var k={};p(k,{SkdxTableSelectionCheckbox:()=>l});module.exports=v(k);var d=require("../checkbox/Checkbox.cjs"),c=require("../internal/aria-label.cjs"),s=require("./column-context.cjs"),l=class extends d.SkdxCheckbox{constructor(){super();this.tableRoot=null;this.hostLabel=null;this.onRootUpdate=()=>this.syncFromTable();this.addEventListener("click",o=>this.activate(o))}connectedCallback(){super.connectedCallback(),this.classList.add("skdx-checkbox"),this.tableRoot=(0,s.findTableRoot)(this),this.tableRoot?.addEventListener(s.TABLE_INTERNAL_UPDATE,this.onRootUpdate),this.hostLabel??(this.hostLabel=(0,c.takeHostAriaLabel)(this)),this.syncFromTable()}disconnectedCallback(){this.tableRoot?.removeEventListener(s.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}syncFromTable(){this.tableRoot&&(this.checked=this.resolveChecked(this.tableRoot))}updated(o){super.updated(o);let r=this.shadowRoot?.querySelector("button");if(!r)return;let a=this.hostLabel??this.defaultLabel();a?r.setAttribute("aria-label",a):r.removeAttribute("aria-label")}};0&&(module.exports={SkdxTableSelectionCheckbox});

package/dist/table/selection-checkbox.d.cts

@@ -0,0 +1,37 @@
+import type { PropertyValues } from 'lit';
+import { SkdxCheckbox, type SkdxCheckedState } from '../checkbox/Checkbox.cjs';
+import type { SkdxTable } from './Table.cjs';
+/**
+ * @internal Shared plumbing for the two table checkboxes that are driven by the
+ * table's selection state rather than their own —
+ * `<skdx-table-select-all-checkbox>` and `<skdx-table-row-select-checkbox>`.
+ *
+ * Both extend `<skdx-checkbox>`, so they inherit its shadow `<button
+ * role="checkbox">`, its `checkbox` CSS part and its form association. What
+ * they override is ownership of `checked`: `SkdxCheckbox` flips it locally on
+ * click, and these recompute it from the table on every broadcast, so the local
+ * flip is never observable.
+ */
+export declare abstract class SkdxTableSelectionCheckbox extends SkdxCheckbox {
+    /** @internal The `<skdx-table>` whose selection state drives this checkbox. */
+    protected tableRoot: SkdxTable | null;
+    /**
+     * The consumer's `aria-label`, moved off the host at connect. The
+     * `role="checkbox"` lives on the shadow `<button>`, so a label left on the
+     * host would name nothing — see `internal/aria-label.ts`.
+     */
+    private hostLabel;
+    private readonly onRootUpdate;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Recomputes `checked` from the table. Called on connect and every broadcast. */
+    protected syncFromTable(): void;
+    protected updated(changed: PropertyValues): void;
+    /** This checkbox's state, as the table sees it. */
+    protected abstract resolveChecked(root: SkdxTable): SkdxCheckedState;
+    /** What the checkbox is called when the consumer gave it no `aria-label`. */
+    protected abstract defaultLabel(): string | null;
+    /** What a click on the checkbox asks the table to do. */
+    protected abstract activate(event: MouseEvent): void;
+}

package/dist/table/selection-checkbox.d.ts

@@ -0,0 +1,37 @@
+import type { PropertyValues } from 'lit';
+import { SkdxCheckbox, type SkdxCheckedState } from '../checkbox/Checkbox.js';
+import type { SkdxTable } from './Table.js';
+/**
+ * @internal Shared plumbing for the two table checkboxes that are driven by the
+ * table's selection state rather than their own —
+ * `<skdx-table-select-all-checkbox>` and `<skdx-table-row-select-checkbox>`.
+ *
+ * Both extend `<skdx-checkbox>`, so they inherit its shadow `<button
+ * role="checkbox">`, its `checkbox` CSS part and its form association. What
+ * they override is ownership of `checked`: `SkdxCheckbox` flips it locally on
+ * click, and these recompute it from the table on every broadcast, so the local
+ * flip is never observable.
+ */
+export declare abstract class SkdxTableSelectionCheckbox extends SkdxCheckbox {
+    /** @internal The `<skdx-table>` whose selection state drives this checkbox. */
+    protected tableRoot: SkdxTable | null;
+    /**
+     * The consumer's `aria-label`, moved off the host at connect. The
+     * `role="checkbox"` lives on the shadow `<button>`, so a label left on the
+     * host would name nothing — see `internal/aria-label.ts`.
+     */
+    private hostLabel;
+    private readonly onRootUpdate;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Recomputes `checked` from the table. Called on connect and every broadcast. */
+    protected syncFromTable(): void;
+    protected updated(changed: PropertyValues): void;
+    /** This checkbox's state, as the table sees it. */
+    protected abstract resolveChecked(root: SkdxTable): SkdxCheckedState;
+    /** What the checkbox is called when the consumer gave it no `aria-label`. */
+    protected abstract defaultLabel(): string | null;
+    /** What a click on the checkbox asks the table to do. */
+    protected abstract activate(event: MouseEvent): void;
+}

package/dist/table/selection-checkbox.js

@@ -0,0 +1 @@
+import{SkdxCheckbox as s}from"../checkbox/Checkbox.js";import{takeHostAriaLabel as i}from"../internal/aria-label.js";import{findTableRoot as l,TABLE_INTERNAL_UPDATE as a}from"./column-context.js";var r=class extends s{constructor(){super();this.tableRoot=null;this.hostLabel=null;this.onRootUpdate=()=>this.syncFromTable();this.addEventListener("click",t=>this.activate(t))}connectedCallback(){super.connectedCallback(),this.classList.add("skdx-checkbox"),this.tableRoot=l(this),this.tableRoot?.addEventListener(a,this.onRootUpdate),this.hostLabel??(this.hostLabel=i(this)),this.syncFromTable()}disconnectedCallback(){this.tableRoot?.removeEventListener(a,this.onRootUpdate),super.disconnectedCallback()}syncFromTable(){this.tableRoot&&(this.checked=this.resolveChecked(this.tableRoot))}updated(t){super.updated(t);let e=this.shadowRoot?.querySelector("button");if(!e)return;let o=this.hostLabel??this.defaultLabel();o?e.setAttribute("aria-label",o):e.removeAttribute("aria-label")}};export{r as SkdxTableSelectionCheckbox};

package/dist/table/types.cjs

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

package/dist/table/types.d.cts

@@ -0,0 +1,26 @@
+/** Direction a {@link import('./Table.cjs').SkdxTable} column is sorted in: ascending or descending. */
+export type SortDirection = 'asc' | 'desc';
+/** The currently sorted column and its direction. */
+export interface TableSortState {
+    columnKey: string;
+    direction: SortDirection;
+}
+/**
+ * A whole table's sort state: one column (single sort, the default), an ordered
+ * list of columns (`multi-sort`, most significant first), or nothing sorted.
+ *
+ * Single-sort tables are given and handed back the bare object — the array form
+ * only appears once `multi-sort` is on, so existing single-sort code is unaffected.
+ */
+export type TableSort = TableSortState | TableSortState[] | null;
+/**
+ * Which rows an `<skdx-table-select-all-checkbox>` covers: only the ids it was
+ * handed (`'page'`) or the entire dataset (`'all'`). There is no default — the
+ * two behave identically until the table is paginated or virtualized, at which
+ * point picking the wrong one is a bug found in production.
+ */
+export type TableSelectAllScope = 'page' | 'all';
+/** How many rows a table allows selected at once: one, many, or no selection. */
+export type TableSelectionMode = 'single' | 'multiple' | 'none';
+/** Per-column pixel widths, keyed by a header cell's `column-key` (or its `sort-key`). */
+export type TableColumnWidths = Record<string, number>;

package/dist/table/types.d.ts

@@ -0,0 +1,26 @@
+/** Direction a {@link import('./Table.js').SkdxTable} column is sorted in: ascending or descending. */
+export type SortDirection = 'asc' | 'desc';
+/** The currently sorted column and its direction. */
+export interface TableSortState {
+    columnKey: string;
+    direction: SortDirection;
+}
+/**
+ * A whole table's sort state: one column (single sort, the default), an ordered
+ * list of columns (`multi-sort`, most significant first), or nothing sorted.
+ *
+ * Single-sort tables are given and handed back the bare object — the array form
+ * only appears once `multi-sort` is on, so existing single-sort code is unaffected.
+ */
+export type TableSort = TableSortState | TableSortState[] | null;
+/**
+ * Which rows an `<skdx-table-select-all-checkbox>` covers: only the ids it was
+ * handed (`'page'`) or the entire dataset (`'all'`). There is no default — the
+ * two behave identically until the table is paginated or virtualized, at which
+ * point picking the wrong one is a bug found in production.
+ */
+export type TableSelectAllScope = 'page' | 'all';
+/** How many rows a table allows selected at once: one, many, or no selection. */
+export type TableSelectionMode = 'single' | 'multiple' | 'none';
+/** Per-column pixel widths, keyed by a header cell's `column-key` (or its `sort-key`). */
+export type TableColumnWidths = Record<string, number>;

package/dist/tabs/Tabs.cjs

@@ -0,0 +1,5 @@
+"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var m=(n,t)=>{for(var e in t)d(n,e,{get:t[e],enumerable:!0})},T=(n,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of p(t))!v.call(n,r)&&r!==e&&d(n,r,{get:()=>t[r],enumerable:!(i=h(t,r))||i.enumerable});return n};var _=n=>T(d({},"__esModule",{value:!0}),n),s=(n,t,e,i)=>{for(var r=i>1?void 0:i?h(t,e):t,u=n.length-1,g;u>=0;u--)(g=n[u])&&(r=(i?g(t,e,r):g(r))||r);return i&&r&&d(t,e,r),r};var y={};m(y,{SkdxTabs:()=>a});module.exports=_(y);var l=require("lit"),o=require("lit/decorators.js"),f=require("../internal/define.cjs"),c=require("../internal/ids.cjs"),b=require("../internal/part.cjs");var a=class extends l.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.activationMode="automatic";this.baseId=(0,c.nextId)("skdx-tabs");this._triggers=[];this._panels=new Set}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue)}getSelectedValue(){return this.value!==void 0?this.value:this._uncontrolledValue}getFirstEnabledValue(){return this._triggers.find(e=>!e.disabled)?.el.value??null}setValue(e){this.getSelectedValue()!==e&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this._refreshDescendants())}registerTrigger(e,i){this._triggers.push({el:e,disabled:i})}unregisterTrigger(e){let i=this._triggers.findIndex(r=>r.el===e);i!==-1&&this._triggers.splice(i,1)}registerContent(e){this._panels.add(e)}unregisterContent(e){this._panels.delete(e)}_refreshDescendants(){for(let{el:e}of this._triggers)e.refresh();for(let e of this._panels)e.refresh()}updated(e){e.has("value")&&this._refreshDescendants(),(0,b.reflectHostState)(this,{"data-orientation":this.orientation})}render(){return l.html`<slot></slot>`}};a.styles=l.css`
+    :host {
+      display: block;
+    }
+  `,s([(0,o.property)({type:String})],a.prototype,"value",2),s([(0,o.property)({type:String,attribute:"default-value"})],a.prototype,"defaultValue",2),s([(0,o.property)({type:String,reflect:!0})],a.prototype,"orientation",2),s([(0,o.property)({type:String,attribute:"activation-mode"})],a.prototype,"activationMode",2),s([(0,o.state)()],a.prototype,"_uncontrolledValue",2),a=s([(0,f.customElement)("skdx-tabs","tabs","root")],a);0&&(module.exports={SkdxTabs});

package/dist/tabs/Tabs.d.cts

@@ -0,0 +1,90 @@
+import { LitElement } from 'lit';
+import type { SkdxTabsContent } from './TabsContent.cjs';
+import type { SkdxTabsTrigger } from './TabsTrigger.cjs';
+/** A registered trigger or panel that can be told to re-sync its own host attributes. */
+export interface RefreshableTab {
+    refresh(): void;
+}
+/**
+ * `<skdx-tabs>` — the Web Components implementation of the shared Tabs
+ * contract (see `@skdx/shared`'s `tabsContract`). Owns the selected value;
+ * `<skdx-tabs-list>`, `<skdx-tabs-trigger>`, and `<skdx-tabs-content>` look it
+ * up via `this.closest('skdx-tabs')` (there is no cross-shadow-root context
+ * mechanism in Web Components) and call its public methods directly. Role
+ * and ARIA relationships live on the trigger/content **host** elements
+ * rather than inside their shadow roots, since an IDREF like
+ * `aria-controls` can't cross a shadow boundary — the same constraint noted
+ * on `<skdx-alert>`.
+ *
+ * @example
+ * ```html
+ * <skdx-tabs default-value="account">
+ *   <skdx-tabs-list aria-label="Manage account">
+ *     <skdx-tabs-trigger value="account">Account</skdx-tabs-trigger>
+ *     <skdx-tabs-trigger value="password">Password</skdx-tabs-trigger>
+ *   </skdx-tabs-list>
+ *   <skdx-tabs-content value="account">Account settings…</skdx-tabs-content>
+ *   <skdx-tabs-content value="password">Password settings…</skdx-tabs-content>
+ * </skdx-tabs>
+ * ```
+ *
+ * @fires value-change - Fired with the `value` of the tab that is now selected.
+ */
+export declare class SkdxTabs extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Selected tab's value, for controlled usage. Listen for `value-change`.
+     * @default undefined — uncontrolled, tracks its own selected value internally.
+     */
+    value?: string;
+    /**
+     * Initially selected tab's value, for uncontrolled usage.
+     * @default undefined — falls back to the first enabled trigger.
+     */
+    defaultValue?: string;
+    /**
+     * Layout axis; picks Arrow Left/Right vs Arrow Up/Down for keyboard
+     * navigation between triggers.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * `'automatic'` selects a tab as soon as it receives focus. `'manual'`
+     * only selects on Enter/Space.
+     * @default 'automatic'
+     */
+    activationMode: 'automatic' | 'manual';
+    readonly baseId: string;
+    private _uncontrolledValue?;
+    private readonly _triggers;
+    private readonly _panels;
+    connectedCallback(): void;
+    /** The currently selected value, resolving controlled vs. uncontrolled. */
+    getSelectedValue(): string | undefined;
+    /**
+     * The earliest-registered, non-disabled trigger's value — the fallback tab stop while nothing is selected.
+     *
+     * A call the group's item elements make on their root to work out which one owns the roving tab stop, not consumer API. It stays `public` to the compiler because the items are instances of a different class, which `protected` cannot express.
+     *
+     * @internal
+     */
+    getFirstEnabledValue(): string | null;
+    /** Selects `value`, updating internal state (if uncontrolled) and firing `value-change`. The tab already selected is a no-op. */
+    setValue(value: string): void;
+    /** @internal Called by a mounting `<skdx-tabs-trigger>`. */
+    registerTrigger(el: SkdxTabsTrigger & RefreshableTab, disabled: boolean): void;
+    /** @internal Called by an unmounting `<skdx-tabs-trigger>`. */
+    unregisterTrigger(el: SkdxTabsTrigger & RefreshableTab): void;
+    /** @internal Called by a mounting `<skdx-tabs-content>`. */
+    registerContent(el: SkdxTabsContent & RefreshableTab): void;
+    /** @internal Called by an unmounting `<skdx-tabs-content>`. */
+    unregisterContent(el: SkdxTabsContent & RefreshableTab): void;
+    private _refreshDescendants;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tabs': SkdxTabs;
+    }
+}

package/dist/tabs/Tabs.d.ts

@@ -0,0 +1,90 @@
+import { LitElement } from 'lit';
+import type { SkdxTabsContent } from './TabsContent.js';
+import type { SkdxTabsTrigger } from './TabsTrigger.js';
+/** A registered trigger or panel that can be told to re-sync its own host attributes. */
+export interface RefreshableTab {
+    refresh(): void;
+}
+/**
+ * `<skdx-tabs>` — the Web Components implementation of the shared Tabs
+ * contract (see `@skdx/shared`'s `tabsContract`). Owns the selected value;
+ * `<skdx-tabs-list>`, `<skdx-tabs-trigger>`, and `<skdx-tabs-content>` look it
+ * up via `this.closest('skdx-tabs')` (there is no cross-shadow-root context
+ * mechanism in Web Components) and call its public methods directly. Role
+ * and ARIA relationships live on the trigger/content **host** elements
+ * rather than inside their shadow roots, since an IDREF like
+ * `aria-controls` can't cross a shadow boundary — the same constraint noted
+ * on `<skdx-alert>`.
+ *
+ * @example
+ * ```html
+ * <skdx-tabs default-value="account">
+ *   <skdx-tabs-list aria-label="Manage account">
+ *     <skdx-tabs-trigger value="account">Account</skdx-tabs-trigger>
+ *     <skdx-tabs-trigger value="password">Password</skdx-tabs-trigger>
+ *   </skdx-tabs-list>
+ *   <skdx-tabs-content value="account">Account settings…</skdx-tabs-content>
+ *   <skdx-tabs-content value="password">Password settings…</skdx-tabs-content>
+ * </skdx-tabs>
+ * ```
+ *
+ * @fires value-change - Fired with the `value` of the tab that is now selected.
+ */
+export declare class SkdxTabs extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Selected tab's value, for controlled usage. Listen for `value-change`.
+     * @default undefined — uncontrolled, tracks its own selected value internally.
+     */
+    value?: string;
+    /**
+     * Initially selected tab's value, for uncontrolled usage.
+     * @default undefined — falls back to the first enabled trigger.
+     */
+    defaultValue?: string;
+    /**
+     * Layout axis; picks Arrow Left/Right vs Arrow Up/Down for keyboard
+     * navigation between triggers.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * `'automatic'` selects a tab as soon as it receives focus. `'manual'`
+     * only selects on Enter/Space.
+     * @default 'automatic'
+     */
+    activationMode: 'automatic' | 'manual';
+    readonly baseId: string;
+    private _uncontrolledValue?;
+    private readonly _triggers;
+    private readonly _panels;
+    connectedCallback(): void;
+    /** The currently selected value, resolving controlled vs. uncontrolled. */
+    getSelectedValue(): string | undefined;
+    /**
+     * The earliest-registered, non-disabled trigger's value — the fallback tab stop while nothing is selected.
+     *
+     * A call the group's item elements make on their root to work out which one owns the roving tab stop, not consumer API. It stays `public` to the compiler because the items are instances of a different class, which `protected` cannot express.
+     *
+     * @internal
+     */
+    getFirstEnabledValue(): string | null;
+    /** Selects `value`, updating internal state (if uncontrolled) and firing `value-change`. The tab already selected is a no-op. */
+    setValue(value: string): void;
+    /** @internal Called by a mounting `<skdx-tabs-trigger>`. */
+    registerTrigger(el: SkdxTabsTrigger & RefreshableTab, disabled: boolean): void;
+    /** @internal Called by an unmounting `<skdx-tabs-trigger>`. */
+    unregisterTrigger(el: SkdxTabsTrigger & RefreshableTab): void;
+    /** @internal Called by a mounting `<skdx-tabs-content>`. */
+    registerContent(el: SkdxTabsContent & RefreshableTab): void;
+    /** @internal Called by an unmounting `<skdx-tabs-content>`. */
+    unregisterContent(el: SkdxTabsContent & RefreshableTab): void;
+    private _refreshDescendants;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tabs': SkdxTabs;
+    }
+}

package/dist/tabs/Tabs.js

@@ -0,0 +1,5 @@
+var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=(o,a,e,r)=>{for(var i=r>1?void 0:r?g(a,e):a,l=o.length-1,d;l>=0;l--)(d=o[l])&&(i=(r?d(a,e,i):d(i))||i);return r&&i&&u(a,e,i),i};import{css as h,html as f,LitElement as c}from"lit";import{property as s,state as b}from"lit/decorators.js";import{customElement as p}from"../internal/define.js";import{nextId as v}from"../internal/ids.js";import{reflectHostState as m}from"../internal/part.js";var t=class extends c{constructor(){super(...arguments);this.orientation="horizontal";this.activationMode="automatic";this.baseId=v("skdx-tabs");this._triggers=[];this._panels=new Set}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue)}getSelectedValue(){return this.value!==void 0?this.value:this._uncontrolledValue}getFirstEnabledValue(){return this._triggers.find(e=>!e.disabled)?.el.value??null}setValue(e){this.getSelectedValue()!==e&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this._refreshDescendants())}registerTrigger(e,r){this._triggers.push({el:e,disabled:r})}unregisterTrigger(e){let r=this._triggers.findIndex(i=>i.el===e);r!==-1&&this._triggers.splice(r,1)}registerContent(e){this._panels.add(e)}unregisterContent(e){this._panels.delete(e)}_refreshDescendants(){for(let{el:e}of this._triggers)e.refresh();for(let e of this._panels)e.refresh()}updated(e){e.has("value")&&this._refreshDescendants(),m(this,{"data-orientation":this.orientation})}render(){return f`<slot></slot>`}};t.styles=h`
+    :host {
+      display: block;
+    }
+  `,n([s({type:String})],t.prototype,"value",2),n([s({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),n([s({type:String,reflect:!0})],t.prototype,"orientation",2),n([s({type:String,attribute:"activation-mode"})],t.prototype,"activationMode",2),n([b()],t.prototype,"_uncontrolledValue",2),t=n([p("skdx-tabs","tabs","root")],t);export{t as SkdxTabs};

package/dist/tabs/TabsContent.cjs

@@ -0,0 +1,8 @@
+"use strict";var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var y=(i,e)=>{for(var s in e)d(i,s,{get:e[s],enumerable:!0})},f=(i,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!p.call(i,t)&&t!==s&&d(i,t,{get:()=>e[t],enumerable:!(r=b(e,t))||r.enumerable});return i};var g=i=>f(d({},"__esModule",{value:!0}),i),h=(i,e,s,r)=>{for(var t=r>1?void 0:r?b(e,s):e,l=i.length-1,c;l>=0;l--)(c=i[l])&&(t=(r?c(e,s,t):c(t))||t);return r&&t&&d(e,s,t),t};var k={};y(k,{SkdxTabsContent:()=>o});module.exports=g(k);var a=require("lit"),u=require("lit/decorators.js"),v=require("../internal/define.cjs"),n=require("./ids.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.value=""}connectedCallback(){super.connectedCallback(),this.closest("skdx-tabs")?.registerContent(this),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0"),this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-tabs")?.unregisterContent(this)}refresh(){this._sync()}_sync(){let s=this.closest("skdx-tabs"),r=s?.baseId??"",t=s?.getSelectedValue()===this.value;this.id||(this.id=(0,n.makeContentId)(r,this.value)),this.setAttribute("aria-labelledby",(0,n.makeTriggerId)(r,this.value)),this.setAttribute("data-state",t?"active":"inactive"),this.setAttribute("data-orientation",s?.orientation??"horizontal"),t?this.removeAttribute("hidden"):this.setAttribute("hidden","")}updated(){this._sync()}render(){return a.html`<slot></slot>`}};o.styles=a.css`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,h([(0,u.property)({type:String,reflect:!0})],o.prototype,"value",2),o=h([(0,v.customElement)("skdx-tabs-content","tabs","content")],o);0&&(module.exports={SkdxTabsContent});

package/dist/tabs/TabsContent.d.cts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tabs-content>` — panel shown when its `value` matches the parent
+ * `<skdx-tabs>`' selected value. Sets `role="tabpanel"` on itself (see
+ * `<skdx-tabs-trigger>`'s docs for why ARIA/id live on the host rather than
+ * shadow DOM) and is a focusable landmark (`tabindex="0"`) so keyboard
+ * users can tab from the trigger straight into the panel's content. Unlike
+ * a JS framework's conditional rendering, a `<skdx-tabs-content>` written in
+ * markup is never unmounted by this element — it is always present in the
+ * DOM and only ever toggled via the `hidden` attribute.
+ *
+ * @example
+ * ```html
+ * <skdx-tabs-content value="password">
+ *   <form>…</form>
+ * </skdx-tabs-content>
+ * ```
+ */
+export declare class SkdxTabsContent extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Unique identifier matched against the `<skdx-tabs-trigger>` that reveals this panel. */
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-tabs>` whenever the selected value changes. */
+    refresh(): void;
+    private _sync;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tabs-content': SkdxTabsContent;
+    }
+}

package/dist/tabs/TabsContent.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tabs-content>` — panel shown when its `value` matches the parent
+ * `<skdx-tabs>`' selected value. Sets `role="tabpanel"` on itself (see
+ * `<skdx-tabs-trigger>`'s docs for why ARIA/id live on the host rather than
+ * shadow DOM) and is a focusable landmark (`tabindex="0"`) so keyboard
+ * users can tab from the trigger straight into the panel's content. Unlike
+ * a JS framework's conditional rendering, a `<skdx-tabs-content>` written in
+ * markup is never unmounted by this element — it is always present in the
+ * DOM and only ever toggled via the `hidden` attribute.
+ *
+ * @example
+ * ```html
+ * <skdx-tabs-content value="password">
+ *   <form>…</form>
+ * </skdx-tabs-content>
+ * ```
+ */
+export declare class SkdxTabsContent extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Unique identifier matched against the `<skdx-tabs-trigger>` that reveals this panel. */
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-tabs>` whenever the selected value changes. */
+    refresh(): void;
+    private _sync;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tabs-content': SkdxTabsContent;
+    }
+}

package/dist/tabs/TabsContent.js

@@ -0,0 +1,8 @@
+var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(o,r,e,s)=>{for(var t=s>1?void 0:s?c(r,e):r,a=o.length-1,d;a>=0;a--)(d=o[a])&&(t=(s?d(r,e,t):d(t))||t);return s&&t&&l(r,e,t),t};import{css as h,html as b,LitElement as u}from"lit";import{property as v}from"lit/decorators.js";import{customElement as m}from"../internal/define.js";import{makeContentId as p,makeTriggerId as y}from"./ids.js";var i=class extends u{constructor(){super(...arguments);this.value=""}connectedCallback(){super.connectedCallback(),this.closest("skdx-tabs")?.registerContent(this),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0"),this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-tabs")?.unregisterContent(this)}refresh(){this._sync()}_sync(){let e=this.closest("skdx-tabs"),s=e?.baseId??"",t=e?.getSelectedValue()===this.value;this.id||(this.id=p(s,this.value)),this.setAttribute("aria-labelledby",y(s,this.value)),this.setAttribute("data-state",t?"active":"inactive"),this.setAttribute("data-orientation",e?.orientation??"horizontal"),t?this.removeAttribute("hidden"):this.setAttribute("hidden","")}updated(){this._sync()}render(){return b`<slot></slot>`}};i.styles=h`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,n([v({type:String,reflect:!0})],i.prototype,"value",2),i=n([m("skdx-tabs-content","tabs","content")],i);export{i as SkdxTabsContent};

package/dist/tabs/TabsList.cjs

@@ -0,0 +1,5 @@
+"use strict";var h=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var k=(i,t)=>{for(var n in t)h(i,n,{get:t[n],enumerable:!0})},g=(i,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of A(t))!E.call(i,e)&&e!==n&&h(i,e,{get:()=>t[e],enumerable:!(o=f(t,e))||o.enumerable});return i};var x=i=>g(h({},"__esModule",{value:!0}),i),m=(i,t,n,o)=>{for(var e=o>1?void 0:o?f(t,n):t,l=i.length-1,d;l>=0;l--)(d=i[l])&&(e=(o?d(t,n,e):d(e))||e);return o&&e&&h(t,n,e),e};var K={};k(K,{SkdxTabsList:()=>s});module.exports=x(K);var a=require("lit"),p=require("lit/decorators.js"),u=require("../internal/define.cjs"),v=require("../internal/direction.cjs"),y=require("../internal/positioning.cjs");var s=class extends a.LitElement{constructor(){super(...arguments);this.loop=!0;this._handleKeydown=n=>{let o=Array.from(this.querySelectorAll('[role="tab"]')).filter(w=>!w.hasAttribute("disabled"));if(o.length===0)return;let e=o.indexOf(document.activeElement),l=(this.closest("skdx-tabs")?.orientation??"horizontal")==="vertical",d=l?["ArrowDown"]:["ArrowRight"],b=l?["ArrowUp"]:["ArrowLeft"],c=(0,v.directionalKey)(n.key,this),r;d.includes(c)?(r=e+1,r>=o.length&&(r=this.loop?0:o.length-1)):b.includes(c)?(r=e-1,r<0&&(r=this.loop?o.length-1:0)):c==="Home"?r=0:c==="End"&&(r=o.length-1),r!==void 0&&(n.preventDefault(),o[r]?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tablist"),this._syncOrientation(),this.addEventListener("keydown",this._handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeydown)}_syncOrientation(){let n=this.closest("skdx-tabs")?.orientation??"horizontal";this.setAttribute("aria-orientation",n),this.setAttribute("data-orientation",n)}render(){return a.html`<slot></slot>`}};s.styles=a.css`
+    :host {
+      display: block;
+    }
+  `,m([(0,p.property)({converter:y.optOutBoolean})],s.prototype,"loop",2),s=m([(0,u.customElement)("skdx-tabs-list","tabs","list")],s);0&&(module.exports={SkdxTabsList});

package/dist/tabs/TabsList.d.cts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tabs-list>` — container for a `<skdx-tabs>`' triggers. Sets
+ * `role="tablist"` on itself and drives roving-focus keyboard navigation
+ * (Arrow Left/Right for horizontal, Arrow Up/Down for vertical, plus
+ * Home/End) across its `<skdx-tabs-trigger>` children, which it reaches via
+ * `this.querySelectorAll` in the light DOM (they're slotted, not nested in
+ * this element's own shadow root).
+ *
+ * @example
+ * ```html
+ * <skdx-tabs-list aria-label="Manage account">
+ *   <skdx-tabs-trigger value="account">Account</skdx-tabs-trigger>
+ *   <skdx-tabs-trigger value="password">Password</skdx-tabs-trigger>
+ * </skdx-tabs-list>
+ * ```
+ */
+export declare class SkdxTabsList extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether arrow-key navigation wraps from the last trigger back to the
+     * first (and vice versa).
+     * @default true
+     */
+    loop: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _syncOrientation;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tabs-list': SkdxTabsList;
+    }
+}