@reliability-design/web 1.3.1 → 1.4.1

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

@@ -1,6 +1,5 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 import "@reliability-design/icons/rel-icon";
 
 export type TextFieldState = "default" | "error" | "disabled";
@@ -15,6 +14,11 @@ export class RelTextfield extends LitElement {
   @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";
@@ -63,27 +67,37 @@ export class RelTextfield extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
 
     /* Wrapper */
     .textfield-wrapper {
       display: flex;
       flex-direction: column;
-      gap: var(--rel-spacing-space-2xs);
+      gap: var(--rel-spacing-2xs);
       width: 100%;
     }
 
     /* Label */
     .textfield-label {
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-color-text-heading);
+      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-error-surface-default, #CC0000);
+      color: var(--rel-text-danger);
       margin-left: 2px;
     }
 
@@ -100,24 +114,26 @@ export class RelTextfield extends LitElement {
 
     :host([floatinglabel]) .textfield-label {
       position: absolute;
-      left: var(--rel-spacing-space-sm);
+      left: var(--rel-spacing-sm);
       top: 50%;
       transform: translateY(-50%);
-      font-size: var(--rel-fontSizes-md);
-      font-weight: var(--rel-fontWeights-regular);
-      color: var(--rel-color-text-placeholder);
+      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-color-bg-primary);
+      background: var(--rel-bg-neutral);
       padding: 0 2px;
       z-index: 1;
-      line-height: 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-space-sm);
+      top: var(--rel-spacing-sm);
       transform: none;
     }
 
@@ -125,46 +141,54 @@ export class RelTextfield extends LitElement {
     :host([floatinglabel]) .textfield-wrapper.has-value .textfield-label {
       top: 0;
       transform: translateY(-50%);
-      font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-color-text-primary);
+      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-error-text);
+      color: var(--rel-text-danger);
     }
 
     :host([floatinglabel]) .textfield-wrapper.focused:not(.error) .textfield-label {
-      color: var(--rel-color-text-primary);
+      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%);
-      font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-error-text);
+      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-space-sm);
-      padding-bottom: var(--rel-spacing-space-sm);
+      padding-top: var(--rel-spacing-sm);
+      padding-bottom: var(--rel-spacing-sm);
     }
 
     :host([floatinglabel]) .textfield-input.has-left-icon {
-      padding-left: var(--rel-spacing-space-2xl);
+      padding-left: var(--rel-spacing-2xl);
     }
 
     :host([floatinglabel]) .textfield-label.has-left-icon {
-      left: var(--rel-spacing-space-2xl);
+      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-space-sm);
+      left: var(--rel-spacing-sm);
     }
 
     :host([floatinglabel]) .textfield-wrapper.disabled .textfield-label {
-      background: var(--rel-color-bg-tertiary);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     /* Container */
@@ -172,15 +196,15 @@ export class RelTextfield extends LitElement {
       display: flex;
       align-items: center;
       position: relative;
-      border: 1px solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-100);
-      background: var(--rel-color-bg-primary);
+      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-color-bg-tertiary);
+      background: var(--rel-bg-neutral-elevated-1);
       cursor: not-allowed;
     }
 
@@ -194,16 +218,19 @@ export class RelTextfield extends LitElement {
       flex: 1;
       border: none;
       outline: none;
-      font-size: var(--rel-fontSizes-md);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
       background: transparent;
-      font-family: var(--rel-fontFamilies-primary);
-      color: var(--rel-color-text-primary);
+      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-color-text-disabled);
+      color: var(--rel-text-disabled);
     }
 
     /* Textarea */
@@ -221,7 +248,7 @@ export class RelTextfield extends LitElement {
       background: transparent;
     }
     textarea.textfield-input::-webkit-scrollbar-thumb {
-      background: var(--rel-color-text-placeholder);
+      background: var(--rel-text-placeholder);
       border-radius: 2px;
     }
 
