@taprootio/espalier 2.0.0

package/dist/progress/esp-progress.d.ts

@@ -0,0 +1,239 @@
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+/**
+ * A progress indicator that supports both determinate and
+ * indeterminate modes, rendered as a linear bar or a circle.
+ *
+ * In **determinate** mode, set `value` and optionally `max` to
+ * show a fill bar representing progress toward completion:
+ *
+ * ```html
+ * <esp-progress value="42" show-value label="Upload progress"></esp-progress>
+ * ```
+ *
+ * In **indeterminate** mode (the default when no `value` is set),
+ * an animated bar communicates that work is happening
+ * without a known endpoint:
+ *
+ * ```html
+ * <esp-progress label="Loading data..."></esp-progress>
+ * ```
+ *
+ * The three size presets:
+ *
+ * ```html
+ * <div style="display: grid; gap: var(--esp-size-small);">
+ *   <esp-progress value="60" label="Small" size="small"></esp-progress>
+ *   <esp-progress value="60" label="Medium" size="medium"></esp-progress>
+ *   <esp-progress value="60" label="Large" size="large" show-value></esp-progress>
+ * </div>
+ * ```
+ *
+ * Color variants match the design system:
+ *
+ * ```html
+ * <div style="display: grid; gap: var(--esp-size-padding);">
+ *   <esp-progress value="80" label="Primary" variant="primary" show-value></esp-progress>
+ *   <esp-progress value="60" label="Success" variant="success" show-value></esp-progress>
+ *   <esp-progress value="40" label="Warning" variant="warning" show-value></esp-progress>
+ *   <esp-progress value="20" label="Danger" variant="danger" show-value></esp-progress>
+ * </div>
+ * ```
+ *
+ * Click the button to watch the progress bar fill over ten seconds:
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-progress id="demo-progress" value="0" label="Demo progress" variant="success" size="large" show-value></esp-progress>
+ *   <div style="display: flex; gap: var(--esp-size-small); margin-top: var(--esp-size-small);">
+ *     <esp-button id="start-btn" label="Start" variant="primary" collapsed></esp-button>
+ *     <esp-button id="reset-btn" label="Reset" variant="complementary" collapsed></esp-button>
+ *   </div>
+ * </esp-box>
+ * <script>
+ *   const progress = findById("demo-progress");
+ *   const startBtn = findById("start-btn");
+ *   const resetBtn = findById("reset-btn");
+ *   let running = false;
+ *   startBtn.addEventListener("clicked", () => {
+ *     if (running) return;
+ *     running = true;
+ *     progress.value = 0;
+ *     const start = performance.now();
+ *     const duration = 10000;
+ *     function step(now) {
+ *       const elapsed = now - start;
+ *       progress.value = Math.min((elapsed / duration) * 100, 100);
+ *       if (elapsed < duration) {
+ *         requestAnimationFrame(step);
+ *       } else {
+ *         running = false;
+ *         showToast({ message: "Complete!", variant: "success", icon: "bread" });
+ *       }
+ *     }
+ *     requestAnimationFrame(step);
+ *   });
+ *   resetBtn.addEventListener("clicked", () => {
+ *     running = false;
+ *     progress.value = 0;
+ *   });
+ * </script>
+ * ```
+ *
+ * Indeterminate mode with different variants:
+ *
+ * ```html
+ * <div style="display: grid; gap: var(--esp-size-small);">
+ *   <esp-progress label="Primary loading" variant="primary"></esp-progress>
+ *   <esp-progress label="Success loading" variant="success"></esp-progress>
+ *   <esp-progress label="Warning loading" variant="warning"></esp-progress>
+ *   <esp-progress label="Danger loading" variant="danger"></esp-progress>
+ * </div>
+ * ```
+ *
+ * Circle mode displays a ring that fills clockwise. Set
+ * `mode="circle"` and optionally `show-value` to display
+ * the percentage in the center:
+ *
+ * ```html
+ * <div style="display: flex; gap: var(--esp-size-padding); align-items: center; flex-wrap: wrap;">
+ *   <esp-progress mode="circle" value="80" label="Primary" variant="primary" show-value></esp-progress>
+ *   <esp-progress mode="circle" value="60" label="Success" variant="success" show-value></esp-progress>
+ *   <esp-progress mode="circle" value="40" label="Warning" variant="warning" show-value></esp-progress>
+ *   <esp-progress mode="circle" value="20" label="Danger" variant="danger" show-value></esp-progress>
+ * </div>
+ * ```
+ *
+ * Circle size presets:
+ *
+ * ```html
+ * <div style="display: flex; gap: var(--esp-size-padding); align-items: center;">
+ *   <esp-progress mode="circle" value="60" label="Small" size="small"></esp-progress>
+ *   <esp-progress mode="circle" value="60" label="Medium" size="medium" show-value></esp-progress>
+ *   <esp-progress mode="circle" value="60" label="Large" size="large" show-value></esp-progress>
+ * </div>
+ * ```
+ *
+ * Indeterminate circle mode:
+ *
+ * ```html
+ * <div style="display: flex; gap: var(--esp-size-padding); align-items: center;">
+ *   <esp-progress mode="circle" label="Primary loading" variant="primary"></esp-progress>
+ *   <esp-progress mode="circle" label="Success loading" variant="success"></esp-progress>
+ * </div>
+ * ```
+ *
+ * Click the button to watch the circle fill over ten seconds:
+ *
+ * ```html
+ * <esp-box>
+ *   <div style="display: flex; align-items: center; gap: var(--esp-size-padding);">
+ *     <esp-progress id="demo-circle" mode="circle" value="0" label="Circle demo" variant="success" size="large" show-value></esp-progress>
+ *     <div style="display: flex; gap: var(--esp-size-small);">
+ *       <esp-button id="start-circle-btn" label="Start" variant="primary" collapsed></esp-button>
+ *       <esp-button id="reset-circle-btn" label="Reset" variant="complementary" collapsed></esp-button>
+ *     </div>
+ *   </div>
+ * </esp-box>
+ * <script>
+ *   const circleProgress = findById("demo-circle");
+ *   const startCircleBtn = findById("start-circle-btn");
+ *   const resetCircleBtn = findById("reset-circle-btn");
+ *   let circleRunning = false;
+ *   startCircleBtn.addEventListener("clicked", () => {
+ *     if (circleRunning) return;
+ *     circleRunning = true;
+ *     circleProgress.value = 0;
+ *     const start = performance.now();
+ *     const duration = 10000;
+ *     function step(now) {
+ *       const elapsed = now - start;
+ *       circleProgress.value = Math.min((elapsed / duration) * 100, 100);
+ *       if (elapsed < duration) {
+ *         requestAnimationFrame(step);
+ *       } else {
+ *         circleRunning = false;
+ *         showToast({ message: "Complete!", variant: "success", icon: "bread" });
+ *       }
+ *     }
+ *     requestAnimationFrame(step);
+ *   });
+ *   resetCircleBtn.addEventListener("clicked", () => {
+ *     circleRunning = false;
+ *     circleProgress.value = 0;
+ *   });
+ * </script>
+ * ```
+ *
+ * @cssprop --esp-progress-border-color - Border color of the track
+ * outline. Defaults to `var(--esp-color-border)`.
+ * @cssprop --esp-progress-border-radius - Border radius of the
+ * track and fill. Defaults to `var(--esp-size-border-radius)`.
+ * @cssprop --esp-progress-circle-size - Diameter of the circular
+ * progress ring in circle mode. Automatically set by the `size`
+ * attribute.
+ * @cssprop --esp-progress-fill-color - Color of the progress fill.
+ * Defaults to `var(--esp-color-action-background)`.
+ * @cssprop --esp-progress-font-size - Font size for the value
+ * text. Defaults to `var(--esp-type-small)`.
+ * @cssprop --esp-progress-height - Height of the progress bar track.
+ * Automatically set by the `size` attribute.
+ * @cssprop --esp-progress-text-color - Color of the percentage
+ * text in both bar and circle modes. Defaults to
+ * `var(--esp-color-text)`.
+ *
+ * @docPageTitle Progress
+ * @docUrl /components/progress
+ * @menuGroup Feedback
+ * @menuLabel Progress
+ * @menuIcon progress
+ */
+export declare class EspalierProgress extends EspalierElementBase {
+    /**
+     * The current progress value. Set to `null` (or omit) for
+     * indeterminate mode. Values are clamped to `0..max`.
+     */
+    value: number | null;
+    /**
+     * The maximum value. Defaults to `100`.
+     */
+    max: number;
+    /**
+     * An accessible label describing what the progress bar
+     * represents. Required for screen readers.
+     */
+    label: string;
+    /**
+     * Show the percentage value as text. In bar mode the text
+     * appears below the track; in circle mode it appears in the
+     * center of the ring.
+     */
+    showValue: boolean;
+    /**
+     * Size preset for the progress indicator.
+     *
+     * In bar mode:
+     * - `small` — 6px
+     * - `medium` — 12px (default)
+     * - `large` — 20px
+     *
+     * In circle mode:
+     * - `small` — 48px diameter
+     * - `medium` — 80px diameter (default)
+     * - `large` — 120px diameter
+     */
+    size: "small" | "medium" | "large";
+    /**
+     * Display mode for the progress indicator.
+     *
+     * - `bar` — linear progress bar (default)
+     * - `circle` — circular SVG ring
+     */
+    mode: "bar" | "circle";
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-progress": EspalierProgress;
+    }
+}

