@skdx/web-components 0.26.0

package/dist/radio-card/RadioCardIndicator.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-radio-card-indicator>` — the decorative dot (or empty ring) drawn on a
+ * `<skdx-radio-card>`. The card root mirrors its `data-state` and `data-disabled`
+ * onto it.
+ *
+ * Unlike `<skdx-radio-group-indicator>` this stays mounted when unchecked,
+ * because on a card the indicator is the *ring*, not just the dot — unmounting
+ * it would collapse the card's layout on every deselect. It is `aria-hidden`:
+ * the control already announces the checked state, and a second copy would make
+ * a screen reader say it twice.
+ *
+ * @example
+ * ```html
+ * <skdx-radio-card value="pro">
+ *   <skdx-radio-card-control></skdx-radio-card-control>
+ *   <skdx-radio-card-indicator></skdx-radio-card-indicator>
+ *   <skdx-radio-card-label>Pro</skdx-radio-card-label>
+ * </skdx-radio-card>
+ * ```
+ */
+export declare class SkdxRadioCardIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    private rootEl;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radio-card-indicator': SkdxRadioCardIndicator;
+    }
+}

package/dist/radio-card/RadioCardIndicator.js

@@ -0,0 +1,8 @@
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(i,t,s,o)=>{for(var e=o>1?void 0:o?c(t,s):t,l=i.length-1,a;l>=0;l--)(a=i[l])&&(e=(o?a(t,s,e):a(e))||e);return o&&e&&n(t,s,e),e};import{css as m,html as p,LitElement as h}from"lit";import{customElement as u}from"../internal/define.js";var r=class extends h{constructor(){super(...arguments);this.rootEl=null}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.rootEl=this.closest("skdx-radio-card"),this.rootEl?.syncParts()}render(){return p`<slot></slot>`}};r.styles=m`
+    :host {
+      display: inline-block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,r=d([u("skdx-radio-card-indicator","radio-card","indicator")],r);export{r as SkdxRadioCardIndicator};

package/dist/radio-card/RadioCardLabel.cjs

@@ -0,0 +1,8 @@
+"use strict";var d=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var u=(r,e)=>{for(var t in e)d(r,t,{get:e[t],enumerable:!0})},v=(r,e,t,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!k.call(r,o)&&o!==t&&d(r,o,{get:()=>e[o],enumerable:!(l=n(e,o))||l.enumerable});return r};var E=r=>v(d({},"__esModule",{value:!0}),r),m=(r,e,t,l)=>{for(var o=l>1?void 0:l?n(e,t):e,c=r.length-1,i;c>=0;c--)(i=r[c])&&(o=(l?i(e,t,o):i(o))||o);return l&&o&&d(e,t,o),o};var b={};u(b,{SkdxRadioCardLabel:()=>s});module.exports=E(b);var a=require("lit"),p=require("../internal/define.cjs");var s=class extends a.LitElement{constructor(){super(...arguments);this.rootEl=null}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-radio-card"),this.rootEl?.syncParts()}disconnectedCallback(){let t=this.rootEl;super.disconnectedCallback(),queueMicrotask(()=>t?.syncParts())}render(){return a.html`<slot></slot>`}};s.styles=a.css`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,s=m([(0,p.customElement)("skdx-radio-card-label","radio-card","label")],s);0&&(module.exports={SkdxRadioCardLabel});

package/dist/radio-card/RadioCardLabel.d.cts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-radio-card-label>` — the card's title line, and the control's accessible
+ * name.
+ *
+ * It is not a `<label>` element: the card root already behaves as one, and the
+ * control is named by `aria-labelledby` instead. The root gives this part an id
+ * (via `internal/ids`) and points the control at it while this part is present —
+ * leave it out and the control has no accessible name at all, so supply an
+ * `aria-label` on the control in that case.
+ *
+ * Slotted content stays in the light DOM, so assistive tech reads the real text
+ * rather than a shadow copy of it.
+ *
+ * @example
+ * ```html
+ * <skdx-radio-card value="pro">
+ *   <skdx-radio-card-control></skdx-radio-card-control>
+ *   <skdx-radio-card-label>Pro</skdx-radio-card-label>
+ * </skdx-radio-card>
+ * ```
+ */
+export declare class SkdxRadioCardLabel extends LitElement {
+    static styles: import("lit").CSSResult;
+    private rootEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radio-card-label': SkdxRadioCardLabel;
+    }
+}

package/dist/radio-card/RadioCardLabel.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-radio-card-label>` — the card's title line, and the control's accessible
+ * name.
+ *
+ * It is not a `<label>` element: the card root already behaves as one, and the
+ * control is named by `aria-labelledby` instead. The root gives this part an id
+ * (via `internal/ids`) and points the control at it while this part is present —
+ * leave it out and the control has no accessible name at all, so supply an
+ * `aria-label` on the control in that case.
+ *
+ * Slotted content stays in the light DOM, so assistive tech reads the real text
+ * rather than a shadow copy of it.
+ *
+ * @example
+ * ```html
+ * <skdx-radio-card value="pro">
+ *   <skdx-radio-card-control></skdx-radio-card-control>
+ *   <skdx-radio-card-label>Pro</skdx-radio-card-label>
+ * </skdx-radio-card>
+ * ```
+ */
+export declare class SkdxRadioCardLabel extends LitElement {
+    static styles: import("lit").CSSResult;
+    private rootEl;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radio-card-label': SkdxRadioCardLabel;
+    }
+}

package/dist/radio-card/RadioCardLabel.js

@@ -0,0 +1,8 @@
+var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var c=(s,o,r,l)=>{for(var e=l>1?void 0:l?n(o,r):o,a=s.length-1,d;a>=0;a--)(d=s[a])&&(e=(l?d(o,r,e):d(e))||e);return l&&e&&i(o,r,e),e};import{css as m,html as p,LitElement as h}from"lit";import{customElement as k}from"../internal/define.js";var t=class extends h{constructor(){super(...arguments);this.rootEl=null}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-radio-card"),this.rootEl?.syncParts()}disconnectedCallback(){let r=this.rootEl;super.disconnectedCallback(),queueMicrotask(()=>r?.syncParts())}render(){return p`<slot></slot>`}};t.styles=m`
+    :host {
+      display: block;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,t=c([k("skdx-radio-card-label","radio-card","label")],t);export{t as SkdxRadioCardLabel};

package/dist/radio-card/index.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var S=(r,o)=>{for(var a in o)x(r,a,{get:o[a],enumerable:!0})},n=(r,o,a,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let d of m(o))!R.call(r,d)&&d!==a&&x(r,d,{get:()=>o[d],enumerable:!(i=k(o,d))||i.enumerable});return r};var c=r=>n(x({},"__esModule",{value:!0}),r);var l={};S(l,{SkdxRadioCard:()=>t.SkdxRadioCard,SkdxRadioCardControl:()=>e.SkdxRadioCardControl,SkdxRadioCardDescription:()=>p.SkdxRadioCardDescription,SkdxRadioCardIndicator:()=>C.SkdxRadioCardIndicator,SkdxRadioCardLabel:()=>f.SkdxRadioCardLabel});module.exports=c(l);var t=require("./RadioCard.cjs"),e=require("./RadioCardControl.cjs"),p=require("./RadioCardDescription.cjs"),C=require("./RadioCardIndicator.cjs"),f=require("./RadioCardLabel.cjs");0&&(module.exports={SkdxRadioCard,SkdxRadioCardControl,SkdxRadioCardDescription,SkdxRadioCardIndicator,SkdxRadioCardLabel});

package/dist/radio-card/index.d.cts

@@ -0,0 +1,5 @@
+export { SkdxRadioCard } from './RadioCard.cjs';
+export { SkdxRadioCardControl } from './RadioCardControl.cjs';
+export { SkdxRadioCardDescription } from './RadioCardDescription.cjs';
+export { SkdxRadioCardIndicator } from './RadioCardIndicator.cjs';
+export { SkdxRadioCardLabel } from './RadioCardLabel.cjs';

package/dist/radio-card/index.d.ts

@@ -0,0 +1,5 @@
+export { SkdxRadioCard } from './RadioCard.js';
+export { SkdxRadioCardControl } from './RadioCardControl.js';
+export { SkdxRadioCardDescription } from './RadioCardDescription.js';
+export { SkdxRadioCardIndicator } from './RadioCardIndicator.js';
+export { SkdxRadioCardLabel } from './RadioCardLabel.js';

package/dist/radio-card/index.js

@@ -0,0 +1 @@
+import{SkdxRadioCard as d}from"./RadioCard.js";import{SkdxRadioCardControl as x}from"./RadioCardControl.js";import{SkdxRadioCardDescription as t}from"./RadioCardDescription.js";import{SkdxRadioCardIndicator as p}from"./RadioCardIndicator.js";import{SkdxRadioCardLabel as f}from"./RadioCardLabel.js";export{d as SkdxRadioCard,x as SkdxRadioCardControl,t as SkdxRadioCardDescription,p as SkdxRadioCardIndicator,f as SkdxRadioCardLabel};

package/dist/radio-group/RadioGroup.cjs

@@ -0,0 +1,5 @@
+"use strict";var f=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var w=(a,s)=>{for(var e in s)f(a,e,{get:s[e],enumerable:!0})},V=(a,s,e,t)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of A(s))!_.call(a,i)&&i!==e&&f(a,i,{get:()=>s[i],enumerable:!(t=m(s,i))||t.enumerable});return a};var E=a=>V(f({},"__esModule",{value:!0}),a),n=(a,s,e,t)=>{for(var i=t>1?void 0:t?m(s,e):s,u=a.length-1,h;u>=0;u--)(h=a[u])&&(i=(t?h(s,e,i):h(i))||i);return t&&i&&f(s,e,i),i};var I={};w(I,{SkdxRadioGroup:()=>r});module.exports=E(I);var d=require("lit"),l=require("lit/decorators.js"),v=require("../internal/define.cjs"),b=require("../internal/direction.cjs"),g=require("../internal/form-associated.cjs"),p=require("../internal/positioning.cjs");var r=class extends(0,g.FormAssociated)(d.LitElement){constructor(){super(...arguments);this.required=!1;this.disabled=!1;this.invalid=!1;this.orientation="both";this.loop=!0;this._items=[];this._handleKeydown=e=>{let t=Array.from(this.querySelectorAll('[role="radio"]')).filter(y=>y.getAttribute("data-disabled")===null);if(t.length===0)return;let i=t.indexOf(document.activeElement),u=this.orientation==="vertical"?["ArrowDown"]:this.orientation==="horizontal"?["ArrowRight"]:["ArrowRight","ArrowDown"],h=this.orientation==="vertical"?["ArrowUp"]:this.orientation==="horizontal"?["ArrowLeft"]:["ArrowLeft","ArrowUp"],c=(0,b.directionalKey)(e.key,this),o;u.includes(c)?(o=i+1,o>=t.length&&(o=this.loop?0:t.length-1)):h.includes(c)?(o=i-1,o<0&&(o=this.loop?t.length-1:0)):c==="Home"?o=0:c==="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()}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){this.disabled||this.getSelectedValue()!==e&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,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.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(){this.value===void 0&&(this._uncontrolledValue=this.defaultValue),this.dispatchEvent(new CustomEvent("value-change",{detail:this.getSelectedValue(),bubbles:!0,composed:!0})),this.syncFormState(),this._refreshItems()}updated(e){this._syncHostAttributes(),e.has("value")&&this._refreshItems(),(e.has("required")||e.has("value"))&&this.syncFormState()}render(){return d.html`<slot></slot>`}};r.styles=d.css`
+    :host {
+      display: block;
+    }
+  `,n([(0,l.property)({type:String})],r.prototype,"value",2),n([(0,l.property)({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),n([(0,l.property)({type:String,reflect:!0})],r.prototype,"name",2),n([(0,l.property)({type:Boolean,reflect:!0})],r.prototype,"required",2),n([(0,l.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),n([(0,l.property)({type:Boolean,reflect:!0})],r.prototype,"invalid",2),n([(0,l.property)({type:String,reflect:!0})],r.prototype,"orientation",2),n([(0,l.property)({converter:p.optOutBoolean})],r.prototype,"loop",2),n([(0,l.property)({attribute:"required-message"})],r.prototype,"requiredMessage",2),n([(0,l.state)()],r.prototype,"_uncontrolledValue",2),r=n([(0,v.customElement)("skdx-radio-group","radio-group","root")],r);0&&(module.exports={SkdxRadioGroup});

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

@@ -0,0 +1,115 @@
+import { LitElement } from 'lit';
+/** A registered item that can be told to re-sync its own host attributes. */
+export interface RefreshableRadioItem {
+    refresh(): void;
+}
+declare const SkdxRadioGroup_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-radio-group>` — the Web Components implementation of the shared
+ * RadioGroup contract (see `@skdx/shared`'s `radioGroupContract`). Owns the
+ * selected value and drives roving-tabindex arrow-key navigation across its
+ * `<skdx-radio-group-item>`s (which look it up via
+ * `this.closest('skdx-radio-group')`, mirroring `<skdx-tabs>`'s
+ * root/registry pattern) — arrow keys both move focus and select, per the
+ * WAI-ARIA radio group pattern (unlike Tabs'/Toolbar's independent-tab-stop
+ * roving focus).
+ *
+ * Form-associated on the **root** through the shared `FormAssociated` mixin
+ * (the same one `<skdx-checkbox>` uses) rather than a per-item hidden
+ * `<input>`: the group's single selected value is what gets submitted, and the
+ * group answers `form.reset()` and a `<fieldset disabled>` ancestor.
+ *
+ * @example
+ * ```html
+ * <skdx-radio-group name="density" default-value="comfortable">
+ *   <skdx-radio-group-item value="compact">
+ *     <skdx-radio-group-indicator></skdx-radio-group-indicator>
+ *   </skdx-radio-group-item>
+ *   <skdx-radio-group-item value="comfortable">
+ *     <skdx-radio-group-indicator></skdx-radio-group-indicator>
+ *   </skdx-radio-group-item>
+ * </skdx-radio-group>
+ * ```
+ *
+ * @fires value-change - Fired with the newly selected `value`, and with the reset value on `form.reset()`.
+ */
+export declare class SkdxRadioGroup extends SkdxRadioGroup_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Selected item's value, for controlled usage. Pair with `value-change`.
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * Initially selected item's value, for uncontrolled usage.
+     * @default undefined
+     */
+    defaultValue?: string;
+    /**
+     * 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;
+    /** 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 with nothing selected. Sealed inside the shadow root otherwise,
+     * so this is the only way to translate it or to name what is being chosen
+     * ("Please choose a shipping speed.").
+     * @default undefined — keeps `'Please select an option.'`
+     */
+    requiredMessage?: string;
+    private _uncontrolledValue?;
+    private readonly _items;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The currently selected value, resolving controlled vs. uncontrolled. */
+    getSelectedValue(): string | undefined;
+    /**
+     * The earliest-registered, non-disabled item's value — the fallback tab stop while nothing is selected.
+     *
+     * A call the group's item elements make on their root to work out which one owns the roving tab stop, not consumer API. It stays `public` to the compiler because the items are instances of a different class, which `protected` cannot express.
+     *
+     * @internal
+     */
+    getFirstEnabledValue(): string | null;
+    /** Selects `value`, updating internal state (if uncontrolled) and firing `value-change`. */
+    setValue(value: string): 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;
+    private syncFormState;
+    /**
+     * Restores the value the `default-value` attribute declared, mirroring
+     * `<skdx-checkbox-group>`. Unlike {@link setValue} it ignores `disabled`: a
+     * disabled native control is still reset by its form, it is only skipped
+     * during submission.
+     */
+    formResetCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radio-group': SkdxRadioGroup;
+    }
+}
+export {};

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

@@ -0,0 +1,115 @@
+import { LitElement } from 'lit';
+/** A registered item that can be told to re-sync its own host attributes. */
+export interface RefreshableRadioItem {
+    refresh(): void;
+}
+declare const SkdxRadioGroup_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: boolean;
+};
+/**
+ * `<skdx-radio-group>` — the Web Components implementation of the shared
+ * RadioGroup contract (see `@skdx/shared`'s `radioGroupContract`). Owns the
+ * selected value and drives roving-tabindex arrow-key navigation across its
+ * `<skdx-radio-group-item>`s (which look it up via
+ * `this.closest('skdx-radio-group')`, mirroring `<skdx-tabs>`'s
+ * root/registry pattern) — arrow keys both move focus and select, per the
+ * WAI-ARIA radio group pattern (unlike Tabs'/Toolbar's independent-tab-stop
+ * roving focus).
+ *
+ * Form-associated on the **root** through the shared `FormAssociated` mixin
+ * (the same one `<skdx-checkbox>` uses) rather than a per-item hidden
+ * `<input>`: the group's single selected value is what gets submitted, and the
+ * group answers `form.reset()` and a `<fieldset disabled>` ancestor.
+ *
+ * @example
+ * ```html
+ * <skdx-radio-group name="density" default-value="comfortable">
+ *   <skdx-radio-group-item value="compact">
+ *     <skdx-radio-group-indicator></skdx-radio-group-indicator>
+ *   </skdx-radio-group-item>
+ *   <skdx-radio-group-item value="comfortable">
+ *     <skdx-radio-group-indicator></skdx-radio-group-indicator>
+ *   </skdx-radio-group-item>
+ * </skdx-radio-group>
+ * ```
+ *
+ * @fires value-change - Fired with the newly selected `value`, and with the reset value on `form.reset()`.
+ */
+export declare class SkdxRadioGroup extends SkdxRadioGroup_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Selected item's value, for controlled usage. Pair with `value-change`.
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * Initially selected item's value, for uncontrolled usage.
+     * @default undefined
+     */
+    defaultValue?: string;
+    /**
+     * 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;
+    /** 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 with nothing selected. Sealed inside the shadow root otherwise,
+     * so this is the only way to translate it or to name what is being chosen
+     * ("Please choose a shipping speed.").
+     * @default undefined — keeps `'Please select an option.'`
+     */
+    requiredMessage?: string;
+    private _uncontrolledValue?;
+    private readonly _items;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The currently selected value, resolving controlled vs. uncontrolled. */
+    getSelectedValue(): string | undefined;
+    /**
+     * The earliest-registered, non-disabled item's value — the fallback tab stop while nothing is selected.
+     *
+     * A call the group's item elements make on their root to work out which one owns the roving tab stop, not consumer API. It stays `public` to the compiler because the items are instances of a different class, which `protected` cannot express.
+     *
+     * @internal
+     */
+    getFirstEnabledValue(): string | null;
+    /** Selects `value`, updating internal state (if uncontrolled) and firing `value-change`. */
+    setValue(value: string): 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;
+    private syncFormState;
+    /**
+     * Restores the value the `default-value` attribute declared, mirroring
+     * `<skdx-checkbox-group>`. Unlike {@link setValue} it ignores `disabled`: a
+     * disabled native control is still reset by its form, it is only skipped
+     * during submission.
+     */
+    formResetCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private readonly _handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radio-group': SkdxRadioGroup;
+    }
+}
+export {};