@@ -229,7 +256,7 @@ export class RelTextfield extends LitElement {
       position: absolute;
       display: flex;
       pointer-events: none;
-      color: var(--rel-color-text-placeholder);
+      color: var(--rel-text-placeholder);
     }
 
     .icon.left {
@@ -240,33 +267,68 @@ export class RelTextfield extends LitElement {
       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-space-xs) var(--rel-spacing-space-sm);
-      font-size: var(--rel-fontSizes-sm);
+      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-space-sm) var(--rel-spacing-space-md);
-      font-size: var(--rel-fontSizes-md);
+      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-space-md) var(--rel-spacing-space-md);
-      font-size: var(--rel-fontSizes-lg);
+      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-space-2xl);
+      padding-left: var(--rel-spacing-2xl);
     }
 
     .textfield-wrapper .textfield-input.has-right-icon {
-      padding-right: var(--rel-spacing-space-2xl);
+      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-color-text-primary);
+      border-color: var(--rel-text-default);
     }
 
     .textfield-input:focus-visible {
@@ -275,37 +337,47 @@ export class RelTextfield extends LitElement {
 
     .textfield-wrapper.focused .textfield-container,
     .textfield-container:focus-within {
-      border-color: var(--rel-color-text-primary);
-      box-shadow: 0 0 0 1px var(--rel-color-text-primary);
+      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-error-surface-default);
+      border-color: var(--rel-border-danger);
       box-shadow: none;
     }
 
     .textfield-wrapper.disabled .textfield-container {
-      border-color: var(--rel-color-border-default);
+      border-color: var(--rel-border-default);
     }
 
     .textfield-wrapper.disabled .textfield-label {
-      color: var(--rel-color-text-disabled);
+      color: var(--rel-text-disabled);
     }
 
     /* Supporting text */
     .textfield-support {
-      font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-color-text-placeholder);
+      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-error-surface-default, #CC0000);
+      color: var(--rel-text-danger);
     }
 
     /* Placeholder */
     .textfield-input::placeholder {
-      color: var(--rel-color-text-placeholder);
+      color: var(--rel-text-placeholder);
     }
 
     :host([floatinglabel]) .textfield-input::placeholder {
@@ -320,34 +392,38 @@ export class RelTextfield extends LitElement {
     .textfield-input:-webkit-autofill,
     .textfield-input:-webkit-autofill:hover,
     .textfield-input:-webkit-autofill:focus {
-      -webkit-box-shadow: 0 0 0px 1000px var(--rel-color-bg-primary) inset;
-      -webkit-text-fill-color: var(--rel-color-text-primary);
+      -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-color-border-default);
+      border-bottom: 2px solid var(--rel-border-default);
       border-radius: 0;
-      background: var(--rel-color-bg-tertiary, #f5f5f5);
+      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-color-text-primary);
+      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-error-surface-default, #CC0000);
+      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-color-border-default);
-      background: var(--rel-color-bg-tertiary);
+      border-bottom: 2px solid var(--rel-border-default);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     /* Remove border radius on input for underline variant */
@@ -358,8 +434,8 @@ export class RelTextfield extends LitElement {
     /* 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-color-bg-tertiary);
-      border-bottom-color: var(--rel-color-border-default);
+      background: var(--rel-bg-neutral-elevated-1);
+      border-bottom-color: var(--rel-border-default);
     }
 
     /* ── Full-width control (fullWidth defaults true → block, fills parent) ── */
@@ -379,19 +455,21 @@ export class RelTextfield extends LitElement {
       margin: 0;
       min-inline-size: 0;
       padding: 0;
-      border: 1px solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-100);
-      background: var(--rel-color-bg-primary);
+      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-space-sm);
-      padding: 0 var(--rel-spacing-space-2xs);
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      line-height: 1;
-      color: var(--rel-color-text-heading);
+      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 {
@@ -402,17 +480,18 @@ export class RelTextfield extends LitElement {
     /* Prefix icon (legend): vertically centered; input inset via has-left-icon */
     :host([variant="legend"]) .icon.left {
       top: 50%;
-      left: var(--rel-spacing-space-sm);
+      left: var(--rel-spacing-sm);
       transform: translateY(-50%);
     }
     :host([variant="legend"]) .field-fieldset.multiline .icon.left {
-      top: var(--rel-spacing-space-sm);
+      top: var(--rel-spacing-sm);
       transform: none;
     }
 
     /* Hover */
     :host([variant="legend"]) .field-fieldset:hover {
-      border-color: var(--rel-color-text-placeholder);
+      border-color: var(--rel-border-accent);
+      border-color: var(--rel-text-placeholder);
     }
 
     /* Focus — border-color only. A box-shadow/outline ring hugs the full
@@ -420,31 +499,31 @@ export class RelTextfield extends LitElement {
        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-color-border-focus);
+      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-color-border-focus);
+      color: var(--rel-border-focus);
     }
 
     /* Error */
     :host([variant="legend"]) .textfield-wrapper.error .field-fieldset {
-      border-color: var(--rel-error-surface-default);
+      border-color: var(--rel-border-danger);
       box-shadow: none;
     }
     :host([variant="legend"]) .textfield-wrapper.error .field-legend {
-      color: var(--rel-error-surface-default);
+      color: var(--rel-text-danger);
     }
 
     /* Disabled */
     :host([variant="legend"]) .textfield-wrapper.disabled .field-fieldset {
-      background: var(--rel-color-bg-tertiary);
-      border-color: var(--rel-color-border-default);
+      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-color-text-disabled);
+      color: var(--rel-text-disabled);
     }
 
     /* Readonly */
@@ -454,10 +533,30 @@ export class RelTextfield extends LitElement {
 
     /* Legend font tracks size */
     :host([variant="legend"]) .textfield-wrapper.small .field-legend {
-      font-size: var(--rel-fontSizes-xs);
+
+      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-size: var(--rel-fontSizes-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);
+
     }
   `;
 
@@ -481,6 +580,22 @@ export class RelTextfield extends LitElement {
     }
   }
 
+  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;
@@ -532,6 +647,7 @@ export class RelTextfield extends LitElement {
     const labelTemplate = (extraClass = "") => {
       if (!this.label) 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>`;
@@ -540,7 +656,7 @@ export class RelTextfield extends LitElement {
     const ariaLabelledby = this.variant === "legend" && this.label ? legendId : undefined;
 
     const inputTemplate = this.multiline
-      ? html`<textarea
+      ? html`<textarea part="input"
           id="${inputId}"
           class="${inputClasses}"
           placeholder="${this.placeholder}"
@@ -559,7 +675,7 @@ export class RelTextfield extends LitElement {
           @blur="${this.handleBlur}"
           @input="${this.handleInput}"
         ></textarea>`
-      : html`<input
+      : html`<input part="input"
           type="${this.type}"
           id="${inputId}"
           class="${inputClasses}"
@@ -591,7 +707,7 @@ export class RelTextfield extends LitElement {
       : "";
 
     const belowTemplate = belowText
-      ? html`<div class="textfield-support ${isError ? "error" : ""}" id="${describedById}">
+      ? html`<div part="helper" class="textfield-support ${isError ? "error" : ""}" id="${describedById}">
           ${belowText}
         </div>`
       : "";
@@ -604,7 +720,7 @@ export class RelTextfield extends LitElement {
       // is always present (only its content is dynamic).
       return html`
         <div class="${wrapperClasses}">
-          <fieldset class="${fieldsetClass}"><legend class="field-legend" id="${legendId}">${this.label ?? ""}${this.required ? html`<span class="required-mark" aria-hidden="true">*</span>` : ""}</legend>
+          <fieldset part="control" class="${fieldsetClass}"><legend class="field-legend" id="${legendId}">${this.label ?? ""}${this.required ? html`<span class="required-mark" aria-hidden="true">*</span>` : ""}</legend>
             ${!this.multiline ? leadingIconTemplate : ""}
             ${inputTemplate}
           </fieldset>
@@ -617,7 +733,7 @@ export class RelTextfield extends LitElement {
       <div class="${wrapperClasses}">
         ${!this.floatingLabel ? labelTemplate() : ""}
 
-        <div class="${["textfield-container", this.isDisabled ? "disabled" : "", this.multiline ? "multiline" : ""].filter(Boolean).join(" ")}">
+        <div part="control" class="${["textfield-container", this.isDisabled ? "disabled" : "", this.multiline ? "multiline" : ""].filter(Boolean).join(" ")}">
           ${this.floatingLabel
             ? labelTemplate(leadingIcon && !this.multiline ? " has-left-icon" : "")
             : ""}
@@ -626,7 +742,17 @@ export class RelTextfield extends LitElement {
           ${inputTemplate}
 
           ${!this.multiline && this.rightIcon
-            ? html`<rel-icon name="${this.rightIcon}" size="sm" class="icon right"></rel-icon>`
+            ? 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>
 

package/dist/components/rel-toast/README.md

@@ -98,25 +98,25 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-md` - Font size
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-md-regular-font-size` - Font size
 
 ### Spacing Tokens
-- `--rel-spacing-space-sm` - Gap between elements
-- `--rel-spacing-space-md` - Padding
-- `--rel-spacing-space-2xs` - Close button padding and margin
+- `--rel-spacing-sm` - Gap between elements
+- `--rel-spacing-md` - Padding
+- `--rel-spacing-2xs` - Close button padding and margin
 
 ### Color Tokens
-- `--rel-surface-toast` - Default background color (dark gray)
-- `--rel-colors-red-secondary` - Error background color
-- `--rel-colors-white` - Text and focus outline color
-- `--rel-colors-green-primary` - Action button text color
+- `--rel-bg-neutral-inverse-1` - Default background color (dark gray)
+- `--rel-text-danger` - Error background color
+- `--rel-bg-surface` - Text and focus outline color
+- `--rel-bg-brand` - Action button text color
 
 ### Shadow Tokens
 - `--rel-shadows-shadow-300` - Drop shadow
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-200` - Border radius
+- `--rel-border-radius-sm` - Border radius
 
 ## Accessibility
 - Uses `role="status"` and `aria-live="polite"` for screen reader announcements
@@ -144,5 +144,5 @@ None exposed.
 - The component includes a `fadeInUp` animation (20px translateY → 0, opacity 0 → 1) on appearance
 - Animation disabled when `prefers-reduced-motion: reduce` is set
 - When `visible` is false, `hidden` class applies `display: none`
-- **Type variants**: `default` uses `--rel-surface-toast`, `error` uses `--rel-colors-red-secondary` 
+- **Type variants**: `default` uses `--rel-bg-neutral-inverse-1`, `error` uses `--rel-text-danger` 
 - The toast appears inline-flex, so it sizes to content width