@digital2analogue2/parsimony-components 0.1.0

package/dist/radio/radio-group.js

@@ -0,0 +1,183 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * A form-associated group of radio buttons.
+ *
+ * Manages selection state and form participation for its `<rr-radio>` children.
+ * Renders a `<fieldset>` + `<legend>` for accessible grouping.
+ *
+ * Usage:
+ *   <rr-radio-group name="size" label="Size" value="md">
+ *     <rr-radio value="sm">Small</rr-radio>
+ *     <rr-radio value="md">Medium</rr-radio>
+ *     <rr-radio value="lg">Large</rr-radio>
+ *   </rr-radio-group>
+ *
+ * @slot - rr-radio elements
+ * @fires change - When the selected value changes
+ * @csspart fieldset - The outer fieldset element
+ * @csspart legend - The legend / label element
+ */
+let RrRadioGroup = class RrRadioGroup extends LitElement {
+    constructor() {
+        super();
+        /** Form field name submitted with the selected value. */
+        this.name = '';
+        /** Selected radio value. Syncs the checked state of child radios. */
+        this.value = '';
+        /** Group label rendered as the legend. */
+        this.label = '';
+        /** Error message; sets data-invalid and a custom validity. Maps to attribute error-text. */
+        this.errorText = '';
+        /** Marks the group as required. */
+        this.required = false;
+        /** Disables the group and all child radios. */
+        this.disabled = false;
+        /** Layout direction of the radio options. */
+        this.orientation = 'vertical';
+        this._onRadioChange = (e) => {
+            const prev = this.value;
+            this.value = e.detail.value;
+            this._internals.setFormValue?.(this.value);
+            this._syncRadios();
+            if (prev !== this.value) {
+                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+            }
+        };
+        this._internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('rr-radio-change', this._onRadioChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('rr-radio-change', this._onRadioChange);
+    }
+    updated(changed) {
+        if (changed.has('value') || changed.has('disabled')) {
+            this._syncRadios();
+        }
+        if (changed.has('value')) {
+            this._internals.setFormValue?.(this.value || null);
+        }
+        if (changed.has('errorText')) {
+            if (this.errorText) {
+                this.setAttribute('data-invalid', '');
+                this._internals.setValidity?.({ customError: true }, this.errorText);
+            }
+            else {
+                this.removeAttribute('data-invalid');
+                this._internals.setValidity?.({});
+            }
+        }
+    }
+    firstUpdated() {
+        this._syncRadios();
+        this._internals.setFormValue?.(this.value || null);
+    }
+    _syncRadios() {
+        for (const radio of this._radios) {
+            radio.checked = radio.value === this.value;
+            if (this.disabled)
+                radio.disabled = true;
+        }
+    }
+    get _radios() {
+        return Array.from(this.querySelectorAll('rr-radio'));
+    }
+    render() {
+        return html `
+      <fieldset part="fieldset" ?disabled=${this.disabled}>
+        ${this.label
+            ? html `<legend part="legend">${this.label}${this.required
+                ? html `<span aria-hidden="true" style="color:var(--component-input-foreground-label-required);margin-left:2px">*</span>`
+                : nothing}
+            </legend>`
+            : nothing}
+        <div class="options" role="radiogroup" aria-required=${this.required ? 'true' : nothing}>
+          <slot></slot>
+        </div>
+        ${this.errorText
+            ? html `<div class="error" role="alert">${this.errorText}</div>`
+            : nothing}
+      </fieldset>
+    `;
+    }
+};
+RrRadioGroup.formAssociated = true;
+RrRadioGroup.styles = css `
+    :host {
+      display: block;
+    }
+
+    fieldset {
+      border: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    legend {
+      display: block;
+      font: var(--font-label-medium);
+      color: var(--component-radio-foreground-label);
+      margin-bottom: var(--spacing-tight);
+      padding: 0;
+      float: none;
+      width: 100%;
+    }
+
+    :host([disabled]) legend {
+      color: var(--component-radio-foreground-disabled);
+    }
+
+    .options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-tight);
+    }
+
+    :host([orientation='horizontal']) .options {
+      flex-direction: row;
+      gap: var(--spacing-element);
+      flex-wrap: wrap;
+    }
+
+    .error {
+      font: var(--font-label-small);
+      color: var(--component-input-foreground-error);
+      margin-top: 4px;
+    }
+  `;
+__decorate([
+    property()
+], RrRadioGroup.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], RrRadioGroup.prototype, "value", void 0);
+__decorate([
+    property()
+], RrRadioGroup.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], RrRadioGroup.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrRadioGroup.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrRadioGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], RrRadioGroup.prototype, "orientation", void 0);
+RrRadioGroup = __decorate([
+    customElement('rr-radio-group')
+], RrRadioGroup);
+export { RrRadioGroup };
+//# sourceMappingURL=radio-group.js.map

