@latty-ds/web 0.10.3 → 1.0.0

package/dist/components/radio/index.js

@@ -10,7 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/components/radio/radio.ts
-import { html } from "lit";
+import { html, LitElement as LitElement2 } from "lit";
 
 // src/base/themeable-element.ts
 import { LitElement } from "lit";
@@ -61,7 +61,10 @@ var radioStyles = css`
     flex-direction: row-reverse;
   }
 
-  :host([disabled]) .radio-wrapper {
+  /* :host(:disabled) — the browser matches this automatically for a form-associated element inside a
+     disabled <fieldset>, no JS required; :host([disabled]) covers the component's own explicit attribute. */
+  :host([disabled]) .radio-wrapper,
+  :host(:disabled) .radio-wrapper {
     cursor: not-allowed;
     opacity: 0.6;
   }
@@ -118,7 +121,7 @@ var radioStyles = css`
   :host([size='sm']) .dot {
     height: 8px;
     width: 8px;
-    left: 4px;
+    inset-inline-start: 4px;
     top: 4px;
   }
 
@@ -134,7 +137,7 @@ var radioStyles = css`
   :host([size='md']) .dot {
     height: 10px;
     width: 10px;
-    left: 5px;
+    inset-inline-start: 5px;
     top: 5px;
   }
 
@@ -150,7 +153,7 @@ var radioStyles = css`
   :host([size='lg']) .dot {
     height: 12px;
     width: 12px;
-    left: 6px;
+    inset-inline-start: 6px;
     top: 6px;
   }
 
@@ -203,12 +206,102 @@ var radioStyles = css`
     background: var(--lt-interactive-info-bg-hover);
     border-color: var(--lt-interactive-info-bg-hover);
   }
+
+  /* ── Reduced motion ─────────────────────────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    input[type='radio'] {
+      transition: none;
+    }
+  }
+
+  /* ── Forced colors (Windows High Contrast) ─────────────────────────────────
+     Under forced-colors, any author background-color (including every variant's token-resolved fill above) is
+     flattened to Canvas — the checked indicator is a plain background:white .dot with no border of its own, so
+     it disappears into the input's own (also-flattened) background, leaving checked and unchecked visually
+     identical. System color keywords are exempt from that flattening and always resolve to the OS's own
+     guaranteed-contrasting palette, regardless of which variant was selected — Highlight/HighlightText is the
+     canonical "selected state" pairing (the same pair the OS uses for native text selection), unaffected by
+     this component's own --lt-* tokens, which forced-colors mode is specifically overriding. !important is
+     needed since a variant rule like :host([variant='primary']) input:checked outranks a bare
+     input[type='radio']:checked in specificity — this is the standard, accepted use of !important for a
+     forced-colors override (overriding the page's own author styling is the entire point). ─────────────────── */
+
+  @media (forced-colors: active) {
+    input[type='radio']:checked {
+      background: Highlight !important;
+      border-color: Highlight !important;
+    }
+
+    .dot {
+      background: HighlightText !important;
+    }
+  }
 `;
 
+// src/components/shared/form-default.ts
+var FormDefaultController = class {
+  constructor(host, get) {
+    this._captured = false;
+    this._get = get;
+    host.addController(this);
+  }
+  hostConnected() {
+    if (this._captured) return;
+    this._captured = true;
+    this.value = this._get();
+  }
+};
+
+// src/components/shared/form-disabled.ts
+var FormDisabledController = class {
+  constructor(host) {
+    this._fieldsetDisabled = false;
+    this._host = host;
+    host.addController(this);
+  }
+  // No-op — this controller has no connect-time work of its own (formDisabledCallback drives it instead), but
+  // ReactiveController's members are all optional, and a class satisfying an all-optional interface with no
+  // members in common is a TS error (TS2559); this gives it one.
+  hostConnected() {
+  }
+  /** Whether an ancestor `<fieldset>` is currently disabled. */
+  get fieldsetDisabled() {
+    return this._fieldsetDisabled;
+  }
+  setFieldsetDisabled(disabled) {
+    if (this._fieldsetDisabled === disabled) return;
+    this._fieldsetDisabled = disabled;
+    this._host.requestUpdate();
+  }
+};
+
 // src/components/radio/radio.ts
