@reliability-design/web 1.4.0 → 1.4.1

package/dist/index.mjs

@@ -10,7 +10,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/index.ts
-import "./vars-WY2XCF5G.css";
+import "./vars-BYCEEKWJ.css";
 
 // src/components/rel-accordion/rel-accordion.ts
 import "@reliability-design/icons/rel-icon";
@@ -517,8 +517,7 @@ RelAlert.styles = css2`
       color: var(--rel-text-default);
     }
 
-    .alert-info .rel-message1,
-    .alert-info .rel-message2 {
+    .alert-info .rel-message1 {
       color: var(--rel-text-info);
     }
 
@@ -527,8 +526,7 @@ RelAlert.styles = css2`
       color: var(--rel-text-default);
     }
 
-    .alert-success .rel-message1,
-    .alert-success .rel-message2 {
+    .alert-success .rel-message1 {
       color: var(--rel-text-success);
     }
 
@@ -537,18 +535,16 @@ RelAlert.styles = css2`
       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);
     }
 
@@ -1902,6 +1898,13 @@ RelCalendar.styles = css7`
 
     :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;
     }
 
@@ -5947,6 +5950,7 @@ var RelDrawer = class extends LitElement18 {
     this.description = "";
     this.isDragging = false;
     this.dragOffset = 0;
+    this.settled = false;
     this.previousFocus = null;
     this.startY = 0;
     this.currentY = 0;
@@ -6046,6 +6050,23 @@ var RelDrawer = class extends LitElement18 {
       });
     }
     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 },
@@ -6055,6 +6076,7 @@ var RelDrawer = class extends LitElement18 {
     );
   }
   handleClose() {
+    this.settled = false;
     this.unlockScroll();
     document.removeEventListener("keydown", this.handleKeydown);
     if (this.previousFocus && this.previousFocus.focus) {
@@ -6152,7 +6174,7 @@ var RelDrawer = class extends LitElement18 {
 
         <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"}"
@@ -6289,6 +6311,15 @@ RelDrawer.styles = css18`
       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;
@@ -6343,8 +6374,6 @@ RelDrawer.styles = css18`
     }
 
     .title {
-
-
       color: var(--rel-text-label);
       margin: 0;
 
@@ -6361,7 +6390,6 @@ RelDrawer.styles = css18`
     }
 
     .description {
-
       color: var(--rel-text-body);
       margin: 0;
       opacity: 0.8;
@@ -6487,6 +6515,9 @@ __decorateClass([
 __decorateClass([
   state6()
 ], RelDrawer.prototype, "dragOffset", 2);
+__decorateClass([
+  state6()
+], RelDrawer.prototype, "settled", 2);
 __decorateClass([
   query4(".panel")
 ], RelDrawer.prototype, "panelElement", 2);
@@ -14882,6 +14913,7 @@ var RelTextfield = class extends LitElement52 {
     this.placeholder = "";
     this.type = "text";
     this.value = "";
+    this.clickableRightIcon = false;
     this.state = "default";
     this.size = "medium";
     this.floatingLabel = false;
@@ -14928,6 +14960,20 @@ var RelTextfield = class extends LitElement52 {
       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;
@@ -15046,7 +15092,17 @@ var RelTextfield = class extends LitElement52 {
 
           ${inputTemplate}
 
-          ${!this.multiline && this.rightIcon ? html52`<rel-icon name="${this.rightIcon}" size="sm" class="icon right"></rel-icon>` : ""}
+          ${!this.multiline && this.rightIcon ? html52`<rel-icon
+                part="right-icon"
+                name="${this.rightIcon}"
+                size="${this.clickableRightIcon ? "md" : "sm"}"
+                class="icon right ${this.clickableRightIcon ? "clickable" : ""}"
+                role="${this.clickableRightIcon ? "button" : nothing8}"
+                tabindex="${this.clickableRightIcon ? "0" : nothing8}"
+                aria-label="${this.clickableRightIcon ? this.rightIconAriaLabel ?? nothing8 : nothing8}"
+                @click="${(e) => this.handleRightIconClick(e)}"
+                @keydown="${(e) => this.handleRightIconKeydown(e)}"
+              ></rel-icon>` : ""}
         </div>
 
         ${belowTemplate}
@@ -15256,6 +15312,20 @@ RelTextfield.styles = css49`
       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);
     }
@@ -15552,6 +15622,12 @@ __decorateClass([
 __decorateClass([
   property46({ type: String })
 ], RelTextfield.prototype, "rightIcon", 2);
+__decorateClass([
+  property46({ type: Boolean, attribute: "clickable-right-icon" })
+], RelTextfield.prototype, "clickableRightIcon", 2);
+__decorateClass([
+  property46({ type: String, attribute: "right-icon-aria-label" })
+], RelTextfield.prototype, "rightIconAriaLabel", 2);
 __decorateClass([
   property46({ type: String })
 ], RelTextfield.prototype, "supportingText", 2);