@reliability-design/web 1.4.5 → 1.4.7

package/dist/components/rel-textfield/rel-textfield.ts

@@ -1,866 +0,0 @@
-import { LitElement, html, css, nothing, PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import "@reliability-design/icons/rel-icon";
-
-export type TextFieldState = "default" | "error" | "disabled";
-export type TextFieldSize = "small" | "medium" | "large";
-export type TextFieldVariant = "default" | "underline" | "legend";
-
-/**
- * How a field presents its label. Shared by `<rel-textfield>`, `<rel-select>`
- * and `<rel-autocomplete>` so the three stay in step.
- *   - `"default"`  — static label above the control
- *   - `"floating"` — label rests over the placeholder, animates onto the border
- *   - `"none"`     — no label renders; supply `fieldAriaLabel` /
- *                    `fieldAriaLabelledby` to keep an accessible name
- */
-export type FieldLabelStyle = "default" | "floating" | "none";
-
-@customElement("rel-textfield")
-export class RelTextfield extends LitElement {
-  @property({ type: String }) label?: string;
-  @property({ type: String }) placeholder: string = "";
-  @property({ type: String }) type: string = "text";
-  @property({ type: String }) value: string = "";
-  @property({ type: String }) leftIcon?: string;
-  @property({ type: String }) rightIcon?: string;
-  /** Makes the trailing icon interactive (pointer + focusable) and emits
-   *  `rel-right-icon-click` — e.g. a password show/hide toggle or clear button. */
-  @property({ type: Boolean, attribute: "clickable-right-icon" }) clickableRightIcon = false;
-  /** Accessible label for the trailing icon when it is clickable. */
-  @property({ type: String, attribute: "right-icon-aria-label" }) rightIconAriaLabel?: string;
-  @property({ type: String }) supportingText?: string;
-  @property({ type: String }) state: TextFieldState = "default";
-  @property({ type: String }) size: TextFieldSize = "medium";
-  /**
-   * Label presentation. Left `undefined` the deprecated `floatingLabel` boolean
-   * decides, so existing markup keeps working; set explicitly and it wins.
-   * Declares `attribute` because Lit would otherwise only listen for the
-   * all-lowercase `labelstyle`.
-   */
-  @property({ type: String, attribute: "label-style", reflect: true })
-  labelStyle?: FieldLabelStyle;
-  /** @deprecated Use `labelStyle="floating"`. Kept permanently as an alias. */
-  @property({ type: Boolean, reflect: true }) floatingLabel = false;
-  /**
-   * Accessible name for the input. Required when `labelStyle="none"`, since no
-   * `<label>` renders and a placeholder is not a valid naming mechanism.
-   */
-  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
-  /** IDREF list of external element(s) naming the input. Wins over `fieldAriaLabel`. */
-  @property({ type: String, attribute: "field-aria-labelledby" }) fieldAriaLabelledby?: string;
-  @property({ type: String, reflect: true }) variant: TextFieldVariant = "default";
-  @property({ type: Boolean }) disabled = false;
-  @property({ type: Boolean }) required = false;
-  @property({ type: Boolean, reflect: true }) multiline = false;
-  @property({ type: Number }) rows = 3;
-
-  // ── Standardized input API (senior-team spec) ──────────────────────────────
-  // Prefer these over the deprecated aliases: prefixIcon (was leftIcon),
-  // helperText (was supportingText), error (was state="error").
-  @property({ type: String }) prefixIcon?: string;
-  @property({ type: String }) prefixIconAriaLabel?: string;
-  @property({ type: Boolean }) error = false;
-  @property({ type: String }) errorMessage?: string;
-  @property({ type: String }) helperText?: string;
-  @property({ type: Boolean }) readonly = false;
-  @property({ type: Number }) maxLength?: number;
-  @property({ type: String }) name?: string;
-  @property({ type: Boolean, reflect: true }) fullWidth = true;
-
-  @state() private internalState: "default" | "focused" = "default";
-  private _wasError = false;
-
-  private uniqueId = `textfield-${Math.random().toString(36).slice(2)}`;
-
-  private get isDisabled() {
-    return this.disabled || this.state === "disabled";
-  }
-
-  private get isError() {
-    return this.error || this.state === "error";
-  }
-
-  // prefixIcon supersedes the deprecated leftIcon
-  private get leadingIcon() {
-    return this.prefixIcon ?? this.leftIcon;
-  }
-
-  // helperText supersedes the deprecated supportingText
-  private get helper() {
-    return this.helperText ?? this.supportingText;
-  }
-
-  /** labelStyle supersedes the deprecated floatingLabel boolean. */
-  private get resolvedLabelStyle(): FieldLabelStyle {
-    if (this.labelStyle) return this.labelStyle;
-    return this.floatingLabel ? "floating" : "default";
-  }
-
-  /** True when no visible label renders and the input needs an ARIA name. */
-  private get labelHidden() {
-    return this.resolvedLabelStyle === "none";
-  }
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    /* Wrapper */
-    .textfield-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-2xs);
-      width: 100%;
-    }
-
-    /* Label */
-    .textfield-label {
-      color: var(--rel-text-label);
-
-      font-family: var(--rel-body-sm-medium-font-family);
-
-      font-weight: var(--rel-body-sm-medium-font-weight);
-
-      font-size: var(--rel-body-sm-medium-font-size);
-
-      line-height: var(--rel-body-sm-medium-line-height);
-
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
-
-    }
-
-    .required-mark {
-      color: var(--rel-text-danger);
-      margin-left: 2px;
-    }
-
-    /* ── labelStyle="none" ──
-       No label renders. An empty spacer holds the label row's full height so the
-       input box still bottom-aligns with labelled siblings in a form row.
-       The reserve covers label line-height + the wrapper gap, and the negative
-       margin cancels the flex gap that would otherwise sit below it — so
-       --rel-field-label-reserve: 0 collapses the row to genuinely zero
-       (toolbars, table cells), not just to the leftover gap. */
-    .label-reserve {
-      flex: none;
-      height: var(
-        --rel-field-label-reserve,
-        calc(var(--rel-body-sm-medium-line-height) + var(--rel-spacing-2xs))
-      );
-      margin-bottom: calc(-1 * var(--rel-spacing-2xs));
-    }
-
-    /* Floating label variant */
-    :host([floatinglabel]) .textfield-wrapper {
-      gap: 0;
-    }
-
-    :host([floatinglabel]) .textfield-container {
-      overflow: visible;
-      position: relative;
-      padding-top: 0;
-    }
-
-    :host([floatinglabel]) .textfield-label {
-      position: absolute;
-      left: var(--rel-spacing-sm);
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--rel-text-placeholder);
-      pointer-events: none;
-      transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease, transform 0.15s ease;
-      background: var(--rel-bg-neutral);
-      padding: 0 2px;
-      z-index: 1;
-      white-space: nowrap;
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    /* Floating label in multiline mode anchors to top instead of vertical center */
-    :host([floatinglabel][multiline]) .textfield-label {
-      top: var(--rel-spacing-sm);
-      transform: none;
-    }
-
-    :host([floatinglabel]) .textfield-wrapper.focused .textfield-label,
-    :host([floatinglabel]) .textfield-wrapper.has-value .textfield-label {
-      top: 0;
-      transform: translateY(-50%);
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-regular-font-weight);
-      font-size: var(--rel-body-xs-regular-font-size);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
-    }
-
-    :host([floatinglabel]) .textfield-wrapper.error .textfield-label {
-      color: var(--rel-text-danger);
-    }
-
-    :host([floatinglabel]) .textfield-wrapper.focused:not(.error) .textfield-label {
-      color: var(--rel-text-default);
-    }
-
-    :host([floatinglabel]) .textfield-wrapper.focused.error .textfield-label,
-    :host([floatinglabel]) .textfield-wrapper.has-value.error .textfield-label {
-      top: 0;
-      transform: translateY(-50%);
-      color: var(--rel-text-danger);
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-regular-font-weight);
-      font-size: var(--rel-body-xs-regular-font-size);
-      line-height: var(--rel-body-xs-regular-line-height);
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
-    }
-
-    :host([floatinglabel]) .textfield-input {
-      padding-top: var(--rel-spacing-sm);
-      padding-bottom: var(--rel-spacing-sm);
-    }
-
-    :host([floatinglabel]) .textfield-input.has-left-icon {
-      padding-left: var(--rel-spacing-2xl);
-    }
-
-    :host([floatinglabel]) .textfield-label.has-left-icon {
-      left: var(--rel-spacing-2xl);
-    }
-
-    :host([floatinglabel]) .textfield-wrapper.focused .textfield-label.has-left-icon,
-    :host([floatinglabel]) .textfield-wrapper.has-value .textfield-label.has-left-icon {
-      left: var(--rel-spacing-sm);
-    }
-
-    :host([floatinglabel]) .textfield-wrapper.disabled .textfield-label {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    /* Container */
-    .textfield-container {
-      display: flex;
-      align-items: center;
-      position: relative;
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-xs);
-      background: var(--rel-bg-neutral);
-      overflow: hidden;
-      transition: border 0.2s;
-    }
-
-    .textfield-container.disabled {
-      background: var(--rel-bg-neutral-elevated-1);
-      cursor: not-allowed;
-    }
-
-    .textfield-container.multiline {
-      overflow: visible;
-      align-items: flex-start;
-    }
-
-    /* Input */
-    .textfield-input {
-      flex: 1;
-      border: none;
-      outline: none;
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-      background: transparent;
-      color: var(--rel-text-body);
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    .textfield-input:disabled {
-      cursor: not-allowed;
-      color: var(--rel-text-disabled);
-    }
-
-    /* Textarea */
-    textarea.textfield-input {
-      resize: vertical;
-      min-height: 80px;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    textarea.textfield-input::-webkit-scrollbar {
-      width: 4px;
-    }
-    textarea.textfield-input::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    textarea.textfield-input::-webkit-scrollbar-thumb {
-      background: var(--rel-text-placeholder);
-      border-radius: 2px;
-    }
-
-    .icon {
-      position: absolute;
-      display: flex;
-      pointer-events: none;
-      color: var(--rel-text-placeholder);
-    }
-
-    .icon.left {
-      left: 8px;
-    }
-
-    .icon.right {
-      right: 8px;
-    }
-
-    /* Interactive trailing icon (e.g. password show/hide) */
-    .icon.right.clickable {
-      pointer-events: auto;
-      cursor: pointer;
-      border-radius: var(--rel-border-radius-xs, 4px);
-    }
-    .icon.right.clickable:hover {
-      color: var(--rel-text-body);
-    }
-    .icon.right.clickable:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .textfield-wrapper.small .textfield-support {
-      font-weight: var(--rel-body-xs-medium-font-weight);
-    }
-
-    .textfield-wrapper.small .textfield-input {
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-
-    .textfield-wrapper.medium .textfield-input {
-      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    .textfield-wrapper.large .textfield-input {
-      padding: var(--rel-spacing-md) var(--rel-spacing-md);
-      font-family: var(--rel-body-lg-regular-font-family);
-      font-weight: var(--rel-body-lg-regular-font-weight);
-      font-size: var(--rel-body-lg-regular-font-size);
-      line-height: var(--rel-body-lg-regular-line-height);
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-    }
-
-    /* Adjust padding when icons are present */
-    .textfield-wrapper .textfield-input.has-left-icon {
-      padding-left: var(--rel-spacing-2xl);
-    }
-
-    .textfield-wrapper .textfield-input.has-right-icon {
-      padding-right: var(--rel-spacing-2xl);
-    }
-
-    /* States */
-    /* Hover (Figma State=Hover): border-strong at 1px — no focus ring */
-    .textfield-wrapper:not(.focused):not(.error):not(.disabled) .textfield-container:hover {
-      border-color: var(--rel-border-strong);
-    }
-
-    .textfield-wrapper.focused .textfield-container {
-      border-color: var(--rel-text-default);
-    }
-
-    .textfield-input:focus-visible {
-      outline: none;
-    }
-
-    .textfield-wrapper.focused .textfield-container,
-    .textfield-container:focus-within {
-      border-color: var(--rel-border-strong);
-      box-shadow: 0 0 0 1px var(--rel-border-strong);
-    }
-
-    .textfield-wrapper.error .textfield-container,
-    .textfield-wrapper.error .textfield-container:focus-within {
-      border-color: var(--rel-border-danger);
-      box-shadow: none;
-    }
-
-    .textfield-wrapper.disabled .textfield-container {
-      border-color: var(--rel-border-default);
-    }
-
-    .textfield-wrapper.disabled .textfield-label {
-      color: var(--rel-text-disabled);
-    }
-
-    /* Supporting text */
-    .textfield-support {
-      color: var(--rel-text-caption);
-
-      font-family: var(--rel-body-xs-regular-font-family);
-
-      font-weight: var(--rel-body-xs-regular-font-weight);
-
-      font-size: var(--rel-body-xs-regular-font-size);
-
-      line-height: var(--rel-body-xs-regular-line-height);
-
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
-
-    }
-
-    .textfield-support.error {
-      color: var(--rel-text-danger);
-    }
-
-    /* Placeholder */
-    .textfield-input::placeholder {
-      color: var(--rel-text-placeholder);
-    }
-
-    :host([floatinglabel]) .textfield-input::placeholder {
-      opacity: 0;
-    }
-
-    :host([floatinglabel]) .textfield-wrapper.focused .textfield-input::placeholder {
-      opacity: 1;
-    }
-
-    /* Suppress Chrome autofill blue background */
-    .textfield-input:-webkit-autofill,
-    .textfield-input:-webkit-autofill:hover,
-    .textfield-input:-webkit-autofill:focus {
-      -webkit-box-shadow: 0 0 0px 1000px var(--rel-bg-surface) inset;
-      -webkit-text-fill-color: var(--rel-text-default);
-    }
-
-    /* ── Underline variant ── */
-    :host([variant="underline"]) .textfield-container {
-      border: none;
-      border-bottom: 2px solid var(--rel-border-default);
-      border-radius: 0;
-      background: var(--rel-bg-neutral-elevated-1);
-      box-shadow: none;
-      overflow: visible;
-    }
-
-    :host([variant="underline"]) .textfield-wrapper:not(.focused):not(.error):not(.disabled) .textfield-container:hover {
-      border-bottom-color: var(--rel-border-strong);
-    }
-
-    :host([variant="underline"]) .textfield-wrapper.focused .textfield-container,
-    :host([variant="underline"]) .textfield-container:focus-within {
-      border-bottom: 2px solid var(--rel-text-default);
-      box-shadow: none;
-    }
-
-    :host([variant="underline"]) .textfield-wrapper.error .textfield-container {
-      border-bottom: 2px solid var(--rel-border-danger);
-      box-shadow: none;
-    }
-
-    :host([variant="underline"]) .textfield-wrapper.disabled .textfield-container {
-      border-bottom: 2px solid var(--rel-border-default);
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    /* Remove border radius on input for underline variant */
-    :host([variant="underline"]) .textfield-input {
-      background: transparent;
-    }
-
-    /* Dark mode — underline variant uses same border colors as default */
-    :host-context([data-theme="dark"]) :host([variant="underline"]) .textfield-container,
-    :host-context(.dark) :host([variant="underline"]) .textfield-container {
-      background: var(--rel-bg-neutral-elevated-1);
-      border-bottom-color: var(--rel-border-default);
-    }
-
-    /* ── Full-width control (fullWidth defaults true → block, fills parent) ── */
-    :host(:not([fullwidth])) {
-      display: inline-block;
-      width: auto;
-    }
-    :host(:not([fullwidth])) .textfield-wrapper {
-      width: auto;
-    }
-
-    /* ── Legend (notched-outline) variant ──
-       Native <fieldset>/<legend>: the legend notches the top border and stays
-       fixed in place across all states (no float/animation). */
-    :host([variant="legend"]) .field-fieldset {
-      position: relative;
-      margin: 0;
-      min-inline-size: 0;
-      padding: 0;
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-xs);
-      background: var(--rel-bg-neutral);
-      transition: border-color 0.2s;
-    }
-
-    :host([variant="legend"]) .field-legend {
-      margin-left: var(--rel-spacing-sm);
-      padding: 0 var(--rel-spacing-2xs);
-      color: var(--rel-text-label);
-      font-family: var(--rel-body-sm-medium-font-family);
-      font-weight: var(--rel-body-sm-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
-    }
-
-    :host([variant="legend"]) .textfield-input {
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    /* labelStyle="none" + legend: nothing to seat in the notch, so drop the
-       legend entirely and let the top border run continuous. */
-    :host([label-style="none"][variant="legend"]) .field-legend {
-      display: none;
-    }
-
-    /* Prefix icon (legend): vertically centered; input inset via has-left-icon */
-    :host([variant="legend"]) .icon.left {
-      top: 50%;
-      left: var(--rel-spacing-sm);
-      transform: translateY(-50%);
-    }
-    :host([variant="legend"]) .field-fieldset.multiline .icon.left {
-      top: var(--rel-spacing-sm);
-      transform: none;
-    }
-
-    /* Hover */
-    :host([variant="legend"]) .field-fieldset:hover {
-      border-color: var(--rel-border-accent);
-      border-color: var(--rel-text-placeholder);
-    }
-
-    /* Focus — border-color only. A box-shadow/outline ring hugs the full
-       rectangular border-box and would draw across the notch, appearing to
-       strike through the legend. The legend also recolors on focus (below). */
-    :host([variant="legend"]) .textfield-wrapper.focused .field-fieldset,
-    :host([variant="legend"]) .field-fieldset:focus-within {
-      border-color: var(--rel-border-focus);
-      box-shadow: none;
-    }
-    :host([variant="legend"]) .textfield-wrapper.focused .field-legend,
-    :host([variant="legend"]) .field-fieldset:focus-within .field-legend {
-      color: var(--rel-border-focus);
-    }
-
-    /* Error */
-    :host([variant="legend"]) .textfield-wrapper.error .field-fieldset {
-      border-color: var(--rel-border-danger);
-      box-shadow: none;
-    }
-    :host([variant="legend"]) .textfield-wrapper.error .field-legend {
-      color: var(--rel-text-danger);
-    }
-
-    /* Disabled */
-    :host([variant="legend"]) .textfield-wrapper.disabled .field-fieldset {
-      background: var(--rel-bg-neutral-elevated-1);
-      border-color: var(--rel-border-default);
-      cursor: not-allowed;
-    }
-    :host([variant="legend"]) .textfield-wrapper.disabled .field-legend {
-      color: var(--rel-text-disabled);
-    }
-
-    /* Readonly */
-    :host([variant="legend"]) .textfield-wrapper.readonly .field-fieldset {
-      cursor: default;
-    }
-
-    /* Legend font tracks size */
-    :host([variant="legend"]) .textfield-wrapper.small .field-legend {
-
-      font-family: var(--rel-body-xs-regular-font-family);
-
-      font-weight: var(--rel-body-xs-regular-font-weight);
-
-      font-size: var(--rel-body-xs-regular-font-size);
-
-      line-height: var(--rel-body-xs-regular-line-height);
-
-      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
-
-    }
-    :host([variant="legend"]) .textfield-wrapper.large .field-legend {
-
-      font-family: var(--rel-body-md-regular-font-family);
-
-      font-weight: var(--rel-body-md-regular-font-weight);
-
-      font-size: var(--rel-body-md-regular-font-size);
-
-      line-height: var(--rel-body-md-regular-line-height);
-
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    const leftIcon = this.getAttribute('lefticon') || this.getAttribute('leftIcon');
-    if (leftIcon) this.leftIcon = leftIcon;
-    const rightIcon = this.getAttribute('righticon') || this.getAttribute('rightIcon');
-    if (rightIcon) this.rightIcon = rightIcon;
-  }
-
-  willUpdate(changed: PropertyValues<this>) {
-    // Keep the deprecated boolean an accurate mirror of labelStyle. This is what
-    // lets every `:host([floatinglabel])` rule below stay untouched — the
-    // reflected attribute is still the single styling hook for the floating form.
-    if (changed.has("labelStyle") && this.labelStyle) {
-      this.floatingLabel = this.labelStyle === "floating";
-    }
-  }
-
-  private _warnedNoName = false;
-
-  updated() {
-    if (this._warnedNoName || !this.labelHidden) return;
-    if (this.fieldAriaLabel || this.fieldAriaLabelledby || this.getAttribute("aria-label")) return;
-    this._warnedNoName = true;
-    console.warn(
-      '<rel-textfield label-style="none"> has no accessible name. Set ' +
-        "`field-aria-label` or `field-aria-labelledby` — a placeholder is not a " +
-        "valid naming mechanism.",
-      this
-    );
-  }
-
-  /** Focuses the inner input/textarea (the host itself is not focusable). */
-  focus(options?: FocusOptions) {
-    (this.renderRoot.querySelector("input, textarea") as HTMLElement | null)?.focus(options);
-  }
-
-  private handleFocus() {
-    if (!this.isDisabled) {
-      this.internalState = "focused";
-    }
-  }
-
-  private handleBlur() {
-    if (this.internalState === "focused") {
-      this.internalState = "default";
-    }
-  }
-
-  private handleRightIconClick(e: Event) {
-    if (!this.clickableRightIcon) return;
-    e.stopPropagation();
-    this.dispatchEvent(
-      new CustomEvent("rel-right-icon-click", { bubbles: true, composed: true })
-    );
-  }
-
-  private handleRightIconKeydown(e: KeyboardEvent) {
-    if (!this.clickableRightIcon) return;
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      this.handleRightIconClick(e);
-    }
-  }
-
-  private handleInput(e: Event) {
-    const input = e.target as HTMLInputElement;
-    this.value = input.value;
-    if (this.state === "error" && this.value) {
-      this._wasError = true;
-      this.state = "default";
-    } else if (this._wasError && !this.value) {
-      this._wasError = false;
-      this.state = "error";
-    }
-    this.dispatchEvent(
-      new CustomEvent<string>("rel-change", {
-        detail: this.value,
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  render() {
-    const isError = this.isError;
-    const stateClass = this.isDisabled ? "disabled" : isError ? "error" : "default";
-    const leadingIcon = this.leadingIcon;
-    const inputId = this.id || this.uniqueId;
-    const legendId = `${inputId}-legend`;
-
-    // errorMessage replaces the helper only when in error AND explicitly set;
-    // otherwise the (deprecated) supportingText/helperText shows as before.
-    const belowText = isError && this.errorMessage ? this.errorMessage : this.helper;
-    const describedById = belowText ? `${inputId}-desc` : undefined;
-
-    const wrapperClasses = [
-      "textfield-wrapper",
-      this.size,
-      stateClass,
-      this.readonly ? "readonly" : "",
-      this.internalState === "focused" ? "focused" : "",
-      this.value ? "has-value" : "",
-    ].filter(Boolean).join(" ");
-
-    const inputClasses = [
-      "textfield-input",
-      !this.multiline && leadingIcon ? "has-left-icon" : "",
-      !this.multiline && this.rightIcon && this.variant !== "legend" ? "has-right-icon" : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    const labelStyle = this.resolvedLabelStyle;
-    const labelHidden = labelStyle === "none";
-
-    const labelTemplate = (extraClass = "") => {
-      if (!this.label || labelHidden) return "";
-      return html`<label
-        part="label"
-        class="textfield-label${extraClass}"
-        for="${inputId}"
-      >${this.label}${this.required ? html`<span class="required-mark" aria-hidden="true">*</span>` : ""}</label>`;
-    };
-
-    // With no visible label the <label for> / <legend> naming path is gone, so
-    // fieldAriaLabelledby → fieldAriaLabel take over. An explicit labelledby
-    // always wins; aria-label only fills in when nothing else names the input.
-    const legendLabelledby =
-      this.variant === "legend" && this.label && !labelHidden ? legendId : undefined;
-    const ariaLabelledby = this.fieldAriaLabelledby ?? legendLabelledby;
-    const hasVisibleLabel = !labelHidden && !!this.label;
-    const ariaLabel = !hasVisibleLabel && !ariaLabelledby ? this.fieldAriaLabel : undefined;
-
-    const inputTemplate = this.multiline
-      ? html`<textarea part="input"
-          id="${inputId}"
-          class="${inputClasses}"
-          placeholder="${this.placeholder}"
-          .value="${this.value}"
-          rows="${this.rows}"
-          name="${this.name ?? nothing}"
-          maxlength="${this.maxLength ?? nothing}"
-          ?disabled="${this.isDisabled}"
-          ?readonly="${this.readonly}"
-          ?required="${this.required}"
-          aria-invalid="${isError}"
-          aria-required="${this.required}"
-          aria-label="${ariaLabel ?? nothing}"
-          aria-labelledby="${ariaLabelledby ?? nothing}"
-          aria-describedby="${describedById ?? nothing}"
-          @focus="${this.handleFocus}"
-          @blur="${this.handleBlur}"
-          @input="${this.handleInput}"
-        ></textarea>`
-      : html`<input part="input"
-          type="${this.type}"
-          id="${inputId}"
-          class="${inputClasses}"
-          placeholder="${this.placeholder}"
-          .value="${this.value}"
-          name="${this.name ?? nothing}"
-          maxlength="${this.maxLength ?? nothing}"
-          ?disabled="${this.isDisabled}"
-          ?readonly="${this.readonly}"
-          ?required="${this.required}"
-          aria-invalid="${isError}"
-          aria-required="${this.required}"
-          aria-label="${ariaLabel ?? nothing}"
-          aria-labelledby="${ariaLabelledby ?? nothing}"
-          aria-describedby="${describedById ?? nothing}"
-          @focus="${this.handleFocus}"
-          @blur="${this.handleBlur}"
-          @input="${this.handleInput}"
-        />`;
-
-    const leadingIconTemplate = leadingIcon
-      ? html`<rel-icon
-          name="${leadingIcon}"
-          size="sm"
-          class="icon left"
-          role="${this.prefixIconAriaLabel ? "img" : nothing}"
-          aria-label="${this.prefixIconAriaLabel ?? nothing}"
-          aria-hidden="${this.prefixIconAriaLabel ? nothing : "true"}"
-        ></rel-icon>`
-      : "";
-
-    const belowTemplate = belowText
-      ? html`<div part="helper" class="textfield-support ${isError ? "error" : ""}" id="${describedById}">
-          ${belowText}
-        </div>`
-      : "";
-
-    if (this.variant === "legend") {
-      const fieldsetClass = ["field-fieldset", this.multiline ? "multiline" : ""].filter(Boolean).join(" ");
-      // The <legend> MUST be the fieldset's first child with no preceding
-      // whitespace/text or binding-comment, otherwise the browser won't cut the
-      // notch in the top border. So it's rendered flush against the tag open and
-      // is always present (only its content is dynamic).
-      return html`
-        <div class="${wrapperClasses}">
-          <fieldset part="control" class="${fieldsetClass}"><legend class="field-legend" id="${legendId}">${labelHidden ? "" : this.label ?? ""}${this.required && !labelHidden ? html`<span class="required-mark" aria-hidden="true">*</span>` : ""}</legend>
-            ${!this.multiline ? leadingIconTemplate : ""}
-            ${inputTemplate}
-          </fieldset>
-          ${belowTemplate}
-        </div>
-      `;
-    }
-
-    return html`
-      <div class="${wrapperClasses}">
-        ${labelHidden
-          ? html`<div class="label-reserve" aria-hidden="true"></div>`
-          : labelStyle !== "floating"
-            ? labelTemplate()
-            : ""}
-
-        <div part="control" class="${["textfield-container", this.isDisabled ? "disabled" : "", this.multiline ? "multiline" : ""].filter(Boolean).join(" ")}">
-          ${labelStyle === "floating"
-            ? labelTemplate(leadingIcon && !this.multiline ? " has-left-icon" : "")
-            : ""}
-          ${!this.multiline ? leadingIconTemplate : ""}
-
-          ${inputTemplate}
-
-          ${!this.multiline && this.rightIcon
-            ? html`<rel-icon
-                part="right-icon"
-                name="${this.rightIcon}"
-                size="${this.clickableRightIcon ? "md" : "sm"}"
-                class="icon right ${this.clickableRightIcon ? "clickable" : ""}"
-                role="${this.clickableRightIcon ? "button" : nothing}"
-                tabindex="${this.clickableRightIcon ? "0" : nothing}"
-                aria-label="${this.clickableRightIcon ? (this.rightIconAriaLabel ?? nothing) : nothing}"
-                @click="${(e: Event) => this.handleRightIconClick(e)}"
-                @keydown="${(e: KeyboardEvent) => this.handleRightIconKeydown(e)}"
-              ></rel-icon>`
-            : ""}
-        </div>
-
-        ${belowTemplate}
-      </div>
-    `;
-  }
-}