@skdx/web-components 0.26.0

package/dist/toolbar/ToolbarLink.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toolbar-link>` — a plain navigable link in the toolbar: sets
+ * `role="link"` on itself (the host) and joins the root's roving-tabindex
+ * group. Setting `href` navigates the current tab on click or Enter.
+ *
+ * @example
+ * ```html
+ * <skdx-toolbar-link href="/help">Help</skdx-toolbar-link>
+ * ```
+ */
+export declare class SkdxToolbarLink extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Navigation target; clicking or activating the link navigates the current tab here. */
+    href: string;
+    private toolbar;
+    private itemId;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private _sync;
+    private readonly _handleFocus;
+    private readonly _handleActivate;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toolbar-link': SkdxToolbarLink;
+    }
+}

package/dist/toolbar/ToolbarLink.js

@@ -0,0 +1,6 @@
+var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(s,r,t,o)=>{for(var e=o>1?void 0:o?h(r,t):r,n=s.length-1,a;n>=0;n--)(a=s[n])&&(e=(o?a(r,t,e):a(e))||e);return o&&e&&l(r,t,e),e};import{css as c,html as v,LitElement as p}from"lit";import{property as m}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{initToolbarItem as y,syncTabIndex as u}from"./toolbarItem.js";var i=class extends p{constructor(){super(...arguments);this.href="";this.toolbar=null;this.itemId="";this.onRootUpdate=()=>this._sync();this._handleFocus=()=>this.toolbar?.claimTabStop(this.itemId);this._handleActivate=()=>{this.href&&window.location.assign(this.href)};this._handleKeydown=t=>{t.key==="Enter"&&(t.preventDefault(),this._handleActivate())}}connectedCallback(){super.connectedCallback();let{id:t,toolbar:o}=y(this);this.itemId=t,this.toolbar=o,this.toolbar?.addEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.setAttribute("role","link"),this.addEventListener("focus",this._handleFocus),this.addEventListener("click",this._handleActivate),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("click",this._handleActivate),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}_sync(){u(this,this.itemId,this.toolbar)}render(){return v`<slot></slot>`}};i.styles=c`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+  `,d([m({type:String,reflect:!0})],i.prototype,"href",2),i=d([b("skdx-toolbar-link","toolbar","link")],i);export{i as SkdxToolbarLink};

package/dist/toolbar/ToolbarSeparator.cjs

@@ -0,0 +1,5 @@
+"use strict";var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var u=(e,t)=>{for(var r in t)s(e,r,{get:t[r],enumerable:!0})},k=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of h(t))!p.call(e,o)&&o!==r&&s(e,o,{get:()=>t[o],enumerable:!(a=b(t,o))||a.enumerable});return e};var v=e=>k(s({},"__esModule",{value:!0}),e),d=(e,t,r,a)=>{for(var o=a>1?void 0:a?b(t,r):t,n=e.length-1,c;n>=0;n--)(c=e[n])&&(o=(a?c(t,r,o):c(o))||o);return a&&o&&s(t,r,o),o};var f={};u(f,{SkdxToolbarSeparator:()=>i});module.exports=v(f);var l=require("lit"),m=require("../internal/define.cjs");var i=class extends l.LitElement{connectedCallback(){super.connectedCallback();let r=this.closest("skdx-toolbar")?.orientation??"horizontal";this.setAttribute("role","separator"),this.setAttribute("aria-orientation",r==="horizontal"?"vertical":"horizontal"),this.setAttribute("data-orientation",r)}render(){return l.html`<slot></slot>`}};i.styles=l.css`
+    :host {
+      display: inline-block;
+    }
+  `,i=d([(0,m.customElement)("skdx-toolbar-separator","toolbar","separator")],i);0&&(module.exports={SkdxToolbarSeparator});

package/dist/toolbar/ToolbarSeparator.d.cts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toolbar-separator>` — visual divider between toolbar controls: sets
+ * `role="separator"` on itself (the host) with `aria-orientation` set to
+ * the *opposite* of the toolbar's own orientation (a divider drawn across a
+ * horizontal toolbar is itself vertical), and `data-orientation` matching
+ * the toolbar's.
+ */
+export declare class SkdxToolbarSeparator extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toolbar-separator': SkdxToolbarSeparator;
+    }
+}