package/dist/radio/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../src/radio/radio-group.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@digital2analogue2/parsimony-components';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;
+export declare const WithError: Story;
+//# sourceMappingURL=radio-group.stories.d.ts.map

package/dist/radio/radio-group.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.stories.d.ts","sourceRoot":"","sources":["../../src/radio/radio-group.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yCAAyC,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAoCX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KAAU,CAAC;AAElC,eAAO,MAAM,UAAU,EAAE,KAA+C,CAAC;AAEzE,eAAO,MAAM,SAAS,EAAE,KAAsD,CAAC"}

package/dist/radio/radio-group.stories.js

@@ -0,0 +1,44 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+const meta = {
+    title: 'Components/Radio Group',
+    component: 'rr-radio-group',
+    argTypes: {
+        name: { control: 'text' },
+        value: { control: 'text' },
+        label: { control: 'text' },
+        errorText: { control: 'text' },
+        required: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        orientation: { control: 'select', options: ['vertical', 'horizontal'] },
+    },
+    args: {
+        name: 'plan',
+        value: 'standard',
+        label: 'Choose a plan',
+        errorText: '',
+        required: false,
+        disabled: false,
+        orientation: 'vertical',
+    },
+    render: ({ name, value, label, errorText, required, disabled, orientation }) => html `
+    <rr-radio-group
+      name=${name}
+      value=${value}
+      label=${label}
+      error-text=${errorText}
+      ?required=${required}
+      ?disabled=${disabled}
+      orientation=${orientation}
+    >
+      <rr-radio value="basic">Basic</rr-radio>
+      <rr-radio value="standard">Standard</rr-radio>
+      <rr-radio value="pro">Pro</rr-radio>
+    </rr-radio-group>
+  `,
+};
+export default meta;
+export const Vertical = {};
+export const Horizontal = { args: { orientation: 'horizontal' } };
+export const WithError = { args: { value: '', errorText: 'Pick one' } };
+//# sourceMappingURL=radio-group.stories.js.map

package/dist/radio/radio-group.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.stories.js","sourceRoot":"","sources":["../../src/radio/radio-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,EAAE;KACxE;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,UAAU;KACxB;IACD,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;aAEzE,IAAI;cACH,KAAK;cACL,KAAK;mBACA,SAAS;kBACV,QAAQ;kBACR,QAAQ;oBACN,WAAW;;;;;;GAM5B;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,QAAQ,GAAU,EAAE,CAAC;AAElC,MAAM,CAAC,MAAM,UAAU,GAAU,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,CAAC;AAEzE,MAAM,CAAC,MAAM,SAAS,GAAU,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,CAAC"}

package/dist/radio/radio.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * An individual radio button. Must be used inside `<rr-radio-group>`.
+ *
+ * The group manages the name, form value, and selection state — individual
+ * radios only hold their own `value` prop and visual `checked` state.
+ *
+ * @slot - Label text
+ * @fires rr-radio-change - Bubbles to the parent rr-radio-group when selected
+ * @csspart circle - The visual radio circle element
+ * @csspart label - The label text element
+ */
+export declare class RrRadio extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The value this radio contributes to the group when selected. */
+    value: string;
+    /** Visual checked state. Managed by the parent rr-radio-group. */
+    checked: boolean;
+    /** Disables the radio. */
+    disabled: boolean;
+    private _onChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-radio': RrRadio;
+    }
+}
+//# sourceMappingURL=radio.d.ts.map

package/dist/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;;;GAUG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,0BA6FX;IAEF,mEAAmE;IACtC,KAAK,SAAM;IACxC,kEAAkE;IACtB,OAAO,UAAS;IAC5D,0BAA0B;IACkB,QAAQ,UAAS;IAE7D,OAAO,CAAC,SAAS;IAWjB,MAAM;CAmBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/radio/radio.js