package/dist/progress/esp-progress.js

@@ -0,0 +1,177 @@
+var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,s):t,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,s,t);else for(var h=n.length-1;h>=0;h--)(c=n[h])&&(i=(o<3?c(i):o>3?c(e,s,i):c(e,s))||i);return o>3&&i&&Object.defineProperty(e,s,i),i};import{css as x,html as m,nothing as p,svg as g}from"lit";import{customElement as y,property as l}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{styleMap as b}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";const v=15.9155,d=2*Math.PI*v;let r=class extends u{constructor(){super(...arguments),this.value=null,this.max=100,this.label="",this.showValue=!1,this.size="medium",this.mode="bar"}get isIndeterminate(){return this.value===null||this.value===void 0}get clampedValue(){if(this.isIndeterminate)return 0;const e=Math.max(this.max,0);return Math.min(Math.max(this.value,0),e)}get percentage(){return this.isIndeterminate||this.max<=0?0:this.clampedValue/this.max*100}render(){return this.mode==="circle"?this.renderCircle():this.renderBar()}renderBar(){const e=this.isIndeterminate,s={track:!0,indeterminate:e},t=e?{}:{width:`${this.percentage}%`},o=this.showValue&&!e;return m`
+      <div
+        class=${f(s)}
+        role="progressbar"
+        aria-label=${this.label}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-valuenow=${e?p:this.clampedValue}
+      >
+        <div class="fill" style=${b(t)}></div>
+      </div>
+      ${o?m`<div class="value-text">${Math.round(this.percentage)}%</div>`:p}
+    `}renderCircle(){const e=this.isIndeterminate,s=e?d*.75:d-this.percentage/100*d,t=this.showValue&&!e;return m`
+      <div class=${f({"circle-container":!0,indeterminate:e})}>
+        <svg
+          viewBox="0 0 36 36"
+          class="circle-svg"
+          role="progressbar"
+          aria-label=${this.label}
+          aria-valuemin="0"
+          aria-valuemax=${this.max}
+          aria-valuenow=${e?p:this.clampedValue}
+        >
+          ${g`
+            <circle
+              class="circle-track"
+              cx="18" cy="18" r="${v}"
+              fill="none"
+              stroke-width="3.5"
+            />
+            <circle
+              class="circle-fill"
+              cx="18" cy="18" r="${v}"
+              fill="none"
+              stroke-width="3.5"
+              stroke-dasharray="${d}"
+              stroke-dashoffset="${s}"
+              stroke-linecap="round"
+            />
+          `} ${t?g`
+              <text
+                x="18" y="18"
+                class="circle-text"
+                dominant-baseline="central"
+                text-anchor="middle"
+              >${Math.round(this.percentage)}%</text>
+            `:p}
+        </svg>
+      </div>
+    `}};r.styles=[...u.styles,x`
+      
+
+      :host {
+        --_esp-progress-resolved-height: var(--esp-progress-height, 12px);
+        --_esp-progress-resolved-circle-size: var(--esp-progress-circle-size, 80px);
+
+        display: block;
+      }
+
+      
+
+      :host([size="small"]) {
+        --_esp-progress-resolved-height: var(--esp-progress-height, 6px);
+        --_esp-progress-resolved-circle-size: var(--esp-progress-circle-size, 48px);
+      }
+
+      :host([size="large"]) {
+        --_esp-progress-resolved-height: var(--esp-progress-height, 20px);
+        --_esp-progress-resolved-circle-size: var(--esp-progress-circle-size, 120px);
+      }
+
+      
+
+      .track {
+        width: 100%;
+        height: var(--_esp-progress-resolved-height);
+        border: 1px solid var(--esp-progress-border-color, var(--esp-color-border));
+        border-radius: var(--esp-progress-border-radius, var(--esp-size-border-radius));
+        overflow: hidden;
+        position: relative;
+        background: transparent;
+      }
+
+      .fill {
+        height: 100%;
+        background: var(--esp-progress-fill-color, var(--esp-color-action-background));
+        transition: width 0.3s ease;
+        min-width: 0;
+      }
+
+      .value-text {
+        font-family: var(--esp-font-monospace);
+        font-size: var(--esp-progress-font-size, var(--esp-type-small));
+        color: var(--esp-progress-text-color, var(--esp-color-text));
+        text-align: center;
+        margin-top: 0.25em;
+        line-height: 1;
+      }
+
+      .indeterminate .fill {
+        width: 30%;
+        animation: shimmer 1.5s ease-in-out infinite;
+      }
+
+      @keyframes shimmer {
+        0% {
+          transform: translateX(-100%);
+        }
+        100% {
+          transform: translateX(calc(100% / 0.3));
+        }
+      }
+
+      
+
+      :host([mode="circle"]) {
+        display: inline-block;
+      }
+
+      .circle-container {
+        width: var(--_esp-progress-resolved-circle-size);
+        height: var(--_esp-progress-resolved-circle-size);
+      }
+
+      .circle-svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      .circle-track {
+        stroke: var(--esp-progress-border-color, var(--esp-color-border));
+      }
+
+      .circle-fill {
+        stroke: var(--esp-progress-fill-color, var(--esp-color-action-background));
+        transform: rotate(-90deg);
+        transform-origin: 50% 50%;
+        transition: stroke-dashoffset 0.3s ease;
+      }
+
+      .circle-text {
+        fill: var(--esp-progress-text-color, var(--esp-color-text));
+        font-family: var(--esp-font-monospace);
+        font-size: 8px;
+        font-weight: 600;
+      }
+
+      .circle-container.indeterminate .circle-fill {
+        animation: spin 1.5s linear infinite;
+        transition: none;
+      }
+
+      @keyframes spin {
+        from {
+          transform: rotate(-90deg);
+        }
+        to {
+          transform: rotate(270deg);
+        }
+      }
+
+      
+
+      @media (prefers-reduced-motion: reduce) {
+        .indeterminate .fill {
+          animation: none;
+          width: 100%;
+          opacity: 0.5;
+        }
+
+        .circle-container.indeterminate .circle-fill {
+          animation: none;
+          stroke-dashoffset: 0;
+          opacity: 0.5;
+        }
+      }
+    `],a([l({type:Number})],r.prototype,"value",void 0),a([l({type:Number})],r.prototype,"max",void 0),a([l({type:String})],r.prototype,"label",void 0),a([l({attribute:"show-value",type:Boolean})],r.prototype,"showValue",void 0),a([l({type:String,reflect:!0})],r.prototype,"size",void 0),a([l({type:String,reflect:!0})],r.prototype,"mode",void 0),r=a([y("esp-progress")],r);export{r as EspalierProgress};

package/dist/radio-button/esp-radio-button-group.d.ts

@@ -0,0 +1,100 @@
+import { type PropertyValues } from "lit";
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+import { type EspalierFormField } from "../form-item/esp-form-item.js";
+/**
+ * Groups multiple [esp-radio-button](/components/radio-button)
+ * components and ensures only one can be selected at a time.
+ * Works with [esp-form-item](/components/form-item) for label
+ * and error message integration.
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-form-item label="Choose a size">
+ *     <esp-radio-button-group>
+ *       <esp-radio-button value="small">Small</esp-radio-button>
+ *       <esp-radio-button value="medium" checked>Medium</esp-radio-button>
+ *       <esp-radio-button value="large">Large</esp-radio-button>
+ *     </esp-radio-button-group>
+ *   </esp-form-item>
+ * </esp-box>
+ * ```
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-form-item label="Disabled group">
+ *     <esp-radio-button-group disabled>
+ *       <esp-radio-button value="a">Option A</esp-radio-button>
+ *       <esp-radio-button value="b" checked>Option B</esp-radio-button>
+ *       <esp-radio-button value="c">Option C</esp-radio-button>
+ *     </esp-radio-button-group>
+ *   </esp-form-item>
+ * </esp-box>
+ * ```
+ *
+ * @slot - Place `esp-radio-button` elements in the default slot.
+ *
+ * @event {CustomEvent<string>} value-changed - Fired when the
+ * selected radio button changes. The detail is the value of the
+ * newly selected radio button.
+ *
+ * @docPageTitle Radio Button Group
+ * @docUrl /components/radio-button/group
+ * @menuGroup Form Controls
+ */
+export declare class EspalierRadioButtonGroup extends EspalierElementBase implements EspalierFormField {
+    static formAssociated: boolean;
+    /**
+     * The name used when the group participates in a `<form>`.
+     *
+     * @type {string}
+     */
+    name: string;
+    /**
+     * When true, one radio button must be selected before the
+     * form can be submitted.
+     *
+     * @type {boolean}
+     */
+    required: boolean;
+    /**
+     * A custom message to display when the group is required but no
+     * radio button is selected. Defaults to
+     * `"Please select an option."` when not set.
+     *
+     * @type {string}
+     */
+    requiredMessage: string;
+    /**
+     * Disables all child radio buttons in the group.
+     */
+    disabled: boolean;
+    /**
+     * Returns the value of the currently selected radio button,
+     * or an empty string if none is selected.
+     */
+    get value(): string;
+    /**
+     * Focus the checked radio button, or the first non-disabled
+     * radio button if none is checked.
+     */
+    focus(options?: FocusOptions): void;
+    /** Re-run constraint validation and dispatch `validity-changed`. */
+    validate(): void;
+    /** Check whether the current state is valid (delegates to ElementInternals). */
+    checkValidity(): boolean;
+    /** Called by the browser when the owning `<form>` is reset. */
+    formResetCallback(): void;
+    /** Called by the browser to restore form state (bfcache, etc.). */
+    formStateRestoreCallback(state: string): void;
+    /** Called by the browser when a parent `<fieldset>` is enabled or disabled. */
+    formDisabledCallback(isDisabled: boolean): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected updated(changedProperties: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-radio-button-group": EspalierRadioButtonGroup;
+    }
+}

package/dist/radio-button/esp-radio-button-group.js

@@ -0,0 +1,15 @@
+var l=function(n,e,t,r){var a=arguments.length,i=a<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,t,r);else for(var u=n.length-1;u>=0;u--)(o=n[u])&&(i=(a<3?o(i):a>3?o(e,t,i):o(e,t))||i);return a>3&&i&&Object.defineProperty(e,t,i),i};import{css as f,html as c}from"lit";import{customElement as p,property as d}from"lit/decorators.js";import{EspalierElementBase as h}from"../shared/esp-element-base.js";import{createRef as m,ref as g}from"lit/directives/ref.js";import{EspalierRadioButton as y}from"./esp-radio-button.js";import{FormFieldController as b}from"../shared/form-field-controller.js";let s=class extends h{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new b({host:this,internals:this.internals,getFormValue:()=>this.value||null,getValidity:()=>this.required&&!this.value?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null,onReset:()=>{for(const e of this.getRadioButtons())e.checked=!1},onRestore:e=>{for(const t of this.getRadioButtons())t.checked=t.value===e},onDisabled:e=>{this.disabled=e}}),this.itemsSlot=m(),this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1}get value(){return this.getRadioButtons().find(e=>e.checked)?.value??""}focus(e){this.focusResolvedElementAfterUpdate(()=>{const t=this.getRadioButtons();return t.find(r=>r.checked&&!r.disabled)??t.find(r=>!r.disabled)},e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}getRadioButtons(){return this.itemsSlot.value?Array.from(this.itemsSlot.value.assignedElements()).filter(e=>e instanceof y):[]}applyDisabledState(){for(const e of this.getRadioButtons())e.disabled=this.disabled}handleChildChanged(e){e.stopPropagation();const t=e.detail;if(t.checked){for(const r of this.getRadioButtons())r.value!==t.value&&(r.checked=!1);this.formCtrl.syncValue(),this.emitValueChanged(t.value)}}handleKeyDown(e){if(!["ArrowDown","ArrowRight","ArrowUp","ArrowLeft"].includes(e.key))return;e.preventDefault();const t=this.getRadioButtons().filter(o=>!o.disabled);if(t.length===0)return;const r=t.findIndex(o=>o.checked),a=e.key==="ArrowDown"||e.key==="ArrowRight";let i;r===-1?i=0:a?i=(r+1)%t.length:i=(r-1+t.length)%t.length,r!==-1&&(t[r].checked=!1),t[i].checked=!0,t[i].focus(),this.formCtrl.syncValue(),this.emitValueChanged(t[i].value)}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}firstUpdated(e){super.firstUpdated(e),this.applyDisabledState()}updated(e){super.updated(e),e.has("disabled")&&this.applyDisabledState()}render(){return c`
+      <div
+        class="radio-group"
+        role="radiogroup"
+        @value-changed=${this.handleChildChanged}
+        @keydown=${this.handleKeyDown}
+      >
+        <slot ${g(this.itemsSlot)}></slot>
+      </div>
+    `}};s.formAssociated=!0,s.styles=[...h.styles,f`
+      .radio-group {
+        display: grid;
+        gap: var(--esp-size-tiny);
+      }
+    `],l([d({type:String,reflect:!0})],s.prototype,"name",void 0),l([d({type:Boolean,reflect:!0})],s.prototype,"required",void 0),l([d({attribute:"required-message"})],s.prototype,"requiredMessage",void 0),l([d({type:Boolean,reflect:!0})],s.prototype,"disabled",void 0),s=l([p("esp-radio-button-group")],s);export{s as EspalierRadioButtonGroup};

package/dist/radio-button/esp-radio-button.d.ts

@@ -0,0 +1,77 @@
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+import { type EspalierFormField } from "../form-item/esp-form-item.js";
+/**
+ * A radio button control for choosing one option from a set.
+ * Uses Tabler SVG icons for selected and unselected states.
+ * Should be used inside an
+ * [esp-radio-button-group](/components/radio-button/group)
+ * for single-select behavior.
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-form-item label="Favorite color">
+ *     <esp-radio-button-group>
+ *       <esp-radio-button value="red">Red</esp-radio-button>
+ *       <esp-radio-button value="green">Green</esp-radio-button>
+ *       <esp-radio-button value="blue">Blue</esp-radio-button>
+ *     </esp-radio-button-group>
+ *   </esp-form-item>
+ * </esp-box>
+ * ```
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-radio-button-group>
+ *     <esp-radio-button checked value="small">Small</esp-radio-button>
+ *     <esp-radio-button value="medium">Medium</esp-radio-button>
+ *     <esp-radio-button disabled value="large">Large</esp-radio-button>
+ *   </esp-radio-button-group>
+ * </esp-box>
+ * ```
+ *
+ * @slot - The label text for the radio button.
+ *
+ * @event {CustomEvent<{ checked: boolean; value: string }>} value-changed -
+ * Fired when the radio button is selected. The detail contains the
+ * new `checked` state and the radio button `value`.
+ *
+ * @cssprop --esp-radio-button-size - The width and height of the
+ * radio icon. Defaults to `var(--esp-size-normal-to-medium)`.
+ * @cssprop --esp-radio-button-icon-color - The stroke color of the
+ * radio icon. Defaults to `var(--esp-color-text)`.
+ * @cssprop --esp-radio-button-focus-shadow - The color of the focus
+ * ring shadow. Defaults to `var(--esp-color-shadow)`.
+ *
+ * @docPageTitle Radio Button
+ * @docUrl /components/radio-button
+ * @menuGroup Form Controls
+ * @menuLabel Radio Button
+ * @menuIcon circle-dot
+ */
+export declare class EspalierRadioButton extends EspalierElementBase implements EspalierFormField {
+    /**
+     * Whether the radio button is in the selected state.
+     */
+    checked: boolean;
+    /**
+     * The value associated with this radio button. Used by
+     * [esp-radio-button-group](/components/radio-button/group) to
+     * track which option is selected.
+     */
+    value: string;
+    /**
+     * Controls whether the radio button is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Focus the radio button control.
+     */
+    focus(options?: FocusOptions): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-radio-button": EspalierRadioButton;
+    }
+}

package/dist/radio-button/esp-radio-button.js

@@ -0,0 +1,47 @@
+var n=function(r,e,i,s){var a=arguments.length,t=a<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(r,e,i,s);else for(var c=r.length-1;c>=0;c--)(l=r[c])&&(t=(a<3?l(t):a>3?l(e,i,t):l(e,i))||t);return a>3&&t&&Object.defineProperty(e,i,t),t};import{css as h,html as u}from"lit";import{customElement as f,property as d}from"lit/decorators.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";import{radioSelected as m}from"../shared/svgs/radio-selected.js";import{radioUnselected as v}from"../shared/svgs/radio-unselected.js";import{disabledControl as b,focusRing as y}from"../shared/style-fragments.js";let o=class extends p{constructor(){super(...arguments),this.checked=!1,this.value="",this.disabled=!1}focus(e){this.focusShadowElementAfterUpdate(".radio-control",e)}select(){this.disabled||this.checked||(this.checked=!0,this.emitValueChanged({checked:this.checked,value:this.value}))}handleKeyDown(e){e.key===" "&&(e.preventDefault(),this.select())}render(){return u`
+      <div
+        class="radio-control"
+        role="radio"
+        aria-checked=${String(this.checked)}
+        aria-disabled=${String(this.disabled)}
+        tabindex=${this.disabled?-1:0}
+        @click=${this.select}
+        @keydown=${this.handleKeyDown}
+      >
+        <span class="icon">${this.checked?m:v}</span>
+        <span class="label"><slot></slot></span>
+      </div>
+    `}};o.styles=[...p.styles,y(".radio-control:focus-visible","--esp-radio-button-focus-shadow"),b(".radio-control"),h`
+      :host {
+        display: block;
+      }
+
+      .radio-control {
+        display: inline-grid;
+        grid-template-columns: min-content auto;
+        align-items: center;
+        gap: var(--esp-size-tiny);
+        cursor: pointer;
+        font-family: var(--esp-font-body);
+        font-size: var(--esp-size-font);
+        color: var(--esp-color-text);
+        outline: none;
+        user-select: none;
+        border-radius: var(--esp-size-border-radius);
+        padding: calc(var(--esp-size-tiny) / 2);
+        > .icon {
+          display: grid;
+          place-content: center;
+          color: var(--esp-radio-button-icon-color, var(--esp-color-text));
+
+          > svg {
+            height: var(--esp-radio-button-size, var(--esp-size-normal-to-medium));
+            width: var(--esp-radio-button-size, var(--esp-size-normal-to-medium));
+          }
+        }
+
+        > .label {
+          line-height: 1.3;
+        }
+      }
+    `],n([d({type:Boolean,reflect:!0})],o.prototype,"checked",void 0),n([d({type:String})],o.prototype,"value",void 0),n([d({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),o=n([f("esp-radio-button")],o);export{o as EspalierRadioButton};