package/dist/radio-group/RadioGroup.js

@@ -0,0 +1,5 @@
+var f=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(h,a,e,t)=>{for(var r=t>1?void 0:t?m(a,e):a,o=h.length-1,d;o>=0;o--)(d=h[o])&&(r=(t?d(a,e,r):d(r))||r);return t&&r&&f(a,e,r),r};import{css as v,html as b,LitElement as g}from"lit";import{property as l,state as p}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{directionalKey as A}from"../internal/direction.js";import{FormAssociated as _}from"../internal/form-associated.js";import{optOutBoolean as w}from"../internal/positioning.js";var i=class extends _(g){constructor(){super(...arguments);this.required=!1;this.disabled=!1;this.invalid=!1;this.orientation="both";this.loop=!0;this._items=[];this._handleKeydown=e=>{let t=Array.from(this.querySelectorAll('[role="radio"]')).filter(c=>c.getAttribute("data-disabled")===null);if(t.length===0)return;let r=t.indexOf(document.activeElement),o=this.orientation==="vertical"?["ArrowDown"]:this.orientation==="horizontal"?["ArrowRight"]:["ArrowRight","ArrowDown"],d=this.orientation==="vertical"?["ArrowUp"]:this.orientation==="horizontal"?["ArrowLeft"]:["ArrowLeft","ArrowUp"],u=A(e.key,this),n;o.includes(u)?(n=r+1,n>=t.length&&(n=this.loop?0:t.length-1)):d.includes(u)?(n=r-1,n<0&&(n=this.loop?t.length-1:0)):u==="Home"?n=0:u==="End"&&(n=t.length-1),n!==void 0&&(e.preventDefault(),t[n]?.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()}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){this.disabled||this.getSelectedValue()!==e&&(this.value===void 0&&(this._uncontrolledValue=e),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.syncFormState(),this._refreshItems())}registerItem(e,t,r){this._items.push({el:e,value:t,disabled:r})}unregisterItem(e){let t=this._items.findIndex(r=>r.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.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(){this.value===void 0&&(this._uncontrolledValue=this.defaultValue),this.dispatchEvent(new CustomEvent("value-change",{detail:this.getSelectedValue(),bubbles:!0,composed:!0})),this.syncFormState(),this._refreshItems()}updated(e){this._syncHostAttributes(),e.has("value")&&this._refreshItems(),(e.has("required")||e.has("value"))&&this.syncFormState()}render(){return b`<slot></slot>`}};i.styles=v`
+    :host {
+      display: block;
+    }
+  `,s([l({type:String})],i.prototype,"value",2),s([l({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),s([l({type:String,reflect:!0})],i.prototype,"name",2),s([l({type:Boolean,reflect:!0})],i.prototype,"required",2),s([l({type:Boolean,reflect:!0})],i.prototype,"disabled",2),s([l({type:Boolean,reflect:!0})],i.prototype,"invalid",2),s([l({type:String,reflect:!0})],i.prototype,"orientation",2),s([l({converter:w})],i.prototype,"loop",2),s([l({attribute:"required-message"})],i.prototype,"requiredMessage",2),s([p()],i.prototype,"_uncontrolledValue",2),i=s([y("skdx-radio-group","radio-group","root")],i);export{i as SkdxRadioGroup};

package/dist/radio-group/RadioGroupIndicator.cjs

@@ -0,0 +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`
+    :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});

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

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-radio-group-indicator>` — the visual mark (e.g. a dot) shown inside
+ * a checked `<skdx-radio-group-item>`. Mirrors its parent item's state via a
+ * `MutationObserver` (see `<skdx-dialog-trigger>`'s docs for the same
+ * ancestor-observing convention). Hidden while unchecked unless
+ * `force-mount` is set.
+ *
+ * @example
+ * ```html
+ * <skdx-radio-group-item value="compact">
+ *   <skdx-radio-group-indicator></skdx-radio-group-indicator>
+ * </skdx-radio-group-item>
+ * ```
+ */
+export declare class SkdxRadioGroupIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Keep mounted regardless of state (for exit animations). @default false */
+    forceMount: boolean;
+    private itemEl;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _sync;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radio-group-indicator': SkdxRadioGroupIndicator;
+    }
+}

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

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-radio-group-indicator>` — the visual mark (e.g. a dot) shown inside
+ * a checked `<skdx-radio-group-item>`. Mirrors its parent item's state via a
+ * `MutationObserver` (see `<skdx-dialog-trigger>`'s docs for the same
+ * ancestor-observing convention). Hidden while unchecked unless
+ * `force-mount` is set.
+ *
+ * @example
+ * ```html
+ * <skdx-radio-group-item value="compact">
+ *   <skdx-radio-group-indicator></skdx-radio-group-indicator>
+ * </skdx-radio-group-item>
+ * ```
+ */
+export declare class SkdxRadioGroupIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Keep mounted regardless of state (for exit animations). @default false */
+    forceMount: boolean;
+    private itemEl;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _sync;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radio-group-indicator': SkdxRadioGroupIndicator;
+    }
+}

package/dist/radio-group/RadioGroupIndicator.js

@@ -0,0 +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`
+    :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};

package/dist/radio-group/RadioGroupItem.cjs

@@ -0,0 +1,9 @@
+"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var k=(r,i)=>{for(var t in i)n(r,t,{get:i[t],enumerable:!0})},m=(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=u(i,e))||s.enumerable});return r};var y=r=>m(n({},"__esModule",{value:!0}),r),h=(r,i,t,s)=>{for(var e=s>1?void 0:s?u(i,t):i,a=r.length-1,d;a>=0;a--)(d=r[a])&&(e=(s?d(i,t,e):d(e))||e);return s&&e&&n(i,t,e),e};var E={};k(E,{SkdxRadioGroupItem:()=>l});module.exports=y(E);var o=require("lit"),c=require("lit/decorators.js"),b=require("../internal/define.cjs"),v=require("../internal/ids.cjs");var l=class extends o.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.rootEl=null;this._handleClick=()=>{!this.effectiveDisabled&&!this.checked&&this.rootEl?.setValue(this.value)};this._handleFocus=()=>{!this.effectiveDisabled&&!this.checked&&this.rootEl?.setValue(this.value)};this._handleKeydown=t=>{t.key==="Enter"&&t.preventDefault()}}connectedCallback(){super.connectedCallback(),this.rootEl=this.closest("skdx-radio-group"),this.rootEl?.registerItem(this,this.value,this.disabled),this.setAttribute("role","radio"),this._linkLabel(),this.addEventListener("click",this._handleClick),this.addEventListener("focus",this._handleFocus),this.addEventListener("keydown",this._handleKeydown),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 this.rootEl?.getSelectedValue()===this.value}_linkLabel(){if(this.hasAttribute("aria-label")||this.hasAttribute("aria-labelledby"))return;let t=this.getRootNode(),e=(this.id?Array.from(t.querySelectorAll("label")).find(a=>a.htmlFor===this.id):void 0)??this.closest("label");e&&this.setAttribute("aria-labelledby",(0,v.ensureId)(e,"skdx-radio-group","label"))}_sync(){let t=this.rootEl,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 a=t?.getSelectedValue()===void 0&&t?.getFirstEnabledValue()===this.value,d=!e&&(s||a);this.setAttribute("tabindex",d?"0":"-1")}updated(){this._sync()}render(){return o.html`<slot></slot>`}};l.styles=o.css`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+    }
+    :host([data-disabled]) {
+      cursor: default;
+    }
+  `,h([(0,c.property)({type:String,reflect:!0})],l.prototype,"value",2),h([(0,c.property)({type:Boolean,reflect:!0})],l.prototype,"disabled",2),l=h([(0,b.customElement)("skdx-radio-group-item","radio-group","item")],l);0&&(module.exports={SkdxRadioGroupItem});

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

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-radio-group-item>` — a single radio button within an
+ * `<skdx-radio-group>`. Sets `role="radio"`, `aria-checked`, `data-state`
+ * (`"checked"` / `"unchecked"`), `data-disabled`, `aria-disabled`, and `data-value` on
+ * itself. Selects on click, and also selects on focus (matching the
+ * WAI-ARIA radio group pattern where arrow-key navigation selects as it
+ * moves). Only tabbable when checked, or when nothing in the group is
+ * checked and it's the first enabled item. Must be used inside
+ * `<skdx-radio-group>`.
+ *
+ * Named by a `<label>` that either points at it (`for="<its id>"`) or wraps it,
+ * which the item resolves into `aria-labelledby` on itself — see
+ * {@link SkdxRadioGroupItem._linkLabel}. An explicit `aria-label` /
+ * `aria-labelledby` on the tag wins over both.
+ *
+ * @example
+ * ```html
+ * <skdx-radio-group-item value="compact" id="density-compact">
+ *   <skdx-radio-group-indicator></skdx-radio-group-indicator>
+ * </skdx-radio-group-item>
+ * <label for="density-compact">compact</label>
+ * ```
+ */
+export declare class SkdxRadioGroupItem extends LitElement {
+    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;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal Called by the parent `<skdx-radio-group>` whenever the selected value changes. */
+    refresh(): void;
+    private get effectiveDisabled();
+    /** Whether this item is currently the group's selected value. */
+    get checked(): boolean;
+    /**
+     * Points `aria-labelledby` at the `<label>` naming this item, if there is one
+     * and the tag does not already carry its own name.
+     *
+     * The other four packages put `role="radio"` on a native `<button>`, and a
+     * `<button>` is a *labelable* element: `<label for>` and a wrapping `<label>`
+     * both name it, for free, with no work from the component. This host is a
+     * custom element, which is not labelable — a `<label for>` aimed at it names
+     * nothing, so the same markup that works everywhere else produced a radio
+     * with no accessible name at all here (axe `aria-toggle-field-name`).
+     * Resolving the association into `aria-labelledby` is what closes that gap;
+     * it is the same `ensureId` + `aria-labelledby` wiring `<skdx-radio-card>` and
+     * `<skdx-form-control>` already do for their own labels.
+     *
+     * ponytail: resolved once, at connect, like `takeHostAriaLabel`. Re-parenting
+     * an item under a different label after connect is not tracked — add a
+     * MutationObserver if a real case for it turns up.
+     */
+    private _linkLabel;
+    private _sync;
+    private readonly _handleClick;
+    private readonly _handleFocus;
+    private readonly _handleKeydown;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-radio-group-item': SkdxRadioGroupItem;
+    }
+}