+var DEFAULT_LABELS = {
+  validationMessage: "Please select this option"
+};
+var radioRegistries = /* @__PURE__ */ new WeakMap();
+var radioGroupFor = (radio) => {
+  if (!radio.name) return null;
+  const scope = radio.closest("form") ?? radio.getRootNode();
+  let byName = radioRegistries.get(scope);
+  if (!byName) {
+    byName = /* @__PURE__ */ new Map();
+    radioRegistries.set(scope, byName);
+  }
+  let group = byName.get(radio.name);
+  if (!group) {
+    group = /* @__PURE__ */ new Set();
+    byName.set(radio.name, group);
+  }
+  return group;
+};
 var Radio = class extends ThemeableElement {
   constructor() {
     super();
+    this._group = null;
+    this._default = new FormDefaultController(this, () => this.checked);
+    this._fieldsetDisabled = new FormDisabledController(this);
     this.variant = "primary";
     this.size = "md";
     this.checked = false;
@@ -218,19 +311,49 @@ var Radio = class extends ThemeableElement {
     this.labelPosition = "right";
     this.name = "";
     this.value = "";
+    this.tabbable = true;
+    this.labels = {};
     this._internals = this.attachInternals();
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this._joinGroup();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._group?.delete(this);
+    this._group = null;
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("name")) this._joinGroup();
+  }
+  _joinGroup() {
+    this._group?.delete(this);
+    this._group = radioGroupFor(this);
+    this._group?.add(this);
+  }
+  get _labels() {
+    return { ...DEFAULT_LABELS, ...this.labels };
+  }
   updated() {
     this._internals.setFormValue(this.checked ? this.value : null);
     const input = this.shadowRoot?.querySelector("input");
     if (this.required && !this.checked && input) {
-      this._internals.setValidity({ valueMissing: true }, "Please select this option", input);
+      this._internals.setValidity({ valueMissing: true }, this._labels.validationMessage, input);
     } else {
       this._internals.setValidity({});
     }
   }
   formResetCallback() {
-    this.checked = false;
+    this.checked = this._default.value;
+  }
+  formDisabledCallback(disabled) {
+    this._fieldsetDisabled.setFieldsetDisabled(disabled);
+  }
+  /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+  get _isDisabled() {
+    return this.disabled || this._fieldsetDisabled.fieldsetDisabled;
   }
   checkValidity() {
     return this._internals.checkValidity();
@@ -249,6 +372,11 @@ var Radio = class extends ThemeableElement {
     e.stopPropagation();
     const target = e.target;
     this.checked = target.checked;
+    if (this.checked) {
+      this._group?.forEach((other) => {
+        if (other !== this) other.checked = false;
+      });
+    }
     this.dispatchEvent(
       new CustomEvent("change", {
         detail: { value: this.value, checked: this.checked },
@@ -264,10 +392,11 @@ var Radio = class extends ThemeableElement {
           <input
             type="radio"
             .checked=${this.checked}
-            ?disabled=${this.disabled}
+            ?disabled=${this._isDisabled}
             ?required=${this.required}
             name=${this.name}
             value=${this.value}
+            tabindex=${this.tabbable ? "0" : "-1"}
             @change=${this.handleChange}
             aria-label=${this.label || "radio"}
           />
@@ -280,6 +409,10 @@ var Radio = class extends ThemeableElement {
 };
 Radio.styles = radioStyles;
 Radio.formAssociated = true;
+// Makes host.focus() move focus into the shadow root (the inner <input>) — lt-radio-group needs this to move
+// focus programmatically for arrow-key navigation (RAD-2), the same way lt-button's delegatesFocus (BTN-4)
+// lets lt-dropdown do the same for its trigger.
+Radio.shadowRootOptions = { ...LitElement2.shadowRootOptions, delegatesFocus: true };
 __decorateClass([
   property2({ reflect: true })
 ], Radio.prototype, "variant", 2);
@@ -287,7 +420,7 @@ __decorateClass([
   property2({ reflect: true })
 ], Radio.prototype, "size", 2);
 __decorateClass([
-  property2({ type: Boolean, reflect: true })
+  property2({ type: Boolean })
 ], Radio.prototype, "checked", 2);
 __decorateClass([
   property2({ type: Boolean, reflect: true })
@@ -307,6 +440,12 @@ __decorateClass([
 __decorateClass([
   property2({ reflect: true })
 ], Radio.prototype, "value", 2);
+__decorateClass([
+  property2({ type: Boolean })
+], Radio.prototype, "tabbable", 2);
+__decorateClass([
+  property2({ type: Object })
+], Radio.prototype, "labels", 2);
 Radio = __decorateClass([
   customElement("lt-radio")
 ], Radio);

package/dist/components/radio/radio.d.ts

@@ -1,5 +1,6 @@
+import { type PropertyValues } from 'lit';
 import { ThemeableElement } from '../../base';
-import { RadioSize, RadioVariant, RadioLabelPosition } from './radio.types';
+import { RadioSize, RadioVariant, RadioLabelPosition, type RadioLabels } from './radio.types';
 /**
  * A customizable radio button component with support for multiple variants and sizes.
  *
@@ -39,8 +40,23 @@ import { RadioSize, RadioVariant, RadioLabelPosition } from './radio.types';
 export declare class Radio extends ThemeableElement {
     static styles: import("lit").CSSResult;
     static formAssociated: boolean;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     private _internals;
+    private _group;
+    private _default;
+    private _fieldsetDisabled;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    private _joinGroup;
     /**
      * Visual variant that determines the color when checked.
      * @default 'primary'
@@ -52,7 +68,10 @@ export declare class Radio extends ThemeableElement {
      */
     size: RadioSize;
     /**
-     * Whether the radio is checked.
+     * Whether the radio is checked. Not reflected as an attribute — a native radio's `checked` _content_
+     * attribute stays fixed at the markup default and never tracks interaction; reflecting it live meant
+     * `formResetCallback` could no longer tell what the original default was. Read the property, or the `change`
+     * event's `detail.checked`, instead of `[checked]`/`hasAttribute('checked')`.
      * @default false
      */
     checked: boolean;
@@ -87,8 +106,21 @@ export declare class Radio extends ThemeableElement {
      * @default ''
      */
     value: string;
+    /**
+     * Whether this radio is reachable with Tab. Defaults to true for a standalone radio; `lt-radio-group` drives
+     * this itself for its managed radios — a roving tabindex (only the checked radio, or the first enabled one,
+     * is a Tab stop), matching the native radiogroup pattern.
+     * @default true
+     */
+    tabbable: boolean;
+    /** Overridable UI text (the required-field validation message), for i18n. English defaults — override only the keys you need. */
+    labels: Partial<RadioLabels>;
+    private get _labels();
     updated(): void;
     formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    /** `this.disabled` combined with an ancestor `<fieldset>`'s own disabled state (see `FormDisabledController`). */
+    private get _isDisabled();
     checkValidity(): boolean;
     reportValidity(): boolean;
     /**

package/dist/components/radio/radio.types.d.ts

@@ -19,3 +19,8 @@ export type RadioSize = 'sm' | 'md' | 'lg';
  */
 export type RadioVariant = 'primary' | 'secondary' | 'success' | 'error' | 'info';
 export type RadioLabelPosition = 'left' | 'right';
+/** Overridable UI text for `lt-radio`, for i18n. */
+export interface RadioLabels {
+    /** Validation message shown when a required radio group has no option selected. */
+    validationMessage: string;
+}

package/dist/components/radio-group/index.js

@@ -9,6 +9,15 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
+// src/components/shared/roving.ts
+var enabledItems = (items) => items.filter((item) => !item.disabled);
+var rovingTargetOf = (enabled, value) => enabled.find((item) => item.value === value) ?? enabled[0];
+var stepIndex = (index, length, delta) => (Math.max(index, 0) + delta + length) % length;
+
+// src/components/shared/form-field.ts
+var fieldCount = 0;
+var createFieldIds = () => ({ helper: `lt-field-${fieldCount++}-helper` });
+
 // src/components/radio-group/radio-group.ts
 import { html as html2, nothing } from "lit";
 
@@ -57,8 +66,8 @@ var radioGroupStyles = css`
   }
 
   .required-indicator {
-    color: var(--lt-color-error-500);
-    margin-left: var(--lt-spacing-1);
+    color: var(--lt-text-error);
+    margin-inline-start: var(--lt-spacing-1);
   }
 
   .radios-container {
@@ -258,6 +267,20 @@ var textStyles = css2`
 `;
 
 // src/components/text/text.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "span",
+  "div",
+  "label",
+  "strong",
+  "em"
+]);
 var VARIANT_TAG = {
   "display-2xl": "p",
   "display-xl": "p",
@@ -282,7 +305,8 @@ var Text = class extends ThemeableElement {
     this.as = "";
   }
   render() {
-    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    const requested = this.as && ALLOWED_TAGS.has(this.as) ? this.as : "";
+    const tag = unsafeStatic(requested || VARIANT_TAG[this.variant] || "p");
     return html`<${tag} part="base"><slot></slot></${tag}>`;
   }
 };
@@ -305,53 +329,103 @@ var RadioGroup = class extends ThemeableElement {
     this.name = "";
     this.value = "";
     this.orientation = "vertical";
+    /**
+     * Helper text displayed below the radio group.
+     * @default ''
+     */
+    this._fieldIds = createFieldIds();
     this.helperText = "";
     this.error = false;
     this.required = false;
-    this._attached = /* @__PURE__ */ new WeakSet();
+    // Reacts to a slotted radio's `disabled` attribute changing after the fact (e.g. a consumer disabling one
+    // dynamically, with no accompanying change to this group's own value/name), so the roving tabindex and
+    // keyboard navigation immediately stop landing on it.
+    this._radioObserver = new MutationObserver(() => this._syncRadios());
     /**
      * Handles change events from individual radio buttons.
-     * Updates the group value and ensures only one radio is checked.
      *
      * @param e - The change event from a radio button
      * @private
      */
     this.handleRadioChange = (e) => {
       const radio = e.target;
-      if (radio.checked) {
-        this.value = radio.value;
-        this.radios.forEach((r) => {
-          if (r !== radio) {
-            r.checked = false;
-          }
-        });
-        this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: { value: this.value },
-            bubbles: true,
-            composed: true
-          })
-        );
+      if (!radio.checked) return;
+      e.stopPropagation();
+      this._select(radio);
+    };
+    /**
+     * Arrow keys move the roving tab stop and, per the native radiogroup's automatic-activation model, select the
+     * radio moved to — matching a real `<input type="radio">` group, where arrowing both moves focus and checks
+     * the newly-focused button. All four directions move (Right/Down forward, Left/Up back), disabled radios are
+     * skipped entirely, and it wraps at both ends.
+     * @private
+     */
+    this.handleRadioKeydown = (e) => {
+      const enabled = enabledItems(this.radios ?? []);
+      if (enabled.length === 0) return;
+      const index = enabled.indexOf(e.currentTarget);
+      let next;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          next = enabled[stepIndex(index, enabled.length, 1)];
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          next = enabled[stepIndex(index, enabled.length, -1)];
+          break;
       }
+      if (!next) return;
+      e.preventDefault();
+      this._select(next);
+      next.focus();
     };
   }
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+    this._radioObserver.observe(this, { attributes: true, attributeFilter: ["disabled"], subtree: true });
     this._syncRadios();
-    const checkedRadio = this.radios?.find((r) => r.checked);
-    if (checkedRadio && !this.value) {
-      this.value = checkedRadio.value;
+  }
+  firstUpdated() {
+    if (!this.value) {
+      const checkedRadio = this.radios?.find((r) => r.checked);
+      if (checkedRadio) this.value = checkedRadio.value;
     }
+    this._syncRadios();
   }
+  /**
+   * Wires each radio's `name`, roving tabindex, and listeners, and drives `checked` from this group's `value` —
+   * the direction a consumer setting `group.value = '…'` needs, since that's a plain property assignment on the
+   * group, not a native input event any individual radio would otherwise react to.
+   * @private
+   */
   _syncRadios() {
     if (!this.radios) return;
+    const enabled = enabledItems(this.radios);
+    const rovingTarget = rovingTargetOf(enabled, this.value);
     this.radios.forEach((radio) => {
       if (this.name) radio.name = this.name;
-      if (!this._attached.has(radio)) {
-        radio.addEventListener("change", this.handleRadioChange);
-        this._attached.add(radio);
-      }
+      radio.checked = radio.value === this.value;
+      radio.tabbable = radio === rovingTarget;
+      radio.addEventListener("change", this.handleRadioChange);
+      radio.addEventListener("keydown", this.handleRadioKeydown);
     });
   }
+  /**
+   * Selects a radio (used by both the native-change and keyboard-navigation handlers below).
+   * @private
+   */
+  _select(radio) {
+    if (radio.disabled || radio.value === this.value) return;
+    this.value = radio.value;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   /**
    * Handles slot changes to update radios when content changes.
    * @private
@@ -359,20 +433,35 @@ var RadioGroup = class extends ThemeableElement {
   handleSlotChange() {
     this._syncRadios();
   }
+  /**
+   * A group `value` set by the consumer (`group.value = '…'`) is a plain property assignment — it doesn't pass
+   * through any radio's own change handling, so this is what drives `checked` on the radios to match it.
+   */
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value") || changed.has("name")) this._syncRadios();
+  }
   /**
    * Cleanup event listeners when component is removed.
    */
   disconnectedCallback() {
     super.disconnectedCallback();
+    this._radioObserver.disconnect();
     if (this.radios) {
       this.radios.forEach((radio) => {
         radio.removeEventListener("change", this.handleRadioChange);
+        radio.removeEventListener("keydown", this.handleRadioKeydown);
       });
     }
   }
   render() {
     return html2`
-      <div class="radio-group" role="radiogroup" aria-label=${this.label || nothing}>
+      <div
+        class="radio-group"
+        role="radiogroup"
+        aria-label=${this.label || nothing}
+        aria-describedby=${this.helperText ? this._fieldIds.helper : nothing}
+      >
         ${this.label ? html2`
               <div class="label">
                 <lt-text variant="label" as="span">${this.label}</lt-text>
@@ -382,7 +471,9 @@ var RadioGroup = class extends ThemeableElement {
         <div class="radios-container">
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
-        ${this.helperText ? html2`<lt-text variant="caption" as="span" class="helper-text">${this.helperText}</lt-text>` : ""}
+        ${this.helperText ? html2`<lt-text id=${this._fieldIds.helper} variant="caption" as="span" class="helper-text"
+              >${this.helperText}</lt-text
+            >` : ""}
       </div>
     `;
   }

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

@@ -60,6 +60,7 @@ export declare class RadioGroup extends ThemeableElement {
      * Helper text displayed below the radio group.
      * @default ''
      */
+    private readonly _fieldIds;
     helperText: string;
     /**
      * Whether the radio group is in an error state.
@@ -76,22 +77,46 @@ export declare class RadioGroup extends ThemeableElement {
      * @private
      */
     private radios;
-    private _attached;
+    private readonly _radioObserver;
+    connectedCallback(): void;
     firstUpdated(): void;
+    /**
+     * Wires each radio's `name`, roving tabindex, and listeners, and drives `checked` from this group's `value` —
+     * the direction a consumer setting `group.value = '…'` needs, since that's a plain property assignment on the
+     * group, not a native input event any individual radio would otherwise react to.
+     * @private
+     */
     private _syncRadios;
+    /**
+     * Selects a radio (used by both the native-change and keyboard-navigation handlers below).
+     * @private
+     */
+    private _select;
     /**
      * Handles change events from individual radio buttons.
-     * Updates the group value and ensures only one radio is checked.
      *
      * @param e - The change event from a radio button
      * @private
      */
     private handleRadioChange;
+    /**
+     * Arrow keys move the roving tab stop and, per the native radiogroup's automatic-activation model, select the
+     * radio moved to — matching a real `<input type="radio">` group, where arrowing both moves focus and checks
+     * the newly-focused button. All four directions move (Right/Down forward, Left/Up back), disabled radios are
+     * skipped entirely, and it wraps at both ends.
+     * @private
+     */
+    private handleRadioKeydown;
     /**
      * Handles slot changes to update radios when content changes.
      * @private
      */
     private handleSlotChange;
+    /**
+     * A group `value` set by the consumer (`group.value = '…'`) is a plain property assignment — it doesn't pass
+     * through any radio's own change handling, so this is what drives `checked` on the radios to match it.
+     */
+    protected updated(changed: Map<string, unknown>): void;
     /**
      * Cleanup event listeners when component is removed.
      */