package/dist/toolbar/ToolbarSeparator.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toolbar-separator>` — visual divider between toolbar controls: sets
+ * `role="separator"` on itself (the host) with `aria-orientation` set to
+ * the *opposite* of the toolbar's own orientation (a divider drawn across a
+ * horizontal toolbar is itself vertical), and `data-orientation` matching
+ * the toolbar's.
+ */
+export declare class SkdxToolbarSeparator extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toolbar-separator': SkdxToolbarSeparator;
+    }
+}

package/dist/toolbar/ToolbarSeparator.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var n=(i,e,o,a)=>{for(var t=a>1?void 0:a?b(e,o):e,l=i.length-1,s;l>=0;l--)(s=i[l])&&(t=(a?s(e,o,t):s(t))||t);return a&&t&&c(e,o,t),t};import{css as d,html as m,LitElement as h}from"lit";import{customElement as p}from"../internal/define.js";var r=class extends h{connectedCallback(){super.connectedCallback();let o=this.closest("skdx-toolbar")?.orientation??"horizontal";this.setAttribute("role","separator"),this.setAttribute("aria-orientation",o==="horizontal"?"vertical":"horizontal"),this.setAttribute("data-orientation",o)}render(){return m`<slot></slot>`}};r.styles=d`
+    :host {
+      display: inline-block;
+    }
+  `,r=n([p("skdx-toolbar-separator","toolbar","separator")],r);export{r as SkdxToolbarSeparator};

package/dist/toolbar/ToolbarToggleGroup.cjs

@@ -0,0 +1,5 @@
+"use strict";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var b=(r,e)=>{for(var t in e)u(r,t,{get:e[t],enumerable:!0})},y=(r,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of c(e))!g.call(r,i)&&i!==t&&u(r,i,{get:()=>e[i],enumerable:!(s=v(e,i))||s.enumerable});return r};var m=r=>y(u({},"__esModule",{value:!0}),r),n=(r,e,t,s)=>{for(var i=s>1?void 0:s?v(e,t):e,d=r.length-1,p;d>=0;d--)(p=r[d])&&(i=(s?p(e,t,i):p(i))||i);return s&&i&&u(e,t,i),i};var f={};b(f,{SkdxToolbarToggleGroup:()=>l});module.exports=m(f);var a=require("lit"),o=require("lit/decorators.js"),h=require("../internal/define.cjs");var l=class extends a.LitElement{constructor(){super(...arguments);this.type="single";this.disabled=!1;this._value=[]}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this._syncDisabled(),this._value=this._seedValue(this.getAttribute("value")??this.defaultValue)}updated(t){t.has("disabled")&&this._syncDisabled()}_seedValue(t){return t==null?[]:Array.isArray(t)?this.type==="multiple"?[...t]:t.slice(0,1):t?this.type==="multiple"?t.split(",").filter(Boolean):[t]:[]}_syncDisabled(){this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}setValue(t){this._value=t,this.dispatchEvent(new CustomEvent("skdx-toolbar-toggle-group-internal-update",{bubbles:!0,composed:!0}))}activate(t){let s=this.type==="single"?[t]:[...this._value,t];this.setValue(s),this.dispatchEvent(new CustomEvent("value-change",{detail:this.type==="single"?t:s,bubbles:!0,composed:!0}))}deactivate(t){if(this.type!=="multiple")return;let s=this._value.filter(i=>i!==t);this.setValue(s),this.dispatchEvent(new CustomEvent("value-change",{detail:s,bubbles:!0,composed:!0}))}render(){return a.html`<slot></slot>`}};l.styles=a.css`
+    :host {
+      display: inline-flex;
+    }
+  `,n([(0,o.property)({type:String,reflect:!0})],l.prototype,"type",2),n([(0,o.property)({type:Boolean,reflect:!0})],l.prototype,"disabled",2),n([(0,o.property)({attribute:"default-value"})],l.prototype,"defaultValue",2),l=n([(0,h.customElement)("skdx-toolbar-toggle-group","toolbar","toggle-group")],l);0&&(module.exports={SkdxToolbarToggleGroup});

package/dist/toolbar/ToolbarToggleGroup.d.cts

@@ -0,0 +1,62 @@
+import { LitElement, type PropertyValues } from 'lit';
+/** Whether a `<skdx-toolbar-toggle-group>` allows one pressed item at a time, or several. */
+export type SkdxToolbarToggleGroupType = 'single' | 'multiple';
+/**
+ * `<skdx-toolbar-toggle-group>` — groups a set of `<skdx-toolbar-toggle-item>`s
+ * and owns their pressed state: sets `role="group"` with `data-disabled`
+ * when `disabled`. `type="single"` keeps at most one item pressed at a time;
+ * `type="multiple"` allows any number pressed at once. Tab-stop management
+ * for its items is delegated to the ancestor `<skdx-toolbar>` — a toolbar is
+ * a single flat roving-tabindex group spanning every item, toggle group or
+ * not.
+ *
+ * @example
+ * ```html
+ * <skdx-toolbar-toggle-group type="multiple">
+ *   <skdx-toolbar-toggle-item value="bold">Bold</skdx-toolbar-toggle-item>
+ *   <skdx-toolbar-toggle-item value="italic">Italic</skdx-toolbar-toggle-item>
+ * </skdx-toolbar-toggle-group>
+ * ```
+ *
+ * @fires value-change - Fires with the new value (string for `single`, string[] for `multiple`) whenever pressed items change.
+ */
+export declare class SkdxToolbarToggleGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Whether one item at a time can be pressed, or several. */
+    type: SkdxToolbarToggleGroupType;
+    /** Disables every item in the group. @default false */
+    disabled: boolean;
+    /**
+     * Initially pressed item value(s), for uncontrolled usage — a single value
+     * for `type="single"`, a comma-separated list (or a `string[]` property) for
+     * `type="multiple"`. An authored `value` attribute still wins: that is the
+     * controlled form.
+     *
+     * Declared rather than read straight out of `getAttribute`, which is how
+     * this started: an undeclared attribute is not in `observedAttributes`, so
+     * nothing was ever told about it and `e2e/parity.spec.ts` counted it as a
+     * prop that reached the DOM instead of a component.
+     * `packages/react/src/toolbar/ToolbarToggleGroup.tsx` takes it as a real prop.
+     * @default undefined — nothing pressed until the user presses something.
+     */
+    defaultValue?: string | string[];
+    private _value;
+    /** Pressed item value(s). */
+    get value(): string[];
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /** One seed value, an array of them, or a comma-separated list, as the group's value list. */
+    private _seedValue;
+    private _syncDisabled;
+    private setValue;
+    /** @internal Called by a `<skdx-toolbar-toggle-item>` when it's pressed. */
+    activate(itemValue: string): void;
+    /** @internal Called by a `<skdx-toolbar-toggle-item>` when it's unpressed (multiple mode only). */
+    deactivate(itemValue: string): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toolbar-toggle-group': SkdxToolbarToggleGroup;
+    }
+}

package/dist/toolbar/ToolbarToggleGroup.d.ts

@@ -0,0 +1,62 @@
+import { LitElement, type PropertyValues } from 'lit';
+/** Whether a `<skdx-toolbar-toggle-group>` allows one pressed item at a time, or several. */
+export type SkdxToolbarToggleGroupType = 'single' | 'multiple';
+/**
+ * `<skdx-toolbar-toggle-group>` — groups a set of `<skdx-toolbar-toggle-item>`s
+ * and owns their pressed state: sets `role="group"` with `data-disabled`
+ * when `disabled`. `type="single"` keeps at most one item pressed at a time;
+ * `type="multiple"` allows any number pressed at once. Tab-stop management
+ * for its items is delegated to the ancestor `<skdx-toolbar>` — a toolbar is
+ * a single flat roving-tabindex group spanning every item, toggle group or
+ * not.
+ *
+ * @example
+ * ```html
+ * <skdx-toolbar-toggle-group type="multiple">
+ *   <skdx-toolbar-toggle-item value="bold">Bold</skdx-toolbar-toggle-item>
+ *   <skdx-toolbar-toggle-item value="italic">Italic</skdx-toolbar-toggle-item>
+ * </skdx-toolbar-toggle-group>
+ * ```
+ *
+ * @fires value-change - Fires with the new value (string for `single`, string[] for `multiple`) whenever pressed items change.
+ */
+export declare class SkdxToolbarToggleGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Whether one item at a time can be pressed, or several. */
+    type: SkdxToolbarToggleGroupType;
+    /** Disables every item in the group. @default false */
+    disabled: boolean;
+    /**
+     * Initially pressed item value(s), for uncontrolled usage — a single value
+     * for `type="single"`, a comma-separated list (or a `string[]` property) for
+     * `type="multiple"`. An authored `value` attribute still wins: that is the
+     * controlled form.
+     *
+     * Declared rather than read straight out of `getAttribute`, which is how
+     * this started: an undeclared attribute is not in `observedAttributes`, so
+     * nothing was ever told about it and `e2e/parity.spec.ts` counted it as a
+     * prop that reached the DOM instead of a component.
+     * `packages/react/src/toolbar/ToolbarToggleGroup.tsx` takes it as a real prop.
+     * @default undefined — nothing pressed until the user presses something.
+     */
+    defaultValue?: string | string[];
+    private _value;
+    /** Pressed item value(s). */
+    get value(): string[];
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /** One seed value, an array of them, or a comma-separated list, as the group's value list. */
+    private _seedValue;
+    private _syncDisabled;
+    private setValue;
+    /** @internal Called by a `<skdx-toolbar-toggle-item>` when it's pressed. */
+    activate(itemValue: string): void;
+    /** @internal Called by a `<skdx-toolbar-toggle-item>` when it's unpressed (multiple mode only). */
+    deactivate(itemValue: string): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toolbar-toggle-group': SkdxToolbarToggleGroup;
+    }
+}

package/dist/toolbar/ToolbarToggleGroup.js

@@ -0,0 +1,5 @@
+var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=(a,r,t,e)=>{for(var i=e>1?void 0:e?p(r,t):r,n=a.length-1,u;n>=0;n--)(u=a[n])&&(i=(e?u(r,t,i):u(i))||i);return e&&i&&d(r,t,i),i};import{css as v,html as h,LitElement as c}from"lit";import{property as o}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";var s=class extends c{constructor(){super(...arguments);this.type="single";this.disabled=!1;this._value=[]}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this._syncDisabled(),this._value=this._seedValue(this.getAttribute("value")??this.defaultValue)}updated(t){t.has("disabled")&&this._syncDisabled()}_seedValue(t){return t==null?[]:Array.isArray(t)?this.type==="multiple"?[...t]:t.slice(0,1):t?this.type==="multiple"?t.split(",").filter(Boolean):[t]:[]}_syncDisabled(){this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}setValue(t){this._value=t,this.dispatchEvent(new CustomEvent("skdx-toolbar-toggle-group-internal-update",{bubbles:!0,composed:!0}))}activate(t){let e=this.type==="single"?[t]:[...this._value,t];this.setValue(e),this.dispatchEvent(new CustomEvent("value-change",{detail:this.type==="single"?t:e,bubbles:!0,composed:!0}))}deactivate(t){if(this.type!=="multiple")return;let e=this._value.filter(i=>i!==t);this.setValue(e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0}))}render(){return h`<slot></slot>`}};s.styles=v`
+    :host {
+      display: inline-flex;
+    }
+  `,l([o({type:String,reflect:!0})],s.prototype,"type",2),l([o({type:Boolean,reflect:!0})],s.prototype,"disabled",2),l([o({attribute:"default-value"})],s.prototype,"defaultValue",2),s=l([g("skdx-toolbar-toggle-group","toolbar","toggle-group")],s);export{s as SkdxToolbarToggleGroup};

package/dist/toolbar/ToolbarToggleItem.cjs

@@ -0,0 +1,9 @@
+"use strict";var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(o,t)=>{for(var e in t)l(o,e,{get:t[e],enumerable:!0})},m=(o,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!f.call(o,i)&&i!==e&&l(o,i,{get:()=>t[i],enumerable:!(s=c(t,i))||s.enumerable});return o};var y=o=>m(l({},"__esModule",{value:!0}),o),d=(o,t,e,s)=>{for(var i=s>1?void 0:s?c(t,e):t,h=o.length-1,p;h>=0;h--)(p=o[h])&&(i=(s?p(t,e,i):p(i))||i);return s&&i&&l(t,e,i),i};var k={};g(k,{SkdxToolbarToggleItem:()=>r});module.exports=y(k);var a=require("lit"),u=require("lit/decorators.js"),b=require("../internal/define.cjs"),n=require("./toolbarItem.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.toolbar=null;this.group=null;this.itemId="";this.onRootUpdate=()=>this._sync();this.onGroupUpdate=()=>this._sync();this._handleFocus=()=>{this.effectiveDisabled||this.toolbar?.claimTabStop(this.itemId)};this._handleClick=()=>{this.effectiveDisabled||!this.group||(this.pressed?this.group.type==="multiple"&&this.group.deactivate(this.value):this.group.activate(this.value))};this._handleKeydown=e=>{(e.key==="Enter"||e.key===" ")&&!this.effectiveDisabled&&(e.preventDefault(),this._handleClick())}}connectedCallback(){super.connectedCallback();let{id:e,toolbar:s}=(0,n.initToolbarItem)(this);if(this.itemId=e,this.toolbar=s,this.group=this.closest("skdx-toolbar-toggle-group"),!this.group)throw new Error("<skdx-toolbar-toggle-item> must be used inside <skdx-toolbar-toggle-group>.");this.toolbar?.addEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.group.addEventListener("skdx-toolbar-toggle-group-internal-update",this.onGroupUpdate),this.setAttribute("role","button"),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.group?.removeEventListener("skdx-toolbar-toggle-group-internal-update",this.onGroupUpdate),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}get pressed(){return this.group?.value.includes(this.value)??!1}get effectiveDisabled(){return this.disabled||this.group?.disabled||!1}_sync(){let e=this.effectiveDisabled;this.setAttribute("aria-pressed",String(this.pressed)),this.setAttribute("data-state",this.pressed?"on":"off"),e?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),(0,n.syncTabIndex)(this,this.itemId,this.toolbar)}render(){return a.html`<slot></slot>`}};r.styles=a.css`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+    :host([data-disabled]) {
+      cursor: default;
+    }
+  `,d([(0,u.property)({type:String,reflect:!0})],r.prototype,"value",2),d([(0,u.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=d([(0,b.customElement)("skdx-toolbar-toggle-item","toolbar","toggle-item")],r);0&&(module.exports={SkdxToolbarToggleItem});

package/dist/toolbar/ToolbarToggleItem.d.cts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toolbar-toggle-item>` — a single pressable option within a
+ * `<skdx-toolbar-toggle-group>`: sets `role="button"`, `aria-pressed`, and
+ * `data-state` of `"on"`/`"off"` on itself (the host), and joins the
+ * ancestor `<skdx-toolbar>`'s roving-tabindex group. Clicking it presses the
+ * item (unpressing any other in a `"single"` group); clicking a pressed
+ * item in a `"multiple"` group unpresses it. Disabled when the group is
+ * `disabled` or its own `disabled` is set. Must be used inside both
+ * `<skdx-toolbar>` and `<skdx-toolbar-toggle-group>`.
+ *
+ * @example
+ * ```html
+ * <skdx-toolbar-toggle-item value="bold">Bold</skdx-toolbar-toggle-item>
+ * ```
+ */
+export declare class SkdxToolbarToggleItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Unique identifier tracked in the group's pressed value(s). */
+    value: string;
+    /** Excludes this item from activation, independent of the group's own `disabled`. @default false */
+    disabled: boolean;
+    private toolbar;
+    private group;
+    private itemId;
+    private readonly onRootUpdate;
+    private readonly onGroupUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private get pressed();
+    private get effectiveDisabled();
+    private _sync;
+    private readonly _handleFocus;
+    private readonly _handleClick;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toolbar-toggle-item': SkdxToolbarToggleItem;
+    }
+}

