@reliability-design/web 1.4.6 → 1.4.8

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

@@ -1,1054 +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 the prefix block is drawn (Figma `.Preffix` → Style):
- *   - `"clear"`   — bare icon/text, no separator (the legacy `leftIcon` look)
- *   - `"divider"` — hairline between the prefix and the input
- *   - `"fill"`    — tinted block flush with the control's left edge
- */
-export type TextFieldPrefixStyle = "clear" | "divider" | "fill";
-
-/**
- * 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;
-  // ── Prefix / suffix labels (Figma .Preffix / .Suffix) ───────────────────────
-  /** Short text rendered before the input, e.g. `"http://"` or `"$"`. Sits in
-   *  the same prefix block as `prefixIcon` and is styled by `prefixStyle`. */
-  @property({ type: String, attribute: "prefix-text" }) prefixText?: string;
-  /** Visual treatment of the prefix block — applies to the prefix icon, text
-   *  and slotted `prefix` content alike. See `TextFieldPrefixStyle`. */
-  @property({ type: String, attribute: "prefix-style" }) prefixStyle: TextFieldPrefixStyle = "clear";
-  /** Short text rendered after the input, e.g. `"kg"` or `".00"`. Shares the
-   *  suffix block with `rightIcon` and slotted `suffix` content. */
-  @property({ type: String, attribute: "suffix-text" }) suffixText?: string;
-  /** Draws a hairline between the input and the suffix block. */
-  @property({ type: Boolean, attribute: "suffix-divider" }) suffixDivider = false;
-  @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";
-  /** Whether the `prefix` / `suffix` named slots currently have content. */
-  @state() private slotted = { prefix: false, suffix: false };
-  private _wasError = false;
-  private _prefixObserver?: ResizeObserver;
-
-  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);
-    }
-
-    /* The floating label lives inside .textfield-field (the input's own flex
-       column), so at rest it naturally sits after any prefix block. Once
-       floated, a "clear" prefix (bare icon — the legacy leftIcon look) lets the
-       label slide back over the control's left edge, matching Figma's
-       "Floating Label" frame at x=12; --_rel-tf-prefix-w is the measured
-       prefix width (ResizeObserver). Divider/fill prefixes are solid blocks,
-       so the floated label stays in the field column, after them. */
-    :host([floatinglabel]) .textfield-wrapper.focused .prefix-clear .textfield-label,
-    :host([floatinglabel]) .textfield-wrapper.has-value .prefix-clear .textfield-label {
-      left: calc(var(--rel-spacing-sm) - var(--_rel-tf-prefix-w, 0px));
-    }
-
-    :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;
-    }
-
-    /* The input's own column: prefix | field | suffix. Positioned so the
-       floating label anchors to the input area, not the whole control. */
-    .textfield-field {
-      position: relative;
-      display: flex;
-      align-items: center;
-      align-self: stretch;
-      flex: 1;
-      min-width: 0;
-    }
-
-    /* Input */
-    .textfield-input {
-      flex: 1;
-      min-width: 0;
-      width: 100%;
-      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;
-    }
-
-    /* ── Prefix / suffix blocks (Figma .Preffix / .Suffix) ──
-       Flex children of the control, stretched to its height. Each holds an
-       icon and/or a short text label plus a named slot for custom content
-       (a unit dropdown, an action button…). Colour follows Figma: text-default
-       for both icon and text, like rel-select's trigger icons. */
-    .textfield-affix {
-      display: flex;
-      align-items: center;
-      align-self: stretch;
-      flex: none;
-      gap: var(--rel-spacing-xs);
-      box-sizing: border-box;
-      color: var(--rel-text-default);
-      white-space: nowrap;
-      transition: border-color 0.2s, background 0.2s;
-    }
-
-    .textfield-affix.hidden {
-      display: none;
-    }
-
-    .textfield-affix rel-icon {
-      --rel-icon-size: 18px;
-      flex: none;
-    }
-    .textfield-wrapper.small .textfield-affix rel-icon {
-      --rel-icon-size: 16px;
-    }
-    .textfield-wrapper.large .textfield-affix rel-icon {
-      --rel-icon-size: 20px;
-    }
-
-    .affix-text {
-      font-family: var(--rel-body-md-medium-font-family);
-      font-weight: var(--rel-body-md-medium-font-weight);
-      font-size: var(--rel-body-md-medium-font-size);
-      line-height: var(--rel-body-md-medium-line-height);
-      letter-spacing: var(--rel-body-md-medium-letter-spacing);
-    }
-    .textfield-wrapper.small .affix-text {
-      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);
-    }
-    .textfield-wrapper.large .affix-text {
-      font-family: var(--rel-body-lg-medium-font-family);
-      font-weight: var(--rel-body-lg-medium-font-weight);
-      font-size: var(--rel-body-lg-medium-font-size);
-      line-height: var(--rel-body-lg-medium-line-height);
-      letter-spacing: var(--rel-body-lg-medium-letter-spacing);
-    }
-
-    /* Prefix — Style=Clear: bare; icon-only keeps the input's own left padding
-       as the gap, text pads both sides. */
-    .textfield-affix.prefix {
-      padding-inline: var(--rel-spacing-sm) 0;
-    }
-    .textfield-affix.prefix.has-text {
-      padding-inline: var(--rel-spacing-sm);
-    }
-    /* Style=Divider: hairline on the right */
-    .textfield-affix.prefix.divider {
-      padding-inline: var(--rel-spacing-sm);
-      border-right: 1px solid var(--rel-border-default);
-    }
-    /* Style=Fill: tinted block flush with the control's edge, sm gap after */
-    .textfield-affix.prefix.fill {
-      padding-inline: var(--rel-spacing-sm);
-      margin-right: var(--rel-spacing-sm);
-      background: var(--rel-bg-neutral-elevated-2);
-      border-radius: calc(var(--rel-border-radius-xs) - 1px) 0 0
-        calc(var(--rel-border-radius-xs) - 1px);
-    }
-
-    /* Suffix — Divider=False: pl xs / pr sm; Divider=True: hairline on the left */
-    .textfield-affix.suffix {
-      padding-inline: var(--rel-spacing-xs) var(--rel-spacing-sm);
-    }
-    .textfield-affix.suffix.divider {
-      padding-inline: var(--rel-spacing-sm);
-      border-left: 1px solid var(--rel-border-default);
-    }
-
-    /* Size=S tightens every inline pad to xs */
-    .textfield-wrapper.small .textfield-affix.prefix {
-      padding-inline: var(--rel-spacing-xs) 0;
-    }
-    .textfield-wrapper.small .textfield-affix.prefix.has-text,
-    .textfield-wrapper.small .textfield-affix.prefix.divider,
-    .textfield-wrapper.small .textfield-affix.prefix.fill,
-    .textfield-wrapper.small .textfield-affix.suffix,
-    .textfield-wrapper.small .textfield-affix.suffix.divider {
-      padding-inline: var(--rel-spacing-xs);
-    }
-
-    .textfield-wrapper.disabled .textfield-affix {
-      color: var(--rel-text-disabled);
-    }
-
-    .icon {
-      display: flex;
-    }
-
-    /* Interactive trailing icon (e.g. password show/hide) */
-    .icon.right.clickable {
-      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);
-    }
-
-    /* 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);
-    }
-
-    .textfield-support.empty {
-      margin-top: calc(-1 * var(--rel-spacing-2xs));
-    }
-
-    /* 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;
-    }
-
-    /* Legend: prefix | field | suffix sit in a flex row under the legend. The
-       fieldset's content box starts below the legend's midline, so a fill
-       prefix can't reach the top border here — square it off instead. */
-    :host([variant="legend"]) .field-row {
-      display: flex;
-      align-items: center;
-    }
-    :host([variant="legend"]) .textfield-affix.prefix.fill {
-      border-radius: 0;
-    }
-
-    /* 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;
-    // Seed slot presence from static markup; slotchange keeps it current after.
-    this.slotted = {
-      prefix: !!this.querySelector(':scope > [slot="prefix"]'),
-      suffix: !!this.querySelector(':scope > [slot="suffix"]'),
-    };
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._prefixObserver?.disconnect();
-  }
-
-  private handleSlotChange(e: Event) {
-    const slot = e.target as HTMLSlotElement;
-    const key = slot.name as "prefix" | "suffix";
-    const has = slot
-      .assignedNodes({ flatten: true })
-      .some((n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? "").trim() !== "");
-    if (this.slotted[key] !== has) this.slotted = { ...this.slotted, [key]: has };
-  }
-
-  /** Clicking the (non-interactive) prefix/suffix area focuses the input, as a
-   *  label would. Clickable icons and slotted controls keep their own clicks. */
-  private handleAffixClick(e: Event) {
-    const target = e.target as HTMLElement;
-    if (target.closest(".clickable") || target.assignedSlot || target.closest("[slot]")) return;
-    this.focus();
-  }
-
-  /** Publishes the prefix block's width as --_rel-tf-prefix-w on its parent so
-   *  the floated label can slide back over a clear-style prefix (see CSS). */
-  private observePrefix() {
-    if (typeof ResizeObserver === "undefined") return;
-    const prefix = this.renderRoot.querySelector<HTMLElement>(".textfield-affix.prefix");
-    this._prefixObserver ??= new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const el = entry.target as HTMLElement;
-        el.parentElement?.style.setProperty("--_rel-tf-prefix-w", `${el.offsetWidth}px`);
-      }
-    });
-    this._prefixObserver.disconnect();
-    if (prefix) this._prefixObserver.observe(prefix);
-  }
-
-  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() {
-    this.observePrefix();
-    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 = `${inputId}-desc`;
-
-    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";
-
-    // Prefix / suffix blocks. Hidden (not removed) in multiline mode so the
-    // named slots stay mounted and slotchange keeps tracking content.
-    const affixesShown = !this.multiline;
-    const hasPrefix = affixesShown && !!(leadingIcon || this.prefixText || this.slotted.prefix);
-    const hasSuffix = affixesShown && !!(this.rightIcon || this.suffixText || this.slotted.suffix);
-    const prefixClear = hasPrefix && this.prefixStyle === "clear";
-
-    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}"
-          @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}"
-          @focus="${this.handleFocus}"
-          @blur="${this.handleBlur}"
-          @input="${this.handleInput}"
-        />`;
-
-    const leadingIconTemplate = leadingIcon
-      ? html`<rel-icon
-          name="${leadingIcon}"
-          class="icon left"
-          role="${this.prefixIconAriaLabel ? "img" : nothing}"
-          aria-label="${this.prefixIconAriaLabel ?? nothing}"
-          aria-hidden="${this.prefixIconAriaLabel ? nothing : "true"}"
-        ></rel-icon>`
-      : "";
-
-    const trailingIconTemplate = this.rightIcon
-      ? html`<rel-icon
-          part="right-icon"
-          name="${this.rightIcon}"
-          class="icon right ${this.clickableRightIcon ? "clickable" : ""}"
-          role="${this.clickableRightIcon ? "button" : nothing}"
-          tabindex="${this.clickableRightIcon ? "0" : nothing}"
-          aria-label="${this.clickableRightIcon ? (this.rightIconAriaLabel ?? nothing) : nothing}"
-          aria-hidden="${this.clickableRightIcon ? nothing : "true"}"
-          @click="${(e: Event) => this.handleRightIconClick(e)}"
-          @keydown="${(e: KeyboardEvent) => this.handleRightIconKeydown(e)}"
-        ></rel-icon>`
-      : "";
-
-    // Order inside each block: slotted content sits outermost (a unit dropdown
-    // at the far left, an action button at the far right), then icon, then text
-    // nearest the input.
-    const prefixClasses = [
-      "textfield-affix",
-      "prefix",
-      this.prefixStyle,
-      this.prefixText || this.slotted.prefix ? "has-text" : "",
-      hasPrefix ? "" : "hidden",
-    ].filter(Boolean).join(" ");
-    const prefixTemplate = html`<div part="prefix" class="${prefixClasses}" @click="${this.handleAffixClick}">
-      <slot name="prefix" @slotchange="${this.handleSlotChange}"></slot>
-      ${hasPrefix ? leadingIconTemplate : ""}
-      ${hasPrefix && this.prefixText ? html`<span class="affix-text">${this.prefixText}</span>` : ""}
-    </div>`;
-
-    const suffixClasses = [
-      "textfield-affix",
-      "suffix",
-      this.suffixDivider ? "divider" : "",
-      hasSuffix ? "" : "hidden",
-    ].filter(Boolean).join(" ");
-    const suffixTemplate = html`<div part="suffix" class="${suffixClasses}" @click="${this.handleAffixClick}">
-      ${hasSuffix && this.suffixText ? html`<span class="affix-text">${this.suffixText}</span>` : ""}
-      ${hasSuffix ? trailingIconTemplate : ""}
-      <slot name="suffix" @slotchange="${this.handleSlotChange}"></slot>
-    </div>`;
-
-    const belowTemplate = html`<div part="helper" class="${["textfield-support", isError ? "error" : "", belowText ? "" : "empty"].filter(Boolean).join(" ")}" id="${describedById}" aria-live="polite">${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>
-            <div class="field-row">
-              ${prefixTemplate}
-              <div class="textfield-field">${inputTemplate}</div>
-              ${suffixTemplate}
-            </div>
-          </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" : "", prefixClear ? "prefix-clear" : ""].filter(Boolean).join(" ")}">
-          ${prefixTemplate}
-          <div class="textfield-field">
-            ${labelStyle === "floating" ? labelTemplate() : ""}
-            ${inputTemplate}
-          </div>
-          ${suffixTemplate}
-        </div>
-
-        ${belowTemplate}
-      </div>
-    `;
-  }
-}