@@ -0,0 +1,166 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * An individual radio button. Must be used inside `<rr-radio-group>`.
+ *
+ * The group manages the name, form value, and selection state — individual
+ * radios only hold their own `value` prop and visual `checked` state.
+ *
+ * @slot - Label text
+ * @fires rr-radio-change - Bubbles to the parent rr-radio-group when selected
+ * @csspart circle - The visual radio circle element
+ * @csspart label - The label text element
+ */
+let RrRadio = class RrRadio extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The value this radio contributes to the group when selected. */
+        this.value = '';
+        /** Visual checked state. Managed by the parent rr-radio-group. */
+        this.checked = false;
+        /** Disables the radio. */
+        this.disabled = false;
+    }
+    _onChange() {
+        if (this.disabled || this.checked)
+            return;
+        this.dispatchEvent(new CustomEvent('rr-radio-change', {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.value },
+        }));
+    }
+    render() {
+        return html `
+      <div class="circle-wrap">
+        <input
+          type="radio"
+          id="radio"
+          .value=${this.value}
+          .checked=${this.checked}
+          .disabled=${this.disabled}
+          aria-checked=${this.checked ? 'true' : 'false'}
+          @change=${this._onChange}
+        />
+        <div class="circle" part="circle">
+          <div class="dot"></div>
+        </div>
+      </div>
+      <label part="label" for="radio"><slot></slot></label>
+    `;
+    }
+};
+RrRadio.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--spacing-tight);
+      cursor: pointer;
+      user-select: none;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    .circle-wrap {
+      position: relative;
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+      margin-top: 2px;
+    }
+
+    input {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      margin: 0;
+      cursor: inherit;
+      z-index: 1;
+    }
+
+    .circle {
+      position: absolute;
+      inset: 0;
+      border: 1px solid var(--component-radio-border-default);
+      border-radius: 50%;
+      background: var(--component-radio-background-unchecked);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        border-color var(--motion-duration-instant) var(--motion-easing-default),
+        background-color var(--motion-duration-instant) var(--motion-easing-default);
+    }
+
+    :host(:not([disabled]):not([checked])) .circle-wrap:hover .circle {
+      border-color: var(--component-radio-border-hover);
+    }
+
+    :host([checked]) .circle {
+      border-color: var(--component-radio-border-checked);
+    }
+
+    :host([disabled]) .circle {
+      background: var(--component-radio-background-disabled);
+      border-color: var(--component-radio-border-disabled);
+    }
+
+    /* Inner dot */
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--component-radio-background-checked);
+      transform: scale(0);
+      transition: transform var(--motion-duration-instant) var(--motion-easing-enter);
+    }
+
+    :host([checked]) .dot {
+      transform: scale(1);
+    }
+
+    :host([disabled]) .dot {
+      background: var(--component-radio-foreground-disabled);
+    }
+
+    /* Focus ring */
+    input:focus-visible ~ .circle {
+      outline: 2px solid var(--component-radio-border-focus);
+      outline-offset: 2px;
+    }
+
+    label {
+      font: var(--font-label-medium);
+      color: var(--component-radio-foreground-label);
+      cursor: inherit;
+      line-height: 1.4;
+    }
+
+    :host([disabled]) label {
+      color: var(--component-radio-foreground-disabled);
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], RrRadio.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RrRadio.prototype, "disabled", void 0);
+RrRadio = __decorate([
+    customElement('rr-radio')
+], RrRadio);
+export { RrRadio };
+//# sourceMappingURL=radio.js.map

package/dist/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;GAUG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAgGL,mEAAmE;QACtC,UAAK,GAAG,EAAE,CAAC;QACxC,kEAAkE;QACtB,YAAO,GAAG,KAAK,CAAC;QAC5D,0BAA0B;QACkB,aAAQ,GAAG,KAAK,CAAC;IAgC/D,CAAC;IA9BS,SAAS;QACf,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO;QAC1C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;SAC9B,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;mBAKI,IAAI,CAAC,KAAK;qBACR,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,QAAQ;yBACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACpC,IAAI,CAAC,SAAS;;;;;;;KAO7B,CAAC;IACJ,CAAC;;AAnIM,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FlB,AA7FY,CA6FX;AAG2B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAY;AAEI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAiB;AAEhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAkB;AArGlD,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAqInB"}