package/dist/toolbar/ToolbarToggleItem.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toolbar-toggle-item>` — a single pressable option within a
+ * `<skdx-toolbar-toggle-group>`: sets `role="button"`, `aria-pressed`, and
+ * `data-state` of `"on"`/`"off"` on itself (the host), and joins the
+ * ancestor `<skdx-toolbar>`'s roving-tabindex group. Clicking it presses the
+ * item (unpressing any other in a `"single"` group); clicking a pressed
+ * item in a `"multiple"` group unpresses it. Disabled when the group is
+ * `disabled` or its own `disabled` is set. Must be used inside both
+ * `<skdx-toolbar>` and `<skdx-toolbar-toggle-group>`.
+ *
+ * @example
+ * ```html
+ * <skdx-toolbar-toggle-item value="bold">Bold</skdx-toolbar-toggle-item>
+ * ```
+ */
+export declare class SkdxToolbarToggleItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Unique identifier tracked in the group's pressed value(s). */
+    value: string;
+    /** Excludes this item from activation, independent of the group's own `disabled`. @default false */
+    disabled: boolean;
+    private toolbar;
+    private group;
+    private itemId;
+    private readonly onRootUpdate;
+    private readonly onGroupUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private get pressed();
+    private get effectiveDisabled();
+    private _sync;
+    private readonly _handleFocus;
+    private readonly _handleClick;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toolbar-toggle-item': SkdxToolbarToggleItem;
+    }
+}

package/dist/toolbar/ToolbarToggleItem.js

@@ -0,0 +1,9 @@
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(a,s,e,o)=>{for(var t=o>1?void 0:o?p(s,e):s,l=a.length-1,d;l>=0;l--)(d=a[l])&&(t=(o?d(s,e,t):d(t))||t);return o&&t&&h(s,e,t),t};import{css as u,html as c,LitElement as b}from"lit";import{property as n}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{initToolbarItem as f,syncTabIndex as g}from"./toolbarItem.js";var i=class extends b{constructor(){super(...arguments);this.value="";this.disabled=!1;this.toolbar=null;this.group=null;this.itemId="";this.onRootUpdate=()=>this._sync();this.onGroupUpdate=()=>this._sync();this._handleFocus=()=>{this.effectiveDisabled||this.toolbar?.claimTabStop(this.itemId)};this._handleClick=()=>{this.effectiveDisabled||!this.group||(this.pressed?this.group.type==="multiple"&&this.group.deactivate(this.value):this.group.activate(this.value))};this._handleKeydown=e=>{(e.key==="Enter"||e.key===" ")&&!this.effectiveDisabled&&(e.preventDefault(),this._handleClick())}}connectedCallback(){super.connectedCallback();let{id:e,toolbar:o}=f(this);if(this.itemId=e,this.toolbar=o,this.group=this.closest("skdx-toolbar-toggle-group"),!this.group)throw new Error("<skdx-toolbar-toggle-item> must be used inside <skdx-toolbar-toggle-group>.");this.toolbar?.addEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.group.addEventListener("skdx-toolbar-toggle-group-internal-update",this.onGroupUpdate),this.setAttribute("role","button"),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.toolbar?.removeEventListener("skdx-toolbar-internal-update",this.onRootUpdate),this.group?.removeEventListener("skdx-toolbar-toggle-group-internal-update",this.onGroupUpdate),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback(),this.toolbar?.refreshTabStops()}updated(){this._sync()}get pressed(){return this.group?.value.includes(this.value)??!1}get effectiveDisabled(){return this.disabled||this.group?.disabled||!1}_sync(){let e=this.effectiveDisabled;this.setAttribute("aria-pressed",String(this.pressed)),this.setAttribute("data-state",this.pressed?"on":"off"),e?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),g(this,this.itemId,this.toolbar)}render(){return c`<slot></slot>`}};i.styles=u`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+    :host([data-disabled]) {
+      cursor: default;
+    }
+  `,r([n({type:String,reflect:!0})],i.prototype,"value",2),r([n({type:Boolean,reflect:!0})],i.prototype,"disabled",2),i=r([v("skdx-toolbar-toggle-item","toolbar","toggle-item")],i);export{i as SkdxToolbarToggleItem};

package/dist/toolbar/index.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(r,o)=>{for(var e in o)t(r,e,{get:o[e],enumerable:!0})},n=(r,o,e,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let x of d(o))!f.call(r,x)&&x!==e&&t(r,x,{get:()=>o[x],enumerable:!(a=b(o,x))||a.enumerable});return r};var u=r=>n(t({},"__esModule",{value:!0}),r);var i={};g(i,{SkdxToolbar:()=>l.SkdxToolbar,SkdxToolbarButton:()=>p.SkdxToolbarButton,SkdxToolbarLink:()=>T.SkdxToolbarLink,SkdxToolbarSeparator:()=>k.SkdxToolbarSeparator,SkdxToolbarToggleGroup:()=>m.SkdxToolbarToggleGroup,SkdxToolbarToggleItem:()=>S.SkdxToolbarToggleItem});module.exports=u(i);var l=require("./Toolbar.cjs"),p=require("./ToolbarButton.cjs"),T=require("./ToolbarLink.cjs"),k=require("./ToolbarSeparator.cjs"),m=require("./ToolbarToggleGroup.cjs"),S=require("./ToolbarToggleItem.cjs");0&&(module.exports={SkdxToolbar,SkdxToolbarButton,SkdxToolbarLink,SkdxToolbarSeparator,SkdxToolbarToggleGroup,SkdxToolbarToggleItem});

package/dist/toolbar/index.d.cts

@@ -0,0 +1,6 @@
+export { SkdxToolbar } from './Toolbar.cjs';
+export { SkdxToolbarButton } from './ToolbarButton.cjs';
+export { SkdxToolbarLink } from './ToolbarLink.cjs';
+export { SkdxToolbarSeparator } from './ToolbarSeparator.cjs';
+export { SkdxToolbarToggleGroup } from './ToolbarToggleGroup.cjs';
+export { SkdxToolbarToggleItem } from './ToolbarToggleItem.cjs';

package/dist/toolbar/index.d.ts

@@ -0,0 +1,6 @@
+export { SkdxToolbar } from './Toolbar.js';
+export { SkdxToolbarButton } from './ToolbarButton.js';
+export { SkdxToolbarLink } from './ToolbarLink.js';
+export { SkdxToolbarSeparator } from './ToolbarSeparator.js';
+export { SkdxToolbarToggleGroup } from './ToolbarToggleGroup.js';
+export { SkdxToolbarToggleItem } from './ToolbarToggleItem.js';

package/dist/toolbar/index.js

@@ -0,0 +1 @@
+import{SkdxToolbar as x}from"./Toolbar.js";import{SkdxToolbarButton as t}from"./ToolbarButton.js";import{SkdxToolbarLink as l}from"./ToolbarLink.js";import{SkdxToolbarSeparator as T}from"./ToolbarSeparator.js";import{SkdxToolbarToggleGroup as m}from"./ToolbarToggleGroup.js";import{SkdxToolbarToggleItem as b}from"./ToolbarToggleItem.js";export{x as SkdxToolbar,t as SkdxToolbarButton,l as SkdxToolbarLink,T as SkdxToolbarSeparator,m as SkdxToolbarToggleGroup,b as SkdxToolbarToggleItem};

package/dist/toolbar/toolbarItem.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var c=(o,t)=>{for(var e in t)l(o,e,{get:t[e],enumerable:!0})},m=(o,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of s(t))!b.call(o,n)&&n!==e&&l(o,n,{get:()=>t[n],enumerable:!(r=i(t,n))||r.enumerable});return o};var u=o=>m(l({},"__esModule",{value:!0}),o);var S={};c(S,{initToolbarItem:()=>x,syncTabIndex:()=>k});module.exports=u(S);var a=require("../internal/ids.cjs");function x(o){let t=(0,a.nextId)("skdx-toolbar-item"),e=o.closest("skdx-toolbar");return o.setAttribute("data-skdx-toolbar-item",t),{id:t,toolbar:e}}function T(o,t){return t.querySelector("[data-skdx-toolbar-item]:not([data-disabled])")===o}function k(o,t,e){if(!e)return;let r=e.currentTabStopId,d=r!==null&&e.querySelector(`[data-skdx-toolbar-item="${r}"]`)!==null?r===t:T(o,e);o.tabIndex=d?0:-1}0&&(module.exports={initToolbarItem,syncTabIndex});

package/dist/toolbar/toolbarItem.d.cts

@@ -0,0 +1,19 @@
+import type { SkdxToolbar } from './Toolbar.cjs';
+/** @internal Registers `host` as a toolbar item: marks it with `data-skdx-toolbar-item` and looks up its ancestor `<skdx-toolbar>`. */
+export declare function initToolbarItem(host: HTMLElement): {
+    id: string;
+    toolbar: SkdxToolbar | null;
+};
+/**
+ * @internal Sets `host.tabIndex` to `0` only if it's the toolbar's current
+ * roving-tabindex stop.
+ *
+ * The fallback triggers when *no item claims* the stored id, not merely when
+ * the id is unset: an item removed from the DOM leaves the id pointing at
+ * something gone, and a `current === null` test would then see nothing to do —
+ * leaving no item with `tabindex="0"` and the whole toolbar silently out of the
+ * tab order, with nothing on screen to explain it. Each item re-runs this on
+ * connect, on update, and on the toolbar's broadcast (which every item fires as
+ * it disconnects), so the stop is re-seeded as soon as the item set changes.
+ */
+export declare function syncTabIndex(host: HTMLElement, id: string, toolbar: SkdxToolbar | null): void;

package/dist/toolbar/toolbarItem.d.ts

@@ -0,0 +1,19 @@
+import type { SkdxToolbar } from './Toolbar.js';
+/** @internal Registers `host` as a toolbar item: marks it with `data-skdx-toolbar-item` and looks up its ancestor `<skdx-toolbar>`. */
+export declare function initToolbarItem(host: HTMLElement): {
+    id: string;
+    toolbar: SkdxToolbar | null;
+};
+/**
+ * @internal Sets `host.tabIndex` to `0` only if it's the toolbar's current
+ * roving-tabindex stop.
+ *
+ * The fallback triggers when *no item claims* the stored id, not merely when
+ * the id is unset: an item removed from the DOM leaves the id pointing at
+ * something gone, and a `current === null` test would then see nothing to do —
+ * leaving no item with `tabindex="0"` and the whole toolbar silently out of the
+ * tab order, with nothing on screen to explain it. Each item re-runs this on
+ * connect, on update, and on the toolbar's broadcast (which every item fires as
+ * it disconnects), so the stop is re-seeded as soon as the item set changes.
+ */
+export declare function syncTabIndex(host: HTMLElement, id: string, toolbar: SkdxToolbar | null): void;

package/dist/toolbar/toolbarItem.js

@@ -0,0 +1 @@
+import{nextId as l}from"../internal/ids.js";function s(t){let e=l("skdx-toolbar-item"),o=t.closest("skdx-toolbar");return t.setAttribute("data-skdx-toolbar-item",e),{id:e,toolbar:o}}function a(t,e){return e.querySelector("[data-skdx-toolbar-item]:not([data-disabled])")===t}function b(t,e,o){if(!o)return;let r=o.currentTabStopId,n=r!==null&&o.querySelector(`[data-skdx-toolbar-item="${r}"]`)!==null?r===e:a(t,o);t.tabIndex=n?0:-1}export{s as initToolbarItem,b as syncTabIndex};

package/dist/tooltip/Tooltip.cjs

@@ -0,0 +1,5 @@
+"use strict";var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var C=(n,t)=>{for(var e in t)p(n,e,{get:t[e],enumerable:!0})},O=(n,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of b(t))!E.call(n,o)&&o!==e&&p(n,o,{get:()=>t[o],enumerable:!(i=h(t,o))||i.enumerable});return n};var T=n=>O(p({},"__esModule",{value:!0}),n),r=(n,t,e,i)=>{for(var o=i>1?void 0:i?h(t,e):t,d=n.length-1,c;d>=0;d--)(c=n[d])&&(o=(i?c(t,e,o):c(o))||o);return i&&o&&p(t,e,o),o};var g={};C(g,{SkdxTooltip:()=>s});module.exports=T(g);var a=require("lit"),l=require("lit/decorators.js"),m=require("../internal/define.cjs"),u=require("../internal/ids.cjs"),v=require("../internal/open-change-complete.cjs"),y=require("../internal/positioning.cjs"),f=require("../internal/styles.cjs");var w=150,s=class extends a.LitElement{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.disableHoverableContent=!0;this.contentId=(0,u.nextId)("skdx-tooltip-content");this.triggerEl=null;this.hasUpdatedOnce=!1;this.handleEscapeKeyDown=e=>{e.key==="Escape"&&this.close()}}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0)}disconnectedCallback(){this.clearTimers(),document.removeEventListener("keydown",this.handleEscapeKeyDown),this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let i=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.open?document.addEventListener("keydown",this.handleEscapeKeyDown):document.removeEventListener("keydown",this.handleEscapeKeyDown),e.has("open")&&!i&&this.dispatchEvent(new CustomEvent("open-change",{detail:this.open,bubbles:!0,composed:!0})),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-tooltip-internal-update")),e.has("open")&&!i&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,v.notifyOpenChangeComplete)(()=>this.querySelector("skdx-tooltip-content"),this.open,o=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:o,bubbles:!0,composed:!0}))))}clearTimers(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer)}setOpen(e){this.open!==e&&(this.open=e)}openNow(){this.clearTimers(),this.setOpen(!0)}openDelayed(){this.clearTimers(),this.openTimer=setTimeout(()=>this.setOpen(!0),this.delayDuration??700)}close(){this.clearTimers(),this.setOpen(!1)}closeDelayed(){this.clearTimers(),this.closeTimer=setTimeout(()=>this.setOpen(!1),w)}render(){return a.html`<slot></slot>`}};s.styles=[f.hiddenHostStyles,a.css`
+      :host {
+        display: contents;
+      }
+    `],r([(0,l.property)({type:Boolean,reflect:!0})],s.prototype,"open",2),r([(0,l.property)({type:Boolean,attribute:"default-open"})],s.prototype,"defaultOpen",2),r([(0,l.property)({type:Number,attribute:"delay-duration"})],s.prototype,"delayDuration",2),r([(0,l.property)({attribute:"disable-hoverable-content",converter:y.optOutBoolean})],s.prototype,"disableHoverableContent",2),s=r([(0,m.customElement)("skdx-tooltip")],s);0&&(module.exports={SkdxTooltip});

package/dist/tooltip/Tooltip.d.cts

@@ -0,0 +1,111 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-tooltip>` — the Web Components implementation of the shared Tooltip
+ * contract (see `@skdx/shared`'s `tooltipContract`). Owns the open state
+ * (with hover-in delay) and hands it down to `<skdx-tooltip-trigger>` /
+ * `<skdx-tooltip-content>`, which look it up via `closest('skdx-tooltip')` and
+ * re-render on the `skdx-tooltip-internal-update` event this element
+ * dispatches whenever `open` changes — the same shared-state pattern
+ * `<skdx-select>`/`<skdx-popover>` use.
+ *
+ * Unlike the React package, there is no `TooltipProvider` — cross-tooltip
+ * skip-delay coordination isn't implemented here; each tooltip just falls
+ * back to `delayDuration` (default `700`) on its own, and there is no
+ * `skip-delay-duration` to set.
+ *
+ * With `disable-hoverable-content="false"` the pointer may travel off the
+ * trigger and into the bubble without closing the tooltip: leaving the
+ * trigger only schedules the close, and the content's pointer-enter cancels
+ * it within the grace period.
+ *
+ * Escape closes the tooltip. The key is listened for on `document` while
+ * open, not just on the trigger, so a tooltip opened by hover is dismissable
+ * even when keyboard focus is elsewhere (WCAG 2.2 SC 1.4.13).
+ *
+ * Renders only a `<slot>`.
+ *
+ * @example
+ * ```html
+ * <skdx-tooltip>
+ *   <skdx-tooltip-trigger>Hover me</skdx-tooltip-trigger>
+ *   <skdx-tooltip-content>Helpful hint</skdx-tooltip-content>
+ * </skdx-tooltip>
+ * ```
+ *
+ * @fires open-change - Fired with the new open state whenever it changes, controlled or not.
+ * @fires open-change-complete - Fired with the new open state after `<skdx-tooltip-content>`'s enter or exit animation has finished — as soon as the content has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ */
+export declare class SkdxTooltip extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether the tooltip is open, for controlled usage. Pair with `open-change`.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Initial open state, for uncontrolled usage. Applied once, on connect,
+     * and only if `open` wasn't already set.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /**
+     * Delay before opening on hover (ms).
+     * @default undefined — falls back to 700.
+     */
+    delayDuration?: number;
+    /**
+     * Whether `<skdx-tooltip-content>` ignores the pointer entirely, so moving
+     * off the trigger closes the tooltip even if the pointer lands on the
+     * bubble.
+     *
+     * Set it `false` (`disable-hoverable-content="false"`) to let the pointer
+     * travel into the content and keep the tooltip open — a short grace period
+     * covers the gap between the two. The default differs from Radix's: the
+     * bubbles here are pointer-transparent today, and flipping that silently
+     * would be a breaking change; nothing inside a tooltip is reachable by
+     * keyboard anyway.
+     *
+     * Uses the `optOutBoolean` converter rather than Lit's stock `Boolean`, so
+     * the literal `disable-hoverable-content="false"` actually switches it off
+     * from markup.
+     * @default true
+     */
+    disableHoverableContent: boolean;
+    readonly contentId: string;
+    /** @internal Set by `<skdx-tooltip-trigger>` once its native button mounts. */
+    triggerEl: HTMLElement | null;
+    private openTimer?;
+    private closeTimer?;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * A tooltip opened by hover leaves focus wherever it was, so the trigger's
+     * own keydown handler never sees Escape — the key is watched on `document`
+     * instead, but only while open (see `updated`).
+     */
+    private readonly handleEscapeKeyDown;
+    protected updated(changed: Map<string, unknown>): void;
+    private clearTimers;
+    private setOpen;
+    /** @internal Opens immediately, e.g. on focus or when the pointer reaches hoverable content. */
+    openNow(): void;
+    /** @internal Opens after `delayDuration` (default 700ms), e.g. on pointer-enter. */
+    openDelayed(): void;
+    /** @internal Closes immediately, cancelling any pending timer. */
+    close(): void;
+    /**
+     * @internal Closes after {@link HOVERABLE_GRACE_DURATION}, for the pointer
+     * leaving the trigger while the content is hoverable — that is not yet a
+     * close, the pointer may be on its way across the `side-offset` gap into
+     * the bubble, whose pointer-enter calls `openNow()` and cancels this.
+     */
+    closeDelayed(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-tooltip': SkdxTooltip;
+    }
+}