@reliability-design/web 1.4.5 → 1.4.6

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

@@ -467,6 +467,7 @@ export class RelStepper extends LitElement {
           viewBox="0 0 18 14"
           fill="none"
           class="check-icon"
+          aria-hidden="true"
         >
           <path
             d="M6.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
@@ -498,13 +499,14 @@ export class RelStepper extends LitElement {
     const isTextRight = placement !== "inverted";
 
     return html`
-      <div class="${stepperClasses}">
+      <div class="${stepperClasses}" role="group" aria-label="Progress steps">
         ${this.steps.map(
           (step, idx) => html`
             <div
               class="${this.getStepClasses(step)}"
               role="button"
               tabindex="${this.isDisabled(step) ? -1 : 0}"
+              aria-label="${step.title}, step ${idx + 1} of ${this.steps.length}${this.isDone(step) ? ", completed" : ""}"
               aria-disabled="${this.isDisabled(step) ? "true" : nothing}"
               aria-current="${this.isProgress(step) ? "step" : nothing}"
               @click="${() => this.onStepClick(step, idx)}"

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 @customElement("rel-switch")
@@ -6,6 +6,7 @@ export class RelSwitch extends LitElement {
   @property({ type: Boolean }) checked = false;
   @property({ type: Boolean }) disabled = false;
   @property({ type: String }) value = "";
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
 
   private _onChange: (value: boolean) => void = () => {};
   private _onTouched: () => void = () => {};
@@ -182,6 +183,7 @@ export class RelSwitch extends LitElement {
           type="checkbox"
           role="switch"
           aria-checked="${this.checked}"
+          aria-label="${this.fieldAriaLabel || nothing}"
           ?disabled=${this.disabled}
           .checked=${this.checked}
           @change=${(e: Event) => this.toggle(e)}

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

@@ -5,6 +5,13 @@ 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>`
@@ -29,6 +36,18 @@ export class RelTextfield extends LitElement {
   @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";
@@ -69,7 +88,10 @@ export class RelTextfield extends LitElement {
   @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)}`;
 
@@ -227,17 +249,16 @@ export class RelTextfield extends LitElement {
       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);
+    /* 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 {
@@ -266,9 +287,22 @@ export class RelTextfield extends LitElement {
       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);
@@ -305,24 +339,113 @@ export class RelTextfield extends LitElement {
       border-radius: 2px;
     }
 
-    .icon {
-      position: absolute;
+    /* ── 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;
-      pointer-events: none;
-      color: var(--rel-text-placeholder);
+      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);
     }
 
-    .icon.left {
-      left: 8px;
+    /* 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);
     }
 
-    .icon.right {
-      right: 8px;
+    .textfield-wrapper.disabled .textfield-affix {
+      color: var(--rel-text-disabled);
+    }
+
+    .icon {
+      display: flex;
     }
 
     /* Interactive trailing icon (e.g. password show/hide) */
     .icon.right.clickable {
-      pointer-events: auto;
       cursor: pointer;
       border-radius: var(--rel-border-radius-xs, 4px);
     }
@@ -365,15 +488,6 @@ export class RelTextfield extends LitElement {
       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 {
@@ -428,6 +542,10 @@ export class RelTextfield extends LitElement {
       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);
@@ -536,15 +654,15 @@ export class RelTextfield extends LitElement {
       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%);
+    /* 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"]) .field-fieldset.multiline .icon.left {
-      top: var(--rel-spacing-sm);
-      transform: none;
+    :host([variant="legend"]) .textfield-affix.prefix.fill {
+      border-radius: 0;
     }
 
     /* Hover */
@@ -625,6 +743,48 @@ export class RelTextfield extends LitElement {
     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>) {
@@ -639,6 +799,7 @@ export class RelTextfield extends LitElement {
   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;
@@ -712,7 +873,7 @@ export class RelTextfield extends LitElement {
     // 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 describedById = `${inputId}-desc`;
 
     const wrapperClasses = [
       "textfield-wrapper",
@@ -723,13 +884,14 @@ export class RelTextfield extends LitElement {
       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 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";
@@ -768,7 +930,7 @@ export class RelTextfield extends LitElement {
           aria-required="${this.required}"
           aria-label="${ariaLabel ?? nothing}"
           aria-labelledby="${ariaLabelledby ?? nothing}"
-          aria-describedby="${describedById ?? nothing}"
+          aria-describedby="${describedById}"
           @focus="${this.handleFocus}"
           @blur="${this.handleBlur}"
           @input="${this.handleInput}"
@@ -788,7 +950,7 @@ export class RelTextfield extends LitElement {
           aria-required="${this.required}"
           aria-label="${ariaLabel ?? nothing}"
           aria-labelledby="${ariaLabelledby ?? nothing}"
-          aria-describedby="${describedById ?? nothing}"
+          aria-describedby="${describedById}"
           @focus="${this.handleFocus}"
           @blur="${this.handleBlur}"
           @input="${this.handleInput}"
@@ -797,7 +959,6 @@ export class RelTextfield extends LitElement {
     const leadingIconTemplate = leadingIcon
       ? html`<rel-icon
           name="${leadingIcon}"
-          size="sm"
           class="icon left"
           role="${this.prefixIconAriaLabel ? "img" : nothing}"
           aria-label="${this.prefixIconAriaLabel ?? nothing}"
@@ -805,12 +966,50 @@ export class RelTextfield extends LitElement {
         ></rel-icon>`
       : "";
 
-    const belowTemplate = belowText
-      ? html`<div part="helper" class="textfield-support ${isError ? "error" : ""}" id="${describedById}">
-          ${belowText}
-        </div>`
+    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
@@ -820,8 +1019,11 @@ export class RelTextfield extends LitElement {
       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}
+            <div class="field-row">
+              ${prefixTemplate}
+              <div class="textfield-field">${inputTemplate}</div>
+              ${suffixTemplate}
+            </div>
           </fieldset>
           ${belowTemplate}
         </div>
@@ -836,27 +1038,13 @@ export class RelTextfield extends LitElement {
             ? 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 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}