@skdx/web-components 0.27.0 → 0.29.0

package/dist/tabs/Tabs.d.ts

@@ -1,34 +1,51 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import type { SkdxTabsContent } from './TabsContent.js';
 import type { SkdxTabsTrigger } from './TabsTrigger.js';
+/** One tab of a derived `<skdx-tabs>`: the whole of what `items` takes. */
+export interface SkdxTabsItemDescriptor {
+    /** Identifier matched against the root's selected value. */
+    value: string;
+    /** The trigger's text. */
+    label: string;
+    /** The panel's text. Omit it and supply `renderPanel` instead for markup. */
+    content?: string;
+    /** Whether this tab cannot be selected. @default false */
+    disabled?: boolean;
+}
 /** A registered trigger or panel that can be told to re-sync its own host attributes. */
 export interface RefreshableTab {
     refresh(): void;
 }
+/** Why the selected tab changed. */
+export type TabsChangeReason = 'keyboard' | 'pointer' | 'programmatic';
+/** Detail the `value-change` event carries: the new `value`, the `previousValue`, and the `reason` it changed. */
+export interface TabsValueChangeDetail {
+    /** The tab that is now selected. */
+    value: string;
+    /** The tab selected before this change, or `null` when nothing was. */
+    previousValue: string | null;
+    /**
+     * What drove the change: `'pointer'` for click / tap, `'keyboard'` for Enter / Space / arrow keys / Home / End,
+     * `'programmatic'` when the page called `setValue()`.
+     */
+    reason: TabsChangeReason;
+}
 /**
- * `<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>`.
+ * Owns the selected tab value, found by descendant parts via `closest()`; derives triggers and panels from `items`, with `renderPanel` to customize their content.
  *
  * @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>
+ * <skdx-tabs default-value="account" aria-label="Manage account"></skdx-tabs>
+ * ```
+ * ```ts
+ * tabs.items = [
+ *   { value: 'account', label: 'Account', content: 'Account settings…' },
+ *   { value: 'password', label: 'Password', content: 'Password settings…' },
+ * ];
  * ```
  *
- * @fires value-change - Fired with the `value` of the tab that is now selected.
+ * @fires value-change - Fired when the selected tab changes, with {@link TabsValueChangeDetail}.
+ * Re-selecting the current tab fires nothing.
  */
 export declare class SkdxTabs extends LitElement {
     static styles: import("lit").CSSResult;
@@ -37,6 +54,16 @@ export declare class SkdxTabs extends LitElement {
      * @default undefined — uncontrolled, tracks its own selected value internally.
      */
     value?: string;
+    /**
+     * Tabs in order; one Trigger and one Content per entry (property only).
+     * @default undefined — nothing is derived, and hand-composed children stand.
+     */
+    items?: readonly SkdxTabsItemDescriptor[];
+    /**
+     * Renders each tab's panel body (property only, replaces `content` string).
+     * @default undefined — the entry's `content` is rendered as text.
+     */
+    renderPanel?: (item: SkdxTabsItemDescriptor) => unknown;
     /**
      * Initially selected tab's value, for uncontrolled usage.
      * @default undefined — falls back to the first enabled trigger.
@@ -54,34 +81,46 @@ export declare class SkdxTabs extends LitElement {
      * @default 'automatic'
      */
     activationMode: 'automatic' | 'manual';
+    /**
+     * Whether arrow-key navigation wraps (last → first). Forwarded to derived List.
+     * @default true
+     */
+    loop: boolean;
+    /**
+     * Disables every trigger in the tabbed interface. OR-ed with each
+     * `<skdx-tabs-trigger>`'s own `disabled`, never overridden.
+     * @default false
+     */
+    disabled: boolean;
+    /** @internal Id stem the tab and panel parts derive their own ids from. */
     readonly baseId: string;
+    /** @internal Whether the current focus dispatch came from `<skdx-tabs-list>`'s Arrow / Home / End handling. */
+    arrowNavigating: boolean;
     private _uncontrolledValue?;
     private readonly _triggers;
     private readonly _panels;
     connectedCallback(): void;
+    private readonly fillAnatomy;
     /** 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
-     */
+    /** @internal Every registered trigger's value that is neither its own nor the root's `disabled`, in registration order. */
+    getEnabledTriggerValues(): string[];
+    /** @internal The earliest-registered, non-disabled trigger's value — the fallback tab stop while nothing is selected. */
     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;
+    /** Selects `value`, updating internal state (if uncontrolled) and firing `value-change`; the tab already selected is a no-op. */
+    setValue(value: string, reason?: TabsChangeReason): void;
     /** @internal Called by a mounting `<skdx-tabs-trigger>`. */
-    registerTrigger(el: SkdxTabsTrigger & RefreshableTab, disabled: boolean): void;
+    registerTrigger(el: SkdxTabsTrigger & RefreshableTab): 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;
+    /** @internal Re-syncs every list, trigger and panel this root owns. */
+    refreshDescendants(): void;
     protected updated(changed: Map<string, unknown>): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tabs/Tabs.js

@@ -1,5 +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`
+var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(l,n,e,a)=>{for(var r=a>1?void 0:a?f(n,e):n,o=l.length-1,d;o>=0;o--)(d=l[o])&&(r=(a?d(n,e,r):d(r))||r);return a&&r&&u(n,e,r),r};import{css as h,html as g,LitElement as p}from"lit";import{property as s,state as m}from"lit/decorators.js";import{hasAuthoredParts as c}from"../internal/authored.js";import{customElement as b}from"../internal/define.js";import{emit as v}from"../internal/events.js";import{nextId as T}from"../internal/ids.js";import{reflectHostState as y}from"../internal/part.js";import{optOutBoolean as V}from"../internal/positioning.js";import{fillTabsAnatomy as _,TABS_ANATOMY_GENERATED as x}from"./TabsAnatomy.js";var t=class extends p{constructor(){super(...arguments);this.orientation="horizontal";this.activationMode="automatic";this.loop=!0;this.disabled=!1;this.baseId=T("skdx-tabs");this.arrowNavigating=!1;this._triggers=[];this._panels=new Set;this.fillAnatomy=()=>{c(this,x)||_(this)}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),queueMicrotask(this.fillAnatomy)}getSelectedValue(){return this.value!==void 0?this.value:this._uncontrolledValue}getEnabledTriggerValues(){return this.disabled?[]:this._triggers.filter(({el:e})=>!e.disabled).map(({el:e})=>e.value)}getFirstEnabledValue(){return this.getEnabledTriggerValues()[0]??null}setValue(e,a="programmatic"){let r=this.getSelectedValue();r!==e&&(this.value===void 0&&(this._uncontrolledValue=e),v(this,"value-change",{value:e,previousValue:r??null,reason:a}),this.refreshDescendants())}registerTrigger(e){this._triggers.push({el:e})}unregisterTrigger(e){let a=this._triggers.findIndex(r=>r.el===e);a!==-1&&this._triggers.splice(a,1)}registerContent(e){this._panels.add(e)}unregisterContent(e){this._panels.delete(e)}refreshDescendants(){for(let e of this.querySelectorAll("skdx-tabs-list"))e.closest("skdx-tabs")===this&&e.refresh();for(let{el:e}of this._triggers)e.refresh();for(let e of this._panels)e.refresh()}updated(e){(e.has("items")||e.has("renderPanel")||e.has("loop"))&&this.fillAnatomy(),e.has("defaultValue")&&this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue,this.refreshDescendants()),(e.has("value")||e.has("disabled")||e.has("orientation"))&&this.refreshDescendants(),y(this,{"data-orientation":this.orientation,"data-disabled":this.disabled?"":null})}render(){return g`<slot @slotchange=${this.fillAnatomy}></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};
+  `,i([s({type:String})],t.prototype,"value",2),i([s({attribute:!1})],t.prototype,"items",2),i([s({attribute:!1})],t.prototype,"renderPanel",2),i([s({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([s({type:String,reflect:!0})],t.prototype,"orientation",2),i([s({type:String,attribute:"activation-mode"})],t.prototype,"activationMode",2),i([s({converter:V})],t.prototype,"loop",2),i([s({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([m()],t.prototype,"_uncontrolledValue",2),t=i([b("skdx-tabs","tabs","root")],t);export{t as SkdxTabs};

package/dist/tabs/TabsAnatomy.cjs

@@ -0,0 +1,23 @@
+"use strict";var d=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var p=(a,t)=>{for(var e in t)d(a,e,{get:t[e],enumerable:!0})},k=(a,t,e,b)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of i(t))!x.call(a,l)&&l!==e&&d(a,l,{get:()=>t[l],enumerable:!(b=n(t,l))||b.enumerable});return a};var o=a=>k(d({},"__esModule",{value:!0}),a);var m={};p(m,{TABS_ANATOMY_GENERATED:()=>g,fillTabsAnatomy:()=>$});module.exports=o(m);var s=require("lit"),r=require("lit/directives/repeat.js"),v=require("./TabsContent.cjs"),A=require("./TabsList.cjs"),T=require("./TabsTrigger.cjs"),g="data-skdx-tabs-generated";function $(a){let t=a.items??[];(0,s.render)(s.html`
+      <skdx-tabs-list
+        data-skdx-tabs-generated
+        .loop=${a.loop}
+        aria-label=${a.getAttribute("aria-label")??s.nothing}
+        aria-labelledby=${a.getAttribute("aria-labelledby")??s.nothing}
+      >
+        ${(0,r.repeat)(t,e=>e.value,e=>s.html`
+            <skdx-tabs-trigger
+              value=${e.value}
+              ?disabled=${e.disabled??!1}
+              >${e.label}</skdx-tabs-trigger
+            >
+          `)}
+      </skdx-tabs-list>
+      ${(0,r.repeat)(t,e=>e.value,e=>s.html`
+          <skdx-tabs-content
+            data-skdx-tabs-generated
+            value=${e.value}
+            >${a.renderPanel?a.renderPanel(e):e.content}</skdx-tabs-content
+          >
+        `)}
+    `,a,{host:a})}0&&(module.exports={TABS_ANATOMY_GENERATED,fillTabsAnatomy});

package/dist/tabs/TabsAnatomy.d.cts

@@ -0,0 +1,8 @@
+import type { SkdxTabs } from './Tabs.cjs';
+import './TabsContent.cjs';
+import './TabsList.cjs';
+import './TabsTrigger.cjs';
+/** @internal Marks a direct child of `<skdx-tabs>` this module generated. */
+export declare const TABS_ANATOMY_GENERATED = "data-skdx-tabs-generated";
+/** @internal Generates a TabsList with one Trigger per item and a Content panel each, moving the root's `aria-label`/`aria-labelledby` onto the List. */
+export declare function fillTabsAnatomy(root: SkdxTabs): void;

package/dist/tabs/TabsAnatomy.d.ts

@@ -0,0 +1,8 @@
+import type { SkdxTabs } from './Tabs.js';
+import './TabsContent.js';
+import './TabsList.js';
+import './TabsTrigger.js';
+/** @internal Marks a direct child of `<skdx-tabs>` this module generated. */
+export declare const TABS_ANATOMY_GENERATED = "data-skdx-tabs-generated";
+/** @internal Generates a TabsList with one Trigger per item and a Content panel each, moving the root's `aria-label`/`aria-labelledby` onto the List. */
+export declare function fillTabsAnatomy(root: SkdxTabs): void;

package/dist/tabs/TabsAnatomy.js

@@ -0,0 +1,23 @@
+import{html as t,render as r,nothing as l}from"lit";import{repeat as d}from"lit/directives/repeat.js";import"./TabsContent.js";import"./TabsList.js";import"./TabsTrigger.js";var k="data-skdx-tabs-generated";function o(e){let s=e.items??[];r(t`
+      <skdx-tabs-list
+        data-skdx-tabs-generated
+        .loop=${e.loop}
+        aria-label=${e.getAttribute("aria-label")??l}
+        aria-labelledby=${e.getAttribute("aria-labelledby")??l}
+      >
+        ${d(s,a=>a.value,a=>t`
+            <skdx-tabs-trigger
+              value=${a.value}
+              ?disabled=${a.disabled??!1}
+              >${a.label}</skdx-tabs-trigger
+            >
+          `)}
+      </skdx-tabs-list>
+      ${d(s,a=>a.value,a=>t`
+          <skdx-tabs-content
+            data-skdx-tabs-generated
+            value=${a.value}
+            >${e.renderPanel?e.renderPanel(a):a.content}</skdx-tabs-content
+          >
+        `)}
+    `,e,{host:e})}export{k as TABS_ANATOMY_GENERATED,o as fillTabsAnatomy};

package/dist/tabs/TabsContent.cjs

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

package/dist/tabs/TabsContent.d.cts

@@ -1,13 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } 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.
+ * Panel shown when `value` matches parent `<skdx-tabs>` selection. Sets `role="tabpanel"` on host, focusable (`tabindex="0"`) for keyboard users. Markup remains in DOM, toggled via `hidden` attribute.
  *
  * @example
  * ```html
@@ -18,7 +11,7 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxTabsContent extends LitElement {
     static styles: import("lit").CSSResult;
-    /** Unique identifier matched against the `<skdx-tabs-trigger>` that reveals this panel. */
+    /** Matched against trigger `value` to reveal this panel. */
     value: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -26,7 +19,7 @@ export declare class SkdxTabsContent extends LitElement {
     refresh(): void;
     private _sync;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tabs/TabsContent.d.ts

@@ -1,13 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } 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.
+ * Panel shown when `value` matches parent `<skdx-tabs>` selection. Sets `role="tabpanel"` on host, focusable (`tabindex="0"`) for keyboard users. Markup remains in DOM, toggled via `hidden` attribute.
  *
  * @example
  * ```html
@@ -18,7 +11,7 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxTabsContent extends LitElement {
     static styles: import("lit").CSSResult;
-    /** Unique identifier matched against the `<skdx-tabs-trigger>` that reveals this panel. */
+    /** Matched against trigger `value` to reveal this panel. */
     value: string;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -26,7 +19,7 @@ export declare class SkdxTabsContent extends LitElement {
     refresh(): void;
     private _sync;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tabs/TabsContent.js

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

package/dist/tabs/TabsList.cjs

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

package/dist/tabs/TabsList.d.cts

@@ -1,11 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } 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).
+ * Container for `<skdx-tabs>` triggers. Sets `role="tablist"`, handles roving-focus keyboard navigation (arrows, Home/End; Up/Down for vertical). Finds triggers via light DOM.
  *
  * @example
  * ```html
@@ -18,16 +13,18 @@ import { LitElement } from 'lit';
 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).
+     * Whether arrow-key navigation wraps to the first trigger after the last.
      * @default true
      */
     loop: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private _syncOrientation;
+    /** @internal Called by the parent `<skdx-tabs>` whenever its `orientation` changes. */
+    refresh(): void;
+    protected updated(): void;
+    private _focusItem;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tabs/TabsList.d.ts

@@ -1,11 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } 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).
+ * Container for `<skdx-tabs>` triggers. Sets `role="tablist"`, handles roving-focus keyboard navigation (arrows, Home/End; Up/Down for vertical). Finds triggers via light DOM.
  *
  * @example
  * ```html
@@ -18,16 +13,18 @@ import { LitElement } from 'lit';
 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).
+     * Whether arrow-key navigation wraps to the first trigger after the last.
      * @default true
      */
     loop: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private _syncOrientation;
+    /** @internal Called by the parent `<skdx-tabs>` whenever its `orientation` changes. */
+    refresh(): void;
+    protected updated(): void;
+    private _focusItem;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/tabs/TabsList.js

@@ -1,5 +1,5 @@
-var f=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var c=(d,s,n,e)=>{for(var t=e>1?void 0:e?p(s,n):s,i=d.length-1,l;i>=0;i--)(l=d[i])&&(t=(e?l(s,n,t):l(t))||t);return e&&t&&f(s,n,t),t};import{css as u,html as v,LitElement as y}from"lit";import{property as b}from"lit/decorators.js";import{customElement as w}from"../internal/define.js";import{directionalKey as A}from"../internal/direction.js";import{optOutBoolean as E}from"../internal/positioning.js";var r=class extends y{constructor(){super(...arguments);this.loop=!0;this._handleKeydown=n=>{let e=Array.from(this.querySelectorAll('[role="tab"]')).filter(m=>!m.hasAttribute("disabled"));if(e.length===0)return;let t=e.indexOf(document.activeElement),i=(this.closest("skdx-tabs")?.orientation??"horizontal")==="vertical",l=i?["ArrowDown"]:["ArrowRight"],h=i?["ArrowUp"]:["ArrowLeft"],a=A(n.key,this),o;l.includes(a)?(o=t+1,o>=e.length&&(o=this.loop?0:e.length-1)):h.includes(a)?(o=t-1,o<0&&(o=this.loop?e.length-1:0)):a==="Home"?o=0:a==="End"&&(o=e.length-1),o!==void 0&&(n.preventDefault(),e[o]?.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 v`<slot></slot>`}};r.styles=u`
+var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(i,s,e,t)=>{for(var r=t>1?void 0:t?m(s,e):s,l=i.length-1,n;l>=0;l--)(n=i[l])&&(r=(t?n(s,e,r):n(r))||r);return t&&r&&u(s,e,r),r};import{css as p,html as h,LitElement as b}from"lit";import{property as v}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{directionalKey as g}from"../internal/direction.js";import{optOutBoolean as w}from"../internal/positioning.js";import{enabledRovingItems as x}from"../internal/roving-tab-stop.js";function E(i,s,e,t,r){let l=t?"ArrowDown":"ArrowRight",n=t?"ArrowUp":"ArrowLeft";if(i===l){let o=s+1;return o>=e&&(o=r?0:e-1),o}if(i===n){let o=s-1;return o<0&&(o=r?e-1:0),o}if(i==="Home")return 0;if(i==="End")return e-1}var a=class extends b{constructor(){super(...arguments);this.loop=!0;this._handleKeydown=e=>{let t=x(this,'[role="tab"]');if(t.length===0)return;let r=null;e.target instanceof Element&&(r=e.target.closest('[role="tab"]'));let l=t.indexOf(r),n=this.closest("skdx-tabs"),o=n!==null&&n.orientation==="vertical",f=g(e.key,this),c=E(f,l,t.length,o,this.loop);c!==void 0&&(e.preventDefault(),this._focusItem(t[c],n))}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tablist"),this.refresh(),this.addEventListener("keydown",this._handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeydown)}refresh(){let e=this.closest("skdx-tabs")?.orientation??"horizontal";this.setAttribute("aria-orientation",e),this.setAttribute("data-orientation",e)}updated(){this.refresh()}_focusItem(e,t){t&&(t.arrowNavigating=!0);try{e?.focus()}finally{t&&(t.arrowNavigating=!1)}e?.scrollIntoView?.({block:"nearest",inline:"nearest"})}render(){return h`<slot></slot>`}};a.styles=p`
     :host {
       display: block;
     }
-  `,c([b({converter:E})],r.prototype,"loop",2),r=c([w("skdx-tabs-list","tabs","list")],r);export{r as SkdxTabsList};
+  `,d([v({converter:w})],a.prototype,"loop",2),a=d([y("skdx-tabs-list","tabs","list")],a);export{a as SkdxTabsList};

package/dist/tabs/TabsTrigger.cjs

@@ -1,9 +1,9 @@
-"use strict";var n=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var f=(i,s)=>{for(var t in s)n(i,t,{get:s[t],enumerable:!0})},k=(i,s,t,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let e of m(s))!p.call(i,e)&&e!==t&&n(i,e,{get:()=>s[e],enumerable:!(a=b(s,e))||a.enumerable});return i};var y=i=>k(n({},"__esModule",{value:!0}),i),h=(i,s,t,a)=>{for(var e=a>1?void 0:a?b(s,t):s,l=i.length-1,o;l>=0;l--)(o=i[l])&&(e=(a?o(s,t,e):o(e))||e);return a&&e&&n(s,t,e),e};var g={};f(g,{SkdxTabsTrigger:()=>d});module.exports=y(g);var r=require("lit"),u=require("lit/decorators.js"),v=require("../internal/define.cjs"),c=require("./ids.cjs");var d=class extends r.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this._handleClick=()=>{this.disabled||this.closest("skdx-tabs")?.setValue(this.value)};this._handleFocus=()=>{let t=this.closest("skdx-tabs");!t||this.disabled||t.activationMode==="automatic"&&t.getSelectedValue()!==this.value&&t.setValue(this.value)};this._handleKeydown=t=>{(t.key===" "||t.key==="Enter")&&!this.disabled&&(t.preventDefault(),this.closest("skdx-tabs")?.setValue(this.value))}}connectedCallback(){super.connectedCallback(),this.closest("skdx-tabs")?.registerTrigger(this,this.disabled),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){super.disconnectedCallback(),this.closest("skdx-tabs")?.unregisterTrigger(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown)}refresh(){this._sync()}_sync(){let t=this.closest("skdx-tabs"),a=t?.baseId??"",e=t?.getSelectedValue()===this.value;this.id||(this.id=(0,c.makeTriggerId)(a,this.value)),this.setAttribute("role","tab"),this.setAttribute("aria-selected",String(e)),this.setAttribute("aria-controls",(0,c.makeContentId)(a,this.value)),this.setAttribute("data-state",e?"active":"inactive"),this.disabled?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled")),this.setAttribute("data-orientation",t?.orientation??"horizontal"),this.setAttribute("data-value",this.value);let l=t?.getSelectedValue()===void 0&&t?.getFirstEnabledValue()===this.value,o=this.disabled?-1:e||l?0:-1;this.setAttribute("tabindex",String(o))}updated(){this._sync()}render(){return r.html`<slot></slot>`}};d.styles=r.css`
+"use strict";var o=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var I=(r,s)=>{for(var e in s)o(r,e,{get:s[e],enumerable:!0})},x=(r,s,e,i)=>{if(s&&typeof s=="object"||typeof s=="function")for(let t of E(s))!A.call(r,t)&&t!==e&&o(r,t,{get:()=>s[t],enumerable:!(i=_(s,t))||i.enumerable});return r};var D=r=>x(o({},"__esModule",{value:!0}),r),c=(r,s,e,i)=>{for(var t=i>1?void 0:i?_(s,e):s,a=r.length-1,n;a>=0;a--)(n=r[a])&&(t=(i?n(s,e,t):n(t))||t);return i&&t&&o(s,e,t),t};var L={};I(L,{SkdxTabsTrigger:()=>l});module.exports=D(L);var d=require("lit"),p=require("lit/decorators.js"),k=require("../internal/button-host.cjs"),h=require("../internal/define.cjs"),u=require("../internal/roving-tab-stop.cjs"),b=require("./ids.cjs");var l=class extends(0,k.ButtonHost)(d.LitElement){constructor(){super(...arguments);this.value="";this.disabled=!1;this._pointerPressed=!1;this._handlePointerdown=e=>{if(this._isDisabled){e.preventDefault();return}this._pointerPressed=!0};this._handleBlur=()=>{this._pointerPressed=!1};this._handleClick=e=>{this._isDisabled||this.closest("skdx-tabs")?.setValue(this.value,e.detail===0?"keyboard":"pointer")};this._handleFocus=()=>{let e=this.closest("skdx-tabs");if(!e||this._isDisabled)return;let i=this._pointerPressed||e.arrowNavigating;e.activationMode==="automatic"&&i&&e.getSelectedValue()!==this.value&&e.setValue(this.value,this._pointerPressed?"pointer":"keyboard")}}get _isDisabled(){return this.disabled||(this.closest("skdx-tabs")?.disabled??!1)}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerdown",this._handlePointerdown),this.addEventListener("blur",this._handleBlur),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus);let e=this.closest("skdx-tabs");e?(0,h.whenUpgraded)(e,()=>{e.registerTrigger(this),e.refreshDescendants()}):this._sync()}disconnectedCallback(){super.disconnectedCallback();let e=this.closest("skdx-tabs");e?.unregisterTrigger(this),e?.refreshDescendants(),this.removeEventListener("pointerdown",this._handlePointerdown),this.removeEventListener("blur",this._handleBlur),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus)}refresh(){this._sync()}_rootFacts(e){if(!e)return{baseId:"",selected:!1,orientation:"horizontal",panelId:null,enabled:[],selectedValue:void 0};let i=e.getSelectedValue(),t=Array.from(e.querySelectorAll("skdx-tabs-content")).find(n=>n.value===this.value),a=null;return t&&(a=t.id||(0,b.makeContentId)(e.baseId,this.value)),{baseId:e.baseId,selected:i===this.value,orientation:e.orientation,panelId:a,enabled:e.getEnabledTriggerValues(),selectedValue:i}}_sync(){let e=null;customElements.get("skdx-tabs")&&(e=this.closest("skdx-tabs"));let{baseId:i,selected:t,orientation:a,panelId:n,enabled:f,selectedValue:v}=this._rootFacts(e),m=this._isDisabled;this.id||(this.id=(0,b.makeTriggerId)(i,this.value)),this.setAttribute("role","tab"),this.setAttribute("aria-selected",String(t)),n?this.setAttribute("aria-controls",n):this.removeAttribute("aria-controls"),this.setAttribute("data-state",t?"active":"inactive"),m?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.setAttribute("data-orientation",a),this.setAttribute("data-value",this.value);let g=[];v!==void 0&&f.includes(v)&&(g=[v]);let y=(0,u.resolveTabStopId)(f,g,null);this.setAttribute("tabindex",String((0,u.rovingTabIndex)(e!==null,y===this.value,m))),this.syncButtonHost()}syncButtonHost(){this._isDisabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}updated(e){e.has("disabled")?this.closest("skdx-tabs")?.refreshDescendants():this._sync()}render(){return d.html`<slot></slot>`}};l.styles=d.css`
     :host {
       display: inline-block;
       cursor: pointer;
     }
-    :host([disabled]) {
+    :host([data-disabled]) {
       cursor: default;
     }
-  `,h([(0,u.property)({type:String,reflect:!0})],d.prototype,"value",2),h([(0,u.property)({type:Boolean,reflect:!0})],d.prototype,"disabled",2),d=h([(0,v.customElement)("skdx-tabs-trigger","tabs","trigger")],d);0&&(module.exports={SkdxTabsTrigger});
+  `,c([(0,p.property)({type:String,reflect:!0})],l.prototype,"value",2),c([(0,p.property)({type:Boolean,reflect:!0})],l.prototype,"disabled",2),l=c([(0,h.customElement)("skdx-tabs-trigger","tabs","trigger")],l);0&&(module.exports={SkdxTabsTrigger});

package/dist/tabs/TabsTrigger.d.cts

@@ -1,45 +1,44 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+declare const SkdxTabsTrigger_base: typeof LitElement & (new (...args: any[]) => import("../internal/button-host.cjs").SkdxButtonHost);
 /**
- * `<skdx-tabs-trigger>` — a single tab button. Sets `role="tab"` with
- * `aria-selected` and `data-state="active" | "inactive"` for styling on
- * **itself** (the host), rather than a shadow-internal `<button>`, since
- * `aria-controls`/`id` need to be resolvable as light-DOM IDREFs shared
- * with a sibling `<skdx-tabs-content>` — an IDREF can't cross a shadow
- * boundary. Selecting it (click, or focus when the parent's
- * `activation-mode` is `"automatic"`) updates the parent `<skdx-tabs>`'
- * value.
- *
- * Because the host *is* the tab, a disabled trigger reports
- * `aria-disabled="true"`: a custom element never matches `:disabled`, so the
- * native attribute the other four frameworks rely on has no effect here.
- *
+ * `<skdx-tabs-trigger>` — single tab button. `role="tab"` with `aria-selected` and `data-state` on host.
+ * Click or focus (if `activation-mode="automatic"`) selects it. Uses `aria-disabled` since custom element.
  * @example
  * ```html
  * <skdx-tabs-trigger value="password" disabled>Password</skdx-tabs-trigger>
  * ```
  */
-export declare class SkdxTabsTrigger extends LitElement {
+export declare class SkdxTabsTrigger extends SkdxTabsTrigger_base {
     static styles: import("lit").CSSResult;
     /** Unique identifier matched against a sibling `<skdx-tabs-content>`'s `value`. */
     value: string;
     /**
-     * Excludes this trigger from selection and keyboard navigation.
+     * Excludes this trigger from selection and keyboard navigation, and keeps it
+     * out of the tab order. OR-ed with `<skdx-tabs>`'s own `disabled`, never
+     * overridden.
      * @default false
      */
     disabled: boolean;
+    /** This trigger's own `disabled` OR its root's — a trigger cannot re-enable itself. */
+    private get _isDisabled();
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** @internal Called by the parent `<skdx-tabs>` whenever the selected value changes. */
     refresh(): void;
+    private _rootFacts;
     private _sync;
+    protected syncButtonHost(): void;
+    private _pointerPressed;
+    private readonly _handlePointerdown;
+    private readonly _handleBlur;
     private readonly _handleClick;
     private readonly _handleFocus;
-    private readonly _handleKeydown;
-    protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'skdx-tabs-trigger': SkdxTabsTrigger;
     }
 }
+export {};