@skdx/web-components 0.28.0 → 0.29.0

package/dist/radio-group/RadioGroup.cjs

@@ -1,5 +1 @@
-"use strict";var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var E=(n,s)=>{for(var e in s)c(n,e,{get:s[e],enumerable:!0})},I=(n,s,e,t)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of V(s))!w.call(n,i)&&i!==e&&c(n,i,{get:()=>s[i],enumerable:!(t=v(s,i))||t.enumerable});return n};var C=n=>I(c({},"__esModule",{value:!0}),n),a=(n,s,e,t)=>{for(var i=t>1?void 0:t?v(s,e):s,d=n.length-1,h;d>=0;d--)(h=n[d])&&(i=(t?h(s,e,i):h(i))||i);return t&&i&&c(s,e,i),i};var O={};E(O,{SkdxRadioGroup:()=>r});module.exports=C(O);var u=require("lit"),l=require("lit/decorators.js"),p=require("../internal/authored.cjs"),b=require("../internal/define.cjs"),y=require("../internal/direction.cjs"),g=require("../internal/form-associated.cjs"),A=require("../internal/positioning.cjs"),m=require("./RadioGroupAnatomy.cjs");var r=class extends(0,g.FormAssociated)(u.LitElement){constructor(){super(...arguments);this.required=!1;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.orientation="both";this.loop=!0;this._items=[];this.fillAnatomy=()=>{(0,p.hasAuthoredParts)(this,m.RADIO_GROUP_ANATOMY_GENERATED)||(0,m.fillRadioGroupAnatomy)(this)};this._handleKeydown=e=>{let t=Array.from(this.querySelectorAll('[role="radio"]')).filter(_=>_.getAttribute("data-disabled")===null);if(t.length===0)return;let i=t.indexOf(document.activeElement),d=this.orientation==="vertical"?["ArrowDown"]:this.orientation==="horizontal"?["ArrowRight"]:["ArrowRight","ArrowDown"],h=this.orientation==="vertical"?["ArrowUp"]:this.orientation==="horizontal"?["ArrowLeft"]:["ArrowLeft","ArrowUp"],f=(0,y.directionalKey)(e.key,this),o;d.includes(f)?(o=i+1,o>=t.length&&(o=this.loop?0:t.length-1)):h.includes(f)?(o=i-1,o<0&&(o=this.loop?t.length-1:0)):f==="Home"?o=0:f==="End"&&(o=t.length-1),o!==void 0&&(e.preventDefault(),t[o]?.focus())}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),this.setAttribute("role","radiogroup"),this.addEventListener("keydown",this._handleKeydown),this._syncHostAttributes(),this.syncFormState(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}getSelectedValue(){return this.value!==void 0?this.value:this._uncontrolledValue}getFirstEnabledValue(){return this._items.find(e=>!e.disabled)?.value??null}setValue(e,t="programmatic"){if(this.disabled||this.readOnly)return;let i=this.getSelectedValue()??null;i!==e&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:{value:e,previousValue:i,reason:t},bubbles:!0,composed:!0})),this.syncFormState(),this._refreshItems())}registerItem(e,t,i){this._items.push({el:e,value:t,disabled:i})}unregisterItem(e){let t=this._items.findIndex(i=>i.el===e);t!==-1&&this._items.splice(t,1)}_refreshItems(){for(let{el:e}of this._items)e.refresh()}_syncHostAttributes(){this.required?this.setAttribute("aria-required","true"):this.removeAttribute("aria-required"),this.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.readOnly?this.setAttribute("data-readonly",""):this.removeAttribute("data-readonly"),this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid"),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.invalid?this.setAttribute("data-invalid",""):this.removeAttribute("data-invalid"),this.setAttribute("data-orientation",this.orientation)}syncFormState(){let e=this.getSelectedValue();this.setFormValue(e??null),this.setValueMissing(this.required&&!e,"Please select an option.")}formResetCallback(){let e=this.getSelectedValue()??null;this.value===void 0&&(this._uncontrolledValue=this.defaultValue);let t=this.getSelectedValue()??null;this.syncFormState(),this._refreshItems(),!(t===e||t===null)&&this.dispatchEvent(new CustomEvent("value-change",{detail:{value:t,previousValue:e,reason:"programmatic"},bubbles:!0,composed:!0}))}updated(e){e.has("options")&&this.fillAnatomy(),this._syncHostAttributes(),e.has("value")&&this._refreshItems(),(e.has("required")||e.has("value"))&&this.syncFormState()}render(){return u.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};r.styles=u.css`
-    :host {
-      display: block;
-    }
-  `,a([(0,l.property)({type:String})],r.prototype,"value",2),a([(0,l.property)({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),a([(0,l.property)({type:String,reflect:!0})],r.prototype,"name",2),a([(0,l.property)({type:Boolean,reflect:!0})],r.prototype,"required",2),a([(0,l.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),a([(0,l.property)({type:Boolean,reflect:!0,attribute:"readonly"})],r.prototype,"readOnly",2),a([(0,l.property)({type:Boolean,reflect:!0})],r.prototype,"invalid",2),a([(0,l.property)({type:String,reflect:!0})],r.prototype,"orientation",2),a([(0,l.property)({converter:A.optOutBoolean})],r.prototype,"loop",2),a([(0,l.property)({attribute:"required-message"})],r.prototype,"requiredMessage",2),a([(0,l.property)({attribute:!1})],r.prototype,"options",2),a([(0,l.state)()],r.prototype,"_uncontrolledValue",2),r=a([(0,b.customElement)("skdx-radio-group","radio-group","root")],r);0&&(module.exports={SkdxRadioGroup});
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var _=(n,i)=>{for(var e in i)c(n,e,{get:i[e],enumerable:!0})},E=(n,i,e,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of w(i))!K.call(n,r)&&r!==e&&c(n,r,{get:()=>i[r],enumerable:!(t=m(i,r))||t.enumerable});return n};var R=n=>E(c({},"__esModule",{value:!0}),n),a=(n,i,e,t)=>{for(var r=t>1?void 0:t?m(i,e):i,u=n.length-1,d;u>=0;u--)(d=n[u])&&(r=(t?d(i,e,r):d(r))||r);return t&&r&&c(i,e,r),r};var x={};_(x,{SkdxRadioGroup:()=>s});module.exports=R(x);var l=require("lit/decorators.js"),v=require("../internal/authored.cjs"),y=require("../internal/define.cjs"),g=require("../internal/direction.cjs"),p=require("../internal/events.cjs"),b=require("../internal/positioning.cjs"),A=require("../internal/roving-tab-stop.cjs"),V=require("../internal/selection-group.cjs"),f=require("./RadioGroupAnatomy.cjs");var s=class extends V.SkdxSelectionGroupBase{constructor(){super(...arguments);this.groupRole="radiogroup";this.orientation="both";this.loop=!0;this.fillAnatomy=()=>{(0,v.hasAuthoredParts)(this,f.RADIO_GROUP_ANATOMY_GENERATED)||(0,f.fillRadioGroupAnatomy)(this)};this._handleKeydown=e=>{let t=(0,A.enabledRovingItems)(this,'[role="radio"]');if(t.length===0)return;let r=t.indexOf(e.target),{nextKeys:u,prevKeys:d}=this._arrowKeys(),h=(0,g.directionalKey)(e.key,this),o;u.includes(h)?(o=r+1,o>=t.length&&(o=this.loop?0:t.length-1)):d.includes(h)?(o=r-1,o<0&&(o=this.loop?t.length-1:0)):h==="Home"?o=0:h==="End"&&(o=t.length-1),o!==void 0&&(e.preventDefault(),t[o]?.focus())}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),this.addEventListener("keydown",this._handleKeydown),this.syncHostAttributes(),this.syncFormState(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}getSelectedValue(){return this.value!==void 0?this.value:this._uncontrolledValue}getFirstEnabledValue(){return this.parts.find(e=>!e.disabled)?.value??null}getEnabledValues(){return this.parts.filter(e=>!e.disabled).map(e=>e.value)}setValue(e,t="programmatic"){if(this.disabled||this.readOnly)return;let r=this.getSelectedValue()??null;r!==e&&(this.value===void 0&&(this._uncontrolledValue=e),(0,p.emit)(this,"value-change",{value:e,previousValue:r,reason:t}),this.syncFormState(),this.refreshParts())}syncHostAttributes(){super.syncHostAttributes(),this.required?this.setAttribute("aria-required","true"):this.removeAttribute("aria-required"),this.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.setAttribute("data-orientation",this.orientation)}syncFormState(){let e=this.getSelectedValue();this.setFormValue(e??null),this.setValueMissing(this.required&&!e,"Please select an option.",this.querySelector('[role="radio"]:not([data-disabled])'))}formResetCallback(){let e=this.getSelectedValue()??null;this.value===void 0&&(this._uncontrolledValue=this.defaultValue);let t=this.getSelectedValue()??null;this.syncFormState(),this.refreshParts(),!(t===e||t===null)&&(0,p.emit)(this,"value-change",{value:t,previousValue:e,reason:"programmatic"})}updated(e){e.has("options")&&this.fillAnatomy(),this.syncHostAttributes(),e.has("value")&&this.refreshParts(),(e.has("required")||e.has("value"))&&this.syncFormState()}_arrowKeys(){return this.orientation==="vertical"?{nextKeys:["ArrowDown"],prevKeys:["ArrowUp"]}:this.orientation==="horizontal"?{nextKeys:["ArrowRight"],prevKeys:["ArrowLeft"]}:{nextKeys:["ArrowRight","ArrowDown"],prevKeys:["ArrowLeft","ArrowUp"]}}};a([(0,l.property)({type:String})],s.prototype,"value",2),a([(0,l.property)({type:String,attribute:"default-value"})],s.prototype,"defaultValue",2),a([(0,l.property)({type:String,reflect:!0})],s.prototype,"orientation",2),a([(0,l.property)({converter:b.optOutBoolean})],s.prototype,"loop",2),a([(0,l.state)()],s.prototype,"_uncontrolledValue",2),s=a([(0,y.customElement)("skdx-radio-group","radio-group","root")],s);0&&(module.exports={SkdxRadioGroup});

package/dist/radio-group/RadioGroup.d.cts

@@ -1,8 +1,11 @@
-import { LitElement } from 'lit';
-import type { SkdxOptionItemDescriptor } from '../internal/options.cjs';
+import { SkdxSelectionGroupBase } from '../internal/selection-group.cjs';
 /** A registered item that can be told to re-sync its own host attributes. */
 export interface RefreshableRadioItem {
     refresh(): void;
+    /** The value this item stands for, read live so a renamed item stays addressable. */
+    readonly value: string;
+    /** Whether the item is out of the selection and out of the roving order. */
+    readonly disabled: boolean;
 }
 /** The shared `ChangeReason` vocabulary from `@skdx/shared`'s `contracts/change-reason`, restated for no runtime dependency. */
 export type RadioGroupChangeReason = 'keyboard' | 'pointer' | 'programmatic';
@@ -15,12 +18,8 @@ export interface RadioGroupValueChangeDetail {
     /** `'pointer'` for a click, `'keyboard'` for arrow/Home/End, `'programmatic'` for `setValue()` or a form reset. */
     reason: RadioGroupChangeReason;
 }
-declare const SkdxRadioGroup_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
-    formAssociated: boolean;
-};
 /**
- * Radio group managing selected value with roving-tabindex arrow-key navigation.
- * Form-associated. Arrow keys move focus and select per WAI-ARIA pattern.
+ * Radio group managing selected value with roving-tabindex arrow-key navigation, form-associated and selecting per the WAI-ARIA pattern.
  *
  * @example
  * ```html
@@ -29,61 +28,39 @@ declare const SkdxRadioGroup_base: typeof LitElement & (new (...args: any[]) =>
  *
  * @fires value-change - Fires whenever the selection changes, with the new value and change reason.
  */
-export declare class SkdxRadioGroup extends SkdxRadioGroup_base {
-    static styles: import("lit").CSSResult;
+export declare class SkdxRadioGroup extends SkdxSelectionGroupBase<RefreshableRadioItem> {
+    protected groupRole: string;
     /** Selected item's value, for controlled usage. Pair with `value-change`. `null` is explicit empty; `undefined` is uncontrolled. @default undefined */
-    value?: string | null;
+    value?: string | null | undefined;
     /** Initially selected item's value, for uncontrolled usage. `null` and `undefined` both start with nothing selected. @default undefined */
     defaultValue?: string | null;
-    /** Name submitted with the form's data; unset means the group's value isn't submitted. @default undefined */
-    name?: string;
-    /** Marks the group as required for native form validation. @default false */
-    required: boolean;
-    /** Disables every item in the group. @default false */
-    disabled: boolean;
-    /** Freezes the selection without freezing the group: arrow keys still move focus, but neither focus nor click changes `value`. @default false */
-    readOnly: boolean;
-    /** Marks the group as invalid, exposed as `aria-invalid`/`data-invalid`. @default false */
-    invalid: boolean;
     /** Layout axis for arrow-key roving focus. `"both"` responds to all four arrow keys. @default 'both' */
     orientation: 'horizontal' | 'vertical' | 'both';
     /** Whether arrow-key navigation wraps from the last item back to the first. @default true */
     loop: boolean;
-    /** Replaces the message the browser shows when a `required` group is submitted empty. @default undefined — keeps `'Please select an option.'` */
-    requiredMessage?: string;
-    /** The choices, in order — one `<skdx-radio-group-item>` derived per entry. Property only. @default undefined — nothing derived, hand-composed children stand. */
-    options?: readonly SkdxOptionItemDescriptor[];
     private _uncontrolledValue?;
-    private readonly _items;
     connectedCallback(): void;
-    private readonly fillAnatomy;
+    protected readonly fillAnatomy: () => void;
     disconnectedCallback(): void;
     /** The currently selected value. `undefined` means uncontrolled; a `null` here is a real "nothing selected" state. */
     getSelectedValue(): string | null | undefined;
-    /**
-     * The earliest-registered, non-disabled item's value. Called by item
-     * elements; `public` since the items are a different class, which `protected` can't express.
-     * @internal
-     */
+    /** @internal The earliest-registered, non-disabled item's value. */
     getFirstEnabledValue(): string | null;
+    /** @internal Every non-disabled item's value, in registration order, for resolving the group's single tab stop. */
+    getEnabledValues(): string[];
     /** Selects `value`, updating internal state (if uncontrolled) and firing `value-change`. */
     setValue(value: string, reason?: RadioGroupChangeReason): void;
-    /** @internal Called by a mounting `<skdx-radio-group-item>`. */
-    registerItem(el: RefreshableRadioItem, value: string, disabled: boolean): void;
-    /** @internal Called by an unmounting `<skdx-radio-group-item>`. */
-    unregisterItem(el: RefreshableRadioItem): void;
-    private _refreshItems;
-    private _syncHostAttributes;
+    /** A radiogroup, unlike a plain group, may carry the required/read-only claims itself. */
+    protected syncHostAttributes(): void;
     private syncFormState;
     /** Restores the `default-value` attribute's value. Unlike {@link setValue}, ignores `disabled`: a disabled control is still reset by its form. */
     formResetCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    private _arrowKeys;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'skdx-radio-group': SkdxRadioGroup;
     }
 }
-export {};

package/dist/radio-group/RadioGroup.d.ts

@@ -1,8 +1,11 @@
-import { LitElement } from 'lit';
-import type { SkdxOptionItemDescriptor } from '../internal/options.js';
+import { SkdxSelectionGroupBase } from '../internal/selection-group.js';
 /** A registered item that can be told to re-sync its own host attributes. */
 export interface RefreshableRadioItem {
     refresh(): void;
+    /** The value this item stands for, read live so a renamed item stays addressable. */
+    readonly value: string;
+    /** Whether the item is out of the selection and out of the roving order. */
+    readonly disabled: boolean;
 }
 /** The shared `ChangeReason` vocabulary from `@skdx/shared`'s `contracts/change-reason`, restated for no runtime dependency. */
 export type RadioGroupChangeReason = 'keyboard' | 'pointer' | 'programmatic';
@@ -15,12 +18,8 @@ export interface RadioGroupValueChangeDetail {
     /** `'pointer'` for a click, `'keyboard'` for arrow/Home/End, `'programmatic'` for `setValue()` or a form reset. */
     reason: RadioGroupChangeReason;
 }
-declare const SkdxRadioGroup_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
-    formAssociated: boolean;
-};
 /**
- * Radio group managing selected value with roving-tabindex arrow-key navigation.
- * Form-associated. Arrow keys move focus and select per WAI-ARIA pattern.
+ * Radio group managing selected value with roving-tabindex arrow-key navigation, form-associated and selecting per the WAI-ARIA pattern.
  *
  * @example
  * ```html
@@ -29,61 +28,39 @@ declare const SkdxRadioGroup_base: typeof LitElement & (new (...args: any[]) =>
  *
  * @fires value-change - Fires whenever the selection changes, with the new value and change reason.
  */
-export declare class SkdxRadioGroup extends SkdxRadioGroup_base {
-    static styles: import("lit").CSSResult;
+export declare class SkdxRadioGroup extends SkdxSelectionGroupBase<RefreshableRadioItem> {
+    protected groupRole: string;
     /** Selected item's value, for controlled usage. Pair with `value-change`. `null` is explicit empty; `undefined` is uncontrolled. @default undefined */
-    value?: string | null;
+    value?: string | null | undefined;
     /** Initially selected item's value, for uncontrolled usage. `null` and `undefined` both start with nothing selected. @default undefined */
     defaultValue?: string | null;
-    /** Name submitted with the form's data; unset means the group's value isn't submitted. @default undefined */
-    name?: string;
-    /** Marks the group as required for native form validation. @default false */
-    required: boolean;
-    /** Disables every item in the group. @default false */
-    disabled: boolean;
-    /** Freezes the selection without freezing the group: arrow keys still move focus, but neither focus nor click changes `value`. @default false */
-    readOnly: boolean;
-    /** Marks the group as invalid, exposed as `aria-invalid`/`data-invalid`. @default false */
-    invalid: boolean;
     /** Layout axis for arrow-key roving focus. `"both"` responds to all four arrow keys. @default 'both' */
     orientation: 'horizontal' | 'vertical' | 'both';
     /** Whether arrow-key navigation wraps from the last item back to the first. @default true */
     loop: boolean;
-    /** Replaces the message the browser shows when a `required` group is submitted empty. @default undefined — keeps `'Please select an option.'` */
-    requiredMessage?: string;
-    /** The choices, in order — one `<skdx-radio-group-item>` derived per entry. Property only. @default undefined — nothing derived, hand-composed children stand. */
-    options?: readonly SkdxOptionItemDescriptor[];
     private _uncontrolledValue?;
-    private readonly _items;
     connectedCallback(): void;
-    private readonly fillAnatomy;
+    protected readonly fillAnatomy: () => void;
     disconnectedCallback(): void;
     /** The currently selected value. `undefined` means uncontrolled; a `null` here is a real "nothing selected" state. */
     getSelectedValue(): string | null | undefined;
-    /**
-     * The earliest-registered, non-disabled item's value. Called by item
-     * elements; `public` since the items are a different class, which `protected` can't express.
-     * @internal
-     */
+    /** @internal The earliest-registered, non-disabled item's value. */
     getFirstEnabledValue(): string | null;
+    /** @internal Every non-disabled item's value, in registration order, for resolving the group's single tab stop. */
+    getEnabledValues(): string[];
     /** Selects `value`, updating internal state (if uncontrolled) and firing `value-change`. */
     setValue(value: string, reason?: RadioGroupChangeReason): void;
-    /** @internal Called by a mounting `<skdx-radio-group-item>`. */
-    registerItem(el: RefreshableRadioItem, value: string, disabled: boolean): void;
-    /** @internal Called by an unmounting `<skdx-radio-group-item>`. */
-    unregisterItem(el: RefreshableRadioItem): void;
-    private _refreshItems;
-    private _syncHostAttributes;
+    /** A radiogroup, unlike a plain group, may carry the required/read-only claims itself. */
+    protected syncHostAttributes(): void;
     private syncFormState;
     /** Restores the `default-value` attribute's value. Unlike {@link setValue}, ignores `disabled`: a disabled control is still reset by its form. */
     formResetCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
     private readonly _handleKeydown;
-    render(): import("lit").TemplateResult<1>;
+    private _arrowKeys;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'skdx-radio-group': SkdxRadioGroup;
     }
 }
-export {};

package/dist/radio-group/RadioGroup.js

@@ -1,5 +1 @@
-var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(h,n,e,t)=>{for(var i=t>1?void 0:t?m(n,e):n,o=h.length-1,u;o>=0;o--)(u=h[o])&&(i=(t?u(n,e,i):u(i))||i);return t&&i&&c(n,e,i),i};import{css as v,html as p,LitElement as b}from"lit";import{property as a,state as y}from"lit/decorators.js";import{hasAuthoredParts as g}from"../internal/authored.js";import{customElement as A}from"../internal/define.js";import{directionalKey as _}from"../internal/direction.js";import{FormAssociated as V}from"../internal/form-associated.js";import{optOutBoolean as w}from"../internal/positioning.js";import{fillRadioGroupAnatomy as E,RADIO_GROUP_ANATOMY_GENERATED as I}from"./RadioGroupAnatomy.js";var r=class extends V(b){constructor(){super(...arguments);this.required=!1;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.orientation="both";this.loop=!0;this._items=[];this.fillAnatomy=()=>{g(this,I)||E(this)};this._handleKeydown=e=>{let t=Array.from(this.querySelectorAll('[role="radio"]')).filter(f=>f.getAttribute("data-disabled")===null);if(t.length===0)return;let i=t.indexOf(document.activeElement),o=this.orientation==="vertical"?["ArrowDown"]:this.orientation==="horizontal"?["ArrowRight"]:["ArrowRight","ArrowDown"],u=this.orientation==="vertical"?["ArrowUp"]:this.orientation==="horizontal"?["ArrowLeft"]:["ArrowLeft","ArrowUp"],d=_(e.key,this),l;o.includes(d)?(l=i+1,l>=t.length&&(l=this.loop?0:t.length-1)):u.includes(d)?(l=i-1,l<0&&(l=this.loop?t.length-1:0)):d==="Home"?l=0:d==="End"&&(l=t.length-1),l!==void 0&&(e.preventDefault(),t[l]?.focus())}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),this.setAttribute("role","radiogroup"),this.addEventListener("keydown",this._handleKeydown),this._syncHostAttributes(),this.syncFormState(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}getSelectedValue(){return this.value!==void 0?this.value:this._uncontrolledValue}getFirstEnabledValue(){return this._items.find(e=>!e.disabled)?.value??null}setValue(e,t="programmatic"){if(this.disabled||this.readOnly)return;let i=this.getSelectedValue()??null;i!==e&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:{value:e,previousValue:i,reason:t},bubbles:!0,composed:!0})),this.syncFormState(),this._refreshItems())}registerItem(e,t,i){this._items.push({el:e,value:t,disabled:i})}unregisterItem(e){let t=this._items.findIndex(i=>i.el===e);t!==-1&&this._items.splice(t,1)}_refreshItems(){for(let{el:e}of this._items)e.refresh()}_syncHostAttributes(){this.required?this.setAttribute("aria-required","true"):this.removeAttribute("aria-required"),this.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.readOnly?this.setAttribute("data-readonly",""):this.removeAttribute("data-readonly"),this.invalid?this.setAttribute("aria-invalid","true"):this.removeAttribute("aria-invalid"),this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.invalid?this.setAttribute("data-invalid",""):this.removeAttribute("data-invalid"),this.setAttribute("data-orientation",this.orientation)}syncFormState(){let e=this.getSelectedValue();this.setFormValue(e??null),this.setValueMissing(this.required&&!e,"Please select an option.")}formResetCallback(){let e=this.getSelectedValue()??null;this.value===void 0&&(this._uncontrolledValue=this.defaultValue);let t=this.getSelectedValue()??null;this.syncFormState(),this._refreshItems(),!(t===e||t===null)&&this.dispatchEvent(new CustomEvent("value-change",{detail:{value:t,previousValue:e,reason:"programmatic"},bubbles:!0,composed:!0}))}updated(e){e.has("options")&&this.fillAnatomy(),this._syncHostAttributes(),e.has("value")&&this._refreshItems(),(e.has("required")||e.has("value"))&&this.syncFormState()}render(){return p`<slot @slotchange=${this.fillAnatomy}></slot>`}};r.styles=v`
-    :host {
-      display: block;
-    }
-  `,s([a({type:String})],r.prototype,"value",2),s([a({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),s([a({type:String,reflect:!0})],r.prototype,"name",2),s([a({type:Boolean,reflect:!0})],r.prototype,"required",2),s([a({type:Boolean,reflect:!0})],r.prototype,"disabled",2),s([a({type:Boolean,reflect:!0,attribute:"readonly"})],r.prototype,"readOnly",2),s([a({type:Boolean,reflect:!0})],r.prototype,"invalid",2),s([a({type:String,reflect:!0})],r.prototype,"orientation",2),s([a({converter:w})],r.prototype,"loop",2),s([a({attribute:"required-message"})],r.prototype,"requiredMessage",2),s([a({attribute:!1})],r.prototype,"options",2),s([y()],r.prototype,"_uncontrolledValue",2),r=s([A("skdx-radio-group","radio-group","root")],r);export{r as SkdxRadioGroup};
+var f=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var o=(h,s,e,t)=>{for(var r=t>1?void 0:t?p(s,e):s,a=h.length-1,l;a>=0;a--)(l=h[a])&&(r=(t?l(s,e,r):l(r))||r);return t&&r&&f(s,e,r),r};import{property as d,state as m}from"lit/decorators.js";import{hasAuthoredParts as v}from"../internal/authored.js";import{customElement as y}from"../internal/define.js";import{directionalKey as g}from"../internal/direction.js";import{emit as c}from"../internal/events.js";import{optOutBoolean as b}from"../internal/positioning.js";import{enabledRovingItems as A}from"../internal/roving-tab-stop.js";import{SkdxSelectionGroupBase as V}from"../internal/selection-group.js";import{fillRadioGroupAnatomy as w,RADIO_GROUP_ANATOMY_GENERATED as K}from"./RadioGroupAnatomy.js";var n=class extends V{constructor(){super(...arguments);this.groupRole="radiogroup";this.orientation="both";this.loop=!0;this.fillAnatomy=()=>{v(this,K)||w(this)};this._handleKeydown=e=>{let t=A(this,'[role="radio"]');if(t.length===0)return;let r=t.indexOf(e.target),{nextKeys:a,prevKeys:l}=this._arrowKeys(),u=g(e.key,this),i;a.includes(u)?(i=r+1,i>=t.length&&(i=this.loop?0:t.length-1)):l.includes(u)?(i=r-1,i<0&&(i=this.loop?t.length-1:0)):u==="Home"?i=0:u==="End"&&(i=t.length-1),i!==void 0&&(e.preventDefault(),t[i]?.focus())}}connectedCallback(){super.connectedCallback(),this._uncontrolledValue===void 0&&(this._uncontrolledValue=this.defaultValue),this.addEventListener("keydown",this._handleKeydown),this.syncHostAttributes(),this.syncFormState(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}getSelectedValue(){return this.value!==void 0?this.value:this._uncontrolledValue}getFirstEnabledValue(){return this.parts.find(e=>!e.disabled)?.value??null}getEnabledValues(){return this.parts.filter(e=>!e.disabled).map(e=>e.value)}setValue(e,t="programmatic"){if(this.disabled||this.readOnly)return;let r=this.getSelectedValue()??null;r!==e&&(this.value===void 0&&(this._uncontrolledValue=e),c(this,"value-change",{value:e,previousValue:r,reason:t}),this.syncFormState(),this.refreshParts())}syncHostAttributes(){super.syncHostAttributes(),this.required?this.setAttribute("aria-required","true"):this.removeAttribute("aria-required"),this.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),this.setAttribute("data-orientation",this.orientation)}syncFormState(){let e=this.getSelectedValue();this.setFormValue(e??null),this.setValueMissing(this.required&&!e,"Please select an option.",this.querySelector('[role="radio"]:not([data-disabled])'))}formResetCallback(){let e=this.getSelectedValue()??null;this.value===void 0&&(this._uncontrolledValue=this.defaultValue);let t=this.getSelectedValue()??null;this.syncFormState(),this.refreshParts(),!(t===e||t===null)&&c(this,"value-change",{value:t,previousValue:e,reason:"programmatic"})}updated(e){e.has("options")&&this.fillAnatomy(),this.syncHostAttributes(),e.has("value")&&this.refreshParts(),(e.has("required")||e.has("value"))&&this.syncFormState()}_arrowKeys(){return this.orientation==="vertical"?{nextKeys:["ArrowDown"],prevKeys:["ArrowUp"]}:this.orientation==="horizontal"?{nextKeys:["ArrowRight"],prevKeys:["ArrowLeft"]}:{nextKeys:["ArrowRight","ArrowDown"],prevKeys:["ArrowLeft","ArrowUp"]}}};o([d({type:String})],n.prototype,"value",2),o([d({type:String,attribute:"default-value"})],n.prototype,"defaultValue",2),o([d({type:String,reflect:!0})],n.prototype,"orientation",2),o([d({converter:b})],n.prototype,"loop",2),o([m()],n.prototype,"_uncontrolledValue",2),n=o([y("skdx-radio-group","radio-group","root")],n);export{n as SkdxRadioGroup};

package/dist/radio-group/RadioGroupAnatomy.d.cts

@@ -3,8 +3,5 @@ import './RadioGroupIndicator.cjs';
 import './RadioGroupItem.cjs';
 /** @internal Marks a direct child of `<skdx-radio-group>` this module generated. */
 export declare const RADIO_GROUP_ANATOMY_GENERATED = "data-skdx-radio-group-generated";
-/**
- * Generates one Item per option with Indicator and label. Keyed by value to preserve selection when options change.
- * @internal
- */
+/** @internal Generates one Item per option with Indicator and label, keyed by value to preserve selection across changes. */
 export declare function fillRadioGroupAnatomy(root: SkdxRadioGroup): void;

package/dist/radio-group/RadioGroupAnatomy.d.ts

@@ -3,8 +3,5 @@ import './RadioGroupIndicator.js';
 import './RadioGroupItem.js';
 /** @internal Marks a direct child of `<skdx-radio-group>` this module generated. */
 export declare const RADIO_GROUP_ANATOMY_GENERATED = "data-skdx-radio-group-generated";
-/**
- * Generates one Item per option with Indicator and label. Keyed by value to preserve selection when options change.
- * @internal
- */
+/** @internal Generates one Item per option with Indicator and label, keyed by value to preserve selection across changes. */
 export declare function fillRadioGroupAnatomy(root: SkdxRadioGroup): void;

package/dist/radio-group/RadioGroupIndicator.cjs

@@ -1,8 +1,8 @@
-"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var v=(i,e)=>{for(var s in e)a(i,s,{get:e[s],enumerable:!0})},f=(i,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!p.call(i,t)&&t!==s&&a(i,t,{get:()=>e[t],enumerable:!(r=h(e,t))||r.enumerable});return i};var y=i=>f(a({},"__esModule",{value:!0}),i),n=(i,e,s,r)=>{for(var t=r>1?void 0:r?h(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&&a(e,s,t),t};var k={};v(k,{SkdxRadioGroupIndicator:()=>o});module.exports=y(k);var d=require("lit"),m=require("lit/decorators.js"),b=require("../internal/define.cjs");var o=class extends d.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.itemEl=null;this.observer=new MutationObserver(()=>this._sync())}connectedCallback(){super.connectedCallback(),this.itemEl=this.closest("skdx-radio-group-item"),this.itemEl&&this.observer.observe(this.itemEl,{attributeFilter:["data-state","data-disabled"]}),this._sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}_sync(){let s=this.itemEl,r=s?.getAttribute("data-state")==="checked";this.setAttribute("data-state",r?"checked":"unchecked"),s?.hasAttribute("data-disabled")?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.forceMount||r?this.removeAttribute("hidden"):this.setAttribute("hidden","")}updated(){this._sync()}render(){return d.html`<slot></slot>`}};o.styles=d.css`
+"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var v=(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 p(e))!b.call(i,t)&&t!==s&&d(i,t,{get:()=>e[t],enumerable:!(r=m(e,t))||r.enumerable});return i};var y=i=>f(d({},"__esModule",{value:!0}),i),n=(i,e,s,r)=>{for(var t=r>1?void 0:r?m(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={};v(k,{SkdxRadioGroupIndicator:()=>o});module.exports=y(k);var a=require("lit"),h=require("lit/decorators.js"),u=require("../internal/define.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.forceMount=!1;this.itemEl=null;this.observer=new MutationObserver(()=>this._sync())}connectedCallback(){super.connectedCallback(),this.itemEl=this.closest("skdx-radio-group-item"),this.itemEl&&this.observer.observe(this.itemEl,{attributeFilter:["data-state","data-disabled"]}),this._sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}_sync(){let s=this.itemEl,r=s?.getAttribute("data-state")==="checked";this.setAttribute("data-state",r?"checked":"unchecked"),s?.hasAttribute("data-disabled")?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.forceMount||r?this.removeAttribute("hidden"):this.setAttribute("hidden","")}updated(){this._sync()}render(){return a.html`<slot></slot>`}};o.styles=a.css`
     :host {
       display: inline-block;
     }
     :host([hidden]) {
       display: none;
     }
-  `,n([(0,m.property)({type:Boolean,attribute:"force-mount"})],o.prototype,"forceMount",2),o=n([(0,b.customElement)("skdx-radio-group-indicator","radio-group","indicator")],o);0&&(module.exports={SkdxRadioGroupIndicator});
+  `,n([(0,h.property)({type:Boolean,attribute:"force-mount"})],o.prototype,"forceMount",2),o=n([(0,u.customElement)("skdx-radio-group-indicator","radio-group","indicator")],o);0&&(module.exports={SkdxRadioGroupIndicator});

package/dist/radio-group/RadioGroupIndicator.d.cts

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Visual mark in a checked `<skdx-radio-group-item>`. Hidden while unchecked unless `force-mount` is set.
+ * Visual mark in a checked `<skdx-radio-group-item>`, hidden while unchecked unless `force-mount` is set.
  *
  * @example
  * ```html
@@ -19,7 +19,7 @@ export declare class SkdxRadioGroupIndicator extends LitElement {
     disconnectedCallback(): void;
     private _sync;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/radio-group/RadioGroupIndicator.d.ts

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Visual mark in a checked `<skdx-radio-group-item>`. Hidden while unchecked unless `force-mount` is set.
+ * Visual mark in a checked `<skdx-radio-group-item>`, hidden while unchecked unless `force-mount` is set.
  *
  * @example
  * ```html
@@ -19,7 +19,7 @@ export declare class SkdxRadioGroupIndicator extends LitElement {
     disconnectedCallback(): void;
     private _sync;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/radio-group/RadioGroupIndicator.js

@@ -1,8 +1,8 @@
-var c=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var l=(o,r,i,e)=>{for(var t=e>1?void 0:e?n(r,i):r,d=o.length-1,a;d>=0;d--)(a=o[d])&&(t=(e?a(r,i,t):a(t))||t);return e&&t&&c(r,i,t),t};import{css as h,html as m,LitElement as b}from"lit";import{property as u}from"lit/decorators.js";import{customElement as p}from"../internal/define.js";var s=class extends b{constructor(){super(...arguments);this.forceMount=!1;this.itemEl=null;this.observer=new MutationObserver(()=>this._sync())}connectedCallback(){super.connectedCallback(),this.itemEl=this.closest("skdx-radio-group-item"),this.itemEl&&this.observer.observe(this.itemEl,{attributeFilter:["data-state","data-disabled"]}),this._sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}_sync(){let i=this.itemEl,e=i?.getAttribute("data-state")==="checked";this.setAttribute("data-state",e?"checked":"unchecked"),i?.hasAttribute("data-disabled")?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.forceMount||e?this.removeAttribute("hidden"):this.setAttribute("hidden","")}updated(){this._sync()}render(){return m`<slot></slot>`}};s.styles=h`
+var c=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var l=(o,r,i,e)=>{for(var t=e>1?void 0:e?n(r,i):r,a=o.length-1,d;a>=0;a--)(d=o[a])&&(t=(e?d(r,i,t):d(t))||t);return e&&t&&c(r,i,t),t};import{css as m,html as h,LitElement as u}from"lit";import{property as p}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";var s=class extends u{constructor(){super(...arguments);this.forceMount=!1;this.itemEl=null;this.observer=new MutationObserver(()=>this._sync())}connectedCallback(){super.connectedCallback(),this.itemEl=this.closest("skdx-radio-group-item"),this.itemEl&&this.observer.observe(this.itemEl,{attributeFilter:["data-state","data-disabled"]}),this._sync()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}_sync(){let i=this.itemEl,e=i?.getAttribute("data-state")==="checked";this.setAttribute("data-state",e?"checked":"unchecked"),i?.hasAttribute("data-disabled")?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.forceMount||e?this.removeAttribute("hidden"):this.setAttribute("hidden","")}updated(){this._sync()}render(){return h`<slot></slot>`}};s.styles=m`
     :host {
       display: inline-block;
     }
     :host([hidden]) {
       display: none;
     }
-  `,l([u({type:Boolean,attribute:"force-mount"})],s.prototype,"forceMount",2),s=l([p("skdx-radio-group-indicator","radio-group","indicator")],s);export{s as SkdxRadioGroupIndicator};
+  `,l([p({type:Boolean,attribute:"force-mount"})],s.prototype,"forceMount",2),s=l([b("skdx-radio-group-indicator","radio-group","indicator")],s);export{s as SkdxRadioGroupIndicator};

package/dist/radio-group/RadioGroupItem.cjs

@@ -1,4 +1,4 @@
-"use strict";var n=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var m=(r,i)=>{for(var t in i)n(r,t,{get:i[t],enumerable:!0})},E=(r,i,t,s)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of f(i))!p.call(r,e)&&e!==t&&n(r,e,{get:()=>i[e],enumerable:!(s=b(i,e))||s.enumerable});return r};var g=r=>E(n({},"__esModule",{value:!0}),r),h=(r,i,t,s)=>{for(var e=s>1?void 0:s?b(i,t):i,o=r.length-1,d;o>=0;o--)(d=r[o])&&(e=(s?d(i,t,e):d(e))||e);return s&&e&&n(i,t,e),e};var k={};m(k,{SkdxRadioGroupItem:()=>l});module.exports=g(k);var a=require("lit"),u=require("lit/decorators.js"),c=require("../internal/define.cjs"),v=require("../internal/ids.cjs");var l=class extends a.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.rootEl=null;this._handleClick=()=>{!this.effectiveDisabled&&!this.checked&&this.rootEl?.setValue(this.value,"pointer")};this._handleFocus=t=>{let s=t.relatedTarget;s?.getAttribute("role")==="radio"&&s.closest('[role="radiogroup"]')===this.closest('[role="radiogroup"]')&&!this.effectiveDisabled&&!this.checked&&this.rootEl?.setValue(this.value,"keyboard")};this._handleKeydown=t=>{t.key==="Enter"&&t.preventDefault()}}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-radio-group"),this.setAttribute("role","radio"),this._linkLabel(),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this.rootEl?(0,c.whenUpgraded)(this.rootEl,()=>{this.rootEl?.registerItem(this,this.value,this.disabled),this._sync()}):this._sync()}disconnectedCallback(){this.rootEl&&this.rootEl.unregisterItem(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}refresh(){this._sync()}get effectiveDisabled(){return(this.rootEl?.disabled??!1)||this.disabled}get checked(){return customElements.get("skdx-radio-group")?this.rootEl?.getSelectedValue()===this.value:!1}_linkLabel(){if(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))return;let t=this.getRootNode(),e=(this.id?Array.from(t.querySelectorAll("label")).find(o=>o.htmlFor===this.id):void 0)??this.closest("label");e&&this.setAttribute("aria-labelledby",(0,v.ensureId)(e,"skdx-radio-group","label"))}_sync(){let t=customElements.get("skdx-radio-group")?this.rootEl:null,s=this.checked,e=this.effectiveDisabled;this.setAttribute("aria-checked",String(s)),this.setAttribute("data-state",s?"checked":"unchecked"),this.setAttribute("data-value",this.value),e?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled"));let o=t?.getSelectedValue()==null&&t?.getFirstEnabledValue()===this.value,d=!e&&(s||o);this.setAttribute("tabindex",d?"0":"-1")}updated(){this._sync()}render(){return a.html`<slot></slot>`}};l.styles=a.css`
+"use strict";var n=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var _=(s,i)=>{for(var e in i)n(s,e,{get:i[e],enumerable:!0})},y=(s,i,e,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let t of E(i))!k.call(s,t)&&t!==e&&n(s,t,{get:()=>i[t],enumerable:!(r=v(i,t))||r.enumerable});return s};var L=s=>y(n({},"__esModule",{value:!0}),s),h=(s,i,e,r)=>{for(var t=r>1?void 0:r?v(i,e):i,l=s.length-1,d;l>=0;l--)(d=s[l])&&(t=(r?d(i,e,t):d(t))||t);return r&&t&&n(i,e,t),t};var A={};_(A,{SkdxRadioGroupItem:()=>o});module.exports=L(A);var a=require("lit"),p=require("lit/decorators.js"),b=require("../internal/associated-label.cjs"),f=require("../internal/button-host.cjs"),c=require("../internal/define.cjs"),m=require("../internal/ids.cjs"),u=require("../internal/roving-tab-stop.cjs");var o=class extends(0,f.ButtonHost)(a.LitElement){constructor(){super();this.value="";this.disabled=!1;this.rootEl=null;this._pointerPressed=!1;this._handlePointerDown=()=>{this._pointerPressed=!0};this._handleBlur=()=>{this._pointerPressed=!1};this._handleClick=e=>{this._select(e.detail===0?"keyboard":"pointer")};this._handleFocus=e=>{if(this._pointerPressed){this._select("pointer");return}let r=e.relatedTarget;r?.getAttribute("role")==="radio"&&r.closest('[role="radiogroup"]')===this.closest('[role="radiogroup"]')&&this._select("keyboard")};this._handleKeydown=e=>{e.key==="Enter"&&(e.preventDefault(),e.stopImmediatePropagation())};this.addEventListener("keydown",this._handleKeydown)}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-radio-group"),this.setAttribute("role","radio"),this._linkLabel(),queueMicrotask(()=>this._linkLabel()),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("pointerdown",this._handlePointerDown),this.addEventListener("blur",this._handleBlur),this.rootEl?(0,c.whenUpgraded)(this.rootEl,()=>{this.rootEl?.registerPart(this),this._sync()}):this._sync()}disconnectedCallback(){this.rootEl&&this.rootEl.unregisterPart(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("pointerdown",this._handlePointerDown),this.removeEventListener("blur",this._handleBlur),super.disconnectedCallback()}refresh(){this._sync()}get effectiveDisabled(){return(this.rootEl?.disabled??!1)||this.disabled}get checked(){return customElements.get("skdx-radio-group")?this.rootEl?.getSelectedValue()===this.value:!1}_linkLabel(){if(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))return;let e=(0,b.findAssociatedLabel)(this);e&&this.setAttribute("aria-labelledby",(0,m.ensureId)(e,"skdx-radio-group","label"))}syncButtonHost(){this.effectiveDisabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}_sync(){let e=customElements.get("skdx-radio-group")?this.rootEl:null,r=this.checked,t=this.effectiveDisabled;this.setAttribute("aria-checked",String(r)),this.setAttribute("data-state",r?"checked":"unchecked"),this.setAttribute("data-value",this.value),t?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.syncButtonHost();let l=e?.getSelectedValue()??null,d=e?.getEnabledValues()??[],g=(0,u.resolveTabStopId)(d,l===null?[]:[l],null);t?this.removeAttribute("tabindex"):this.setAttribute("tabindex",String((0,u.rovingTabIndex)(e!==null,g===this.value)))}_select(e){!this.effectiveDisabled&&!this.checked&&this.rootEl?.setValue(this.value,e)}updated(e){super.updated(e),this._sync()}render(){return a.html`<slot></slot>`}};o.styles=a.css`
     :host {
       display: inline-block;
       cursor: pointer;
@@ -6,4 +6,4 @@
     :host([data-disabled]) {
       cursor: default;
     }
-  `,h([(0,u.property)({type:String,reflect:!0})],l.prototype,"value",2),h([(0,u.property)({type:Boolean,reflect:!0})],l.prototype,"disabled",2),l=h([(0,c.customElement)("skdx-radio-group-item","radio-group","item")],l);0&&(module.exports={SkdxRadioGroupItem});
+  `,h([(0,p.property)({type:String,reflect:!0})],o.prototype,"value",2),h([(0,p.property)({type:Boolean,reflect:!0})],o.prototype,"disabled",2),o=h([(0,c.customElement)("skdx-radio-group-item","radio-group","item")],o);0&&(module.exports={SkdxRadioGroupItem});

package/dist/radio-group/RadioGroupItem.d.cts

@@ -1,8 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+declare const SkdxRadioGroupItem_base: typeof LitElement & (new (...args: any[]) => import("../internal/button-host.cjs").SkdxButtonHost);
 /**
- * Single radio button in a group; sets `role="radio"`, `aria-checked`, `data-state` / `data-disabled` / `data-value`.
- * Selects on click or focus from sibling radio (arrow-key navigation per WAI-ARIA pattern). Tab from outside moves focus only.
- * Tab-stop when checked or when nothing selected and first enabled. Named by `<label>` (for / wrap) or `aria-label` / `aria-labelledby`.
+ * Single radio button in a group; sets `role="radio"`, `aria-checked`, and `data-state`/`data-disabled`/`data-value`, selecting on click or focus from a sibling radio.
  * @example
  * ```html
  * <skdx-radio-group-item value="compact" id="density-compact">
@@ -11,13 +10,14 @@ import { LitElement } from 'lit';
  * <label for="density-compact">compact</label>
  * ```
  */
-export declare class SkdxRadioGroupItem extends LitElement {
+export declare class SkdxRadioGroupItem extends SkdxRadioGroupItem_base {
     static styles: import("lit").CSSResult;
     /** Unique identifier compared against the group's selected value. */
     value: string;
     /** Disables this item, independent of the group's `disabled`. @default false */
     disabled: boolean;
     private rootEl;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** @internal Called by the parent `<skdx-radio-group>` whenever the selected value changes. */
@@ -27,15 +27,21 @@ export declare class SkdxRadioGroupItem extends LitElement {
     get checked(): boolean;
     /** Link `aria-labelledby` to a `<label>` naming this item (if found and no explicit name). Custom element hosts are not labelable. */
     private _linkLabel;
+    protected syncButtonHost(): void;
     private _sync;
+    private _select;
+    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-radio-group-item': SkdxRadioGroupItem;
     }
 }
+export {};

package/dist/radio-group/RadioGroupItem.d.ts

@@ -1,8 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+declare const SkdxRadioGroupItem_base: typeof LitElement & (new (...args: any[]) => import("../internal/button-host.js").SkdxButtonHost);
 /**
- * Single radio button in a group; sets `role="radio"`, `aria-checked`, `data-state` / `data-disabled` / `data-value`.
- * Selects on click or focus from sibling radio (arrow-key navigation per WAI-ARIA pattern). Tab from outside moves focus only.
- * Tab-stop when checked or when nothing selected and first enabled. Named by `<label>` (for / wrap) or `aria-label` / `aria-labelledby`.
+ * Single radio button in a group; sets `role="radio"`, `aria-checked`, and `data-state`/`data-disabled`/`data-value`, selecting on click or focus from a sibling radio.
  * @example
  * ```html
  * <skdx-radio-group-item value="compact" id="density-compact">
@@ -11,13 +10,14 @@ import { LitElement } from 'lit';
  * <label for="density-compact">compact</label>
  * ```
  */
-export declare class SkdxRadioGroupItem extends LitElement {
+export declare class SkdxRadioGroupItem extends SkdxRadioGroupItem_base {
     static styles: import("lit").CSSResult;
     /** Unique identifier compared against the group's selected value. */
     value: string;
     /** Disables this item, independent of the group's `disabled`. @default false */
     disabled: boolean;
     private rootEl;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     /** @internal Called by the parent `<skdx-radio-group>` whenever the selected value changes. */
@@ -27,15 +27,21 @@ export declare class SkdxRadioGroupItem extends LitElement {
     get checked(): boolean;
     /** Link `aria-labelledby` to a `<label>` naming this item (if found and no explicit name). Custom element hosts are not labelable. */
     private _linkLabel;
+    protected syncButtonHost(): void;
     private _sync;
+    private _select;
+    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-radio-group-item': SkdxRadioGroupItem;
     }
 }
+export {};

package/dist/radio-group/RadioGroupItem.js

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(d,l,t,i)=>{for(var e=i>1?void 0:i?c(l,t):l,s=d.length-1,o;s>=0;s--)(o=d[s])&&(e=(i?o(l,t,e):o(e))||e);return i&&e&&h(l,t,e),e};import{css as u,html as b,LitElement as v}from"lit";import{property as n}from"lit/decorators.js";import{customElement as f,whenUpgraded as p}from"../internal/define.js";import{ensureId as m}from"../internal/ids.js";var r=class extends v{constructor(){super(...arguments);this.value="";this.disabled=!1;this.rootEl=null;this._handleClick=()=>{!this.effectiveDisabled&&!this.checked&&this.rootEl?.setValue(this.value,"pointer")};this._handleFocus=t=>{let i=t.relatedTarget;i?.getAttribute("role")==="radio"&&i.closest('[role="radiogroup"]')===this.closest('[role="radiogroup"]')&&!this.effectiveDisabled&&!this.checked&&this.rootEl?.setValue(this.value,"keyboard")};this._handleKeydown=t=>{t.key==="Enter"&&t.preventDefault()}}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-radio-group"),this.setAttribute("role","radio"),this._linkLabel(),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),this.rootEl?p(this.rootEl,()=>{this.rootEl?.registerItem(this,this.value,this.disabled),this._sync()}):this._sync()}disconnectedCallback(){this.rootEl&&this.rootEl.unregisterItem(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("keydown",this._handleKeydown),super.disconnectedCallback()}refresh(){this._sync()}get effectiveDisabled(){return(this.rootEl?.disabled??!1)||this.disabled}get checked(){return customElements.get("skdx-radio-group")?this.rootEl?.getSelectedValue()===this.value:!1}_linkLabel(){if(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))return;let t=this.getRootNode(),e=(this.id?Array.from(t.querySelectorAll("label")).find(s=>s.htmlFor===this.id):void 0)??this.closest("label");e&&this.setAttribute("aria-labelledby",m(e,"skdx-radio-group","label"))}_sync(){let t=customElements.get("skdx-radio-group")?this.rootEl:null,i=this.checked,e=this.effectiveDisabled;this.setAttribute("aria-checked",String(i)),this.setAttribute("data-state",i?"checked":"unchecked"),this.setAttribute("data-value",this.value),e?(this.setAttribute("data-disabled",""),this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled"));let s=t?.getSelectedValue()==null&&t?.getFirstEnabledValue()===this.value,o=!e&&(i||s);this.setAttribute("tabindex",o?"0":"-1")}updated(){this._sync()}render(){return b`<slot></slot>`}};r.styles=u`
+var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var a=(d,o,e,i)=>{for(var t=i>1?void 0:i?u(o,e):o,s=d.length-1,l;s>=0;s--)(l=d[s])&&(t=(i?l(o,e,t):l(t))||t);return i&&t&&c(o,e,t),t};import{css as p,html as v,LitElement as b}from"lit";import{property as n}from"lit/decorators.js";import{findAssociatedLabel as f}from"../internal/associated-label.js";import{ButtonHost as m}from"../internal/button-host.js";import{customElement as g,whenUpgraded as E}from"../internal/define.js";import{ensureId as k}from"../internal/ids.js";import{resolveTabStopId as _,rovingTabIndex as y}from"../internal/roving-tab-stop.js";var r=class extends m(b){constructor(){super();this.value="";this.disabled=!1;this.rootEl=null;this._pointerPressed=!1;this._handlePointerDown=()=>{this._pointerPressed=!0};this._handleBlur=()=>{this._pointerPressed=!1};this._handleClick=e=>{this._select(e.detail===0?"keyboard":"pointer")};this._handleFocus=e=>{if(this._pointerPressed){this._select("pointer");return}let i=e.relatedTarget;i?.getAttribute("role")==="radio"&&i.closest('[role="radiogroup"]')===this.closest('[role="radiogroup"]')&&this._select("keyboard")};this._handleKeydown=e=>{e.key==="Enter"&&(e.preventDefault(),e.stopImmediatePropagation())};this.addEventListener("keydown",this._handleKeydown)}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-radio-group"),this.setAttribute("role","radio"),this._linkLabel(),queueMicrotask(()=>this._linkLabel()),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("pointerdown",this._handlePointerDown),this.addEventListener("blur",this._handleBlur),this.rootEl?E(this.rootEl,()=>{this.rootEl?.registerPart(this),this._sync()}):this._sync()}disconnectedCallback(){this.rootEl&&this.rootEl.unregisterPart(this),this.removeEventListener("click",this._handleClick),this.removeEventListener("focus",this._handleFocus),this.removeEventListener("pointerdown",this._handlePointerDown),this.removeEventListener("blur",this._handleBlur),super.disconnectedCallback()}refresh(){this._sync()}get effectiveDisabled(){return(this.rootEl?.disabled??!1)||this.disabled}get checked(){return customElements.get("skdx-radio-group")?this.rootEl?.getSelectedValue()===this.value:!1}_linkLabel(){if(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))return;let e=f(this);e&&this.setAttribute("aria-labelledby",k(e,"skdx-radio-group","label"))}syncButtonHost(){this.effectiveDisabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}_sync(){let e=customElements.get("skdx-radio-group")?this.rootEl:null,i=this.checked,t=this.effectiveDisabled;this.setAttribute("aria-checked",String(i)),this.setAttribute("data-state",i?"checked":"unchecked"),this.setAttribute("data-value",this.value),t?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.syncButtonHost();let s=e?.getSelectedValue()??null,l=e?.getEnabledValues()??[],h=_(l,s===null?[]:[s],null);t?this.removeAttribute("tabindex"):this.setAttribute("tabindex",String(y(e!==null,h===this.value)))}_select(e){!this.effectiveDisabled&&!this.checked&&this.rootEl?.setValue(this.value,e)}updated(e){super.updated(e),this._sync()}render(){return v`<slot></slot>`}};r.styles=p`
     :host {
       display: inline-block;
       cursor: pointer;
@@ -6,4 +6,4 @@ var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(d,l,t,i
     :host([data-disabled]) {
       cursor: default;
     }
-  `,a([n({type:String,reflect:!0})],r.prototype,"value",2),a([n({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=a([f("skdx-radio-group-item","radio-group","item")],r);export{r as SkdxRadioGroupItem};
+  `,a([n({type:String,reflect:!0})],r.prototype,"value",2),a([n({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=a([g("skdx-radio-group-item","radio-group","item")],r);export{r as SkdxRadioGroupItem};

package/dist/radio-group/primitives.d.cts

@@ -1,9 +1,6 @@
 /**
  * Advanced primitives for `<skdx-radio-group>` — the parts the recipe composes.
  *
- * Reach for these when the derived anatomy is not the structure you need.
- * The recipe (`<skdx-radio-group>` from `@skdx/web-components`) is built from exactly these elements.
- *
  * @example
  * ```ts
  * import * as RadioGroup from '@skdx/web-components/primitives/radio-group';

package/dist/radio-group/primitives.d.ts

@@ -1,9 +1,6 @@
 /**
  * Advanced primitives for `<skdx-radio-group>` — the parts the recipe composes.
  *
- * Reach for these when the derived anatomy is not the structure you need.
- * The recipe (`<skdx-radio-group>` from `@skdx/web-components`) is built from exactly these elements.
- *
  * @example
  * ```ts
  * import * as RadioGroup from '@skdx/web-components/primitives/radio-group';

package/dist/rating/Rating.cjs

@@ -1,5 +1,5 @@
-"use strict";var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var x=(s,a)=>{for(var e in a)m(s,e,{get:a[e],enumerable:!0})},M=(s,a,e,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of E(a))!L.call(s,t)&&t!==e&&m(s,t,{get:()=>a[t],enumerable:!(i=f(a,t))||i.enumerable});return s};var g=s=>M(m({},"__esModule",{value:!0}),s),l=(s,a,e,i)=>{for(var t=i>1?void 0:i?f(a,e):a,u=s.length-1,n;u>=0;u--)(n=s[u])&&(t=(i?n(a,e,t):n(t))||t);return i&&t&&m(a,e,t),t};var V={};x(V,{SkdxRating:()=>r});module.exports=g(V);var h=require("lit"),o=require("lit/decorators.js"),c=require("../internal/authored.cjs"),y=require("../internal/define.cjs"),v=require("../internal/direction.cjs"),p=require("../internal/form-associated.cjs"),A=require("../internal/part.cjs"),d=require("./RatingAnatomy.cjs");var b="skdx-rating-item",T=["aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-orientation","tabindex"],r=class extends(0,p.FormAssociated)(h.LitElement){constructor(){super(...arguments);this.value=0;this.max=5;this.itemLabel=(e,i)=>`${e} of ${i} stars`;this.allowHalf=!1;this.allowClear=!1;this.disabled=!1;this.readOnly=!1;this.required=!1;this.hoverValue=null;this.fillAnatomy=()=>{(0,c.hasAuthoredParts)(this,d.RATING_ANATOMY_GENERATED,d.RATING_RENDER_SLOTS)||(0,d.fillRatingAnatomy)(this)};this.handlePointerLeave=()=>{this.setHoverValue(null)};this.handleKeydown=e=>{if(this.disabled||this.readOnly)return;if(this.allowHalf){this.handleSliderKeydown(e);return}let i=Array.from(this.querySelectorAll(b)).filter(w=>!w.hasAttribute("disabled"));if(i.length===0)return;let t=i.indexOf(document.activeElement),u=(0,v.directionalKey)(e.key,this),n;u==="ArrowRight"||u==="ArrowDown"?n=Math.min(i.length-1,Math.max(0,t)+1):(u==="ArrowLeft"||u==="ArrowUp")&&(n=Math.max(0,t-1)),n!==void 0&&n!==t&&(e.preventDefault(),i[n]?.shadowRoot?.querySelector("button")?.focus())}}connectedCallback(){super.connectedCallback(),this.defaultValue??(this.defaultValue=this.value),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncHostAttributes(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("pointerleave",this.handlePointerLeave),super.disconnectedCallback()}updated(e){this.syncHostAttributes(),(e.has("value")||e.has("disabled")||e.has("readOnly")||e.has("max")||e.has("itemLabel"))&&this.notify(),e.has("max")&&this.fillAnatomy(),(e.has("value")||e.has("required"))&&this.syncFormState()}syncFormState(){this.setFormValue(this.value>0?String(this.value):null),this.setValueMissing(this.required&&this.value<=0,"Please select a rating.",this.querySelector(b)?.shadowRoot?.querySelector("button"))}formResetCallback(){this.value=this.defaultValue??0}syncHostAttributes(){if(this.allowHalf)this.setAttribute("role","slider"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this.max)),this.setAttribute("aria-valuenow",String(this.value)),this.setAttribute("aria-valuetext",`${this.value} out of ${this.max}`),this.setAttribute("aria-orientation","horizontal"),this.setAttribute("tabindex",this.disabled?"-1":"0");else{this.setAttribute("role","radiogroup");for(let e of T)this.removeAttribute(e)}this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),(0,A.reflectHostState)(this,{"data-disabled":this.disabled?"":null,"data-readonly":this.readOnly?"":null})}notify(){this.dispatchEvent(new CustomEvent("skdx-rating-internal-update"))}commit(e,i){if(this.disabled||this.readOnly||e===this.value)return;let t=this.value===0?null:this.value;this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:{value:e,previousValue:t,reason:i},bubbles:!0,composed:!0}))}setHoverValue(e){this.hoverValue!==e&&(this.hoverValue=e,this.dispatchEvent(new CustomEvent("hover-value-change",{detail:e,bubbles:!0,composed:!0})),this.notify())}handleSliderKeydown(e){let i=(0,v.directionalKey)(e.key,this),t=null;i==="ArrowRight"||i==="ArrowUp"?t=this.value+.5:i==="ArrowLeft"||i==="ArrowDown"?t=this.value-.5:i==="Home"?t=0:i==="End"&&(t=this.max),t!==null&&(e.preventDefault(),this.commit(Math.min(Math.max(t,0),this.max),"keyboard"))}render(){return h.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};r.styles=h.css`
+"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var M=(o,a)=>{for(var e in a)m(o,e,{get:a[e],enumerable:!0})},H=(o,a,e,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let t of T(a))!g.call(o,t)&&t!==e&&m(o,t,{get:()=>a[t],enumerable:!(r=y(a,t))||r.enumerable});return o};var V=o=>H(m({},"__esModule",{value:!0}),o),l=(o,a,e,r)=>{for(var t=r>1?void 0:r?y(a,e):a,u=o.length-1,n;u>=0;u--)(n=o[u])&&(t=(r?n(a,e,t):n(t))||t);return r&&t&&m(a,e,t),t};var I={};M(I,{SkdxRating:()=>i});module.exports=V(I);var h=require("lit"),s=require("lit/decorators.js"),p=require("../internal/authored.cjs"),c=require("../internal/define.cjs"),f=require("../internal/direction.cjs"),v=require("../internal/events.cjs"),A=require("../internal/form-associated.cjs"),w=require("../internal/part.cjs"),E=require("../internal/roving-tab-stop.cjs"),L=require("./family.cjs"),d=require("./RatingAnatomy.cjs");var b="skdx-rating-item",x=["aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","aria-orientation","tabindex"],i=class extends(0,A.FormAssociated)(h.LitElement){constructor(){super(...arguments);this.value=0;this.max=5;this.itemLabel=(e,r)=>`${e} of ${r} stars`;this.allowHalf=!1;this.allowClear=!1;this.disabled=!1;this.readOnly=!1;this.required=!1;this.hoverValue=null;this.fillAnatomy=()=>{(0,p.hasAuthoredParts)(this,d.RATING_ANATOMY_GENERATED,d.RATING_RENDER_SLOTS)||(0,d.fillRatingAnatomy)(this)};this.handlePointerLeave=()=>{this.setHoverValue(null)};this.handleKeydown=e=>{if(!(this.disabled||this.readOnly)){if(e.key==="Home"||e.key==="End"){e.preventDefault(),this.commit(e.key==="Home"?0:this.max,"keyboard");return}if(this.allowHalf){this.handleSliderKeydown(e);return}this.handleItemKeydown(e)}}}connectedCallback(){super.connectedCallback(),this.defaultValue??(this.defaultValue=this.value),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("pointerleave",this.handlePointerLeave),this.syncHostAttributes(),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),this.removeEventListener("pointerleave",this.handlePointerLeave),super.disconnectedCallback()}updated(e){this.syncHostAttributes(),(e.has("value")||e.has("disabled")||e.has("readOnly")||e.has("max")||e.has("itemLabel"))&&this.notify(),e.has("max")&&this.fillAnatomy(),(e.has("value")||e.has("required"))&&this.syncFormState()}syncFormState(){this.setFormValue(this.value>0?String(this.value):null),this.setValueMissing(this.required&&this.value<=0,"Please select a rating.",this.querySelector(b)?.shadowRoot?.querySelector("button"))}formResetCallback(){this.value=this.defaultValue??0}syncHostAttributes(){if(this.allowHalf)this.setAttribute("role","slider"),this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax",String(this.max)),this.setAttribute("aria-valuenow",String(this.value)),this.setAttribute("aria-valuetext",`${this.value} out of ${this.max}`),this.setAttribute("aria-orientation","horizontal"),this.setAttribute("tabindex",this.disabled?"-1":"0");else{this.setAttribute("role","radiogroup");for(let e of x)this.removeAttribute(e)}this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.readOnly?this.setAttribute("aria-readonly","true"):this.removeAttribute("aria-readonly"),(0,w.reflectHostState)(this,{"data-disabled":this.disabled?"":null,"data-readonly":this.readOnly?"":null})}notify(){L.RATING_FAMILY.notify(this)}commit(e,r){if(this.disabled||this.readOnly||e===this.value)return;let t=this.value===0?null:this.value;this.value=e,(0,v.emit)(this,"value-change",{value:e,previousValue:t,reason:r})}setHoverValue(e){this.hoverValue!==e&&(this.hoverValue=e,(0,v.emit)(this,"hover-value-change",e),this.notify())}handleSliderKeydown(e){let r=(0,f.directionalKey)(e.key,this),t=null;r==="ArrowRight"||r==="ArrowUp"?t=this.value+.5:(r==="ArrowLeft"||r==="ArrowDown")&&(t=this.value-.5),t!==null&&(e.preventDefault(),this.commit(Math.min(Math.max(t,0),this.max),"keyboard"))}handleItemKeydown(e){let r=(0,E.enabledRovingItems)(this,b);if(r.length===0)return;let t=r.indexOf(e.target),u=(0,f.directionalKey)(e.key,this),n;u==="ArrowRight"||u==="ArrowDown"?n=Math.min(r.length-1,Math.max(0,t)+1):(u==="ArrowLeft"||u==="ArrowUp")&&(n=Math.max(0,t-1)),n!==void 0&&n!==t&&(e.preventDefault(),r[n]?.shadowRoot?.querySelector("button")?.focus())}render(){return h.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};i.styles=h.css`
     :host {
       display: inline-flex;
     }
-  `,l([(0,o.property)({type:Number,reflect:!0})],r.prototype,"value",2),l([(0,o.property)({type:Number,reflect:!0})],r.prototype,"max",2),l([(0,o.property)({attribute:!1})],r.prototype,"itemLabel",2),l([(0,o.property)({type:Boolean,reflect:!0,attribute:"allow-half"})],r.prototype,"allowHalf",2),l([(0,o.property)({type:Boolean,reflect:!0,attribute:"allow-clear"})],r.prototype,"allowClear",2),l([(0,o.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),l([(0,o.property)({type:Boolean,reflect:!0,attribute:"read-only"})],r.prototype,"readOnly",2),l([(0,o.property)({type:Boolean,reflect:!0})],r.prototype,"required",2),l([(0,o.property)({type:String,reflect:!0})],r.prototype,"name",2),l([(0,o.property)({attribute:"required-message"})],r.prototype,"requiredMessage",2),r=l([(0,y.customElement)("skdx-rating","rating","root")],r);0&&(module.exports={SkdxRating});
+  `,l([(0,s.property)({type:Number,reflect:!0})],i.prototype,"value",2),l([(0,s.property)({type:Number,reflect:!0})],i.prototype,"max",2),l([(0,s.property)({attribute:!1})],i.prototype,"itemLabel",2),l([(0,s.property)({type:Boolean,reflect:!0,attribute:"allow-half"})],i.prototype,"allowHalf",2),l([(0,s.property)({type:Boolean,reflect:!0,attribute:"allow-clear"})],i.prototype,"allowClear",2),l([(0,s.property)({type:Boolean,reflect:!0})],i.prototype,"disabled",2),l([(0,s.property)({type:Boolean,reflect:!0,attribute:"read-only"})],i.prototype,"readOnly",2),l([(0,s.property)({type:Boolean,reflect:!0})],i.prototype,"required",2),l([(0,s.property)({type:String,reflect:!0})],i.prototype,"name",2),l([(0,s.property)({attribute:"required-message"})],i.prototype,"requiredMessage",2),l([(0,s.property)({type:String,reflect:!0,attribute:"data-size"})],i.prototype,"size",2),i=l([(0,c.customElement)("skdx-rating","rating","root")],i);0&&(module.exports={SkdxRating});