@reliability-design/web 1.0.2 → 1.0.3

package/dist/index.mjs

@@ -9,6 +9,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
+// src/index.ts
+import "./vars-6ZIUPIU4.css";
+
 // src/components/rel-accordion/rel-accordion.ts
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -20,6 +23,13 @@ var RelAccordion = class extends LitElement {
   }
   toggle() {
     this.open = !this.open;
+    this.dispatchEvent(
+      new CustomEvent("open-change", {
+        detail: this.open,
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   chevron() {
     return html`
@@ -39,7 +49,10 @@ var RelAccordion = class extends LitElement {
           </div>
         </div>
 
-        ${this.open ? html`<div class="body"><slot></slot></div>` : ""}
+        <!-- IMPORTANT: slot is ALWAYS rendered -->
+        <div class="body ${this.open ? "open" : ""}">
+          <slot></slot>
+        </div>
       </div>
     `;
   }
@@ -54,9 +67,8 @@ RelAccordion.styles = css`
     .accordion {
       background: var(--rel-colors-white);
       border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200); /* 8px */
+      border-radius: var(--rel-borders-radius-border-radius-200);
       box-shadow: var(--rel-shadows-shadow-100);
-      transition: all 0.2s ease;
       overflow: hidden;
     }
 
@@ -65,13 +77,13 @@ RelAccordion.styles = css`
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: var(--rel-spacing-space-md); /* 16px */
+      padding: var(--rel-spacing-space-md);
       cursor: pointer;
       user-select: none;
     }
 
     .title {
-      font-size: var(--rel-fontSizes-lg); /* 20px */
+      font-size: var(--rel-fontSizes-lg);
       font-weight: var(--rel-fontWeights-medium);
       color: var(--rel-colors-black);
     }
@@ -96,36 +108,31 @@ RelAccordion.styles = css`
       stroke-linejoin: round;
     }
 
-    .rotated {
+    .icon.rotated {
       transform: rotate(180deg);
     }
 
     /* BODY ------------------------------------------------------ */
     .body {
-      padding: var(--rel-spacing-space-xl) var(--rel-spacing-space-md)
-        var(--rel-spacing-space-lg);
-      /* 24px 16px 20px */
-      font-size: var(--rel-fontSizes-lg); /* 20px */
+      overflow: hidden;
+      max-height: 0;
+      padding: 0 var(--rel-spacing-space-md);
+      font-size: var(--rel-fontSizes-lg);
       color: var(--rel-colors-gray-primary);
-      animation: fadeIn 0.2s ease;
+      transition: max-height 0.25s ease, padding 0.2s ease;
     }
 
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(-4px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
+    .body.open {
+      max-height: 1000px; /* sufficiently large */
+      padding: var(--rel-spacing-space-xl) var(--rel-spacing-space-md)
+        var(--rel-spacing-space-lg);
     }
   `;
 __decorateClass([
   property({ type: String })
 ], RelAccordion.prototype, "title", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, reflect: true })
 ], RelAccordion.prototype, "open", 2);
 RelAccordion = __decorateClass([
   customElement("rel-accordion")
@@ -142,45 +149,95 @@ var RelAlert = class extends LitElement2 {
     this.dismissible = true;
     this.dismissed = false;
   }
+  dismissAlert() {
+    this.dismissed = true;
+    this.dispatchEvent(
+      new CustomEvent("dismiss", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   get iconSvg() {
     switch (this.type) {
       case "info":
-        return html2`<svg viewBox="0 0 18 18" fill="none">
-          <path
-            d="M9 4.75c-.24 0-.44.08-.61.25-.16.16-.24.36-.24.6 0 .24.08.44.24.61.17.17.37.25.61.25.24 0 .44-.08.61-.25.17-.16.24-.36.24-.61 0-.24-.08-.44-.24-.6-.17-.17-.37-.25-.61-.25Zm.85 3.4h-1.7v5.1h1.7V8.15ZM9 .5c1.18 0 2.29.22 3.32.67 1.03.45 1.93 1.05 2.69 1.81.75.76 1.35 1.66 1.8 2.69.46 1.03.68 2.14.68 3.33 0 1.18-.22 2.29-.68 3.32-.45 1.04-1.05 1.93-1.8 2.69-.76.75-1.66 1.35-2.69 1.8-1.04.46-2.15.68-3.32.68-1.18 0-2.29-.22-3.32-.68-1.04-.45-1.93-1.05-2.69-1.8-.75-.76-1.35-1.66-1.8-2.69C1.92 11.28 1.7 10.17 1.7 9c0-1.18.22-2.29.68-3.32.45-1.04 1.05-1.93 1.8-2.69.76-.75 1.66-1.35 2.69-1.8C6.71.73 7.82.5 9 .5Z"
-            fill="#4A90E2"
-          />
-        </svg>`;
+        return html2`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+          >
+            <path
+              d="M9 4.75C8.75917 4.75 8.55715 4.8316 8.39395 4.9948C8.23132 5.15743 8.15 5.35917 8.15 5.6C8.15 5.84083 8.23132 6.04285 8.39395 6.20605C8.55715 6.36868 8.75917 6.45 9 6.45C9.24083 6.45 9.44257 6.36868 9.6052 6.20605C9.7684 6.04285 9.85 5.84083 9.85 5.6C9.85 5.35917 9.7684 5.15743 9.6052 4.9948C9.44257 4.8316 9.24083 4.75 9 4.75ZM9.85 8.15L8.15 8.15L8.15 13.25L9.85 13.25L9.85 8.15ZM9 0.499999C10.1758 0.499999 11.2808 0.723266 12.315 1.1698C13.3492 1.61633 14.2488 2.22182 15.0138 2.98625C15.7788 3.75068 16.3842 4.65027 16.8302 5.685C17.2762 6.71973 17.4994 7.82473 17.5 9C17.5006 10.1753 17.2773 11.2803 16.8302 12.315C16.3842 13.3492 15.7787 14.2487 15.0137 15.0137C14.2487 15.7787 13.3492 16.3845 12.315 16.831C11.2808 17.2776 10.1758 17.5006 9 17.5C7.82417 17.4994 6.71917 17.2764 5.685 16.831C4.65083 16.3845 3.75125 15.7787 2.98625 15.0137C2.22125 14.2487 1.61577 13.3492 1.1698 12.315C0.723834 11.2808 0.500567 10.1758 0.500001 9C0.499434 7.82417 0.722701 6.71917 1.1698 5.685C1.61577 4.65083 2.22125 3.75125 2.98625 2.98625C3.75125 2.22125 4.65084 1.61577 5.685 1.1698C6.71917 0.723832 7.82417 0.500566 9 0.499999ZM9 2.2C7.10167 2.2 5.49375 2.85875 4.17625 4.17625C2.85875 5.49375 2.2 7.10167 2.2 9C2.2 10.8983 2.85875 12.5062 4.17625 13.8237C5.49375 15.1412 7.10167 15.8 9 15.8C10.8983 15.8 12.5062 15.1412 13.8237 13.8237C15.1412 12.5062 15.8 10.8983 15.8 9C15.8 7.10167 15.1413 5.49375 13.8238 4.17625C12.5063 2.85875 10.8983 2.2 9 2.2Z"
+              fill="#4A90E2"
+            />
+          </svg>
+        `;
       case "success":
-        return html2`<svg viewBox="0 0 18 18" fill="none">
-          <path
-            d="M7.81 12.91 13.8 6.92l-1.19-1.19L7.81 10.53 5.39 8.11 4.2 9.3l3.61 3.61ZM9 17.5a8.49 8.49 0 1 1 0-17 8.49 8.49 0 0 1 0 17Z"
-            fill="#4CAA47"
-          />
-        </svg>`;
+        return html2`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+          >
+            <path
+              d="M7.81 12.91L13.8025 6.9175L12.6125 5.7275L7.81 10.53L5.3875 8.1075L4.1975 9.2975L7.81 12.91ZM9 17.5C7.82417 17.5 6.71917 17.2767 5.685 16.8302C4.65083 16.3837 3.75125 15.7782 2.98625 15.0138C2.22125 14.2493 1.61577 13.3497 1.1698 12.315C0.723834 11.2803 0.500568 10.1753 0.500001 9C0.499434 7.82473 0.722701 6.71973 1.1698 5.685C1.61577 4.65083 2.22125 3.75125 2.98625 2.98625C3.75125 2.22125 4.65083 1.61548 5.685 1.16895C6.71917 0.722418 7.82417 0.499434 9 0.500001C10.1758 0.500568 11.2808 0.723551 12.315 1.16895C13.3492 1.61548 14.2488 2.22125 15.0138 2.98625C15.7788 3.75125 16.3842 4.65083 16.8302 5.685C17.2762 6.71917 17.4994 7.82417 17.5 9C17.5006 10.1758 17.2773 11.2808 16.8302 12.315C16.3842 13.3492 15.7788 14.2488 15.0138 15.0138C14.2488 15.7788 13.3492 16.3842 12.315 16.8302C11.2808 17.2762 10.1758 17.4994 9 17.5ZM9 15.8C10.8983 15.8 12.5062 15.1412 13.8237 13.8237C15.1412 12.5062 15.8 10.8983 15.8 9C15.8 7.10167 15.1412 5.49375 13.8237 4.17625C12.5062 2.85875 10.8983 2.2 9 2.2C7.10167 2.2 5.49375 2.85875 4.17625 4.17625C2.85875 5.49375 2.2 7.10167 2.2 9C2.2 10.8983 2.85875 12.5062 4.17625 13.8237C5.49375 15.1412 7.10167 15.8 9 15.8Z"
+              fill="#4CAA47"
+            />
+          </svg>
+        `;
       case "warning":
-        return html2`<svg viewBox="0 0 16 14" fill="none">
-          <path
-            d="M0 14 8 0l8 14H0Zm2.51-1.47h10.98L8 2.95 2.51 12.53ZM8 11.79c.21 0 .38-.07.52-.21.14-.14.21-.31.21-.52 0-.21-.07-.38-.21-.52A.7.7 0 0 0 8 10.32a.7.7 0 0 0-.52.21c-.14.14-.21.31-.21.52 0 .21.07.38.21.52.14.14.31.21.52.21Zm-.73-2.21h1.46V5.89H7.27v3.69Z"
-            fill="#FF6D00"
-          />
-        </svg>`;
+        return html2`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="14"
+            viewBox="0 0 16 14"
+            fill="none"
+          >
+            <path
+              d="M0 14L8 0L16 14H0ZM2.50909 12.5263H13.4909L8 2.94737L2.50909 12.5263ZM8 11.7895C8.20606 11.7895 8.37891 11.7187 8.51855 11.5773C8.6577 11.4363 8.72727 11.2614 8.72727 11.0526C8.72727 10.8439 8.6577 10.669 8.51855 10.528C8.37891 10.3865 8.20606 10.3158 8 10.3158C7.79394 10.3158 7.62133 10.3865 7.48218 10.528C7.34255 10.669 7.27273 10.8439 7.27273 11.0526C7.27273 11.2614 7.34255 11.4363 7.48218 11.5773C7.62133 11.7187 7.79394 11.7895 8 11.7895ZM7.27273 9.57895H8.72727V5.89474H7.27273V9.57895Z"
+              fill="#FF6D00"
+            />
+          </svg>
+        `;
       case "error":
-        return html2`<svg viewBox="0 0 18 18" fill="none">
-          <path
-            d="M9 13.25c.24 0 .44-.08.61-.24.17-.17.24-.38.24-.61 0-.24-.08-.44-.24-.61-.17-.16-.37-.24-.61-.24-.24 0-.44.08-.61.24-.17.17-.24.37-.24.61 0 .24.08.44.24.61.17.16.37.24.61.24Zm-.85-3.4h1.7V4.75h-1.7v5.1ZM9 17.5c-1.18 0-2.29-.23-3.32-.68C4.64 16.37 3.74 15.77 2.99 15.02c-.75-.75-1.35-1.65-1.8-2.69C.73 11.29.5 10.18.5 9c0-1.18.23-2.29.68-3.32.45-1.03 1.05-1.93 1.8-2.69C5.03 1.23 5.94.63 6.97.18 8 .72 9.12.5 10.3.5c1.17 0 2.28.23 3.32.68 1.03.45 1.93 1.05 2.68 1.8.75.76 1.35 1.66 1.8 2.69.46 1.03.68 2.14.68 3.33 0 1.18-.22 2.29-.68 3.32-.45 1.04-1.05 1.93-1.8 2.69-.76.75-1.66 1.35-2.69 1.8-1.04.46-2.15.68-3.32.68Z"
-            fill="#C62828"
-          />
-        </svg>`;
+        return html2`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+          >
+            <path
+              d="M9 13.25C9.24083 13.25 9.44285 13.1684 9.60605 13.0052C9.76868 12.8426 9.85 12.6408 9.85 12.4C9.85 12.1592 9.76868 11.9571 9.60605 11.7939C9.44285 11.6313 9.24083 11.55 9 11.55C8.75917 11.55 8.55743 11.6313 8.3948 11.7939C8.2316 11.9571 8.15 12.1592 8.15 12.4C8.15 12.6408 8.2316 12.8426 8.3948 13.0052C8.55743 13.1684 8.75917 13.25 9 13.25ZM8.15 9.85H9.85V4.75H8.15V9.85ZM9 17.5C7.82417 17.5 6.71917 17.2767 5.685 16.8302C4.65083 16.3837 3.75125 15.7782 2.98625 15.0138C2.22125 14.2493 1.61577 13.3497 1.1698 12.315C0.723834 11.2803 0.500568 10.1753 0.500001 9C0.499434 7.82473 0.722701 6.71973 1.1698 5.685C1.61577 4.65083 2.22125 3.75125 2.98625 2.98625C3.75125 2.22125 4.65083 1.61548 5.685 1.16895C6.71917 0.722418 7.82417 0.499434 9 0.500001C10.1758 0.500568 11.2808 0.723551 12.315 1.16895C13.3492 1.61548 14.2488 2.22125 15.0138 2.98625C15.7788 3.75125 16.3842 4.65083 16.8302 5.685C17.2762 6.71917 17.4994 7.82417 17.5 9C17.5006 10.1758 17.2773 11.2808 16.8302 12.315C16.3842 13.3492 15.7788 14.2488 15.0138 15.0138C14.2488 15.7788 13.3492 16.3842 12.315 16.8302C11.2808 17.2762 10.1758 17.4994 9 17.5ZM9 15.8C10.8983 15.8 12.5062 15.1412 13.8237 13.8237C15.1412 12.5062 15.8 10.8983 15.8 9C15.8 7.10167 15.1412 5.49375 13.8237 4.17625C12.5062 2.85875 10.8983 2.2 9 2.2C7.10167 2.2 5.49375 2.85875 4.17625 4.17625C2.85875 5.49375 2.2 7.10167 2.2 9C2.2 10.8983 2.85875 12.5062 4.17625 13.8237C5.49375 15.1412 7.10167 15.8 9 15.8Z"
+              fill="#C62828"
+            />
+          </svg>
+        `;
       default:
-        return html2``;
+        return html2`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 18 18"
+            fill="none"
+          >
+            <path
+              d="M9 4.75C8.75917 4.75 8.55715 4.8316 8.39395 4.9948C8.23132 5.15743 8.15 5.35917 8.15 5.6C8.15 5.84083 8.23132 6.04285 8.39395 6.20605C8.55715 6.36868 8.75917 6.45 9 6.45C9.24083 6.45 9.44257 6.36868 9.6052 6.20605C9.7684 6.04285 9.85 5.84083 9.85 5.6C9.85 5.35917 9.7684 5.15743 9.6052 4.9948C9.44257 4.8316 9.24083 4.75 9 4.75ZM9.85 8.15L8.15 8.15L8.15 13.25L9.85 13.25L9.85 8.15ZM9 0.499999C10.1758 0.499999 11.2808 0.723266 12.315 1.1698C13.3492 1.61633 14.2488 2.22182 15.0138 2.98625C15.7788 3.75068 16.3842 4.65027 16.8302 5.685C17.2762 6.71973 17.4994 7.82473 17.5 9C17.5006 10.1753 17.2773 11.2803 16.8302 12.315C16.3842 13.3492 15.7787 14.2487 15.0137 15.0137C14.2487 15.7787 13.3492 16.3845 12.315 16.831C11.2808 17.2776 10.1758 17.5006 9 17.5C7.82417 17.4994 6.71917 17.2764 5.685 16.831C4.65083 16.3845 3.75125 15.7787 2.98625 15.0137C2.22125 14.2487 1.61577 13.3492 1.1698 12.315C0.723834 11.2808 0.500567 10.1758 0.500001 9C0.499434 7.82417 0.722701 6.71917 1.1698 5.685C1.61577 4.65083 2.22125 3.75125 2.98625 2.98625C3.75125 2.22125 4.65084 1.61577 5.685 1.1698C6.71917 0.723832 7.82417 0.500566 9 0.499999ZM9 2.2C7.10167 2.2 5.49375 2.85875 4.17625 4.17625C2.85875 5.49375 2.2 7.10167 2.2 9C2.2 10.8983 2.85875 12.5062 4.17625 13.8237C5.49375 15.1412 7.10167 15.8 9 15.8C10.8983 15.8 12.5062 15.1412 13.8237 13.8237C15.1412 12.5062 15.8 10.8983 15.8 9C15.8 7.10167 15.1413 5.49375 13.8238 4.17625C12.5063 2.85875 10.8983 2.2 9 2.2Z"
+              fill="black"
+            />
+          </svg>
+        `;
     }
   }
-  dismissAlert() {
-    this.dismissed = true;
-  }
   render() {
-    if (this.dismissed) return null;
     return html2`
       <div class="rel-alert alert-${this.type}">
         <div class="rel-icon">${this.iconSvg}</div>
@@ -188,15 +245,15 @@ var RelAlert = class extends LitElement2 {
         <div class="rel-content">
           <p class="rel-message1">${this.message1}</p>
 
-          ${this.message2 ? html2`<p class="rel-message2">${this.message2}</p>` : ""}
-          ${this.urlText && this.urlHref ? html2`<a class="rel-link" href="${this.urlHref}"
-                >${this.urlText}</a
-              >` : ""}
+          ${this.message2 ? html2`<p class="rel-message2">${this.message2}</p>` : null}
+          ${this.urlText && this.urlHref ? html2`<a class="rel-link" href=${this.urlHref}>
+                ${this.urlText}
+              </a>` : null}
         </div>
 
         ${this.dismissible ? html2`<button class="rel-close" @click=${this.dismissAlert}>
               ✕
-            </button>` : ""}
+            </button>` : null}
       </div>
     `;
   }
@@ -207,14 +264,16 @@ RelAlert.styles = css2`
       font-family: var(--rel-fontFamilies-primary);
     }
 
+    :host([dismissed]) {
+      display: none;
+    }
+
     .rel-alert {
       display: flex;
       align-items: center;
-      gap: var(--rel-spacing-space-xs); /* 8px */
+      gap: var(--rel-spacing-space-xs);
       padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
-      /* 12px vertical, 16px horizontal */
-      border-radius: var(--rel-borders-radius-border-radius-200); /* 8px */
-      width: fit-content;
+      border-radius: var(--rel-borders-radius-border-radius-200);
       min-width: 360px;
       box-sizing: border-box;
     }
@@ -226,8 +285,6 @@ RelAlert.styles = css2`
     }
 
     .rel-message1 {
-      display: flex;
-      align-items: center;
       margin: 0;
       font-size: var(--rel-fontSizes-md);
       font-weight: var(--rel-fontWeights-medium);
@@ -236,16 +293,9 @@ RelAlert.styles = css2`
     .rel-message2 {
       margin: 0;
       font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-regular);
       opacity: 0.9;
     }
 
-    .rel-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
     .rel-icon svg {
       width: 16px;
       height: 16px;
@@ -255,8 +305,8 @@ RelAlert.styles = css2`
       font-size: var(--rel-fontSizes-sm);
       font-weight: var(--rel-fontWeights-medium);
       text-decoration: underline;
-      margin-top: 2px;
       color: inherit;
+      margin-top: 2px;
     }
 
     .rel-close {
@@ -264,21 +314,14 @@ RelAlert.styles = css2`
       background: none;
       border: none;
       cursor: pointer;
-      width: 16px;
-      height: 16px;
       opacity: 0.6;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
     }
 
     .rel-close:hover {
       opacity: 1;
     }
 
-    /* COLORS — using token system */
-
+    /* COLORS */
     .alert-info {
       background: var(--rel-background-info);
       color: var(--rel-text-info);
@@ -324,7 +367,7 @@ __decorateClass([
   property2({ type: Boolean })
 ], RelAlert.prototype, "dismissible", 2);
 __decorateClass([
-  property2({ type: Boolean })
+  property2({ type: Boolean, reflect: true })
 ], RelAlert.prototype, "dismissed", 2);
 RelAlert = __decorateClass([
   customElement2("rel-alert")
@@ -345,7 +388,7 @@ var RelAvatar = class extends LitElement3 {
   render() {
     return html3`
       <div class="avatar avatar-${this.size}">
-        ${this.type === "image" ? html3`<img src=${this.src} alt=${this.alt} />` : this.type === "text" ? html3`<span>${this.text}</span>` : html3`<span class="icon-slot"><slot></slot></span>`}
+        ${this.type === "image" && this.src ? html3`<img src=${this.src} alt=${this.alt} />` : this.type === "text" ? html3`<span>${this.text}</span>` : html3`<span class="icon-slot"><slot></slot></span>`}
       </div>
     `;
   }
@@ -371,35 +414,29 @@ RelAvatar.styles = css3`
       text-transform: uppercase;
     }
 
-    /* -------------------------
-        CORRECTED SIZE CLASSES
-    ------------------------- */
+    /* Sizes */
     .avatar-lg {
       width: 40px;
       height: 40px;
       font-size: var(--rel-fontSizes-xl);
-      line-height: 38px;
     }
 
     .avatar-md {
       width: 32px;
       height: 32px;
       font-size: var(--rel-fontSizes-lg);
-      line-height: 32px;
     }
 
     .avatar-sm {
       width: 24px;
       height: 24px;
       font-size: var(--rel-fontSizes-md);
-      line-height: 24px;
     }
 
     .avatar-xs {
       width: 18px;
       height: 18px;
       font-size: var(--rel-fontSizes-xs);
-      line-height: 18px;
     }
 
     img {
@@ -416,20 +453,16 @@ RelAvatar.styles = css3`
       justify-content: center;
     }
 
-    .icon-slot ::slotted(*) {
-      font-size: var(--rel-fontSizes-md);
-    }
-
     .icon-slot ::slotted(svg) {
       width: 50%;
       height: 50%;
     }
   `;
 __decorateClass([
-  property3({ type: String })
+  property3({ type: String, reflect: true })
 ], RelAvatar.prototype, "size", 2);
 __decorateClass([
-  property3({ type: String })
+  property3({ type: String, reflect: true })
 ], RelAvatar.prototype, "type", 2);
 __decorateClass([
   property3({ type: String })
@@ -458,9 +491,10 @@ var RelBadge = class extends LitElement4 {
     return ["badge", `badge-${this.size}`, `badge-${this.variant}`].join(" ");
   }
   render() {
-    const isDot = this.variant === "dot";
     return html4`
-      <span class="${this.classes}">${isDot ? "" : this.number}</span>
+      <span class="${this.classes}">
+        ${this.variant === "number" ? this.number : null}
+      </span>
     `;
   }
 };
@@ -473,14 +507,14 @@ RelBadge.styles = css4`
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      font-family: "Poppins", sans-serif;
+      font-family: var(--rel-fontFamilies-primary);
       font-weight: 600;
       background-color: var(--rel-colors-red-primary);
       color: var(--rel-colors-white);
       border-radius: 50%;
     }
 
-    /* PERFECT CIRCLES — FIXED SIZES */
+    /* NUMBER BADGES */
     .badge-sm {
       width: 20px;
       height: 20px;
@@ -499,27 +533,30 @@ RelBadge.styles = css4`
       font-size: 20px;
     }
 
-    /* DOT — smaller circle */
-    .badge-dot {
-      width: 10px !important;
-      height: 10px !important;
-      padding: 0 !important;
+    /* DOT BADGES */
+    .badge-dot.badge-sm {
+      width: 8px;
+      height: 8px;
     }
 
-    .badge-number {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .badge-dot.badge-md {
+      width: 10px;
+      height: 10px;
+    }
+
+    .badge-dot.badge-lg {
+      width: 12px;
+      height: 12px;
     }
   `;
 __decorateClass([
   property4({ type: String })
 ], RelBadge.prototype, "number", 2);
 __decorateClass([
-  property4({ type: String })
+  property4({ type: String, reflect: true })
 ], RelBadge.prototype, "size", 2);
 __decorateClass([
-  property4({ type: String })
+  property4({ type: String, reflect: true })
 ], RelBadge.prototype, "variant", 2);
 RelBadge = __decorateClass([
   customElement4("rel-badge")
@@ -538,22 +575,21 @@ var RelBreadcrumbs = class extends LitElement5 {
       <nav aria-label="Breadcrumb">
         <ol>
           ${this.items.map((item, index) => {
-      const last = index === this.items.length - 1;
+      const isLast = index === this.items.length - 1;
       return html5`
               <li>
-                ${item.url && !last ? html5`<a href="${item.url}">${item.label}</a>` : html5`<span class="current">${item.label}</span>`}
-                ${!last ? html5`
-                      <svg viewBox="0 0 24 24">
+                ${item.url && !isLast ? html5`<a href=${item.url}>${item.label}</a>` : html5`<span class="current">${item.label}</span>`}
+                ${!isLast ? html5`
+                      <svg viewBox="0 0 24 24" aria-hidden="true">
                         <polyline
                           points="9 18 15 12 9 6"
                           fill="none"
-                          stroke="currentColor"
                           stroke-width="2"
                           stroke-linecap="round"
                           stroke-linejoin="round"
-                        ></polyline>
+                        />
                       </svg>
-                    ` : ""}
+                    ` : null}
               </li>
             `;
     })}
@@ -571,7 +607,6 @@ RelBreadcrumbs.styles = css5`
     }
 
     nav {
-      display: block;
       width: 100%;
     }
 
@@ -607,7 +642,7 @@ RelBreadcrumbs.styles = css5`
     }
 
     svg {
-      stroke: var(--rel-colors-gray-text);
+      stroke: currentColor;
       width: 16px;
       height: 16px;
       margin: 0 10px;
@@ -637,13 +672,30 @@ var RelButton = class extends LitElement6 {
       `btn-${this.variant}`,
       `tone-${this.tone}`,
       `size-${this.size}`,
-      `border-${this.border}`,
-      this.disabled ? "btn-disabled" : ""
+      `border-${this.border}`
     ].join(" ");
   }
+  handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new MouseEvent("click", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   render() {
     return html6`
-      <button class="${this.classes}" ?disabled=${this.disabled}>
+      <button
+        class="${this.classes}"
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+        aria-disabled=${this.disabled}
+      >
         <slot></slot>
       </button>
     `;
@@ -667,9 +719,7 @@ RelButton.styles = css6`
       outline: none;
     }
 
-    /* -------------------------
-        SIZES (Figma)
-    -------------------------- */
+    /* Sizes */
     .size-small {
       height: 32px;
       padding: 0 var(--rel-spacing-space-md);
@@ -688,9 +738,7 @@ RelButton.styles = css6`
       font-size: var(--rel-fontSizes-lg);
     }
 
-    /* -------------------------
-        BORDER RADII (Tokens)
-    -------------------------- */
+    /* Borders */
     .border-corner-radius {
       border-radius: var(--rel-borders-radius-border-radius-500);
     }
@@ -703,24 +751,15 @@ RelButton.styles = css6`
       border-radius: var(--rel-borders-radius-border-radius-0);
     }
 
-    /* -------------------------
-        DISABLED STATE
-    -------------------------- */
-    :host([disabled]) button,
-    button:disabled {
+    /* Disabled */
+    :host([disabled]) button {
       cursor: not-allowed;
       background-color: var(--rel-colors-gray-border) !important;
       color: var(--rel-colors-gray-disabled-text) !important;
-      border-color: var(--rel-colors-gray-border) !important;
-      opacity: 1;
       pointer-events: none;
     }
 
-    /* -------------------------
-        VARIANTS & TONES
-    -------------------------- */
-
-    /* DEFAULT */
+    /* Variants & tones (unchanged) */
     .btn-default.tone-default {
       background: var(--rel-colors-gray-primary);
       color: var(--rel-colors-white);
@@ -734,7 +773,6 @@ RelButton.styles = css6`
       color: var(--rel-colors-white);
     }
 
-    /* PRIMARY */
     .btn-primary.tone-default {
       background: var(--rel-colors-green-primary);
       color: var(--rel-colors-black);
@@ -748,27 +786,23 @@ RelButton.styles = css6`
       color: var(--rel-colors-white);
     }
 
-    /* SECONDARY */
     .btn-secondary {
       background: var(--rel-colors-white);
       border: 1px solid var(--rel-colors-black);
       color: var(--rel-colors-black);
     }
 
-    /* TEXT */
     .btn-text {
       background: transparent;
       color: var(--rel-colors-black);
     }
 
-    /* LINK */
     .btn-link {
       background: transparent;
       color: var(--rel-colors-blue-primary);
       text-decoration: underline;
     }
 
-    /* ICON */
     .btn-icon {
       width: 40px;
       height: 40px;
@@ -778,32 +812,14 @@ RelButton.styles = css6`
       color: var(--rel-colors-black);
     }
 
-    /* -------------------------
-        STATES: Hover / Active
-    -------------------------- */
-    button:hover:not(.btn-disabled) {
+    button:hover:not(:disabled) {
       filter: brightness(0.92);
     }
 
-    button:active:not(.btn-disabled) {
+    button:active:not(:disabled) {
       transform: scale(0.97);
     }
 
-    /* TEXT BUTTON — hover border */
-    .btn-text:not(.btn-disabled):hover {
-      border: 1px solid var(--rel-colors-black);
-      text-decoration: none;
-    }
-
-    /* LINK BUTTON — hover border */
-    .btn-link:not(.btn-disabled):hover {
-      border: 1px solid var(--rel-colors-blue-primary);
-      text-decoration: underline;
-    }
-
-    /* -------------------------
-        FOCUS RING
-    -------------------------- */
     button:focus-visible {
       outline: 2px solid var(--rel-colors-blue-primary);
       outline-offset: 2px;
@@ -833,30 +849,31 @@ import { LitElement as LitElement7, html as html7, css as css7 } from "lit";
 import { customElement as customElement7 } from "lit/decorators.js";
 var RelCard = class extends LitElement7 {
   render() {
-    return html7` <div class="card"><slot></slot></div> `;
+    return html7`
+      <div class="card">
+        <slot></slot>
+      </div>
+    `;
   }
 };
 RelCard.styles = css7`
     :host {
       display: block;
+      font-family: var(--rel-fontFamilies-primary);
     }
 
     .card {
-      background-color: var(--rel-colors-white, #ffffff);
-      border-radius: var(--rel-borderRadius-lg, 12px);
-      padding: var(--rel-spacing-space-md, 16px);
-
-      box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3),
-        0px 6px 10px 4px rgba(0, 0, 0, 0.15);
+      background-color: var(--rel-colors-white);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      padding: var(--rel-spacing-space-md);
 
-      font-family: var(--rel-fontFamilies-primary);
+      box-shadow: var(--rel-shadows-shadow-200);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
 
     .card:hover {
       transform: translateY(-3px);
-      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.35),
-        0px 8px 14px 4px rgba(0, 0, 0, 0.2);
+      box-shadow: var(--rel-shadows-shadow-300);
     }
   `;
 RelCard = __decorateClass([
@@ -879,15 +896,13 @@ var RelCardMedia = class extends LitElement8 {
       <div class="card-media">
         ${this.imageSrc ? html8`
               <div class="card-image">
-                <img src="${this.imageSrc}" alt="${this.imageAlt}" />
+                <img src=${this.imageSrc} alt=${this.imageAlt} />
               </div>
             ` : null}
 
         <div class="card-content">
           ${this.title ? html8`<h3>${this.title}</h3>` : null}
           ${this.subtitle ? html8`<p>${this.subtitle}</p>` : null}
-
-          <!-- Slot for extra content such as buttons, descriptions, etc -->
           <slot></slot>
         </div>
       </div>
@@ -901,20 +916,16 @@ RelCardMedia.styles = css8`
     }
 
     .card-media {
-      background-color: var(--rel-colors-white, #ffffff);
-      border-radius: var(--rel-borderRadius-lg, 12px);
+      background-color: var(--rel-colors-white);
+      border-radius: var(--rel-borders-radius-border-radius-300);
       overflow: hidden;
-
-      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3),
-        0px 8px 12px 6px rgba(0, 0, 0, 0.15);
-
+      box-shadow: var(--rel-shadows-shadow-200);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
 
     .card-media:hover {
       transform: translateY(-4px);
-      box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.35),
-        0px 10px 16px 6px rgba(0, 0, 0, 0.2);
+      box-shadow: var(--rel-shadows-shadow-300);
     }
 
     .card-image img {
@@ -925,20 +936,20 @@ RelCardMedia.styles = css8`
     }
 
     .card-content {
-      padding: var(--rel-spacing-space-md, 16px);
+      padding: var(--rel-spacing-space-md);
     }
 
     .card-content h3 {
       margin: 0 0 4px 0;
-      font-size: var(--rel-fontSizes-md, 16px);
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      color: var(--rel-colors-gray-heading, #2b2b2b);
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-colors-gray-heading);
     }
 
     .card-content p {
       margin: 0 0 8px 0;
-      font-size: var(--rel-fontSizes-sm, 14px);
-      color: var(--rel-colors-gray-text, #555);
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-colors-gray-text);
     }
   `;
 __decorateClass([
@@ -973,32 +984,34 @@ var RelCheckbox = class extends LitElement9 {
     if (this.status === "unchecked") this.status = "checked";
     else if (this.status === "checked") this.status = "indeterminate";
     else this.status = "unchecked";
-    this.dispatchEvent(new CustomEvent("changed", { detail: this.status }));
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: {
+          checked: this.status === "checked",
+          indeterminate: this.status === "indeterminate"
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
   }
   render() {
-    const className = `
-      wrapper
-      ${this.state}
-      ${this.status}
-    `;
     return html9`
-      <div class="${className}">
+      <div class="wrapper ${this.state} ${this.status}">
         <label class="row">
           <input
             type="checkbox"
-            @change=${this.toggle}
+            @click=${this.toggle}
             ?disabled=${this.state === "disabled"}
           />
 
           <span class="box">
-            <!-- CHECK ICON -->
             <svg class="check-icon" viewBox="0 0 18 14" fill="white">
               <path
-                d="M6.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
+                d="M6.44 14L0.5 7.36l1.49-1.66L6.44 10.68 16.01 0 17.5 1.66z"
               />
             </svg>
 
-            <!-- INDETERMINATE ICON -->
             <svg class="indeterminate-icon" viewBox="0 0 16 2" fill="white">
               <rect width="16" height="2" />
             </svg>
@@ -1049,55 +1062,43 @@ RelCheckbox.styles = css9`
       transition: all 0.2s;
     }
 
-    /* ICONS FIXED SIZE */
     svg {
       width: 12px;
       height: 12px;
       display: none;
-      pointer-events: none;
     }
 
-    /* CHECKED */
-    .checked .box {
+    .checked .box,
+    .indeterminate .box {
       background: var(--rel-colors-gray-heading);
       border-color: var(--rel-colors-gray-heading);
     }
+
     .checked .check-icon {
       display: block;
     }
 
-    /* INDETERMINATE */
-    .indeterminate .box {
-      background: var(--rel-colors-gray-heading);
-      border-color: var(--rel-colors-gray-heading);
-    }
     .indeterminate .indeterminate-icon {
       display: block;
     }
 
-    /* ERROR */
     .error .box {
       border-color: var(--rel-colors-red-primary);
     }
+
     .error.checked .box,
     .error.indeterminate .box {
       background: var(--rel-colors-red-primary);
       border-color: var(--rel-colors-red-primary);
     }
-    .error .label,
-    .error .text {
-      color: var(--rel-colors-red-primary);
-    }
 
-    /* DISABLED */
     .disabled {
       opacity: 0.55;
-      cursor: not-allowed !important;
+      cursor: not-allowed;
     }
 
     .label {
       font-size: var(--rel-fontSizes-md);
-      color: var(--rel-colors-gray-heading);
       font-weight: var(--rel-fontWeights-medium);
     }
 
@@ -1105,12 +1106,6 @@ RelCheckbox.styles = css9`
       font-size: var(--rel-fontSizes-sm);
       color: var(--rel-colors-gray-text);
     }
-
-    /* Focus ring */
-    input:focus-visible + .box {
-      outline: 2px solid var(--rel-colors-blue-primary);
-      outline-offset: 2px;
-    }
   `;
 __decorateClass([
   property8({ type: String })
@@ -1130,7 +1125,7 @@ RelCheckbox = __decorateClass([
 
 // src/components/rel-chip/rel-chip.ts
 import { LitElement as LitElement10, html as html10, css as css10 } from "lit";
-import { customElement as customElement10, property as property9, state as state2 } from "lit/decorators.js";
+import { customElement as customElement10, property as property9 } from "lit/decorators.js";
 var RelChip = class extends LitElement10 {
   constructor() {
     super(...arguments);
@@ -1157,49 +1152,39 @@ var RelChip = class extends LitElement10 {
       })
     );
   }
-  handleKeyDown(event) {
-    if (!this.removable) return;
-    if (event.key === "Backspace" || event.key === "Delete") {
-      event.preventDefault();
-      this.handleRemove(event);
-    }
-  }
   render() {
-    if (this.removed) {
-      return null;
-    }
     return html10`
-      <button
+      <span
         class="${this.classes}"
-        type="button"
         role="button"
-        aria-label="${this.label}"
-        @keydown=${this.handleKeyDown}
         tabindex="0"
+        aria-label="${this.label}"
       >
-        ${this.avatar ? html10`<img src="${this.avatar}" alt="avatar" class="chip-avatar" />` : ""}
-        ${this.leadingIcon ? html10`<span class="chip-icon leading">
-              <slot name="leading-icon">${this.renderIcon(this.leadingIcon)}</slot>
-            </span>` : ""}
+        ${this.avatar ? html10`<img src=${this.avatar} alt="" class="chip-avatar" />` : null}
+        ${this.leadingIcon ? html10`<span class="chip-icon">
+              ${this.renderIcon(this.leadingIcon)}
+            </span>` : null}
+
         <span class="chip-label">${this.label}</span>
-        ${this.trailingIcon ? html10`<span class="chip-icon trailing">
-              <slot name="trailing-icon">${this.renderIcon(this.trailingIcon)}</slot>
-            </span>` : ""}
-        ${this.removable ? html10`<button
-              type="button"
+
+        ${this.trailingIcon ? html10`<span class="chip-icon">
+              ${this.renderIcon(this.trailingIcon)}
+            </span>` : null}
+        ${this.removable ? html10`<span
               class="chip-remove"
-              @click=${this.handleRemove}
+              role="button"
               aria-label="Remove chip"
+              @click=${this.handleRemove}
             >
-              
-            </button>` : ""}
-      </button>
+              ✕
+            </span>` : null}
+      </span>
     `;
   }
   renderIcon(iconString) {
     const template = document.createElement("template");
     template.innerHTML = iconString.trim();
-    return html10`${template.content.cloneNode(true)}`;
+    return template.content.cloneNode(true);
   }
 };
 RelChip.styles = css10`
@@ -1221,123 +1206,55 @@ RelChip.styles = css10`
       padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
       gap: var(--rel-spacing-space-2xs);
       cursor: pointer;
-      transition: all 0.2s ease-in-out;
       border: var(--rel-borders-width-stroke-100) solid transparent;
       user-select: none;
       white-space: nowrap;
+      background: transparent;
     }
 
     .chip:hover {
       filter: brightness(0.92);
-      transform: translateY(-1px);
       box-shadow: var(--rel-shadows-shadow-100);
     }
 
-    .chip:focus:not(:focus-visible) {
-      outline: none;
-    }
-
-    .chip:active {
-      transform: scale(0.97) translateY(0);
-      box-shadow: none;
-      filter: brightness(0.88);
-    }
-
-    /* Tone Variants - Filled */
+    /* TONES */
     .chip-default {
       background: var(--rel-colors-gray-border);
       color: var(--rel-colors-black);
     }
 
-    .chip-default:focus {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-gray-primary);
-      outline-offset: var(--rel-spacing-space-3xs);
-    }
-
     .chip-blue {
       background: var(--rel-colors-blue-tertiary);
       color: var(--rel-colors-white);
     }
 
-    .chip-blue:focus {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-blue-tertiary);
-      outline-offset: var(--rel-spacing-space-3xs);
-    }
-
     .chip-yellow {
       background: var(--rel-colors-yellow-pending);
       color: var(--rel-colors-black);
     }
 
-    .chip-yellow:focus {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-yellow-pending);
-      outline-offset: var(--rel-spacing-space-3xs);
-    }
-
     .chip-red {
       background: var(--rel-colors-red-secondary);
       color: var(--rel-colors-white);
     }
 
-    .chip-red:focus {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-red-secondary);
-      outline-offset: var(--rel-spacing-space-3xs);
-    }
-
     .chip-green {
       background: var(--rel-colors-green-success);
       color: var(--rel-colors-white);
     }
 
-    .chip-green:focus {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-green-success);
-      outline-offset: var(--rel-spacing-space-3xs);
-    }
-
-    /* Outline Variants */
-    .chip-outline.chip-default {
-      background: transparent;
-      border-color: var(--rel-colors-gray-border);
-      color: var(--rel-colors-black);
-    }
-
-    .chip-outline.chip-blue {
-      background: transparent;
-      border-color: var(--rel-colors-blue-tertiary);
-      color: var(--rel-colors-blue-tertiary);
-    }
-
-    .chip-outline.chip-yellow {
+    /* OUTLINE */
+    .chip-outline {
       background: transparent;
-      border-color: var(--rel-colors-yellow-pending);
-      color: var(--rel-colors-yellow-pending);
-    }
-
-    .chip-outline.chip-red {
-      background: transparent;
-      border-color: var(--rel-colors-red-secondary);
-      color: var(--rel-colors-red-secondary);
-    }
-
-    .chip-outline.chip-green {
-      background: transparent;
-      border-color: var(--rel-colors-green-success);
-      color: var(--rel-colors-green-success);
     }
 
     .chip-avatar {
       width: 20px;
       height: 20px;
-      border-radius: var(--rel-borders-radius-border-radius-500);
+      border-radius: 50%;
       object-fit: cover;
     }
 
-    .chip-icon {
-      display: flex;
-      align-items: center;
-      line-height: 0;
-    }
-
     .chip-icon ::slotted(svg),
     .chip-icon svg {
       width: 16px;
@@ -1345,24 +1262,14 @@ RelChip.styles = css10`
       fill: currentColor;
     }
 
-    .chip-label {
-      line-height: var(--rel-lineHeights-md);
-    }
-
     .chip-remove {
-      background: transparent;
-      border: none;
-      color: inherit;
-      font-size: var(--rel-fontSizes-md);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      padding: 0;
       margin-left: var(--rel-spacing-space-3xs);
+      cursor: pointer;
+      opacity: 0.7;
     }
 
     .chip-remove:hover {
-      opacity: 0.6;
+      opacity: 1;
     }
   `;
 __decorateClass([
@@ -1387,7 +1294,7 @@ __decorateClass([
   property9({ type: Boolean })
 ], RelChip.prototype, "outline", 2);
 __decorateClass([
-  state2()
+  property9({ type: Boolean, reflect: true })
 ], RelChip.prototype, "removed", 2);
 RelChip = __decorateClass([
   customElement10("rel-chip")
@@ -1433,7 +1340,6 @@ RelContainer.styles = css11`
       box-sizing: border-box;
     }
 
-    /* Background Variants */
     .bg-white {
       background-color: var(--rel-colors-white);
     }
@@ -1446,7 +1352,6 @@ RelContainer.styles = css11`
       background: transparent;
     }
 
-    /* Padding Variants */
     .padding-sm {
       padding: var(--rel-spacing-space-xs);
     }
@@ -1459,7 +1364,6 @@ RelContainer.styles = css11`
       padding: var(--rel-spacing-space-2xl);
     }
 
-    /* Shadow */
     .shadow {
       box-shadow: var(--rel-shadows-shadow-300);
     }
@@ -1487,40 +1391,40 @@ var RelDivider = class extends LitElement12 {
   }
   render() {
     return html12`
-      <div class="rel-divider ${this.orientation}" role="separator"></div>
-    `;
+        <div class="rel-divider ${this.orientation}" role="separator"></div>
+      `;
   }
 };
 RelDivider.styles = css12`
-    :host {
-      display: block;
-    }
+      :host {
+        display: block;
+      }
 
-    .rel-divider {
-      position: relative;
-      display: flex;
-      background: transparent;
-      font-family: var(--rel-fontFamilies-primary);
-      color: var(--rel-colors-gray-primary);
-    }
+      .rel-divider {
+        position: relative;
+        display: flex;
+        background: transparent;
+        font-family: var(--rel-fontFamilies-primary);
+        color: var(--rel-colors-gray-primary);
+      }
 
-    /* Horizontal */
-    .rel-divider.horizontal {
-      width: 100%;
-      height: var(--rel-borders-width-stroke-100);
-      background-color: var(--rel-colors-gray-border);
-      margin: var(--rel-spacing-space-md) 0;
-    }
+      /* Horizontal */
+      .rel-divider.horizontal {
+        width: 100%;
+        height: var(--rel-borders-width-stroke-100);
+        background-color: var(--rel-colors-gray-border);
+        margin: var(--rel-spacing-space-md) 0;
+      }
 
-    /* Vertical */
-    .rel-divider.vertical {
-      width: var(--rel-borders-width-stroke-100);
-      background-color: var(--rel-colors-gray-border);
-      margin: 0 var(--rel-spacing-space-md);
-      align-self: stretch;
-      height: 100%;
-    }
-  `;
+      /* Vertical */
+      .rel-divider.vertical {
+        width: var(--rel-borders-width-stroke-100);
+        background-color: var(--rel-colors-gray-border);
+        margin: 0 var(--rel-spacing-space-md);
+        align-self: stretch;
+        height: 100%;
+      }
+    `;
 __decorateClass([
   property11({ type: String })
 ], RelDivider.prototype, "orientation", 2);
@@ -1539,12 +1443,14 @@ var RelLayout = class extends LitElement13 {
     this.responsive = true;
   }
   render() {
-    const gridStyle = `
-      gap: ${this.gap};
-      grid-template-columns: repeat(${this.columns}, 1fr);
-    `;
     return html13`
-      <div class="layout-grid" style="${gridStyle}">
+      <div
+        class="layout-grid"
+        style="
+          gap: ${this.gap};
+          grid-template-columns: repeat(${this.columns}, 1fr);
+        "
+      >
         <slot></slot>
       </div>
     `;
@@ -1562,11 +1468,7 @@ RelLayout.styles = css13`
       font-family: var(--rel-fontFamilies-primary);
     }
 
-    /* Responsive breakpoints - only applied when responsive is true */
-    :host([responsive]) .layout-grid {
-      /* Default: use columns property */
-    }
-
+    /* Responsive breakpoints — only when attribute exists */
     @media (max-width: 1024px) {
       :host([responsive]) .layout-grid {
         grid-template-columns: repeat(3, 1fr) !important;
@@ -1592,7 +1494,7 @@ __decorateClass([
   property12({ type: Number })
 ], RelLayout.prototype, "columns", 2);
 __decorateClass([
-  property12({ type: Boolean })
+  property12({ type: Boolean, reflect: true })
 ], RelLayout.prototype, "responsive", 2);
 RelLayout = __decorateClass([
   customElement13("rel-layout")
@@ -1600,7 +1502,7 @@ RelLayout = __decorateClass([
 
 // src/components/rel-menu/rel-menu.ts
 import { LitElement as LitElement14, html as html14, css as css14 } from "lit";
-import { customElement as customElement14, property as property13, state as state3 } from "lit/decorators.js";
+import { customElement as customElement14, property as property13, state } from "lit/decorators.js";
 var RelMenu = class extends LitElement14 {
   constructor() {
     super(...arguments);
@@ -1887,7 +1789,7 @@ __decorateClass([
   property13({ type: Array })
 ], RelMenu.prototype, "items", 2);
 __decorateClass([
-  state3()
+  state()
 ], RelMenu.prototype, "focusedIndex", 2);
 RelMenu = __decorateClass([
   customElement14("rel-menu")
@@ -1904,10 +1806,13 @@ var RelProgress = class extends LitElement15 {
     this.radius = 15.9155;
     this.circumference = 2 * Math.PI * this.radius;
   }
+  get safeValue() {
+    return Math.min(100, Math.max(0, this.value));
+  }
   renderLinearDeterminate() {
     return html15`
       <div class="linear-track">
-        <div class="linear-bar" style="width: ${this.value}%"></div>
+        <div class="linear-bar" style="width: ${this.safeValue}%"></div>
       </div>
     `;
   }
@@ -1919,18 +1824,19 @@ var RelProgress = class extends LitElement15 {
     `;
   }
   renderCircularDeterminate() {
-    const offset = this.circumference - this.value / 100 * this.circumference;
+    const offset = this.circumference - this.safeValue / 100 * this.circumference;
     return html15`
       <div class="circular">
         <svg viewBox="0 0 36 36" class="circular-svg">
-          <circle class="circular-bg" cx="18" cy="18" r="15.9155" />
+          <circle class="circular-bg" cx="18" cy="18" r="${this.radius}" />
           <circle
             class="circular-progress"
             cx="18"
             cy="18"
-            r="15.9155"
+            r="${this.radius}"
             stroke-dasharray="${this.circumference}"
-            stroke-dashoffset="${offset}" />
+            stroke-dashoffset="${offset}"
+          />
         </svg>
       </div>
     `;
@@ -1939,15 +1845,20 @@ var RelProgress = class extends LitElement15 {
     return html15`
       <div class="circular">
         <svg viewBox="0 0 50 50" class="spinner">
-          <circle class="spinner-path" cx="25" cy="25" r="20" fill="none" stroke-width="4" />
+          <circle
+            class="spinner-path"
+            cx="25"
+            cy="25"
+            r="20"
+            fill="none"
+            stroke-width="4"
+          />
         </svg>
       </div>
     `;
   }
   render() {
     switch (this.mode) {
-      case "linear-determinate":
-        return this.renderLinearDeterminate();
       case "linear-indeterminate":
         return this.renderLinearIndeterminate();
       case "circular-determinate":
@@ -1969,7 +1880,7 @@ RelProgress.styles = css15`
       display: inline-block;
     }
 
-    /* Linear Progress */
+    /* Linear */
     .linear-track {
       background: var(--rel-colors-gray-border);
       border-radius: var(--rel-borders-radius-border-radius-200);
@@ -2001,7 +1912,7 @@ RelProgress.styles = css15`
       }
     }
 
-    /* Circular Progress */
+    /* Circular */
     .circular {
       display: inline-block;
       width: 48px;
@@ -2026,11 +1937,9 @@ RelProgress.styles = css15`
       stroke-width: 3;
       stroke-linecap: round;
       transition: stroke-dashoffset 0.35s;
-      transform: rotate(0deg);
-      transform-origin: center;
     }
 
-    /* Circular Indeterminate Spinner */
+    /* Spinner */
     .spinner {
       animation: rotate 2s linear infinite;
     }
@@ -2063,7 +1972,7 @@ RelProgress.styles = css15`
     }
   `;
 __decorateClass([
-  property14({ type: String })
+  property14({ type: String, reflect: true })
 ], RelProgress.prototype, "mode", 2);
 __decorateClass([
   property14({ type: Number })
@@ -2081,25 +1990,24 @@ var RelRadio = class extends LitElement16 {
     this.options = [];
     this.name = "radio-group";
     this.selectedValue = null;
+    this.disabled = false;
   }
   onChange(value) {
+    if (this.disabled) return;
     this.selectedValue = value;
     this.dispatchEvent(
       new CustomEvent("changed", {
-        detail: { value },
         bubbles: true,
         composed: true
       })
     );
   }
-  isChecked(value) {
-    return this.selectedValue === value;
-  }
   renderOption(option) {
-    const isChecked = this.isChecked(option.value);
+    const isChecked = this.selectedValue === option.value;
+    const isDisabled = this.disabled || option.disabled;
     const classes = [
       "rel-radio-option",
-      option.disabled ? "disabled" : "",
+      isDisabled ? "disabled" : "",
       option.error ? "error" : ""
     ].filter(Boolean).join(" ");
     return html16`
@@ -2108,26 +2016,22 @@ var RelRadio = class extends LitElement16 {
           <input
             type="radio"
             name="${this.name}"
-            .value="${option.value}"
             .checked="${isChecked}"
-            ?disabled="${option.disabled}"
-            @change="${() => !option.disabled && this.onChange(option.value)}" />
+            ?disabled="${isDisabled}"
+            @change="${() => this.onChange(option.value)}"
+          />
           <span class="radio-custom"></span>
           <span class="radio-label">${option.label}</span>
         </div>
 
-        ${option.supportingText ? html16`
-              <div class="radio-supporting ${option.error ? "error-text" : ""}">
-                ${option.supportingText}
-              </div>
-            ` : ""}
+        ${option.supportingText ? html16`<div class="radio-supporting">${option.supportingText}</div>` : ""}
       </label>
     `;
   }
   render() {
     return html16`
       <div class="rel-radio-group">
-        ${this.options.map((option) => this.renderOption(option))}
+        ${this.options.map((o) => this.renderOption(o))}
       </div>
     `;
   }
@@ -2147,10 +2051,13 @@ RelRadio.styles = css16`
     .rel-radio-option {
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
       gap: var(--rel-spacing-space-3xs);
       cursor: pointer;
-      position: relative;
+    }
+
+    .rel-radio-option.disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
     }
 
     .radio-main {
@@ -2159,7 +2066,7 @@ RelRadio.styles = css16`
       gap: var(--rel-spacing-space-2xs);
     }
 
-    .rel-radio-option input {
+    input {
       position: absolute;
       opacity: 0;
       pointer-events: none;
@@ -2170,75 +2077,33 @@ RelRadio.styles = css16`
       height: 20px;
       border: 2px solid var(--rel-colors-black);
       border-radius: 50%;
-      display: inline-block;
       position: relative;
-      flex-shrink: 0;
-      transition: all 0.2s ease-in-out;
-    }
-
-    .rel-radio-option input:focus + .radio-custom {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-black);
-      outline-offset: var(--rel-spacing-space-3xs);
     }
 
-    .rel-radio-option input:checked + .radio-custom::after {
+    input:checked + .radio-custom::after {
       content: "";
       position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 10px;
-      height: 10px;
-      background-color: var(--rel-colors-black);
+      inset: 4px;
+      background: var(--rel-colors-black);
       border-radius: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    /* Error state */
-    .rel-radio-option.error .radio-custom {
-      border-color: var(--rel-colors-red-secondary);
-    }
-
-    .rel-radio-option.error input:checked + .radio-custom::after {
-      background-color: var(--rel-colors-red-secondary);
-    }
-
-    .rel-radio-option.error .radio-label,
-    .rel-radio-option.error .radio-supporting {
-      color: var(--rel-colors-red-secondary);
-    }
-
-    .rel-radio-option.error input:focus + .radio-custom {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-red-secondary);
     }
 
-    /* Disabled state */
-    .rel-radio-option.disabled {
-      opacity: 0.6;
-      cursor: not-allowed !important;
-    }
-
-    .rel-radio-option.disabled .radio-label,
-    .rel-radio-option.disabled .radio-supporting {
-      cursor: not-allowed !important;
-    }
-
-    /* Text styles */
     .radio-label {
       font-size: var(--rel-fontSizes-sm);
       font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-heading);
-      line-height: var(--rel-lineHeights-sm);
     }
 
     .radio-supporting {
       font-size: var(--rel-fontSizes-xs);
-      color: var(--rel-colors-gray-placeholder);
       margin-left: 28px;
-      line-height: var(--rel-lineHeights-xs);
     }
 
-    .radio-supporting.error-text {
-      color: var(--rel-colors-red-secondary);
+    .error .radio-custom {
+      border-color: var(--rel-colors-red-secondary);
+    }
+
+    .error input:checked + .radio-custom::after {
+      background: var(--rel-colors-red-secondary);
     }
   `;
 __decorateClass([
@@ -2248,8 +2113,11 @@ __decorateClass([
   property15({ type: String })
 ], RelRadio.prototype, "name", 2);
 __decorateClass([
-  property15({ type: String })
+  property15({ type: String, reflect: true })
 ], RelRadio.prototype, "selectedValue", 2);
+__decorateClass([
+  property15({ type: Boolean })
+], RelRadio.prototype, "disabled", 2);
 RelRadio = __decorateClass([
   customElement16("rel-radio")
 ], RelRadio);
@@ -2665,7 +2533,7 @@ RelSelect = __decorateClass([
 
 // src/components/rel-slider/rel-slider.ts
 import { LitElement as LitElement19, html as html19, css as css19 } from "lit";
-import { customElement as customElement19, property as property18, state as state4 } from "lit/decorators.js";
+import { customElement as customElement19, property as property18, state as state2 } from "lit/decorators.js";
 var RelSlider = class extends LitElement19 {
   constructor() {
     super(...arguments);
@@ -3091,7 +2959,7 @@ __decorateClass([
   property18({ type: Number })
 ], RelSlider.prototype, "value", 2);
 __decorateClass([
-  state4()
+  state2()
 ], RelSlider.prototype, "ticks", 2);
 RelSlider = __decorateClass([
   customElement19("rel-slider")
@@ -3099,7 +2967,7 @@ RelSlider = __decorateClass([
 
 // src/components/rel-snackbar/rel-snackbar.ts
 import { LitElement as LitElement20, html as html20, css as css20 } from "lit";
-import { customElement as customElement20, property as property19, state as state5 } from "lit/decorators.js";
+import { customElement as customElement20, property as property19, state as state3 } from "lit/decorators.js";
 var RelSnackbar = class extends LitElement20 {
   constructor() {
     super(...arguments);
@@ -3115,6 +2983,11 @@ var RelSnackbar = class extends LitElement20 {
     super.connectedCallback();
     this.setAutoDismiss();
   }
+  updated(changed) {
+    if (changed.has("duration") || changed.has("longerAction")) {
+      this.setAutoDismiss();
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.clearTimeout();
@@ -3305,7 +3178,7 @@ __decorateClass([
   property19({ type: Number })
 ], RelSnackbar.prototype, "duration", 2);
 __decorateClass([
-  state5()
+  state3()
 ], RelSnackbar.prototype, "visible", 2);
 RelSnackbar = __decorateClass([
   customElement20("rel-snackbar")
@@ -3338,6 +3211,19 @@ var RelStepper = class extends LitElement21 {
     if (this.isDisabled(step)) classes.push("disabled");
     return classes.join(" ");
   }
+  onStepClick(step, index) {
+    if (step.status === "disabled") return;
+    this.dispatchEvent(
+      new CustomEvent("step-change", {
+        detail: {
+          index,
+          step
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   renderIndicator(step, index) {
     if (step.status === "done") {
       return html21`
@@ -3371,7 +3257,10 @@ var RelStepper = class extends LitElement21 {
       <div class="${stepperClasses}">
         ${this.steps.map(
       (step, idx) => html21`
-            <div class="${this.getStepClasses(step)}">
+            <div
+              class="${this.getStepClasses(step)}"
+              @click="${() => this.onStepClick(step, idx)}"
+            >
               ${isVertical && isTextRight ? html21`
                     <!-- Indicator with connector below -->
                     <div class="indicator-wrapper">
@@ -3620,7 +3509,10 @@ RelStepper.styles = css21`
       display: none;
     }
 
-    .rel-stepper.vertical.text-right .rel-step:last-child .indicator-wrapper .connector {
+    .rel-stepper.vertical.text-right
+      .rel-step:last-child
+      .indicator-wrapper
+      .connector {
       display: none;
     }
 
@@ -3722,7 +3614,7 @@ RelStepper = __decorateClass([
 
 // src/components/rel-switch/rel-switch.ts
 import { LitElement as LitElement22, html as html22, css as css22 } from "lit";
-import { customElement as customElement22, property as property21, state as state6 } from "lit/decorators.js";
+import { customElement as customElement22, property as property21, state as state4 } from "lit/decorators.js";
 var RelSwitch = class extends LitElement22 {
   constructor() {
     super(...arguments);
@@ -3731,10 +3623,10 @@ var RelSwitch = class extends LitElement22 {
     this.isFocused = false;
     this.isPressed = false;
   }
-  toggle() {
+  toggle(ev) {
     if (this.disabled) return;
-    this.checked = !this.checked;
-    this.requestUpdate();
+    const input = ev.target;
+    this.checked = input.checked;
     this.dispatchEvent(
       new CustomEvent("changed", {
         detail: this.checked,
@@ -3769,7 +3661,7 @@ var RelSwitch = class extends LitElement22 {
           type="checkbox"
           ?disabled=${this.disabled}
           .checked=${this.checked}
-          @change=${this.toggle}
+          @change=${(e) => this.toggle(e)}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}
           @mousedown=${this.handleMouseDown}
@@ -3879,10 +3771,10 @@ __decorateClass([
   property21({ type: Boolean })
 ], RelSwitch.prototype, "disabled", 2);
 __decorateClass([
-  state6()
+  state4()
 ], RelSwitch.prototype, "isFocused", 2);
 __decorateClass([
-  state6()
+  state4()
 ], RelSwitch.prototype, "isPressed", 2);
 RelSwitch = __decorateClass([
   customElement22("rel-switch")
@@ -3902,7 +3794,7 @@ var RelTab = class extends LitElement23 {
     this.activeIndex = index;
     this.dispatchEvent(
       new CustomEvent("tab-change", {
-        detail: { index },
+        detail: index,
         bubbles: true,
         composed: true
       })
@@ -3917,13 +3809,15 @@ var RelTab = class extends LitElement23 {
   }
   render() {
     return html23`
-      <div class="tabs-wrapper">
+      <div class="tabs-wrapper" role="tablist">
         ${this.tabs.map(
       (tab, i) => html23`
             <div
               class="tab ${i === this.activeIndex ? "active" : ""} ${tab.disabled ? "disabled" : ""}"
               role="tab"
-              tabindex="${tab.disabled ? -1 : 0}"
+              aria-selected="${i === this.activeIndex}"
+              aria-disabled="${tab.disabled ?? false}"
+              tabindex="${tab.disabled ? -1 : i === this.activeIndex ? 0 : -1}"
               @click="${() => this.selectTab(i)}"
               @keydown="${(e) => this.onKeyDown(e, i)}"
             >
@@ -4025,7 +3919,7 @@ __decorateClass([
   property22({ type: Array })
 ], RelTab.prototype, "tabs", 2);
 __decorateClass([
-  property22({ type: Number })
+  property22({ type: Number, reflect: true })
 ], RelTab.prototype, "activeIndex", 2);
 RelTab = __decorateClass([
   customElement23("rel-tab")
@@ -4033,7 +3927,7 @@ RelTab = __decorateClass([
 
 // src/components/rel-textfield/rel-textfield.ts
 import { LitElement as LitElement24, html as html24, css as css24 } from "lit";
-import { customElement as customElement24, property as property23, state as state7 } from "lit/decorators.js";
+import { customElement as customElement24, property as property23, state as state5 } from "lit/decorators.js";
 var RelTextfield = class extends LitElement24 {
   constructor() {
     super(...arguments);
@@ -4062,7 +3956,7 @@ var RelTextfield = class extends LitElement24 {
     this.value = input.value;
     this.dispatchEvent(
       new CustomEvent("input-change", {
-        detail: { value: this.value },
+        detail: this.value,
         bubbles: true,
         composed: true
       })
@@ -4255,7 +4149,7 @@ __decorateClass([
   property23({ type: String })
 ], RelTextfield.prototype, "size", 2);
 __decorateClass([
-  state7()
+  state5()
 ], RelTextfield.prototype, "internalState", 2);
 RelTextfield = __decorateClass([
   customElement24("rel-textfield")
@@ -4263,7 +4157,7 @@ RelTextfield = __decorateClass([
 
 // src/components/rel-toast/rel-toast.ts
 import { LitElement as LitElement25, html as html25, css as css25 } from "lit";
-import { customElement as customElement25, property as property24, state as state8 } from "lit/decorators.js";
+import { customElement as customElement25, property as property24, state as state6 } from "lit/decorators.js";
 var RelToast = class extends LitElement25 {
   constructor() {
     super(...arguments);
@@ -4417,7 +4311,7 @@ __decorateClass([
   property24({ type: Number })
 ], RelToast.prototype, "duration", 2);
 __decorateClass([
-  state8()
+  state6()
 ], RelToast.prototype, "visible", 2);
 RelToast = __decorateClass([
   customElement25("rel-toast")