package/dist/radio/radio.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import '@digital2analogue2/parsimony-components';
+/**
+ * `rr-radio` is a child element: it must live inside an `rr-radio-group`,
+ * which manages selection state and keyboard navigation. This standalone
+ * story shows a single radio in isolation for reference only — see the
+ * Radio Group stories for real usage.
+ */
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+//# sourceMappingURL=radio.stories.d.ts.map

package/dist/radio/radio.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.stories.d.ts","sourceRoot":"","sources":["../../src/radio/radio.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,yCAAyC,CAAC;AAEjD;;;;;GAKG;AACH,QAAA,MAAM,IAAI,EAAE,IAgBX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/radio/radio.stories.js

@@ -0,0 +1,28 @@
+import { html } from 'lit';
+import '@digital2analogue2/parsimony-components';
+/**
+ * `rr-radio` is a child element: it must live inside an `rr-radio-group`,
+ * which manages selection state and keyboard navigation. This standalone
+ * story shows a single radio in isolation for reference only — see the
+ * Radio Group stories for real usage.
+ */
+const meta = {
+    title: 'Components/Radio',
+    component: 'rr-radio',
+    argTypes: {
+        value: { control: 'text' },
+        checked: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+    },
+    args: {
+        value: 'a',
+        checked: false,
+        disabled: false,
+    },
+    render: ({ value, checked, disabled }) => html `
+    <rr-radio value=${value} ?checked=${checked} ?disabled=${disabled}>Option A</rr-radio>
+  `,
+};
+export default meta;
+export const Default = {};
+//# sourceMappingURL=radio.stories.js.map

package/dist/radio/radio.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["../../src/radio/radio.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,yCAAyC,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,KAAK;KAChB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;sBAC1B,KAAK,aAAa,OAAO,cAAc,QAAQ;GAClE;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}

package/dist/select/select.d.ts

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+export type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+/**
+ * A form-associated select dropdown with label, helper text, and error state.
+ *
+ * Pass options via the `options` property (array of `{ value, label, disabled? }`).
+ * Uses `ElementInternals` for native form participation and `delegatesFocus`
+ * so the host forwards focus to the inner `<select>`.
+ *
+ * Reuses `--component-input-*` tokens — the input token set covers
+ * text input, textarea, and select (see tokens/components/input.tokens.json).
+ *
+ * @fires change - When the selected value changes
+ * @csspart label - The label element
+ * @csspart select - The inner select element
+ * @csspart helper - The helper text container
+ * @csspart error - The error message container
+ */
+export declare class RrSelect extends LitElement {
+    static formAssociated: boolean;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult;
+    /** Form field name submitted with the selected value. */
+    name: string;
+    /** Selected option value. */
+    value: string;
+    /** Field label rendered above the select. */
+    label: string;
+    /** Helper text shown when there is no error. Maps to attribute helper-text. */
+    helperText: string;
+    /** Error message; sets data-invalid and a custom validity. Maps to attribute error-text. */
+    errorText: string;
+    /** Marks the field as required and shows an asterisk. */
+    required: boolean;
+    /** Disables the select. */
+    disabled: boolean;
+    /** Options to render: array of { value: string; label: string; disabled?: boolean }. */
+    options: SelectOption[];
+    private _select;
+    private _internals;
+    constructor();
+    private get _isInvalid();
+    updated(changed: Map<string, unknown>): void;
+    private _onChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rr-select': RrSelect;
+    }
+}
+//# sourceMappingURL=select.d.ts.map

package/dist/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IAEF,MAAM,CAAC,MAAM,0BA6FX;IAEF,yDAAyD;IAC7C,IAAI,SAAM;IACtB,6BAA6B;IACA,KAAK,SAAM;IACxC,6CAA6C;IACjC,KAAK,SAAM;IACvB,+EAA+E;IACvC,UAAU,SAAM;IACxD,4FAA4F;IACrD,SAAS,SAAM;IACtD,yDAAyD;IACb,QAAQ,UAAS;IAC7D,2BAA2B;IACiB,QAAQ,UAAS;IAC7D,wFAAwF;IAC7D,OAAO,EAAE,YAAY,EAAE,CAAM;IAEvC,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,UAAU,CAAmB;;IAOrC,OAAO,KAAK,UAAU,GAErB;IAEQ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAkC9C,OAAO,CAAC,SAAS;IAOjB,MAAM;CA+CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}