@skdx/web-components 0.28.0 → 0.29.0

package/dist/toggle-group/ToggleGroup.d.cts

@@ -1,10 +1,11 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import type { SkdxOptionItemDescriptor } from '../internal/options.cjs';
+import { type SelectionChangeReason } from '../internal/selection.cjs';
 /** Whether a `<skdx-toggle-group>` allows one pressed item at a time, or several. */
 export type SkdxToggleGroupType = 'single' | 'multiple';
 /** Layout axis of a `<skdx-toggle-group>`. */
 export type SkdxToggleGroupOrientation = 'horizontal' | 'vertical';
-declare const SkdxToggleGroup_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+declare const SkdxToggleGroup_base: typeof LitElement & (new (...args: any[]) => import("../index.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
@@ -26,7 +27,7 @@ declare const SkdxToggleGroup_base: typeof LitElement & (new (...args: any[]) =>
  * ];
  * ```
  *
- * @fires value-change - Fires when pressed items change, with `{ value, selectedValue }`.
+ * @fires value-change - Fires when pressed items change, with `{ value, previousValue, reason, selectedValue }`.
  */
 export declare class SkdxToggleGroup extends SkdxToggleGroup_base {
     static styles: import("lit").CSSResult;
@@ -38,6 +39,42 @@ export declare class SkdxToggleGroup extends SkdxToggleGroup_base {
     type: SkdxToggleGroupType;
     /** Disables every item in the group. @default false */
     disabled: boolean;
+    /**
+     * Displays a choice the user may not change: the group keeps its role, its
+     * tab stop and its form value, gains `data-readonly`, and refuses every press.
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Marks the group invalid, exposed as `data-invalid` on the host.
+     * Presentational only — use `required` or `setCustomValidity()` to block a submit.
+     * @default false
+     */
+    invalid: boolean;
+    /**
+     * Shape rung the skin paints, reflected as `data-variant`; the attribute may
+     * be written directly instead. `"segmented"` joins the items into one strip
+     * and gives the derived anatomy an Indicator that slides behind the pressed one.
+     * @default undefined — separate buttons.
+     */
+    variant?: 'segmented' | (string & {}) | undefined;
+    /**
+     * Whether moving the roving focus onto an item also presses it, so arrow keys
+     * browse the choices. Only meaningful under `type="single"`, and only when
+     * focus arrives from a sibling item — tabbing in presses nothing.
+     * @default false
+     */
+    selectOnFocus: boolean;
+    /**
+     * Stretches the group to fill its container's inline size, reflected as `data-full-width`.
+     * @default false
+     */
+    fullWidth: boolean;
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin's medium scale.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
     /** Layout axis for arrow-key roving focus between items. @default 'horizontal' */
     orientation: SkdxToggleGroupOrientation;
     /** Whether arrow-key navigation wraps from the last item back to the first. @default true */
@@ -59,21 +96,9 @@ export declare class SkdxToggleGroup extends SkdxToggleGroup_base {
     /** Name used as the `FormData` entry key for every pressed item when inside a `<form>`. @default undefined */
     name?: string;
     /**
-     * Id of the `<form>` this group submits into, so a group can live outside
-     * the form it belongs to.
-     *
-     * **The property is `formId`, not `form`** — the attribute is `form` in all
-     * five packages, so the authored surface matches exactly and only the
-     * JavaScript identifier moves. It has to: every form-associated element
-     * publishes `form` as a *readonly `HTMLFormElement`*, and this element
-     * already does (`FormAssociated`'s getter over `ElementInternals.form`).
-     * Shadowing that with a string would break `toggleGroup.form`, the
-     * platform's own accessor — the same collision Select's `formId` resolves.
-     *
-     * Nothing implements it: `<skdx-toggle-group>` is a form-associated custom
-     * element, so the browser's own form-owner algorithm honours the `form`
-     * content attribute. It is declared here so the manifest lists one prop
-     * across five packages rather than four.
+     * Id of the `<form>` this group submits into, so a group can live outside the
+     * form it belongs to. Named `formId`, not `form`, since `form` is the platform's
+     * own readonly accessor for the owning `HTMLFormElement`.
      * @default undefined — the group submits into its nearest ancestor form.
      */
     formId?: string;
@@ -119,8 +144,12 @@ export declare class SkdxToggleGroup extends SkdxToggleGroup_base {
     get pressedValues(): readonly string[];
     /** @internal Fallback single tab stop when no item is pressed yet. */
     get firstEnabledValue(): string | null;
+    /** @internal Items still in the roving order, in document order. */
+    get enabledItems(): HTMLElement[];
     connectedCallback(): void;
     private readonly fillAnatomy;
+    /** Tells the Indicator to re-measure the item it sits behind. */
+    private refreshIndicator;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     private _syncHostAttrs;
@@ -130,17 +159,22 @@ export declare class SkdxToggleGroup extends SkdxToggleGroup_base {
     private _syncFormState;
     /** Restores the item(s) the `value` attribute declared when the element was first connected. */
     formResetCallback(): void;
-    /** @internal Called by a `<skdx-toggle-group-item>` when it's pressed. */
-    activate(itemValue: string): void;
+    /**
+     * @internal Called by a `<skdx-toggle-group-item>` when it's pressed.
+     *
+     * @param itemValue the item that was pressed
+     * @param reason what drove the press
+     */
+    activate(itemValue: string, reason?: SelectionChangeReason): void;
     /**
      * @internal Called by an item when it unpresses. Blocked in single-mode
      * if `deselectable` is false.
      */
-    deactivate(itemValue: string): void;
+    deactivate(itemValue: string, reason?: SelectionChangeReason): void;
     /** The one place a new pressed set is published. */
     private _commit;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toggle-group/ToggleGroup.d.ts

@@ -1,10 +1,11 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import type { SkdxOptionItemDescriptor } from '../internal/options.js';
+import { type SelectionChangeReason } from '../internal/selection.js';
 /** Whether a `<skdx-toggle-group>` allows one pressed item at a time, or several. */
 export type SkdxToggleGroupType = 'single' | 'multiple';
 /** Layout axis of a `<skdx-toggle-group>`. */
 export type SkdxToggleGroupOrientation = 'horizontal' | 'vertical';
-declare const SkdxToggleGroup_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+declare const SkdxToggleGroup_base: typeof LitElement & (new (...args: any[]) => import("../index.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
@@ -26,7 +27,7 @@ declare const SkdxToggleGroup_base: typeof LitElement & (new (...args: any[]) =>
  * ];
  * ```
  *
- * @fires value-change - Fires when pressed items change, with `{ value, selectedValue }`.
+ * @fires value-change - Fires when pressed items change, with `{ value, previousValue, reason, selectedValue }`.
  */
 export declare class SkdxToggleGroup extends SkdxToggleGroup_base {
     static styles: import("lit").CSSResult;
@@ -38,6 +39,42 @@ export declare class SkdxToggleGroup extends SkdxToggleGroup_base {
     type: SkdxToggleGroupType;
     /** Disables every item in the group. @default false */
     disabled: boolean;
+    /**
+     * Displays a choice the user may not change: the group keeps its role, its
+     * tab stop and its form value, gains `data-readonly`, and refuses every press.
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Marks the group invalid, exposed as `data-invalid` on the host.
+     * Presentational only — use `required` or `setCustomValidity()` to block a submit.
+     * @default false
+     */
+    invalid: boolean;
+    /**
+     * Shape rung the skin paints, reflected as `data-variant`; the attribute may
+     * be written directly instead. `"segmented"` joins the items into one strip
+     * and gives the derived anatomy an Indicator that slides behind the pressed one.
+     * @default undefined — separate buttons.
+     */
+    variant?: 'segmented' | (string & {}) | undefined;
+    /**
+     * Whether moving the roving focus onto an item also presses it, so arrow keys
+     * browse the choices. Only meaningful under `type="single"`, and only when
+     * focus arrives from a sibling item — tabbing in presses nothing.
+     * @default false
+     */
+    selectOnFocus: boolean;
+    /**
+     * Stretches the group to fill its container's inline size, reflected as `data-full-width`.
+     * @default false
+     */
+    fullWidth: boolean;
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin's medium scale.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
     /** Layout axis for arrow-key roving focus between items. @default 'horizontal' */
     orientation: SkdxToggleGroupOrientation;
     /** Whether arrow-key navigation wraps from the last item back to the first. @default true */
@@ -59,21 +96,9 @@ export declare class SkdxToggleGroup extends SkdxToggleGroup_base {
     /** Name used as the `FormData` entry key for every pressed item when inside a `<form>`. @default undefined */
     name?: string;
     /**
-     * Id of the `<form>` this group submits into, so a group can live outside
-     * the form it belongs to.
-     *
-     * **The property is `formId`, not `form`** — the attribute is `form` in all
-     * five packages, so the authored surface matches exactly and only the
-     * JavaScript identifier moves. It has to: every form-associated element
-     * publishes `form` as a *readonly `HTMLFormElement`*, and this element
-     * already does (`FormAssociated`'s getter over `ElementInternals.form`).
-     * Shadowing that with a string would break `toggleGroup.form`, the
-     * platform's own accessor — the same collision Select's `formId` resolves.
-     *
-     * Nothing implements it: `<skdx-toggle-group>` is a form-associated custom
-     * element, so the browser's own form-owner algorithm honours the `form`
-     * content attribute. It is declared here so the manifest lists one prop
-     * across five packages rather than four.
+     * Id of the `<form>` this group submits into, so a group can live outside the
+     * form it belongs to. Named `formId`, not `form`, since `form` is the platform's
+     * own readonly accessor for the owning `HTMLFormElement`.
      * @default undefined — the group submits into its nearest ancestor form.
      */
     formId?: string;
@@ -119,8 +144,12 @@ export declare class SkdxToggleGroup extends SkdxToggleGroup_base {
     get pressedValues(): readonly string[];
     /** @internal Fallback single tab stop when no item is pressed yet. */
     get firstEnabledValue(): string | null;
+    /** @internal Items still in the roving order, in document order. */
+    get enabledItems(): HTMLElement[];
     connectedCallback(): void;
     private readonly fillAnatomy;
+    /** Tells the Indicator to re-measure the item it sits behind. */
+    private refreshIndicator;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     private _syncHostAttrs;
@@ -130,17 +159,22 @@ export declare class SkdxToggleGroup extends SkdxToggleGroup_base {
     private _syncFormState;
     /** Restores the item(s) the `value` attribute declared when the element was first connected. */
     formResetCallback(): void;
-    /** @internal Called by a `<skdx-toggle-group-item>` when it's pressed. */
-    activate(itemValue: string): void;
+    /**
+     * @internal Called by a `<skdx-toggle-group-item>` when it's pressed.
+     *
+     * @param itemValue the item that was pressed
+     * @param reason what drove the press
+     */
+    activate(itemValue: string, reason?: SelectionChangeReason): void;
     /**
      * @internal Called by an item when it unpresses. Blocked in single-mode
      * if `deselectable` is false.
      */
-    deactivate(itemValue: string): void;
+    deactivate(itemValue: string, reason?: SelectionChangeReason): void;
     /** The one place a new pressed set is published. */
     private _commit;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/toggle-group/ToggleGroup.js

@@ -1,5 +1,5 @@
-var f=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(d,n,e,r)=>{for(var l=r>1?void 0:r?g(n,e):n,o=d.length-1,u;o>=0;o--)(u=d[o])&&(l=(r?u(n,e,l):u(l))||l);return r&&l&&f(n,e,l),l};import{css as _,html as b,LitElement as A}from"lit";import{property as s}from"lit/decorators.js";import{hasAuthoredParts as E}from"../internal/authored.js";import{customElement as V}from"../internal/define.js";import{directionalKey as w}from"../internal/direction.js";import{FormAssociated as L}from"../internal/form-associated.js";import{optOutBoolean as p}from"../internal/positioning.js";import{nextSelection as m,selectedValueOf as q,selectionAttributeConverter as v,toSelectionValues as y}from"../internal/selection.js";import{fillToggleGroupAnatomy as C,TOGGLE_GROUP_ANATOMY_GENERATED as M}from"./ToggleGroupAnatomy.js";var c="[data-skdx-toggle-group-item]:not([data-disabled])",t=class extends L(A){constructor(){super(...arguments);this.disabled=!1;this.orientation="horizontal";this.loop=!0;this.deselectable=!0;this.rovingFocus=!0;this.required=!1;this._value=[];this._rawValue=null;this._valueSet=!1;this._resetValue=[];this.fillAnatomy=()=>{E(this,M)||C(this)};this._handleKeydown=e=>{if(!this.rovingFocus)return;let r=Array.from(this.querySelectorAll(c));if(r.length===0)return;let l=r.indexOf(document.activeElement),o=["ArrowRight","ArrowDown"],u=["ArrowLeft","ArrowUp"],h=w(e.key,this),a;o.includes(h)?(a=l+1,a>=r.length&&(a=this.loop?0:r.length-1)):u.includes(h)?(a=l-1,a<0&&(a=this.loop?r.length-1:0)):h==="Home"?a=0:h==="End"&&(a=r.length-1),a!==void 0&&(e.preventDefault(),r[a]?.focus())}}get value(){return[...this._value]}set value(e){this._valueSet=!0,this._rawValue=e??null,(this.type==="single"||this.type==="multiple")&&this._applyValue()}_applyValue(){let e=y(this._rawValue,{multiple:this.type==="multiple",label:"ToggleGroup value"});e.length===this._value.length&&e.every((r,l)=>r===this._value[l])||(this._value=e,this.requestUpdate(),this._syncFormState(),this._notifyItems())}get pressedValues(){return this._value}get firstEnabledValue(){return this.querySelector(c)?.getAttribute("data-value")??null}connectedCallback(){if(super.connectedCallback(),this.type!=="single"&&this.type!=="multiple")throw new Error(`<skdx-toggle-group> requires type="single" or type="multiple", got ${this.type===void 0?"no type attribute":`"${String(this.type)}"`}.`);this.setAttribute("role","group"),this._syncHostAttrs(),this._valueSet?this._applyValue():this._value=y(this.defaultValue,{multiple:this.type==="multiple",label:"ToggleGroup defaultValue"}),this._resetValue=[...this._value],this.addEventListener("keydown",this._handleKeydown),this._syncFormState(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(e){e.has("options")&&this.fillAnatomy(),(e.has("disabled")||e.has("orientation"))&&this._syncHostAttrs(),(e.has("required")||e.has("name"))&&this._syncFormState()}_syncHostAttrs(){this.setAttribute("data-orientation",this.orientation),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}setValue(e){this._value=e,this._rawValue=e,this._syncFormState(),this._notifyItems()}_notifyItems(){this.dispatchEvent(new CustomEvent("skdx-toggle-group-internal-update",{bubbles:!0,composed:!0}))}_syncFormState(){this.setFormValue(this.type==="single"?this._value[0]??null:this.multiFormValue(this._value)),this.setValueMissing(this.required&&this._value.length===0,"Please select an option.",this.querySelector(c))}formResetCallback(){this.setValue([...this._resetValue])}activate(e){this._commit(m(this._value,e,this.type==="multiple",this.deselectable))}deactivate(e){this.type!=="multiple"&&!this.deselectable||this._commit(m(this._value,e,this.type==="multiple",!0))}_commit(e){this.setValue(e),this.dispatchEvent(new CustomEvent("value-change",{detail:{value:e,selectedValue:q(e)},bubbles:!0,composed:!0}))}render(){return b`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=_`
+var v=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var r=(l,n,e,s)=>{for(var i=s>1?void 0:s?y(n,e):n,o=l.length-1,u;o>=0;o--)(u=l[o])&&(i=(s?u(n,e,i):u(i))||i);return s&&i&&v(n,e,i),i};import{css as g,html as _,LitElement as b}from"lit";import{property as a}from"lit/decorators.js";import{hasAuthoredParts as A}from"../internal/authored.js";import{customElement as V}from"../internal/define.js";import{directionalKey as E}from"../internal/direction.js";import{emit as I}from"../internal/events.js";import{FormAssociated as O}from"../internal/form-associated.js";import{optOutBoolean as d}from"../internal/positioning.js";import{enabledRovingItems as w,rovingItemIds as R}from"../internal/roving-tab-stop.js";import{nextSelection as p,selectedValueOf as q,toSelectionValues as c}from"../internal/selection.js";import{selectionAttributeConverter as f}from"../internal/selection-attribute.js";import{TOGGLE_GROUP_FAMILY as F}from"./family.js";import{fillToggleGroupAnatomy as L,TOGGLE_GROUP_ANATOMY_GENERATED as S}from"./ToggleGroupAnatomy.js";var m="[data-skdx-toggle-group-item]",C=["ArrowRight","ArrowDown"],M=["ArrowLeft","ArrowUp"];function B(l,n,e,s){if(C.includes(l)){let i=n+1;return i>=e&&(i=s?0:e-1),i}if(M.includes(l)){let i=n-1;return i<0&&(i=s?e-1:0),i}if(l==="Home")return 0;if(l==="End")return e-1}var t=class extends O(b){constructor(){super(...arguments);this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.selectOnFocus=!1;this.fullWidth=!1;this.orientation="horizontal";this.loop=!0;this.deselectable=!0;this.rovingFocus=!0;this.required=!1;this._value=[];this._rawValue=null;this._valueSet=!1;this._resetValue=[];this.fillAnatomy=()=>{A(this,S)||L(this)};this._handleKeydown=e=>{if(!this.rovingFocus)return;let s=this.enabledItems;if(s.length===0)return;let i=null;e.target instanceof Element&&(i=e.target.closest(m));let o=s.indexOf(i),u=E(e.key,this),h=B(u,o,s.length,this.loop);h!==void 0&&(e.preventDefault(),s[h]?.focus())}}get value(){return[...this._value]}set value(e){this._valueSet=!0,this._rawValue=e??null,(this.type==="single"||this.type==="multiple")&&this._applyValue()}_applyValue(){let e=c(this._rawValue,{multiple:this.type==="multiple",label:"ToggleGroup value"});e.length===this._value.length&&e.every((s,i)=>s===this._value[i])||(this._value=e,this.requestUpdate(),this._syncFormState(),this._notifyItems())}get pressedValues(){return this._value}get firstEnabledValue(){return R(this.enabledItems,"data-value")[0]??null}get enabledItems(){return w(this,m)}connectedCallback(){if(super.connectedCallback(),this.type!=="single"&&this.type!=="multiple")throw new Error(`<skdx-toggle-group> requires type="single" or type="multiple", got ${this.type===void 0?"no type attribute":`"${String(this.type)}"`}.`);this.setAttribute("role","group"),this._syncHostAttrs(),this._valueSet?this._applyValue():this._value=c(this.defaultValue,{multiple:this.type==="multiple",label:"ToggleGroup defaultValue"}),this._resetValue=[...this._value],this.addEventListener("keydown",this._handleKeydown),this._syncFormState(),queueMicrotask(this.fillAnatomy)}refreshIndicator(){for(let e of this.querySelectorAll("skdx-toggle-group-indicator"))e.refresh?.()}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(e){(e.has("options")||e.has("variant"))&&this.fillAnatomy(),this._syncHostAttrs(),(e.has("required")||e.has("name")||e.has("options"))&&this._syncFormState(),this.refreshIndicator()}_syncHostAttrs(){this.setAttribute("data-orientation",this.orientation),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.readOnly?this.setAttribute("data-readonly",""):this.removeAttribute("data-readonly"),this.invalid?this.setAttribute("data-invalid",""):this.removeAttribute("data-invalid"),this.required?this.setAttribute("data-required",""):this.removeAttribute("data-required")}setValue(e){this._value=e,this._rawValue=e,this._syncFormState(),this._notifyItems()}_notifyItems(){F.notify(this),this.refreshIndicator()}_syncFormState(){this.setFormValue(this.type==="single"?this._value[0]??null:this.multiFormValue(this._value)),this.setValueMissing(this.required&&this._value.length===0,"Please select an option.",this.enabledItems[0]??null)}formResetCallback(){this.setValue([...this._resetValue])}activate(e,s="programmatic"){this.readOnly||this._commit(p(this._value,e,this.type==="multiple",this.deselectable),s)}deactivate(e,s="programmatic"){this.readOnly||this.type!=="multiple"&&!this.deselectable||this._commit(p(this._value,e,this.type==="multiple",!0),s)}_commit(e,s="programmatic"){let i=this._value;this.setValue(e),I(this,"value-change",{value:e,previousValue:i,reason:s,selectedValue:q(e)})}render(){return _`<slot @slotchange=${this.fillAnatomy}></slot>`}};t.styles=g`
     :host {
       display: inline-flex;
     }
-  `,i([s({type:String,reflect:!0})],t.prototype,"type",2),i([s({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([s({type:String,reflect:!0})],t.prototype,"orientation",2),i([s({converter:p,reflect:!0})],t.prototype,"loop",2),i([s({converter:p,reflect:!0})],t.prototype,"deselectable",2),i([s({converter:p,reflect:!0,attribute:"roving-focus"})],t.prototype,"rovingFocus",2),i([s({type:Boolean,reflect:!0})],t.prototype,"required",2),i([s({type:String,reflect:!0})],t.prototype,"name",2),i([s({type:String,attribute:"form",reflect:!0})],t.prototype,"formId",2),i([s({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([s({converter:v,attribute:"default-value"})],t.prototype,"defaultValue",2),i([s({attribute:!1})],t.prototype,"options",2),i([s({converter:v,attribute:"value",noAccessor:!0})],t.prototype,"value",1),t=i([V("skdx-toggle-group","toggle-group","root")],t);export{t as SkdxToggleGroup};
+  `,r([a({type:String,reflect:!0})],t.prototype,"type",2),r([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([a({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),r([a({type:Boolean,reflect:!0})],t.prototype,"invalid",2),r([a({type:String,reflect:!0,attribute:"data-variant"})],t.prototype,"variant",2),r([a({type:Boolean,reflect:!0,attribute:"select-on-focus"})],t.prototype,"selectOnFocus",2),r([a({type:Boolean,reflect:!0,attribute:"data-full-width"})],t.prototype,"fullWidth",2),r([a({type:String,reflect:!0,attribute:"data-size"})],t.prototype,"size",2),r([a({type:String,reflect:!0})],t.prototype,"orientation",2),r([a({converter:d,reflect:!0})],t.prototype,"loop",2),r([a({converter:d,reflect:!0})],t.prototype,"deselectable",2),r([a({converter:d,reflect:!0,attribute:"roving-focus"})],t.prototype,"rovingFocus",2),r([a({type:Boolean,reflect:!0})],t.prototype,"required",2),r([a({type:String,reflect:!0})],t.prototype,"name",2),r([a({type:String,attribute:"form",reflect:!0})],t.prototype,"formId",2),r([a({attribute:"required-message"})],t.prototype,"requiredMessage",2),r([a({converter:f,attribute:"default-value"})],t.prototype,"defaultValue",2),r([a({attribute:!1})],t.prototype,"options",2),r([a({converter:f,attribute:"value",noAccessor:!0})],t.prototype,"value",1),t=r([V("skdx-toggle-group","toggle-group","root")],t);export{t as SkdxToggleGroup};

package/dist/toggle-group/ToggleGroupAnatomy.cjs

@@ -1,8 +1,14 @@
-"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var m=(o,e)=>{for(var r in e)l(o,r,{get:e[r],enumerable:!0})},s=(o,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let g of u(e))!i.call(o,g)&&g!==r&&l(o,g,{get:()=>e[g],enumerable:!(d=p(e,g))||d.enumerable});return o};var x=o=>s(l({},"__esModule",{value:!0}),o);var T={};m(T,{TOGGLE_GROUP_ANATOMY_GENERATED:()=>G,fillToggleGroupAnatomy:()=>n});module.exports=x(T);var t=require("lit"),a=require("lit/directives/repeat.js"),k=require("./ToggleGroupItem.cjs"),G="data-skdx-toggle-group-generated";function n(o){(0,t.render)((0,a.repeat)(o.options??[],e=>e.value,e=>t.html`
-        <skdx-toggle-group-item
-          data-skdx-toggle-group-generated
-          value=${e.value}
-          ?disabled=${e.disabled??!1}
-          >${e.label}</skdx-toggle-group-item
-        >
-      `),o,{host:o})}0&&(module.exports={TOGGLE_GROUP_ANATOMY_GENERATED,fillToggleGroupAnatomy});
+"use strict";var d=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var u=(e,g)=>{for(var t in g)d(e,t,{get:g[t],enumerable:!0})},m=(e,g,t,a)=>{if(g&&typeof g=="object"||typeof g=="function")for(let o of p(g))!s.call(e,o)&&o!==t&&d(e,o,{get:()=>g[o],enumerable:!(a=i(g,o))||a.enumerable});return e};var n=e=>m(d({},"__esModule",{value:!0}),e);var G={};u(G,{TOGGLE_GROUP_ANATOMY_GENERATED:()=>x,fillToggleGroupAnatomy:()=>k});module.exports=n(G);var r=require("lit"),l=require("lit/directives/repeat.js"),f=require("./ToggleGroupIndicator.cjs"),c=require("./ToggleGroupItem.cjs"),x="data-skdx-toggle-group-generated";function k(e){let g=(0,l.repeat)(e.options??[],t=>t.value,t=>r.html`
+      <skdx-toggle-group-item
+        data-skdx-toggle-group-generated
+        value=${t.value}
+        ?disabled=${t.disabled??!1}
+        >${t.label}</skdx-toggle-group-item
+      >
+    `);(0,r.render)(e.variant==="segmented"?r.html`
+          <skdx-toggle-group-indicator
+            data-skdx-toggle-group-generated
+            aria-hidden="true"
+          ></skdx-toggle-group-indicator>
+          ${g}
+        `:g,e,{host:e})}0&&(module.exports={TOGGLE_GROUP_ANATOMY_GENERATED,fillToggleGroupAnatomy});

package/dist/toggle-group/ToggleGroupAnatomy.d.cts

@@ -1,4 +1,5 @@
 import type { SkdxToggleGroup } from './ToggleGroup.cjs';
+import './ToggleGroupIndicator.cjs';
 import './ToggleGroupItem.cjs';
 /**
  * @internal Marks a direct child of `<skdx-toggle-group>` this module
@@ -8,8 +9,9 @@ import './ToggleGroupItem.cjs';
 export declare const TOGGLE_GROUP_ANATOMY_GENERATED = "data-skdx-toggle-group-generated";
 /**
  * Builds one Item per option, keyed by value so the pressed item stays in place
- * when the list changes. Only called by `<skdx-toggle-group>` when no
- * consumer-authored composition exists.
+ * when the list changes, preceded by the sliding Indicator under the segmented
+ * variant. Only called by `<skdx-toggle-group>` when no consumer-authored
+ * composition exists.
  * @internal
  */
 export declare function fillToggleGroupAnatomy(root: SkdxToggleGroup): void;

package/dist/toggle-group/ToggleGroupAnatomy.d.ts

@@ -1,4 +1,5 @@
 import type { SkdxToggleGroup } from './ToggleGroup.js';
+import './ToggleGroupIndicator.js';
 import './ToggleGroupItem.js';
 /**
  * @internal Marks a direct child of `<skdx-toggle-group>` this module
@@ -8,8 +9,9 @@ import './ToggleGroupItem.js';
 export declare const TOGGLE_GROUP_ANATOMY_GENERATED = "data-skdx-toggle-group-generated";
 /**
  * Builds one Item per option, keyed by value so the pressed item stays in place
- * when the list changes. Only called by `<skdx-toggle-group>` when no
- * consumer-authored composition exists.
+ * when the list changes, preceded by the sliding Indicator under the segmented
+ * variant. Only called by `<skdx-toggle-group>` when no consumer-authored
+ * composition exists.
  * @internal
  */
 export declare function fillToggleGroupAnatomy(root: SkdxToggleGroup): void;

package/dist/toggle-group/ToggleGroupAnatomy.js

@@ -1,8 +1,14 @@
-import{html as g,render as r}from"lit";import{repeat as t}from"lit/directives/repeat.js";import"./ToggleGroupItem.js";var p="data-skdx-toggle-group-generated";function u(o){r(t(o.options??[],e=>e.value,e=>g`
-        <skdx-toggle-group-item
-          data-skdx-toggle-group-generated
-          value=${e.value}
-          ?disabled=${e.disabled??!1}
-          >${e.label}</skdx-toggle-group-item
-        >
-      `),o,{host:o})}export{p as TOGGLE_GROUP_ANATOMY_GENERATED,u as fillToggleGroupAnatomy};
+import{html as o,render as r}from"lit";import{repeat as d}from"lit/directives/repeat.js";import"./ToggleGroupIndicator.js";import"./ToggleGroupItem.js";var s="data-skdx-toggle-group-generated";function u(g){let t=d(g.options??[],e=>e.value,e=>o`
+      <skdx-toggle-group-item
+        data-skdx-toggle-group-generated
+        value=${e.value}
+        ?disabled=${e.disabled??!1}
+        >${e.label}</skdx-toggle-group-item
+      >
+    `);r(g.variant==="segmented"?o`
+          <skdx-toggle-group-indicator
+            data-skdx-toggle-group-generated
+            aria-hidden="true"
+          ></skdx-toggle-group-indicator>
+          ${t}
+        `:t,g,{host:g})}export{s as TOGGLE_GROUP_ANATOMY_GENERATED,u as fillToggleGroupAnatomy};

package/dist/toggle-group/ToggleGroupIndicator.cjs

@@ -0,0 +1,5 @@
+"use strict";var g=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var x=(o,s)=>{for(var t in s)g(o,t,{get:s[t],enumerable:!0})},k=(o,s,t,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let e of m(s))!y.call(o,e)&&e!==t&&g(o,e,{get:()=>s[e],enumerable:!(r=u(s,e))||r.enumerable});return o};var f=o=>k(g({},"__esModule",{value:!0}),o),v=(o,s,t,r)=>{for(var e=r>1?void 0:r?u(s,t):s,i=o.length-1,l;i>=0;i--)(l=o[i])&&(e=(r?l(s,t,e):l(e))||e);return r&&e&&g(s,t,e),e};var O={};x(O,{SkdxToggleGroupIndicator:()=>n});module.exports=f(O);var d=require("lit"),c=require("../internal/define.cjs"),b=require("./family.cjs");var E=["--skdx-toggle-group-x","--skdx-toggle-group-y","--skdx-toggle-group-width","--skdx-toggle-group-height"],T='[data-skdx-toggle-group-item][data-state="on"]',n=class extends d.LitElement{constructor(){super(...arguments);this.root=null;this.observer=null;this.observedItem=null;this.lastKey=null}connectedCallback(){if(super.connectedCallback(),this.root=b.TOGGLE_GROUP_FAMILY.root(this),!this.root)throw new Error("<skdx-toggle-group-indicator> must be used inside <skdx-toggle-group>.");this.setAttribute("aria-hidden","true"),this.measure()}disconnectedCallback(){this.detachObserver(),super.disconnectedCallback()}refresh(){this.measure()}detachObserver(){this.observer?.disconnect(),this.observer=null,this.observedItem=null}measure(){let t=this.root;if(!t)return;this.setAttribute("data-orientation",t.orientation);let r=t.querySelector(T);if(!r){this.detachObserver(),this.lastKey=null,this.setAttribute("data-state","hidden");for(let e of E)this.style.removeProperty(e);return}this.observe(t,r),this.publish(t,r)}observe(t,r){this.observer&&this.observedItem===r||(this.detachObserver(),!(typeof ResizeObserver>"u")&&(this.observer=new ResizeObserver(()=>this.measure()),this.observer.observe(t),this.observer.observe(r),this.observedItem=r))}publish(t,r){let e=r.getBoundingClientRect(),i=t.getBoundingClientRect(),l=e.left-i.left,a=e.top-i.top,h=t.orientation==="vertical",p=`${h}:${l},${a},${e.width},${e.height}`;this.lastKey!==p&&(this.lastKey=p,this.setAttribute("data-state","visible"),this.style.setProperty("--skdx-toggle-group-x",`${l}px`),this.style.setProperty("--skdx-toggle-group-width",`${e.width}px`),h?(this.style.setProperty("--skdx-toggle-group-y",`${a}px`),this.style.setProperty("--skdx-toggle-group-height",`${e.height}px`)):(this.style.removeProperty("--skdx-toggle-group-y"),this.style.removeProperty("--skdx-toggle-group-height")))}render(){return d.html`<slot></slot>`}};n.styles=d.css`
+    :host {
+      display: block;
+    }
+  `,n=v([(0,c.customElement)("skdx-toggle-group-indicator","toggle-group","indicator")],n);0&&(module.exports={SkdxToggleGroupIndicator});

package/dist/toggle-group/ToggleGroupIndicator.d.cts

@@ -0,0 +1,39 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * The highlight that slides behind the pressed item, publishing its geometry as
+ * `--skdx-toggle-group-x/-y/-width/-height`. The movement itself is one CSS
+ * transition the consumer writes: this part measures and animates nothing, and
+ * renders `data-state="hidden"` until it has measured, so a skin has to supply
+ * its own fallback. Decorative and `aria-hidden`, since the items already
+ * report which one is pressed.
+ *
+ * @example
+ * ```html
+ * <skdx-toggle-group type="single" data-variant="segmented" value="week" aria-label="Date range">
+ *   <skdx-toggle-group-indicator></skdx-toggle-group-indicator>
+ *   <skdx-toggle-group-item value="day">Day</skdx-toggle-group-item>
+ *   <skdx-toggle-group-item value="week">Week</skdx-toggle-group-item>
+ * </skdx-toggle-group>
+ * ```
+ */
+export declare class SkdxToggleGroupIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private observer;
+    private observedItem;
+    private lastKey;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the enclosing `<skdx-toggle-group>` whenever its pressed set moves. */
+    refresh(): void;
+    private detachObserver;
+    private measure;
+    private observe;
+    private publish;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toggle-group-indicator': SkdxToggleGroupIndicator;
+    }
+}

package/dist/toggle-group/ToggleGroupIndicator.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * The highlight that slides behind the pressed item, publishing its geometry as
+ * `--skdx-toggle-group-x/-y/-width/-height`. The movement itself is one CSS
+ * transition the consumer writes: this part measures and animates nothing, and
+ * renders `data-state="hidden"` until it has measured, so a skin has to supply
+ * its own fallback. Decorative and `aria-hidden`, since the items already
+ * report which one is pressed.
+ *
+ * @example
+ * ```html
+ * <skdx-toggle-group type="single" data-variant="segmented" value="week" aria-label="Date range">
+ *   <skdx-toggle-group-indicator></skdx-toggle-group-indicator>
+ *   <skdx-toggle-group-item value="day">Day</skdx-toggle-group-item>
+ *   <skdx-toggle-group-item value="week">Week</skdx-toggle-group-item>
+ * </skdx-toggle-group>
+ * ```
+ */
+export declare class SkdxToggleGroupIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private observer;
+    private observedItem;
+    private lastKey;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the enclosing `<skdx-toggle-group>` whenever its pressed set moves. */
+    refresh(): void;
+    private detachObserver;
+    private measure;
+    private observe;
+    private publish;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toggle-group-indicator': SkdxToggleGroupIndicator;
+    }
+}

package/dist/toggle-group/ToggleGroupIndicator.js

@@ -0,0 +1,5 @@
+var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var h=(n,i,t,r)=>{for(var e=r>1?void 0:r?u(i,t):i,s=n.length-1,o;s>=0;s--)(o=n[s])&&(e=(r?o(i,t,e):o(e))||e);return r&&e&&p(i,t,e),e};import{css as v,html as c,LitElement as b}from"lit";import{customElement as m}from"../internal/define.js";import{TOGGLE_GROUP_FAMILY as y}from"./family.js";var x=["--skdx-toggle-group-x","--skdx-toggle-group-y","--skdx-toggle-group-width","--skdx-toggle-group-height"],k='[data-skdx-toggle-group-item][data-state="on"]',l=class extends b{constructor(){super(...arguments);this.root=null;this.observer=null;this.observedItem=null;this.lastKey=null}connectedCallback(){if(super.connectedCallback(),this.root=y.root(this),!this.root)throw new Error("<skdx-toggle-group-indicator> must be used inside <skdx-toggle-group>.");this.setAttribute("aria-hidden","true"),this.measure()}disconnectedCallback(){this.detachObserver(),super.disconnectedCallback()}refresh(){this.measure()}detachObserver(){this.observer?.disconnect(),this.observer=null,this.observedItem=null}measure(){let t=this.root;if(!t)return;this.setAttribute("data-orientation",t.orientation);let r=t.querySelector(k);if(!r){this.detachObserver(),this.lastKey=null,this.setAttribute("data-state","hidden");for(let e of x)this.style.removeProperty(e);return}this.observe(t,r),this.publish(t,r)}observe(t,r){this.observer&&this.observedItem===r||(this.detachObserver(),!(typeof ResizeObserver>"u")&&(this.observer=new ResizeObserver(()=>this.measure()),this.observer.observe(t),this.observer.observe(r),this.observedItem=r))}publish(t,r){let e=r.getBoundingClientRect(),s=t.getBoundingClientRect(),o=e.left-s.left,d=e.top-s.top,g=t.orientation==="vertical",a=`${g}:${o},${d},${e.width},${e.height}`;this.lastKey!==a&&(this.lastKey=a,this.setAttribute("data-state","visible"),this.style.setProperty("--skdx-toggle-group-x",`${o}px`),this.style.setProperty("--skdx-toggle-group-width",`${e.width}px`),g?(this.style.setProperty("--skdx-toggle-group-y",`${d}px`),this.style.setProperty("--skdx-toggle-group-height",`${e.height}px`)):(this.style.removeProperty("--skdx-toggle-group-y"),this.style.removeProperty("--skdx-toggle-group-height")))}render(){return c`<slot></slot>`}};l.styles=v`
+    :host {
+      display: block;
+    }
+  `,l=h([m("skdx-toggle-group-indicator","toggle-group","indicator")],l);export{l as SkdxToggleGroupIndicator};

package/dist/toggle-group/ToggleGroupItem.cjs

@@ -1,4 +1,4 @@
-"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(i,e)=>{for(var t in e)d(i,t,{get:e[t],enumerable:!0})},f=(i,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of g(e))!v.call(i,s)&&s!==t&&d(i,s,{get:()=>e[s],enumerable:!(r=h(e,s))||r.enumerable});return i};var k=i=>f(d({},"__esModule",{value:!0}),i),l=(i,e,t,r)=>{for(var s=r>1?void 0:r?h(e,t):e,n=i.length-1,u;n>=0;n--)(u=i[n])&&(s=(r?u(e,t,s):u(s))||s);return r&&s&&d(e,t,s),s};var y={};b(y,{SkdxToggleGroupItem:()=>o});module.exports=k(y);var a=require("lit"),p=require("lit/decorators.js"),c=require("../internal/define.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.group=null;this.onGroupUpdate=()=>this._sync();this._handleClick=()=>{this.effectiveDisabled||!this.group||(this.pressed?this.group.deactivate(this.value):this.group.activate(this.value))};this._handleKeydown=t=>{(t.key==="Enter"||t.key===" ")&&!this.effectiveDisabled&&(t.preventDefault(),this._handleClick())}}connectedCallback(){if(super.connectedCallback(),this.group=this.closest("skdx-toggle-group"),!this.group)throw new Error("<skdx-toggle-group-item> must be used inside <skdx-toggle-group>.");this.group.addEventListener("skdx-toggle-group-internal-update",this.onGroupUpdate),this.setAttribute("role","button"),this.setAttribute("data-skdx-toggle-group-item",""),this.classList.add("skdx-toggle"),this.addEventListener("click",this._handleClick),this.addEventListener("keydown",this._handleKeydown),this._sync()}disconnectedCallback(){this.group?.removeEventListener("skdx-toggle-group-internal-update",this.onGroupUpdate),this.removeEventListener("click",this._handleClick),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}updated(){this._sync()}get pressed(){return this.group?.pressedValues.includes(this.value)??!1}get effectiveDisabled(){return this.disabled||this.group?.disabled||!1}_sync(){let t=this.effectiveDisabled;this.setAttribute("aria-pressed",String(this.pressed)),this.setAttribute("data-state",this.pressed?"on":"off"),this.setAttribute("data-value",this.value),t?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled");let r=this.group?.pressedValues??[],s=this.group?.rovingFocus===!1?!t:r.length===0?this.group?.firstEnabledValue===this.value:this.pressed&&r[0]===this.value;this.tabIndex=s?0:-1}render(){return a.html`<slot></slot>`}};o.styles=a.css`
+"use strict";var d=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var _=(r,i)=>{for(var s in i)d(r,s,{get:i[s],enumerable:!0})},y=(r,i,s,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of b(i))!m.call(r,e)&&e!==s&&d(r,e,{get:()=>i[e],enumerable:!(t=g(i,e))||t.enumerable});return r};var E=r=>y(d({},"__esModule",{value:!0}),r),l=(r,i,s,t)=>{for(var e=t>1?void 0:t?g(i,s):i,a=r.length-1,c;a>=0;a--)(c=r[a])&&(e=(t?c(i,s,e):c(e))||e);return t&&e&&d(i,s,e),e};var k={};_(k,{SkdxToggleGroupItem:()=>o});module.exports=E(k);var n=require("lit"),v=require("lit/decorators.js"),f=require("../internal/button-host.cjs"),h=require("../internal/define.cjs"),p=require("../internal/roving-tab-stop.cjs"),u=require("./family.cjs");var o=class extends(0,f.ButtonHost)(n.LitElement){constructor(){super(...arguments);this.value="";this.disabled=!1;this.group=null;this.onGroupUpdate=()=>this._sync();this._pointerPressed=!1;this._handlePointerDown=()=>{this._pointerPressed=!0};this._handleBlur=()=>{this._pointerPressed=!1};this._handleFocus=s=>{let t=this.group;if(!t?.selectOnFocus||t.type!=="single"||this.effectiveDisabled||this.pressed)return;if(this._pointerPressed){t.activate(this.value,"pointer");return}let e=s.relatedTarget;e?.hasAttribute("data-skdx-toggle-group-item")===!0&&e.closest("skdx-toggle-group")===t&&t.activate(this.value,"keyboard")};this._handleClick=s=>{if(this.effectiveDisabled||!this.group)return;let t=s.detail===0?"keyboard":"pointer";this.pressed?this.group.deactivate(this.value,t):this.group.activate(this.value,t)}}connectedCallback(){if(super.connectedCallback(),this.group=u.TOGGLE_GROUP_FAMILY.root(this),!this.group)throw new Error("<skdx-toggle-group-item> must be used inside <skdx-toggle-group>.");this.group.addEventListener(u.TOGGLE_GROUP_FAMILY.event,this.onGroupUpdate),this.setAttribute("role","button"),this.setAttribute("data-skdx-toggle-group-item",""),this.classList.add("skdx-toggle"),this.addEventListener("click",this._handleClick),this.addEventListener("pointerdown",this._handlePointerDown),this.addEventListener("blur",this._handleBlur),this.addEventListener("focus",this._handleFocus),(0,h.whenUpgraded)(this.group,()=>this._sync())}disconnectedCallback(){this.group?.removeEventListener(u.TOGGLE_GROUP_FAMILY.event,this.onGroupUpdate),this.removeEventListener("click",this._handleClick),this.removeEventListener("pointerdown",this._handlePointerDown),this.removeEventListener("blur",this._handleBlur),this.removeEventListener("focus",this._handleFocus),super.disconnectedCallback()}updated(s){super.updated(s),this._sync()}syncButtonHost(){this.effectiveDisabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}get pressed(){return this.group?.pressedValues.includes(this.value)??!1}get effectiveDisabled(){return this.disabled||this.group?.disabled||!1}_sync(){let s=this.effectiveDisabled;this.setAttribute("aria-pressed",String(this.pressed)),this.setAttribute("data-state",this.pressed?"on":"off"),this.setAttribute("data-value",this.value),s?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled");let t=this.group!==null&&this.group.rovingFocus!==!1,e=this.group?.firstEnabledValue??null,a=(0,p.resolveTabStopId)(e===null?[]:[e],this.group?.pressedValues??[],null);this.tabIndex=(0,p.rovingTabIndex)(t,a===this.value,s)}render(){return n.html`<slot></slot>`}};o.styles=n.css`
     :host {
       display: inline-block;
       cursor: pointer;
@@ -6,4 +6,4 @@
     :host([data-disabled]) {
       cursor: default;
     }
-  `,l([(0,p.property)({type:String,reflect:!0})],o.prototype,"value",2),l([(0,p.property)({type:Boolean,reflect:!0})],o.prototype,"disabled",2),o=l([(0,c.customElement)("skdx-toggle-group-item","toggle-group","item")],o);0&&(module.exports={SkdxToggleGroupItem});
+  `,l([(0,v.property)({type:String,reflect:!0})],o.prototype,"value",2),l([(0,v.property)({type:Boolean,reflect:!0})],o.prototype,"disabled",2),o=l([(0,h.customElement)("skdx-toggle-group-item","toggle-group","item")],o);0&&(module.exports={SkdxToggleGroupItem});

package/dist/toggle-group/ToggleGroupItem.d.cts

@@ -1,4 +1,5 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+declare const SkdxToggleGroupItem_base: typeof LitElement & (new (...args: any[]) => import("../internal/button-host.cjs").SkdxButtonHost);
 /**
  * Single button within `<skdx-toggle-group>`. Sets `role="button"`, `aria-pressed`, `data-state`, `data-value` on host. Clicking activates; already-pressed deactivates in "multiple" mode (unless `deselectable="false"`). Different item switches selection. Roving tabindex: first pressed (or first enabled if none) is tab stop, unless group sets `roving-focus="false"`.
  *
@@ -10,7 +11,7 @@ import { LitElement } from 'lit';
  * </skdx-toggle-group>
  * ```
  */
-export declare class SkdxToggleGroupItem extends LitElement {
+export declare class SkdxToggleGroupItem extends SkdxToggleGroupItem_base {
     static styles: import("lit").CSSResult;
     /** Unique identifier compared against the group's pressed value(s). */
     value: string;
@@ -20,16 +21,25 @@ export declare class SkdxToggleGroupItem extends LitElement {
     private readonly onGroupUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(): void;
-    private get pressed();
-    private get effectiveDisabled();
+    protected updated(changed: Map<string, unknown>): void;
+    protected syncButtonHost(): void;
+    /**
+     * Whether this item currently holds one of the group's pressed values.
+     * Read-only: press or clear it through the group's own `value`.
+     */
+    get pressed(): boolean;
+    protected get effectiveDisabled(): boolean;
     private _sync;
+    private _pointerPressed;
+    private readonly _handlePointerDown;
+    private readonly _handleBlur;
+    private readonly _handleFocus;
     private readonly _handleClick;
-    private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'skdx-toggle-group-item': SkdxToggleGroupItem;
     }
 }
+export {};

package/dist/toggle-group/ToggleGroupItem.d.ts

@@ -1,4 +1,5 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+declare const SkdxToggleGroupItem_base: typeof LitElement & (new (...args: any[]) => import("../internal/button-host.js").SkdxButtonHost);
 /**
  * Single button within `<skdx-toggle-group>`. Sets `role="button"`, `aria-pressed`, `data-state`, `data-value` on host. Clicking activates; already-pressed deactivates in "multiple" mode (unless `deselectable="false"`). Different item switches selection. Roving tabindex: first pressed (or first enabled if none) is tab stop, unless group sets `roving-focus="false"`.
  *
@@ -10,7 +11,7 @@ import { LitElement } from 'lit';
  * </skdx-toggle-group>
  * ```
  */
-export declare class SkdxToggleGroupItem extends LitElement {
+export declare class SkdxToggleGroupItem extends SkdxToggleGroupItem_base {
     static styles: import("lit").CSSResult;
     /** Unique identifier compared against the group's pressed value(s). */
     value: string;
@@ -20,16 +21,25 @@ export declare class SkdxToggleGroupItem extends LitElement {
     private readonly onGroupUpdate;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(): void;
-    private get pressed();
-    private get effectiveDisabled();
+    protected updated(changed: Map<string, unknown>): void;
+    protected syncButtonHost(): void;
+    /**
+     * Whether this item currently holds one of the group's pressed values.
+     * Read-only: press or clear it through the group's own `value`.
+     */
+    get pressed(): boolean;
+    protected get effectiveDisabled(): boolean;
     private _sync;
+    private _pointerPressed;
+    private readonly _handlePointerDown;
+    private readonly _handleBlur;
+    private readonly _handleFocus;
     private readonly _handleClick;
-    private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'skdx-toggle-group-item': SkdxToggleGroupItem;
     }
 }
+export {};