@reliability-design/web 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# Changelog — @reliability-design/web
+
+## 1.4.1 (2026-07-27)
+
+### Fixed
+
+- **Restored all 1.3.x design-token names removed by 1.4.0.** The RelDS 2.0 token rework in 1.4.0 renamed the token taxonomy in `vars.css` and dropped 154 of the 169 custom properties that 1.3.x shipped (`--rel-color-*`, `--rel-colors-*`, `--rel-text-*`, `--rel-background-*`, `--rel-surface-*`, `--rel-spacing-space-*`, `--rel-fontSizes-*`, `--rel-borders-*`, …). Apps referencing those tokens in their own CSS got unresolved `var()`s and lost colors/spacing/type across the board. 1.4.1 appends a **V1 compat alias block** to `vars.css`: every 1.3.x token name resolves again, pointing at its RelDS 2.0 equivalent (or its literal 1.3.x value where 2.0 has no counterpart). No import changes needed — `vars.css` remains the only stylesheet.
+
+### Upgrading
+
+- Your lockfile pins the currently resolved version, so a plain `npm i` will **not** pick this up. Run `npm update @reliability-design/web` or `npm i @reliability-design/web@latest`.
+- Works from any 1.x range: `^1.3.0` and `^1.4.0` both admit 1.4.1.
+
+### Notes
+
+- The restored V1 names are **deprecated aliases** — removal is targeted for 3.0. Migrate consumer CSS to the RelDS 2.0 semantic tokens (`--rel-text-*`, `--rel-bg-*`, `--rel-border-*`, `--rel-action-*`, `--rel-spacing-*`, …).
+- Aliased tokens follow the RelDS 2.0 **dark palette** (neutral grays). Dark-mode shades therefore differ slightly from 1.3.x's blue-tinted darks; light mode matches 1.3.x closely. Typography scale, spacing, radii, and stroke widths are value-identical to 1.3.x.
+
+## 1.4.0 (2026-07-24)
+
+- RelDS 2.0 token rework: `vars.css` regenerated from Figma (`RelDS_A1`) with a new semantic token taxonomy; all components repointed to semantic tokens; structural parity with the 2.0 Figma spec.
+- **Known issue (fixed in 1.4.1):** removed the 1.3.x token names without aliases, breaking consumer apps that referenced them.

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

@@ -142,8 +142,7 @@ export class RelAlert extends LitElement {
       color: var(--rel-text-default);
     }
 
-    .alert-info .rel-message1,
-    .alert-info .rel-message2 {
+    .alert-info .rel-message1 {
       color: var(--rel-text-info);
     }
 
@@ -152,8 +151,7 @@ export class RelAlert extends LitElement {
       color: var(--rel-text-default);
     }
 
-    .alert-success .rel-message1,
-    .alert-success .rel-message2 {
+    .alert-success .rel-message1 {
       color: var(--rel-text-success);
     }
 
@@ -162,18 +160,16 @@ export class RelAlert extends LitElement {
       color: var(--rel-text-default);
     }
 
-    .alert-warning .rel-message1,
-    .alert-warning .rel-message2 {
+    .alert-warning .rel-message1 {
       color: var(--rel-text-warning);
     }
 
     .alert-error {
       background: var(--rel-bg-danger-light);
-      color: var(--rel-text-danger);
+      color: var(--rel-text-default);
     }
 
-    .alert-error .rel-message1,
-    .alert-error .rel-message2 {
+    .alert-error .rel-message1 {
       color: var(--rel-text-danger);
     }
 

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

@@ -41,6 +41,13 @@ export class RelCalendar extends LitElement {
 
     :host([disabled]) {
       opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    /* Block interaction on the inner controls (JS also guards clicks), but keep
+       pointer-events on the host so its not-allowed cursor shows through. */
+    :host([disabled]) .day-button,
+    :host([disabled]) .nav-button {
       pointer-events: none;
     }
 

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

@@ -24,6 +24,10 @@ export class RelDrawer extends LitElement {
 
   @state() private isDragging = false;
   @state() private dragOffset = 0;
+  // Once a left/right drawer finishes sliding in, we drop its transform so that
+  // `position: fixed` descendants (select dropdowns, popovers, tooltips) are no
+  // longer trapped by the transformed panel's containing block.
+  @state() private settled = false;
 
   @query(".panel") private panelElement!: HTMLElement;
   @query(".overlay") private overlayElement!: HTMLElement;
@@ -130,6 +134,15 @@ export class RelDrawer extends LitElement {
       transform: translateX(0);
     }
 
+    /* Once settled open, drop the (now identity) transform on left/right panels
+       so their fixed-position descendants (select dropdowns, popovers, tooltips)
+       escape the transformed containing block instead of being clipped by the
+       panel. Bottom keeps its transform (used for centering). */
+    .drawer-container.open .panel[data-side="left"].settled,
+    .drawer-container.open .panel[data-side="right"].settled {
+      transform: none;
+    }
+
     /* Dragging state */
     .panel.dragging {
       transition: none;
@@ -183,36 +196,36 @@ export class RelDrawer extends LitElement {
       gap: var(--rel-spacing-sm);
     }
 
-    .title {
+    .title {
       color: var(--rel-text-label);
-      margin: 0;
+      margin: 0;
 
-      font-family: var(--rel-headings-lg-font-family);
+      font-family: var(--rel-headings-lg-font-family);
 
-      font-weight: var(--rel-headings-lg-font-weight);
+      font-weight: var(--rel-headings-lg-font-weight);
 
-      font-size: var(--rel-headings-lg-font-size);
+      font-size: var(--rel-headings-lg-font-size);
 
-      line-height: var(--rel-headings-lg-line-height);
+      line-height: var(--rel-headings-lg-line-height);
 
-      letter-spacing: var(--rel-headings-lg-letter-spacing);
+      letter-spacing: var(--rel-headings-lg-letter-spacing);
 
     }
 
-    .description {
+    .description {
       color: var(--rel-text-body);
       margin: 0;
-      opacity: 0.8;
+      opacity: 0.8;
 
-      font-family: var(--rel-body-lg-regular-font-family);
+      font-family: var(--rel-body-lg-regular-font-family);
 
-      font-weight: var(--rel-body-lg-regular-font-weight);
+      font-weight: var(--rel-body-lg-regular-font-weight);
 
-      font-size: var(--rel-body-lg-regular-font-size);
+      font-size: var(--rel-body-lg-regular-font-size);
 
-      line-height: var(--rel-body-lg-regular-line-height);
+      line-height: var(--rel-body-lg-regular-line-height);
 
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
 
     }
 
@@ -320,6 +333,27 @@ export class RelDrawer extends LitElement {
 
     document.addEventListener("keydown", this.handleKeydown);
 
+    // After the slide-in transition completes, mark the panel settled so its
+    // transform is dropped (frees fixed-position dropdowns/popovers). A timeout
+    // backstops the case where transitionend doesn't fire.
+    this.settled = false;
+    this.updateComplete.then(() => {
+      const panel = this.panelElement;
+      if (!panel) return;
+      let done = false;
+      const settle = () => {
+        if (done) return;
+        done = true;
+        this.settled = true;
+        panel.removeEventListener("transitionend", onEnd);
+      };
+      const onEnd = (e: TransitionEvent) => {
+        if (e.propertyName === "transform") settle();
+      };
+      panel.addEventListener("transitionend", onEnd);
+      setTimeout(settle, 500);
+    });
+
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
         detail: { open: true },
@@ -330,6 +364,7 @@ export class RelDrawer extends LitElement {
   }
 
   private handleClose() {
+    this.settled = false;
     this.unlockScroll();
     document.removeEventListener("keydown", this.handleKeydown);
 
@@ -537,7 +572,7 @@ export class RelDrawer extends LitElement {
 
         <div
           part="panel"
-          class="panel ${this.isDragging ? "dragging" : ""}"
+          class="panel ${this.isDragging ? "dragging" : ""} ${this.settled ? "settled" : ""}"
           data-side="${this.side}"
           style="${this.width ? `--drawer-width: ${this.width};` : ''}${this.maxHeight ? `--drawer-max-height: ${this.maxHeight};` : ''}${this.getPanelStyle()}"
           role="${this.modal ? "dialog" : "region"}"

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

@@ -14,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";
@@ -262,6 +267,20 @@ 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);
     }
@@ -561,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;
@@ -707,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/index.d.mts

@@ -472,6 +472,7 @@ declare class RelDrawer extends LitElement {
     description: string;
     private isDragging;
     private dragOffset;
+    private settled;
     private panelElement;
     private overlayElement;
     private previousFocus;
@@ -1435,6 +1436,11 @@ declare class RelTextfield extends LitElement {
     value: string;
     leftIcon?: 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. */
+    clickableRightIcon: boolean;
+    /** Accessible label for the trailing icon when it is clickable. */
+    rightIconAriaLabel?: string;
     supportingText?: string;
     state: TextFieldState;
     size: TextFieldSize;
@@ -1464,6 +1470,8 @@ declare class RelTextfield extends LitElement {
     connectedCallback(): void;
     private handleFocus;
     private handleBlur;
+    private handleRightIconClick;
+    private handleRightIconKeydown;
     private handleInput;
     render(): lit_html.TemplateResult<1>;
 }

package/dist/index.d.ts

@@ -472,6 +472,7 @@ declare class RelDrawer extends LitElement {
     description: string;
     private isDragging;
     private dragOffset;
+    private settled;
     private panelElement;
     private overlayElement;
     private previousFocus;
@@ -1435,6 +1436,11 @@ declare class RelTextfield extends LitElement {
     value: string;
     leftIcon?: 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. */
+    clickableRightIcon: boolean;
+    /** Accessible label for the trailing icon when it is clickable. */
+    rightIconAriaLabel?: string;
     supportingText?: string;
     state: TextFieldState;
     size: TextFieldSize;
@@ -1464,6 +1470,8 @@ declare class RelTextfield extends LitElement {
     connectedCallback(): void;
     private handleFocus;
     private handleBlur;
+    private handleRightIconClick;
+    private handleRightIconKeydown;
     private handleInput;
     render(): lit_html.TemplateResult<1>;
 }

package/dist/index.js

@@ -88,7 +88,7 @@ __export(index_exports, {
   RelTopbarUtilities: () => RelTopbarUtilities
 });
 module.exports = __toCommonJS(index_exports);
-var import_vars = require("./vars-WY2XCF5G.css");
+var import_vars = require("./vars-BYCEEKWJ.css");
 
 // src/components/rel-accordion/rel-accordion.ts
 var import_rel_icon = require("@reliability-design/icons/rel-icon");
@@ -595,8 +595,7 @@ RelAlert.styles = import_lit2.css`
       color: var(--rel-text-default);
     }
 
-    .alert-info .rel-message1,
-    .alert-info .rel-message2 {
+    .alert-info .rel-message1 {
       color: var(--rel-text-info);
     }
 
@@ -605,8 +604,7 @@ RelAlert.styles = import_lit2.css`
       color: var(--rel-text-default);
     }
 
-    .alert-success .rel-message1,
-    .alert-success .rel-message2 {
+    .alert-success .rel-message1 {
       color: var(--rel-text-success);
     }
 
@@ -615,18 +613,16 @@ RelAlert.styles = import_lit2.css`
       color: var(--rel-text-default);
     }
 
-    .alert-warning .rel-message1,
-    .alert-warning .rel-message2 {
+    .alert-warning .rel-message1 {
       color: var(--rel-text-warning);
     }
 
     .alert-error {
       background: var(--rel-bg-danger-light);
-      color: var(--rel-text-danger);
+      color: var(--rel-text-default);
     }
 
-    .alert-error .rel-message1,
-    .alert-error .rel-message2 {
+    .alert-error .rel-message1 {
       color: var(--rel-text-danger);
     }
 
@@ -1980,6 +1976,13 @@ RelCalendar.styles = import_lit7.css`
 
     :host([disabled]) {
       opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    /* Block interaction on the inner controls (JS also guards clicks), but keep
+       pointer-events on the host so its not-allowed cursor shows through. */
+    :host([disabled]) .day-button,
+    :host([disabled]) .nav-button {
       pointer-events: none;
     }
 
@@ -6025,6 +6028,7 @@ var RelDrawer = class extends import_lit18.LitElement {
     this.description = "";
     this.isDragging = false;
     this.dragOffset = 0;
+    this.settled = false;
     this.previousFocus = null;
     this.startY = 0;
     this.currentY = 0;
@@ -6124,6 +6128,23 @@ var RelDrawer = class extends import_lit18.LitElement {
       });
     }
     document.addEventListener("keydown", this.handleKeydown);
+    this.settled = false;
+    this.updateComplete.then(() => {
+      const panel = this.panelElement;
+      if (!panel) return;
+      let done = false;
+      const settle = () => {
+        if (done) return;
+        done = true;
+        this.settled = true;
+        panel.removeEventListener("transitionend", onEnd);
+      };
+      const onEnd = (e) => {
+        if (e.propertyName === "transform") settle();
+      };
+      panel.addEventListener("transitionend", onEnd);
+      setTimeout(settle, 500);
+    });
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
         detail: { open: true },
@@ -6133,6 +6154,7 @@ var RelDrawer = class extends import_lit18.LitElement {
     );
   }
   handleClose() {
+    this.settled = false;
     this.unlockScroll();
     document.removeEventListener("keydown", this.handleKeydown);
     if (this.previousFocus && this.previousFocus.focus) {
@@ -6230,7 +6252,7 @@ var RelDrawer = class extends import_lit18.LitElement {
 
         <div
           part="panel"
-          class="panel ${this.isDragging ? "dragging" : ""}"
+          class="panel ${this.isDragging ? "dragging" : ""} ${this.settled ? "settled" : ""}"
           data-side="${this.side}"
           style="${this.width ? `--drawer-width: ${this.width};` : ""}${this.maxHeight ? `--drawer-max-height: ${this.maxHeight};` : ""}${this.getPanelStyle()}"
           role="${this.modal ? "dialog" : "region"}"
@@ -6367,6 +6389,15 @@ RelDrawer.styles = import_lit18.css`
       transform: translateX(0);
     }
 
+    /* Once settled open, drop the (now identity) transform on left/right panels
+       so their fixed-position descendants (select dropdowns, popovers, tooltips)
+       escape the transformed containing block instead of being clipped by the
+       panel. Bottom keeps its transform (used for centering). */
+    .drawer-container.open .panel[data-side="left"].settled,
+    .drawer-container.open .panel[data-side="right"].settled {
+      transform: none;
+    }
+
     /* Dragging state */
     .panel.dragging {
       transition: none;
@@ -6421,8 +6452,6 @@ RelDrawer.styles = import_lit18.css`
     }
 
     .title {
-
-
       color: var(--rel-text-label);
       margin: 0;
 
@@ -6439,7 +6468,6 @@ RelDrawer.styles = import_lit18.css`
     }
 
     .description {
-
       color: var(--rel-text-body);
       margin: 0;
       opacity: 0.8;
@@ -6565,6 +6593,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators18.state)()
 ], RelDrawer.prototype, "dragOffset", 2);
+__decorateClass([
+  (0, import_decorators18.state)()
+], RelDrawer.prototype, "settled", 2);
 __decorateClass([
   (0, import_decorators18.query)(".panel")
 ], RelDrawer.prototype, "panelElement", 2);
@@ -14960,6 +14991,7 @@ var RelTextfield = class extends import_lit52.LitElement {
     this.placeholder = "";
     this.type = "text";
     this.value = "";
+    this.clickableRightIcon = false;
     this.state = "default";
     this.size = "medium";
     this.floatingLabel = false;
@@ -15006,6 +15038,20 @@ var RelTextfield = class extends import_lit52.LitElement {
       this.internalState = "default";
     }
   }
+  handleRightIconClick(e) {
+    if (!this.clickableRightIcon) return;
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent("rel-right-icon-click", { bubbles: true, composed: true })
+    );
+  }
+  handleRightIconKeydown(e) {
+    if (!this.clickableRightIcon) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.handleRightIconClick(e);
+    }
+  }
   handleInput(e) {
     const input = e.target;
     this.value = input.value;
@@ -15124,7 +15170,17 @@ var RelTextfield = class extends import_lit52.LitElement {
 
           ${inputTemplate}
 
-          ${!this.multiline && this.rightIcon ? import_lit52.html`<rel-icon name="${this.rightIcon}" size="sm" class="icon right"></rel-icon>` : ""}
+          ${!this.multiline && this.rightIcon ? import_lit52.html`<rel-icon
+                part="right-icon"
+                name="${this.rightIcon}"
+                size="${this.clickableRightIcon ? "md" : "sm"}"
+                class="icon right ${this.clickableRightIcon ? "clickable" : ""}"
+                role="${this.clickableRightIcon ? "button" : import_lit52.nothing}"
+                tabindex="${this.clickableRightIcon ? "0" : import_lit52.nothing}"
+                aria-label="${this.clickableRightIcon ? this.rightIconAriaLabel ?? import_lit52.nothing : import_lit52.nothing}"
+                @click="${(e) => this.handleRightIconClick(e)}"
+                @keydown="${(e) => this.handleRightIconKeydown(e)}"
+              ></rel-icon>` : ""}
         </div>
 
         ${belowTemplate}
@@ -15334,6 +15390,20 @@ RelTextfield.styles = import_lit52.css`
       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);
     }
@@ -15630,6 +15700,12 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators52.property)({ type: String })
 ], RelTextfield.prototype, "rightIcon", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: Boolean, attribute: "clickable-right-icon" })
+], RelTextfield.prototype, "clickableRightIcon", 2);
+__decorateClass([
+  (0, import_decorators52.property)({ type: String, attribute: "right-icon-aria-label" })
+], RelTextfield.prototype, "rightIconAriaLabel", 2);
 __decorateClass([
   (0, import_decorators52.property)({ type: String })
 ], RelTextfield.prototype, "supportingText", 2);