@reliability-design/web 1.2.0 → 1.3.0

package/dist/index.mjs

@@ -14,6 +14,7 @@ import "./vars-I2PC74XD.css";
 
 // src/components/rel-accordion/rel-accordion.ts
 import "./vars-v2-VMGWTFJZ.css";
+import "@reliability-design/icons/rel-icon";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 var RelAccordion = class extends LitElement {
@@ -21,6 +22,8 @@ var RelAccordion = class extends LitElement {
     super(...arguments);
     this.title = "Accordion";
     this.open = false;
+    this.size = "md";
+    this.type = "default";
   }
   toggle() {
     this.open = !this.open;
@@ -32,13 +35,6 @@ var RelAccordion = class extends LitElement {
       })
     );
   }
-  chevron() {
-    return html`
-      <svg viewBox="0 0 24 24">
-        <polyline points="6 9 12 15 18 9"></polyline>
-      </svg>
-    `;
-  }
   render() {
     return html`
       <div class="accordion">
@@ -55,12 +51,20 @@ var RelAccordion = class extends LitElement {
       }
     }}
         >
-          <div class="title">${this.title}</div>
-          <div class="icon ${this.open ? "rotated" : ""}">
-            ${this.chevron()}
+          <div class="title-row">
+            ${this.type === "action" ? html`<span class="leading-icon">
+                  <slot name="icon">
+                    <span class="icon-rotate-on-open"><rel-icon name="chevron-right"></rel-icon></span>
+                  </slot>
+                </span>` : ""}
+            <span class="title">${this.title}</span>
+          </div>
+          <div class="chevron">
+            <slot name="trailing-icon">
+              ${this.type === "default" ? html`<span class="chevron-rotate"><rel-icon name="chevron-down"></rel-icon></span>` : html`<rel-icon name="arrow-expansion"></rel-icon>`}
+            </slot>
           </div>
         </div>
-        <!-- IMPORTANT: slot is ALWAYS rendered -->
         <div class="body ${this.open ? "open" : ""}">
           <slot></slot>
         </div>
@@ -74,77 +78,219 @@ RelAccordion.styles = css`
       width: 100%;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
     }
+
     .accordion {
-      background: var(--rel-color-bg-primary);
-      border: none;
-      border-bottom: 1px solid var(--rel-gray-text-placeholder);
-      border-radius: 0;
+      background: var(--rel-color-bg-primary, #ffffff);
+      border-radius: 8px;
       overflow: hidden;
+      box-shadow: 0 2px 4px rgba(11, 11, 11, 0.1);
     }
-    /* HEADER --------------------------------------------------- */
+
+    /* ── Header ───────────────────────────────────────────────── */
+
     .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: var(--rel-spacing-space-md, 16px);
       cursor: pointer;
       user-select: none;
-      border-radius: 0;
+      box-sizing: border-box;
+      /* matches .accordion's radius so the focus-visible outline isn't clipped square at the corners by the parent's overflow:hidden */
+      border-radius: 8px;
     }
-    .header:hover {
-      background: var(--rel-surface-surface, #f5f5f5);
+
+    :host([size="md"]) .header {
+      padding: 8px 8px 8px 16px;
+      min-height: 56px;
     }
-    :host([open]) .header:hover {
-      background: transparent;
+
+    :host([size="sm"]) .header {
+      padding: 8px 8px 8px 12px;
+      min-height: 48px;
     }
+
+    .header:hover {
+      background: var(--rel-color-bg-secondary, #f5f5f5);
+    }
+
     .header:focus-visible {
       outline: 2px solid var(--rel-color-border-focus);
       outline-offset: -2px;
     }
+
+    /* ── Title row ────────────────────────────────────────────── */
+
+    .title-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+    }
+
     .title {
+      font-weight: var(--rel-fontWeights-semibold, 600);
+      color: var(--rel-color-text-default, #0b0b0b);
+      letter-spacing: -0.3px;
+    }
+
+    :host([size="md"]) .title {
       font-size: var(--rel-fontSizes-lg, 20px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-text-heading, #2b2b2b);
+      line-height: 28px;
     }
-    /* ICON ----------------------------------------------------- */
-    .icon {
+
+    :host([size="sm"]) .title {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    /* ── Leading icon (action type) ───────────────────────────── */
+
+    .leading-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      color: var(--rel-color-text-default, #0b0b0b);
+    }
+
+    .leading-icon ::slotted(svg) {
+      width: 24px;
+      height: 24px;
+    }
+
+    .leading-icon rel-icon,
+    .leading-icon ::slotted(rel-icon) {
+      --rel-icon-size: 24px;
+    }
+
+    :host([size="sm"]) .leading-icon ::slotted(svg) {
       width: 20px;
       height: 20px;
+    }
+
+    :host([size="sm"]) .leading-icon rel-icon,
+    :host([size="sm"]) .leading-icon ::slotted(rel-icon) {
+      --rel-icon-size: 20px;
+    }
+
+    /* ── Chevron ──────────────────────────────────────────────── */
+
+    .chevron {
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: transform 0.25s ease;
+      flex-shrink: 0;
+    }
+
+    :host([size="md"]) .chevron {
+      width: 40px;
+      height: 40px;
+    }
+
+    :host([size="sm"]) .chevron {
+      width: 32px;
+      height: 32px;
+    }
+
+    .chevron ::slotted(svg) {
+      width: 24px;
+      height: 24px;
+    }
+
+    .chevron rel-icon,
+    .chevron ::slotted(rel-icon) {
+      --rel-icon-size: 24px;
+      color: var(--rel-color-text-default, #0b0b0b);
     }
-    .icon svg {
+
+    :host([size="sm"]) .chevron ::slotted(svg) {
       width: 20px;
       height: 20px;
-      stroke: var(--rel-text-primary, #333);
-      stroke-width: 2;
-      fill: none;
-      stroke-linecap: round;
-      stroke-linejoin: round;
     }
-    .icon.rotated {
+
+    :host([size="sm"]) .chevron rel-icon,
+    :host([size="sm"]) .chevron ::slotted(rel-icon) {
+      --rel-icon-size: 20px;
+    }
+
+    /* ── Icon rotation ────────────────────────────────────────── */
+    /* Only the shadow-DOM fallback wrappers rotate on open.
+       Slotted (light-DOM) icons are never targeted, so they stay static. */
+
+    .icon-rotate-on-open,
+    .chevron-rotate {
+      display: inline-flex;
+      align-items: center;
+      transition: transform 0.25s ease;
+    }
+
+    /* Leading fallback chevron: 90° (points right when open) */
+    :host([open]) .icon-rotate-on-open {
+      transform: rotate(90deg);
+    }
+
+    /* Trailing fallback chevron (type="default" only): 180° flip */
+    :host([open]) .chevron-rotate {
       transform: rotate(180deg);
     }
-    /* BODY ------------------------------------------------------ */
+
+    /* ── Body ─────────────────────────────────────────────────── */
+
     .body {
       overflow: hidden;
       max-height: 0;
-      padding: 0 var(--rel-spacing-space-md, 16px);
+      padding: 0 16px;
       font-size: var(--rel-fontSizes-md, 14px);
-      color: var(--rel-text-primary, #333);
+      line-height: 22px;
+      /* Figma spec value — --rel-color-text-secondary resolves to #9e9e9e (gray-disabled-text), not this */
+      color: var(--rel-accordion-body-color, #525252);
       transition:
         max-height 0.25s ease,
         padding 0.2s ease;
     }
+
+    :host([size="sm"]) .body {
+      font-size: var(--rel-fontSizes-sm, 12px);
+      line-height: 20px;
+    }
+
     .body.open {
       max-height: 1000px;
-      padding: var(--rel-spacing-space-xl, 24px)
-        var(--rel-spacing-space-md, 16px) var(--rel-spacing-space-lg, 20px);
+      padding: 4px 16px 16px;
     }
+
+    /* ── Dark mode ────────────────────────────────────────────── */
+
+    :host-context([data-theme="dark"]) .accordion,
+    [data-theme="dark"] .accordion {
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    }
+
+    :host-context([data-theme="dark"]) .title,
+    [data-theme="dark"] .title {
+      color: var(--rel-color-text-default-dark, #f5f5f5);
+    }
+
+    :host-context([data-theme="dark"]) .chevron rel-icon,
+    [data-theme="dark"] .chevron rel-icon,
+    :host-context([data-theme="dark"]) .chevron ::slotted(rel-icon),
+    [data-theme="dark"] .chevron ::slotted(rel-icon) {
+      color: var(--rel-color-text-default-dark, #f5f5f5);
+    }
+
+    :host-context([data-theme="dark"]) .leading-icon,
+    [data-theme="dark"] .leading-icon {
+      color: var(--rel-color-text-default-dark, #f5f5f5);
+    }
+
+    :host-context([data-theme="dark"]) .body,
+    [data-theme="dark"] .body {
+      color: var(--rel-accordion-body-color-dark, #a3a3a3);
+    }
+
     @media (prefers-reduced-motion: reduce) {
-      .icon,
+      .icon-rotate-on-open,
+      .chevron-rotate,
       .body {
         transition: none;
       }
@@ -156,6 +302,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], RelAccordion.prototype, "open", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], RelAccordion.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], RelAccordion.prototype, "type", 2);
 RelAccordion = __decorateClass([
   customElement("rel-accordion")
 ], RelAccordion);
@@ -485,14 +637,16 @@ var RelAvatar = class extends LitElement3 {
     super(...arguments);
     this.size = "md";
     this.type = "image";
+    this.variant = "fill";
     this.src = "";
     this.text = "";
     this.alt = "Avatar";
     this.bg = "";
+    this.color = "";
   }
   render() {
     return html3`
-      <div class="avatar avatar-${this.size}" style=${this.bg ? `background-color: ${this.bg}` : ""}>
+      <div class="avatar avatar-${this.size}" style=${[this.bg ? `background-color:${this.bg}` : "", this.color ? `color:${this.color}` : ""].filter(Boolean).join(";")}>
         ${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>
     `;
@@ -510,59 +664,97 @@ RelAvatar.styles = css3`
       justify-content: center;
       border-radius: 50%;
       overflow: hidden;
-
-      background-color: var(--rel-colors-gray-disabled-text);
-      color: var(--rel-avatar-color, #ffffff);
-      font-weight: var(--rel-fontWeights-bold);
-
+      box-sizing: border-box;
+      border: var(--rel-borders-width-stroke-100, 1px) solid transparent;
+      font-weight: var(--rel-fontWeights-semibold);
       user-select: none;
       text-transform: uppercase;
     }
 
-    /* Sizes */
+    /* ── Variants ─────────────────────────────────────────────── */
+
+    :host([variant="fill"]) .avatar {
+      background-color: var(--rel-avatar-bg-fill, #0b0b0b);
+      color: var(--rel-avatar-color-fill, #ffffff);
+    }
+
+    :host([variant="subtle"]) .avatar {
+      background-color: var(--rel-avatar-bg-subtle, #f5f5f5);
+      color: var(--rel-avatar-color-subtle, #0b0b0b);
+    }
+
+    :host([variant="outline"]) .avatar {
+      background-color: transparent;
+      border-color: var(--rel-avatar-border-outline, var(--rel-color-border-default));
+      color: var(--rel-avatar-color-outline, #0b0b0b);
+    }
+
+    /* ── Sizes ────────────────────────────────────────────────── */
+
     .avatar-lg {
       width: 40px;
       height: 40px;
-      font-size: var(--rel-fontSizes-xl);
+      font-size: var(--rel-fontSizes-lg); /* 20px */
     }
 
     .avatar-md {
       width: 32px;
       height: 32px;
-      font-size: var(--rel-fontSizes-lg);
+      font-size: 16px;
     }
 
     .avatar-sm {
       width: 24px;
       height: 24px;
-      font-size: var(--rel-fontSizes-md);
+      font-size: var(--rel-fontSizes-sm); /* 12px */
     }
 
     .avatar-xs {
-      width: 18px;
-      height: 18px;
-      font-size: var(--rel-fontSizes-xs);
+      width: 20px;
+      height: 20px;
+      font-size: var(--rel-fontSizes-xs); /* 10px */
     }
 
+    /* ── Image ────────────────────────────────────────────────── */
+
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
 
+    /* ── Icon slot ────────────────────────────────────────────── */
+
     .icon-slot {
       width: 100%;
       height: 100%;
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      color: #ffffff;
+      color: inherit;
     }
 
     .icon-slot ::slotted(svg) {
       width: 50%;
       height: 50%;
     }
+
+    /* ── Dark mode ────────────────────────────────────────────────
+       :host() can never be preceded by a combinator inside a shadow-tree
+       stylesheet, so ":host-context(dark) :host([variant=...]) .avatar"
+       (the previous approach) is invalid and silently matches nothing.
+       Instead, redefine the same custom properties the variant rules
+       above already read via var(--token, fallback) — a plain
+       :host-context() selector with no compounding, guaranteed valid. ── */
+
+    :host-context([data-theme="dark"]) {
+      --rel-avatar-bg-fill: #ffffff;
+      --rel-avatar-color-fill: #0b0b0b;
+      --rel-avatar-bg-subtle: #2b2b2b;
+      --rel-avatar-color-subtle: #f5f5f5;
+      --rel-avatar-border-outline: #525252;
+      --rel-avatar-color-outline: #f5f5f5;
+    }
   `;
 __decorateClass([
   property3({ type: String, reflect: true })
@@ -570,6 +762,9 @@ __decorateClass([
 __decorateClass([
   property3({ type: String, reflect: true })
 ], RelAvatar.prototype, "type", 2);
+__decorateClass([
+  property3({ type: String, reflect: true })
+], RelAvatar.prototype, "variant", 2);
 __decorateClass([
   property3({ type: String })
 ], RelAvatar.prototype, "src", 2);
@@ -582,6 +777,9 @@ __decorateClass([
 __decorateClass([
   property3({ type: String })
 ], RelAvatar.prototype, "bg", 2);
+__decorateClass([
+  property3({ type: String })
+], RelAvatar.prototype, "color", 2);
 RelAvatar = __decorateClass([
   customElement3("rel-avatar")
 ], RelAvatar);
@@ -598,10 +796,28 @@ var RelBadge = class extends LitElement4 {
     this.suffix = "notifications";
     this.size = "md";
     this.variant = "number";
+    this.color = "";
+    this.textColor = "";
   }
   get classes() {
     return ["badge", `badge-${this.size}`, `badge-${this.variant}`].join(" ");
   }
+  updated(changedProperties) {
+    if (changedProperties.has("color")) {
+      if (this.color) {
+        this.style.setProperty("--rel-badge-bg", this.color);
+      } else {
+        this.style.removeProperty("--rel-badge-bg");
+      }
+    }
+    if (changedProperties.has("textColor")) {
+      if (this.textColor) {
+        this.style.setProperty("--rel-badge-color", this.textColor);
+      } else {
+        this.style.removeProperty("--rel-badge-color");
+      }
+    }
+  }
   render() {
     return html4`
       <span class="${this.classes}" aria-label=${this.ariaLabel || `${this.number} ${this.suffix}`}>
@@ -621,8 +837,8 @@ RelBadge.styles = css4`
       justify-content: center;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
       font-weight: var(--rel-fontWeights-semibold, 600);
-      background-color: var(--rel-error-surface-default);
-      color: #ffffff;
+      background-color: var(--rel-badge-bg, var(--rel-error-surface-default));
+      color: var(--rel-badge-color, #ffffff);
       border-radius: 50%;
     }
 
@@ -676,6 +892,12 @@ __decorateClass([
 __decorateClass([
   property4({ type: String, reflect: true })
 ], RelBadge.prototype, "variant", 2);
+__decorateClass([
+  property4({ type: String, reflect: true })
+], RelBadge.prototype, "color", 2);
+__decorateClass([
+  property4({ type: String, reflect: true, attribute: "text-color" })
+], RelBadge.prototype, "textColor", 2);
 RelBadge = __decorateClass([
   customElement4("rel-badge")
 ], RelBadge);
@@ -793,6 +1015,20 @@ var RelButton = class extends LitElement6 {
     this.border = "corner-radius";
     this.disabled = false;
     this.ariaLabel = null;
+    this.handleHostClick = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleHostClick, { capture: true });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.handleHostClick, { capture: true });
+    super.disconnectedCallback();
   }
   get classes() {
     return [
@@ -808,12 +1044,6 @@ var RelButton = class extends LitElement6 {
       e.stopImmediatePropagation();
       return;
     }
-    this.dispatchEvent(
-      new MouseEvent("click", {
-        bubbles: true,
-        composed: true
-      })
-    );
   }
   render() {
     return html6`
@@ -882,6 +1112,10 @@ RelButton.styles = css6`
     /* Disabled */
     :host([disabled]) {
       cursor: not-allowed;
+      /* Without this, clicks on a disabled button hit-test fall through the
+         inner button's pointer-events:none straight onto the host, which still
+         dispatches a normal click to any externally-attached listener. */
+      pointer-events: none;
     }
 
     :host([disabled]) button {
@@ -3412,6 +3646,14 @@ var RelRangePicker = class extends LitElement13 {
     this.disabled = false;
     this.open = false;
     this.mode = "popover";
+    this.width = "";
+    this.minWidth = "";
+    this.maxWidth = "";
+    this.height = "";
+    this.minHeight = "";
+    this.maxHeight = "";
+    this.placeholder = "Select date range";
+    this.triggerVariant = "default";
     this.draftFrom = "";
     this.draftTo = "";
     this.draftActivePreset = null;
@@ -3462,6 +3704,14 @@ var RelRangePicker = class extends LitElement13 {
     document.removeEventListener("click", this.handleClickOutside);
     document.removeEventListener("keydown", this.handleGlobalKeydown);
   }
+  updated() {
+    this.style.width = this.width;
+    this.style.minWidth = this.minWidth;
+    this.style.maxWidth = this.maxWidth;
+    this.style.height = this.height;
+    this.style.minHeight = this.minHeight;
+    this.style.maxHeight = this.maxHeight;
+  }
   toggleOpen() {
     if (this.disabled) return;
     if (this.open) {
@@ -3518,7 +3768,7 @@ var RelRangePicker = class extends LitElement13 {
       this.to = this.draftTo;
       this.dispatchEvent(
         new CustomEvent("rel-change", {
-          detail: { from: this.from, to: this.to },
+          detail: { from: this.from, to: this.to, label: this.displayLabel },
           bubbles: true,
           composed: true
         })
@@ -3551,6 +3801,10 @@ var RelRangePicker = class extends LitElement13 {
     if (from) return from;
     return "";
   }
+  /** Formatted "MM/DD/YYYY → MM/DD/YYYY" (or single date / "") for the current committed `from`/`to`. */
+  get displayLabel() {
+    return this.getTriggerLabel();
+  }
   // ── Date utilities ──
   parseISODate(iso) {
     const m = iso.match(/^(\d{4})-(\d{2})-(\d{2})$/);
@@ -3778,22 +4032,36 @@ var RelRangePicker = class extends LitElement13 {
     const isDraftEmpty = !this.draftFrom && !this.draftTo;
     const isPopup = this.mode === "popup";
     return html13`
-      <button
-        class="trigger-button"
-        type="button"
-        ?disabled=${this.disabled}
-        aria-haspopup="dialog"
-        aria-expanded=${this.open}
-        aria-label=${triggerLabel || "Select date range"}
-        @click=${this.toggleOpen}
-      >
-        <span class="trigger-content ${triggerLabel ? "" : "placeholder"}">
-          ${triggerLabel || "Select date range"}
-        </span>
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-          <path d="M4 2h1V1h2v1h2V1h2v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 3H4v7h8V5z"/>
-        </svg>
-      </button>
+      ${this.triggerVariant === "icon" ? html13`
+            <rel-button
+              variant="icon"
+              tone="secondary"
+              ?disabled=${this.disabled}
+              aria-haspopup="dialog"
+              aria-expanded=${this.open}
+              aria-label=${triggerLabel || this.placeholder}
+              @click=${() => this.toggleOpen()}
+            >
+              <rel-icon name="calendar-range"></rel-icon>
+            </rel-button>
+          ` : html13`
+            <button
+              class="trigger-button"
+              type="button"
+              ?disabled=${this.disabled}
+              aria-haspopup="dialog"
+              aria-expanded=${this.open}
+              aria-label=${triggerLabel || this.placeholder}
+              @click=${this.toggleOpen}
+            >
+              <span class="trigger-content ${triggerLabel ? "" : "placeholder"}">
+                ${triggerLabel || this.placeholder}
+              </span>
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+                <path d="M4 2h1V1h2v1h2V1h2v1h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 3H4v7h8V5z"/>
+              </svg>
+            </button>
+          `}
 
       ${isPopup && this.open ? html13`<div class="backdrop" @click=${this.cancelPopover}></div>` : nothing4}
 
@@ -3911,30 +4179,34 @@ var RelRangePicker = class extends LitElement13 {
             </div>
 
             <div class="calendar-footer">
-              <button
-                class="btn-reset"
-                type="button"
+              <rel-button
+                variant="secondary"
+                size="small"
+                border="corner-radius"
                 ?disabled=${isDraftEmpty}
-                @click=${this.resetDraft}
+                @click=${() => this.resetDraft()}
               >
                 Reset
-              </button>
+              </rel-button>
               <div class="footer-right">
-                <button
-                  class="btn-cancel"
-                  type="button"
-                  @click=${this.cancelPopover}
+                <rel-button
+                  variant="secondary"
+                  size="small"
+                  border="corner-radius"
+                  @click=${() => this.cancelPopover()}
                 >
                   Cancel
-                </button>
-                <button
-                  class="btn-apply"
-                  type="button"
+                </rel-button>
+                <rel-button
+                  variant="primary"
+                  tone="default"
+                  size="small"
+                  border="corner-radius"
                   ?disabled=${isDraftEmpty}
-                  @click=${this.applySelection}
+                  @click=${() => this.applySelection()}
                 >
                   Apply
-                </button>
+                </rel-button>
               </div>
             </div>
 
@@ -3954,6 +4226,10 @@ RelRangePicker.styles = css13`
     :host([disabled]) {
       opacity: 0.6;
       cursor: not-allowed;
+    }
+
+    :host([disabled]) .trigger-button,
+    :host([disabled]) rel-button {
       pointer-events: none;
     }
 
@@ -3971,7 +4247,6 @@ RelRangePicker.styles = css13`
       font-size: var(--rel-fontSizes-md, 14px);
       color: var(--rel-color-text-primary, #333);
       cursor: pointer;
-      min-width: 260px;
       width: 100%;
       text-align: left;
       transition: border-color 0.15s ease;
@@ -4000,7 +4275,7 @@ RelRangePicker.styles = css13`
       position: absolute;
       top: calc(100% + 4px);
       left: 0;
-      z-index: 1000;
+      z-index: 2147483647;
       border: 1px solid var(--rel-color-border-default, #ddd);
       border-radius: var(--rel-borders-radius-border-radius-200, 8px);
       background: var(--rel-color-bg-primary, #fff);
@@ -4021,7 +4296,7 @@ RelRangePicker.styles = css13`
     .backdrop {
       position: fixed;
       inset: 0;
-      z-index: 999;
+      z-index: 2147483646;
       background: rgba(0,0,0,0.4);
     }
 
@@ -4313,58 +4588,13 @@ RelRangePicker.styles = css13`
       gap: 8px;
     }
 
-    .btn-reset,
-    .btn-cancel,
-    .btn-apply {
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      border-radius: var(--rel-borders-radius-border-radius-500, 1000px);
-      padding: 8px 20px;
-      cursor: pointer;
-      transition: background 0.15s ease, border-color 0.15s ease;
-      white-space: nowrap;
-    }
-
-    .btn-reset,
-    .btn-cancel {
-      background: transparent;
-      border: 1px solid var(--rel-color-border-default, #ddd);
-      color: var(--rel-color-text-primary, #333);
-    }
-
-    .btn-reset:hover:not(:disabled),
-    .btn-cancel:hover {
-      background: var(--rel-color-bg-hover, #f5f5f5);
-    }
-
-    .btn-reset:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-
-    .btn-apply {
-      background: var(--rel-colors-green-primary, #00f49c);
-      border: none;
-      color: #000000;
-    }
-
-    .btn-apply:hover:not(:disabled) {
-      background: var(--rel-colors-green-secondary, #06d98c);
-    }
-
-    .btn-apply:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-
     .footer-right {
       display: flex;
       gap: 8px;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .preset-item, .nav-btn, .day-inner, .btn-reset, .btn-cancel, .btn-apply {
+      .preset-item, .nav-btn, .day-inner {
         transition: none;
       }
     }
@@ -4396,6 +4626,30 @@ __decorateClass([
 __decorateClass([
   property12({ type: String })
 ], RelRangePicker.prototype, "mode", 2);
+__decorateClass([
+  property12({ type: String })
+], RelRangePicker.prototype, "width", 2);
+__decorateClass([
+  property12({ type: String, attribute: "min-width" })
+], RelRangePicker.prototype, "minWidth", 2);
+__decorateClass([
+  property12({ type: String, attribute: "max-width" })
+], RelRangePicker.prototype, "maxWidth", 2);
+__decorateClass([
+  property12({ type: String })
+], RelRangePicker.prototype, "height", 2);
+__decorateClass([
+  property12({ type: String, attribute: "min-height" })
+], RelRangePicker.prototype, "minHeight", 2);
+__decorateClass([
+  property12({ type: String, attribute: "max-height" })
+], RelRangePicker.prototype, "maxHeight", 2);
+__decorateClass([
+  property12({ type: String })
+], RelRangePicker.prototype, "placeholder", 2);
+__decorateClass([
+  property12({ type: String, attribute: "trigger-variant" })
+], RelRangePicker.prototype, "triggerVariant", 2);
 __decorateClass([
   state4()
 ], RelRangePicker.prototype, "draftFrom", 2);
@@ -4426,17 +4680,31 @@ RelRangePicker = __decorateClass([
 
 // src/components/rel-chip/rel-chip.ts
 import { LitElement as LitElement14, html as html14, css as css14 } from "lit";
-import { customElement as customElement14, property as property13 } from "lit/decorators.js";
+import { customElement as customElement14, property as property13, state as state5 } from "lit/decorators.js";
+import "@reliability-design/icons/rel-icon";
 var RelChip = class extends LitElement14 {
   constructor() {
     super(...arguments);
     this.label = "Label";
-    this.tone = "default";
+    this.tone = "neutral";
+    this.variant = "fill";
+    this.size = "md";
+    this.border = "default";
     this.removable = false;
     this.removed = false;
+    this.draggableChip = false;
+    this.dragging = false;
+    this.onDragStart = (e) => {
+      if (!this.draggableChip) return;
+      this.dragging = true;
+      e.dataTransfer?.setData("text/plain", this.label);
+    };
+    this.onDragEnd = () => {
+      this.dragging = false;
+    };
   }
   get classes() {
-    return ["chip", `chip-${this.tone}`].join(" ");
+    return "chip";
   }
   handleRemove(event) {
     event.stopPropagation();
@@ -4448,6 +4716,23 @@ var RelChip = class extends LitElement14 {
       })
     );
   }
+  updated(changed) {
+    if (changed.has("draggableChip")) {
+      if (this.draggableChip) {
+        this.setAttribute("draggable", "true");
+        this.addEventListener("dragstart", this.onDragStart);
+        this.addEventListener("dragend", this.onDragEnd);
+      } else {
+        this.removeAttribute("draggable");
+        this.removeEventListener("dragstart", this.onDragStart);
+        this.removeEventListener("dragend", this.onDragEnd);
+        this.dragging = false;
+      }
+    }
+    if (changed.has("dragging")) {
+      this.toggleAttribute("dragging", this.dragging);
+    }
+  }
   render() {
     const showAvatar = !!this.avatar;
     const showLeadingIcon = !showAvatar && !!this.leadingIcon;
@@ -4464,30 +4749,30 @@ var RelChip = class extends LitElement14 {
         aria-label="${this.label}"
       >
         ${showAvatar ? html14`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>` : null}
-        ${showLeadingIcon ? html14`<span class="chip-icon">
-              ${this.renderIcon(this.leadingIcon)}
-            </span>` : null}
+        ${showLeadingIcon ? html14`<rel-icon class="chip-icon" name="${this.leadingIcon}"></rel-icon>` : null}
 
         <span class="chip-label">${this.label}</span>
 
-        ${this.trailingIcon ? html14`<span class="chip-icon">
-              ${this.renderIcon(this.trailingIcon)}
-            </span>` : null}
+        ${this.trailingIcon ? html14`<rel-icon class="chip-icon" name="${this.trailingIcon}"></rel-icon>` : null}
         ${this.removable ? html14`<button
               class="chip-remove"
               aria-label="Remove ${this.label}"
               @click=${this.handleRemove}
             >
-              ✕
+              <rel-icon name="close"></rel-icon>
             </button>` : null}
       </span>
     `;
   }
-  renderIcon(iconString) {
-    const template = document.createElement("template");
-    template.innerHTML = iconString.trim();
-    return template.content.cloneNode(true);
-  }
+};
+// The actually-focusable element is the inner <span tabindex="0">, not the
+// host. Without delegatesFocus, calling host.focus() (e.g. from a parent
+// component, or a "focus this" demo button) is a no-op since the host
+// itself carries no tabindex — only real Tab-key traversal would still
+// reach the inner span, because that walks the flattened DOM regardless.
+RelChip.shadowRootOptions = {
+  ...LitElement14.shadowRootOptions,
+  delegatesFocus: true
 };
 RelChip.styles = css14`
     :host {
@@ -4503,108 +4788,184 @@ RelChip.styles = css14`
     .chip {
       display: inline-flex;
       align-items: center;
+      box-sizing: border-box;
       font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-md);
-      font-weight: var(--rel-fontWeights-medium);
-      border-radius: var(--rel-borders-radius-border-radius-100);
-      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-xs);
-      gap: var(--rel-spacing-space-2xs);
+      font-weight: 500;
+      letter-spacing: -0.6px;
+      gap: 8px;
       cursor: pointer;
-      border: var(--rel-borders-width-stroke-100) solid transparent;
       user-select: none;
       white-space: nowrap;
+      outline: none;
       background: transparent;
+      transition: background-color 0.15s ease;
     }
 
-    .chip:hover {
-      filter: brightness(0.88);
-      box-shadow: var(--rel-shadows-shadow-100);
+    /* ── Size ── */
+    :host([size="lg"]) .chip {
+      height: 32px;
+      padding: 4px 8px;
+      font-size: 16px;
+      line-height: 24px;
     }
 
-    .chip:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
-      outline-offset: 2px;
+    :host([size="md"]) .chip {
+      height: 28px;
+      padding: 4px 8px;
+      font-size: 14px;
+      line-height: 22px;
     }
 
-    .chip:active {
-      filter: brightness(0.80);
-      box-shadow: var(--rel-shadows-shadow-200);
+    :host([size="sm"]) .chip {
+      height: 24px;
+      padding: 4px 8px;
+      font-size: 12px;
+      line-height: 20px;
     }
 
-    /* TONES — light (default) */
-    /* NOTE: #717171 has no exact vars-v2 token; nearest candidates are
-       --rel-colors-gray-toast-bg (#404040) and --rel-colors-gray-divider (#BDBDBD) */
-    .chip-default {
-      background: #717171;
-      color: var(--rel-colors-white);
+    /* ── Border / shape — "Rounded" also widens horizontal padding to 12px,
+       consistent across all three sizes per the Figma spec. ── */
+    :host([border="default"]) .chip {
+      border-radius: 4px;
     }
 
-    .chip-blue {
-      background: var(--rel-colors-blue-tertiary);
-      color: var(--rel-colors-white);
+    :host([border="rounded"]) .chip {
+      border-radius: 1000px;
+      padding-left: 12px;
+      padding-right: 12px;
     }
 
-    .chip-orange {
-      background: var(--rel-colors-yellow-pending);
-      color: var(--rel-colors-white);
+    /* ── Tone x Variant — Default/Default state colors ── */
+    :host([tone="neutral"][variant="fill"]) .chip {
+      background: #0b0b0b;
+      color: #ffffff;
+    }
+    :host([tone="neutral"][variant="subtle"]) .chip {
+      background: #f5f5f5;
+      color: #0b0b0b;
+    }
+    :host([tone="danger"][variant="fill"]) .chip {
+      background: #f83b3b;
+      color: #ffffff;
+    }
+    :host([tone="danger"][variant="subtle"]) .chip {
+      background: #fff1f1;
+      color: #ce3131;
+    }
+    :host([tone="warning"][variant="fill"]) .chip {
+      background: #ffcb66;
+      color: #0b0b0b;
+    }
+    :host([tone="warning"][variant="subtle"]) .chip {
+      background: #ffefd1;
+      color: #713f12;
+    }
+    :host([tone="success"][variant="fill"]) .chip {
+      background: #00a86b;
+      color: #ffffff;
+    }
+    :host([tone="success"][variant="subtle"]) .chip {
+      background: #edf8f4;
+      color: #008655;
+    }
+    :host([tone="info"][variant="fill"]) .chip {
+      background: #0091ea;
+      color: #ffffff;
+    }
+    :host([tone="info"][variant="subtle"]) .chip {
+      background: #eff7ff;
+      color: #00528d;
     }
 
-    .chip-red {
-      background: var(--rel-colors-red-primary);
-      color: var(--rel-colors-white);
+    /* ── Hover / Dragged — Figma only specs explicit color shifts for the
+       "neutral" tone; the other four tones have no hover/dragged sample to
+       match, so a generic brightness dim covers them instead of leaving
+       hover completely inert. Flagged in the handoff notes. ── */
+    :host([tone="neutral"][variant="fill"]) .chip:hover {
+      background: #363636;
+    }
+    :host([tone="neutral"][variant="fill"]) .chip:active,
+    :host([tone="neutral"][variant="fill"][dragging]) .chip {
+      background: #404040;
+    }
+    :host([tone="neutral"][variant="subtle"]) .chip:active,
+    :host([tone="neutral"][variant="subtle"][dragging]) .chip {
+      background: #e5e5e5;
     }
 
-    .chip-green {
-      background: var(--rel-colors-green-tertiary);
-      color: var(--rel-colors-white);
+    :host(:not([tone="neutral"])) .chip:hover {
+      filter: brightness(0.96);
+    }
+    :host(:not([tone="neutral"])) .chip:active,
+    :host(:not([tone="neutral"])[dragging]) .chip {
+      filter: brightness(0.92);
     }
 
-    /* AVATAR — light mode (all tones)
-       rel-avatar uses background-color: var(--rel-colors-gray-disabled-text).
-       Overriding that custom property here pins avatar bg to white across all tones.
-       NOTE: rel-avatar hardcodes color: #ffffff — text color (#000000) cannot be
-       overridden from outside the shadow DOM without ::part() or a custom property
-       in rel-avatar itself. */
-    .chip rel-avatar {
-      display: inline-flex;
-      width: 20px !important;
-      height: 20px !important;
-      flex-shrink: 0;
-      font-size: 10px;
+    :host([dragging]) .chip {
+      cursor: grabbing;
     }
 
-    .chip-default rel-avatar,
-    .chip-blue rel-avatar,
-    .chip-orange rel-avatar,
-    .chip-red rel-avatar,
-    .chip-green rel-avatar {
-      --rel-colors-gray-disabled-text: #ffffff;
-      --rel-avatar-color: #000000;
+    /* ── Focused — 1.5px outline, drawn outside (matches Figma's
+       strokeAlign:OUTSIDE) so it never affects layout. Same color
+       regardless of tone, per spec. OUTSIDE alignment means the stroke
+       sits flush against the shape's edge with zero gap, extending
+       outward by strokeWeight — outline-offset must be 0, not a positive
+       gap (a positive offset was the bug: it drew a visible gap that
+       doesn't exist in Figma). ── */
+    .chip:focus-visible {
+      outline: 1.5px solid var(--rel-chip-focus-ring, #0b0b0b);
+      outline-offset: 0;
     }
 
+    /* ── Icons ── */
+    /* rel-icon renders its SVG inside its own shadow root, so sizing has to
+       go through --rel-icon-size (a custom property — pierces shadow
+       boundaries) rather than a ".chip-icon svg" selector, which can never
+       reach across shadow DOM. */
     .chip-icon {
+      flex-shrink: 0;
+    }
+
+    :host([size="lg"]) .chip-icon {
+      --rel-icon-size: 16px;
+    }
+
+    :host([size="md"]) .chip-icon {
+      --rel-icon-size: 14px;
+    }
+
+    :host([size="sm"]) .chip-icon {
+      --rel-icon-size: 12px;
+    }
+
+    /* ── Avatar — not shown in the Figma sample. rel-avatar sizes its inner
+       .avatar div directly from its own "size" prop (fixed presets only —
+       no --rel-avatar-size custom property escape hatch like rel-icon has),
+       so a host-level width/height override here would only resize the
+       empty outer wrapper, not the actual painted circle. "xs" (20px) is
+       rel-avatar's smallest preset; used uniformly across all three chip
+       sizes since there's nothing smaller to ask for. ── */
+    .chip rel-avatar {
       display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
       flex-shrink: 0;
     }
 
-    .chip-icon * {
-      width: 100%;
-      height: 100%;
+    :host([variant="fill"]) .chip rel-avatar {
+      --rel-avatar-bg-fill: rgba(255, 255, 255, 0.25);
+      --rel-avatar-color-fill: #ffffff;
     }
 
-    .chip-icon ::slotted(svg),
-    .chip-icon svg {
-      width: 16px;
-      height: 16px;
-      fill: currentColor;
+    :host([variant="subtle"]) .chip rel-avatar {
+      --rel-avatar-bg-fill: rgba(11, 11, 11, 0.12);
+      --rel-avatar-color-fill: currentColor;
     }
 
+    /* ── Remove (close) button ── */
     .chip-remove {
-      margin-left: var(--rel-spacing-space-3xs);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
       cursor: pointer;
       opacity: 0.7;
       background: none;
@@ -4620,86 +4981,85 @@ RelChip.styles = css14`
     }
 
     .chip-remove:focus-visible {
-      outline: 2px solid var(--rel-colors-white);
+      outline: 1.5px solid currentColor;
       outline-offset: 1px;
       border-radius: 2px;
     }
 
-    /* DARK THEME */
-    /* NOTE: #717171 (chip-default dark color) has no exact vars-v2 token        */
-    /* NOTE: #FFFBF5 (chip-orange dark bg) has no exact vars-v2 token;
-       nearest is --rel-colors-gray-light (#FAFAFA)                              */
-
-    /* Reinforce layout — external dark-mode stylesheets can override display/width on the host */
-    :host-context([data-theme="dark"]) .chip {
-      display: inline-flex;
-      width: auto;
-    }
-
-    :host-context([data-theme="dark"]) .chip-default {
-      /* --rel-colors-gray-screen-bg flips to #262626 in dark — hardcoded to preserve #EEEEEE */
-      background: #EEEEEE;
-      color: #717171;
+    :host([size="lg"]) .chip-remove {
+      --rel-icon-size: 16px;
     }
-
-    :host-context([data-theme="dark"]) .chip-blue {
-      /* --rel-colors-blue-bg flips to #0f1e2c in dark mode — hardcoded to preserve #E1F2FF */
-      background: #E1F2FF;
-      color: var(--rel-colors-blue-tertiary);
+    :host([size="md"]) .chip-remove {
+      --rel-icon-size: 14px;
     }
-
-    :host-context([data-theme="dark"]) .chip-orange {
-      background: #FFFBF5;
-      color: var(--rel-colors-yellow-pending);
+    :host([size="sm"]) .chip-remove {
+      --rel-icon-size: 12px;
     }
 
-    :host-context([data-theme="dark"]) .chip-red {
-      background: var(--rel-colors-red-light);
-      color: var(--rel-colors-red-primary);
+    /* ── Dark mode — Figma had no dark-mode sample for this new component
+       set. Fill stays unchanged (the saturated tones already read fine on
+       dark surfaces); Subtle gets a dark-tinted background, following the
+       same invert pattern used elsewhere in this design system. Flagged in
+       the handoff notes — adjust if exact values exist.
+       No [data-theme="dark"] :host(...) fallback here — :host() can never
+       be preceded by a combinator, so that form is invalid and silently
+       matches nothing (the exact bug hit and fixed multiple times in
+       rel-avatar/rel-select earlier this session). :host-context() alone
+       has universal modern browser support, so no fallback is needed. ── */
+    :host-context([data-theme="dark"])[tone="neutral"][variant="subtle"] .chip {
+      background: #333333;
+      color: #f5f5f5;
     }
 
-    :host-context([data-theme="dark"]) .chip-green {
-      background: var(--rel-colors-green-bg-light);
-      color: var(--rel-colors-green-tertiary);
+    :host-context([data-theme="dark"])[tone="danger"][variant="subtle"] .chip {
+      background: #3d1414;
+      color: #ff8080;
     }
 
-    /* AVATAR — dark mode (per tone: bg = light fill color, text = white) */
-    :host-context([data-theme="dark"]) .chip-default rel-avatar {
-      --rel-colors-gray-disabled-text: #717171;
-      --rel-avatar-color: #ffffff;
+    :host-context([data-theme="dark"])[tone="warning"][variant="subtle"] .chip {
+      background: #3d2e0a;
+      color: #ffd980;
     }
 
-    :host-context([data-theme="dark"]) .chip-blue rel-avatar {
-      --rel-colors-gray-disabled-text: #0059F4;
-      --rel-avatar-color: #ffffff;
+    :host-context([data-theme="dark"])[tone="success"][variant="subtle"] .chip {
+      background: #0d2e22;
+      color: #4ddba3;
     }
 
-    :host-context([data-theme="dark"]) .chip-orange rel-avatar {
-      --rel-colors-gray-disabled-text: #FFBF43;
-      --rel-avatar-color: #ffffff;
+    :host-context([data-theme="dark"])[tone="info"][variant="subtle"] .chip {
+      background: #0a2e45;
+      color: #66c2ff;
     }
 
-    :host-context([data-theme="dark"]) .chip-red rel-avatar {
-      --rel-colors-gray-disabled-text: #CC0000;
-      --rel-avatar-color: #ffffff;
+    :host-context([data-theme="dark"])[tone="neutral"][variant="fill"] .chip {
+      background: #f5f5f5;
+      color: #0b0b0b;
     }
 
-    :host-context([data-theme="dark"]) .chip-green rel-avatar {
-      --rel-colors-gray-disabled-text: #00A86B;
-      --rel-avatar-color: #ffffff;
+    :host-context([data-theme="dark"]) .chip-remove:focus-visible {
+      outline-color: currentColor;
     }
   `;
 __decorateClass([
   property13({ type: String })
 ], RelChip.prototype, "label", 2);
 __decorateClass([
-  property13({ type: String })
+  property13({ type: String, reflect: true })
 ], RelChip.prototype, "tone", 2);
 __decorateClass([
-  property13({ type: String })
+  property13({ type: String, reflect: true })
+], RelChip.prototype, "variant", 2);
+__decorateClass([
+  property13({ type: String, reflect: true })
+], RelChip.prototype, "size", 2);
+__decorateClass([
+  property13({ type: String, reflect: true })
+], RelChip.prototype, "border", 2);
+__decorateClass([
+  property13({ type: String, attribute: "leading-icon" })
 ], RelChip.prototype, "leadingIcon", 2);
 __decorateClass([
-  property13({ type: String })
+  property13({ type: String, attribute: "trailing-icon" })
 ], RelChip.prototype, "trailingIcon", 2);
 __decorateClass([
   property13({ type: String })
@@ -4710,6 +5070,12 @@ __decorateClass([
 __decorateClass([
   property13({ type: Boolean, reflect: true })
 ], RelChip.prototype, "removed", 2);
+__decorateClass([
+  property13({ type: Boolean, attribute: "draggable-chip" })
+], RelChip.prototype, "draggableChip", 2);
+__decorateClass([
+  state5()
+], RelChip.prototype, "dragging", 2);
 RelChip = __decorateClass([
   customElement14("rel-chip")
 ], RelChip);
@@ -4855,7 +5221,7 @@ RelDivider = __decorateClass([
 
 // src/components/rel-drawer/rel-drawer.ts
 import { LitElement as LitElement18, html as html18, css as css18 } from "lit";
-import { customElement as customElement18, property as property16, state as state5, query as query4 } from "lit/decorators.js";
+import { customElement as customElement18, property as property16, state as state6, query as query4 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 
 // src/components/rel-drawer/rel-drawer-footer.ts
@@ -4920,7 +5286,7 @@ var RelDrawer = class extends LitElement18 {
         }
         const firstFocusable = focusable[0];
         const lastFocusable = focusable[focusable.length - 1];
-        const activeElement = this.shadowRoot?.activeElement || document.activeElement;
+        const activeElement = document.activeElement;
         if (e.shiftKey) {
           if (activeElement === firstFocusable) {
             e.preventDefault();
@@ -4994,7 +5360,7 @@ var RelDrawer = class extends LitElement18 {
     this.lockScroll();
     if (this.modal) {
       this.updateComplete.then(() => {
-        const focusTarget = this.shadowRoot?.querySelector("[autofocus], .close-button, .panel");
+        const focusTarget = this.querySelector("[autofocus]") ?? this.querySelector(".close-button") ?? this.querySelector(".panel");
         focusTarget?.focus();
       });
     }
@@ -5404,10 +5770,10 @@ __decorateClass([
   property16({ type: String })
 ], RelDrawer.prototype, "description", 2);
 __decorateClass([
-  state5()
+  state6()
 ], RelDrawer.prototype, "isDragging", 2);
 __decorateClass([
-  state5()
+  state6()
 ], RelDrawer.prototype, "dragOffset", 2);
 __decorateClass([
   query4(".panel")
@@ -5583,7 +5949,7 @@ RelLayout = __decorateClass([
 
 // src/components/rel-menu/rel-menu.ts
 import { LitElement as LitElement21, html as html21 } from "lit";
-import { customElement as customElement21, property as property19, state as state6 } from "lit/decorators.js";
+import { customElement as customElement21, property as property19, state as state7 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
 var RelMenuItem = class extends LitElement21 {
   constructor() {
@@ -5922,10 +6288,10 @@ __decorateClass([
   property19({ type: Array })
 ], RelMenu.prototype, "items", 2);
 __decorateClass([
-  state6()
+  state7()
 ], RelMenu.prototype, "focusedIndex", 2);
 __decorateClass([
-  state6()
+  state7()
 ], RelMenu.prototype, "_items", 2);
 RelMenu = __decorateClass([
   customElement21("rel-menu")
@@ -5933,7 +6299,7 @@ RelMenu = __decorateClass([
 
 // src/components/rel-menubar/rel-menubar.ts
 import { LitElement as LitElement23, html as html23 } from "lit";
-import { customElement as customElement23, state as state7 } from "lit/decorators.js";
+import { customElement as customElement23, state as state8 } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 
 // src/components/rel-radio/rel-radio.ts
@@ -5977,10 +6343,13 @@ var RelRadio = class extends LitElement22 {
   writeValue(value) {
     this.checked = value === this.value;
   }
+  get hasSelection() {
+    return this.selectedValue !== null && this.selectedValue !== "";
+  }
   renderOption(option) {
     const isChecked = this.selectedValue === option.value;
     const isDisabled = this.disabled || option.disabled;
-    const isErrorActive = this.error && !isChecked;
+    const isErrorActive = this.error && !this.hasSelection;
     const classes = [
       "rel-radio-option",
       isDisabled ? "disabled" : "",
@@ -6010,7 +6379,7 @@ var RelRadio = class extends LitElement22 {
       <div class="rel-radio-group">
         ${this.options.map((o) => this.renderOption(o))}
       </div>
-      ${this.error && this.errorMessage ? html22`<div class="error-message">${this.errorMessage}</div>` : ""}
+      ${this.error && this.errorMessage && !this.hasSelection ? html22`<div class="error-message">${this.errorMessage}</div>` : ""}
     `;
   }
 };
@@ -6023,16 +6392,15 @@ RelRadio.styles = css21`
     .rel-radio-group {
       display: flex;
       flex-direction: column;
+      align-items: flex-start;
       gap: var(--rel-spacing-space-xs);
     }
 
     .rel-radio-option {
-      display: flex;
+      display: inline-flex;
       flex-direction: column;
       gap: var(--rel-spacing-space-3xs);
       cursor: pointer;
-      padding: 4px 6px;
-      margin: -4px -6px;
     }
 
     .rel-radio-option.disabled {
@@ -6040,10 +6408,6 @@ RelRadio.styles = css21`
       cursor: not-allowed !important;
     }
 
-    .rel-radio-option:not(.disabled):hover {
-      background: var(--rel-color-bg-hover, #f5f5f5);
-    }
-
     .rel-radio-option:not(.disabled):hover .radio-custom {
       border-color: #525252;
     }
@@ -6057,8 +6421,8 @@ RelRadio.styles = css21`
     }
 
     .rel-radio-option:focus-within:has(input:focus-visible) {
-      outline: 1px solid #000000;
-      outline-offset: 0;
+      outline: 1.5px solid #000000;
+      outline-offset: 1px;
     }
 
     .radio-main {
@@ -6091,15 +6455,15 @@ RelRadio.styles = css21`
     }
 
     .radio-label {
-      font-size: var(--rel-fontSizes-sm);
+      font-size: var(--rel-fontSizes-md, 16px);
       font-weight: var(--rel-fontWeights-medium);
       color: var(--rel-color-text-primary);
     }
 
     .radio-supporting {
-      font-size: var(--rel-fontSizes-xs);
+      font-size: var(--rel-fontSizes-sm, 12px);
       margin-left: 28px;
-      color: var(--rel-color-text-placeholder);
+      color: #7D7D7D;
     }
 
     /* Error state — unchecked only */
@@ -6117,7 +6481,7 @@ RelRadio.styles = css21`
 
     /* Error message below group */
     .error-message {
-      font-size: var(--rel-fontSizes-xs, 10px);
+      font-size: var(--rel-fontSizes-sm, 12px);
       color: #CE3131;
       margin-top: var(--rel-spacing-space-2xs, 4px);
     }
@@ -6140,7 +6504,8 @@ RelRadio.styles = css21`
 
     :host-context([data-theme="dark"]) .rel-radio-option:focus-within:has(input:focus-visible),
     :host-context(.dark) .rel-radio-option:focus-within:has(input:focus-visible) {
-      outline-color: var(--rel-color-text-primary, #F5F5F5);
+      outline: 1.5px solid var(--rel-color-text-primary, #F5F5F5);
+      outline-offset: 1px;
     }
   `;
 __decorateClass([
@@ -6567,6 +6932,7 @@ RelMenubar._css = `
       font-family: var(--rel-fontFamilies-primary);
       font-size: var(--rel-fontSizes-sm);
       height: 40px;
+      width: fit-content;
     }
 
     .menubar-trigger {
@@ -6692,19 +7058,19 @@ RelMenubar._css = `
     }
   `;
 __decorateClass([
-  state7()
+  state8()
 ], RelMenubar.prototype, "menus", 2);
 __decorateClass([
-  state7()
+  state8()
 ], RelMenubar.prototype, "openMenuIndex", 2);
 __decorateClass([
-  state7()
+  state8()
 ], RelMenubar.prototype, "focusedTriggerIndex", 2);
 __decorateClass([
-  state7()
+  state8()
 ], RelMenubar.prototype, "focusedItemIndex", 2);
 __decorateClass([
-  state7()
+  state8()
 ], RelMenubar.prototype, "openSubmenuElement", 2);
 RelMenubar = __decorateClass([
   customElement23("rel-menubar")
@@ -6837,7 +7203,7 @@ RelNavbar = __decorateClass([
 
 // src/components/rel-topbar/rel-topbar.ts
 import { LitElement as LitElement32, html as html32, css as css29 } from "lit";
-import { customElement as customElement32, property as property25, state as state8 } from "lit/decorators.js";
+import { customElement as customElement32, property as property25, state as state9 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
 import "@reliability-design/icons/rel-icon";
 
@@ -7437,10 +7803,10 @@ __decorateClass([
   property25({ type: String })
 ], RelTopbar.prototype, "forceLayout", 2);
 __decorateClass([
-  state8()
+  state9()
 ], RelTopbar.prototype, "_overflowCount", 2);
 __decorateClass([
-  state8()
+  state9()
 ], RelTopbar.prototype, "_overflowItemsData", 2);
 RelTopbar = __decorateClass([
   customElement32("rel-topbar")
@@ -7448,7 +7814,7 @@ RelTopbar = __decorateClass([
 
 // src/components/rel-topbar/rel-topbar-item.ts
 import { LitElement as LitElement33, html as html33, css as css30 } from "lit";
-import { customElement as customElement33, property as property26, state as state9 } from "lit/decorators.js";
+import { customElement as customElement33, property as property26, state as state10 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
 import "@reliability-design/icons/rel-icon";
 var RelTopbarItem = class extends LitElement33 {
@@ -7732,7 +8098,7 @@ __decorateClass([
   property26({ type: String })
 ], RelTopbarItem.prototype, "value", 2);
 __decorateClass([
-  state9()
+  state10()
 ], RelTopbarItem.prototype, "_hasDropdown", 2);
 RelTopbarItem = __decorateClass([
   customElement33("rel-topbar-item")
@@ -7954,7 +8320,7 @@ RelTopbarProfile = __decorateClass([
 
 // src/components/rel-otp/rel-otp.ts
 import { LitElement as LitElement35, html as html35, css as css32 } from "lit";
-import { customElement as customElement35, property as property28, state as state10, query as query5 } from "lit/decorators.js";
+import { customElement as customElement35, property as property28, state as state11, query as query5 } from "lit/decorators.js";
 var RelOtp = class extends LitElement35 {
   constructor() {
     super(...arguments);
@@ -8420,7 +8786,7 @@ __decorateClass([
   property28({ type: String })
 ], RelOtp.prototype, "size", 2);
 __decorateClass([
-  state10()
+  state11()
 ], RelOtp.prototype, "cells", 2);
 __decorateClass([
   query5(".hidden-input")
@@ -8431,18 +8797,18 @@ RelOtp = __decorateClass([
 
 // src/components/rel-pagination/rel-pagination.ts
 import { LitElement as LitElement36, html as html36, css as css33 } from "lit";
-import { customElement as customElement36, property as property29, state as state11 } from "lit/decorators.js";
+import { customElement as customElement36, property as property29, state as state12 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
 var RelPagination = class extends LitElement36 {
   constructor() {
     super(...arguments);
+    this.type = "extended";
     this.defaultPage = 1;
     this.totalPages = 0;
-    this.siblingCount = 1;
-    this.boundaryCount = 1;
+    this.totalItems = 0;
+    this.perPage = 10;
+    this.showLabel = false;
     this.disabled = false;
-    this.density = "comfortable";
-    this.variant = "default";
     this.hrefTemplate = "";
     this.ariaLabel = "Pagination";
     this.currentPage = 1;
@@ -8450,17 +8816,15 @@ var RelPagination = class extends LitElement36 {
   connectedCallback() {
     super.connectedCallback();
     const totalPagesAttr = this.getAttribute("total-pages");
-    if (totalPagesAttr) {
-      this.totalPages = Number(totalPagesAttr);
-    }
+    if (totalPagesAttr) this.totalPages = Number(totalPagesAttr);
     const pageAttr = this.getAttribute("page");
-    if (pageAttr) {
-      this.page = Number(pageAttr);
-    }
+    if (pageAttr) this.page = Number(pageAttr);
     const defaultPageAttr = this.getAttribute("default-page");
-    if (defaultPageAttr) {
-      this.defaultPage = Number(defaultPageAttr);
-    }
+    if (defaultPageAttr) this.defaultPage = Number(defaultPageAttr);
+    const totalItemsAttr = this.getAttribute("total-items");
+    if (totalItemsAttr) this.totalItems = Number(totalItemsAttr);
+    const perPageAttr = this.getAttribute("per-page");
+    if (perPageAttr) this.perPage = Number(perPageAttr);
     this.currentPage = this.page ?? this.defaultPage;
   }
   updated(changedProperties) {
@@ -8471,47 +8835,43 @@ var RelPagination = class extends LitElement36 {
   get activePage() {
     return this.page ?? this.currentPage;
   }
-  generatePageItems() {
-    const items = [];
+  get computedTotalPages() {
+    if (this.totalPages > 0) return this.totalPages;
+    if (this.totalItems > 0 && this.perPage > 0) {
+      return Math.ceil(this.totalItems / this.perPage);
+    }
+    return 0;
+  }
+  generatePageNumbers() {
+    const pages = [];
     const current = this.activePage;
-    const total = this.totalPages;
-    if (total <= 0) return items;
-    items.push({ type: "prev" });
+    const total = this.computedTotalPages;
+    if (total <= 0) return pages;
     if (total <= 7) {
-      for (let i = 1; i <= total; i++) {
-        items.push({ type: "page", value: i });
-      }
+      for (let i = 1; i <= total; i++) pages.push(i);
     } else if (current <= 4) {
-      for (let i = 1; i <= 5; i++) {
-        items.push({ type: "page", value: i });
-      }
-      items.push({ type: "ellipsis" });
-      items.push({ type: "page", value: total });
+      for (let i = 1; i <= 5; i++) pages.push(i);
+      pages.push(-1);
+      pages.push(total);
     } else if (current >= total - 3) {
-      items.push({ type: "page", value: 1 });
-      items.push({ type: "ellipsis" });
-      for (let i = total - 4; i <= total; i++) {
-        items.push({ type: "page", value: i });
-      }
+      pages.push(1);
+      pages.push(-1);
+      for (let i = total - 4; i <= total; i++) pages.push(i);
     } else {
-      items.push({ type: "page", value: 1 });
-      items.push({ type: "ellipsis" });
-      items.push({ type: "page", value: current - 1 });
-      items.push({ type: "page", value: current });
-      items.push({ type: "page", value: current + 1 });
-      items.push({ type: "ellipsis" });
-      items.push({ type: "page", value: total });
+      pages.push(1);
+      pages.push(-1);
+      pages.push(current - 1);
+      pages.push(current);
+      pages.push(current + 1);
+      pages.push(-1);
+      pages.push(total);
     }
-    items.push({ type: "next" });
-    return items;
+    return pages;
   }
   handlePageChange(newPage) {
-    if (this.disabled || newPage < 1 || newPage > this.totalPages || newPage === this.activePage) {
-      return;
-    }
-    if (this.page === void 0) {
-      this.currentPage = newPage;
-    }
+    const total = this.computedTotalPages;
+    if (this.disabled || newPage < 1 || newPage > total || newPage === this.activePage) return;
+    if (this.page === void 0) this.currentPage = newPage;
     this.dispatchEvent(
       new CustomEvent("rel-change", {
         detail: { page: newPage },
@@ -8520,292 +8880,335 @@ var RelPagination = class extends LitElement36 {
       })
     );
   }
-  getHref(page) {
-    if (!this.hrefTemplate) return "#";
-    return this.hrefTemplate.replace(/\{page\}/, String(page));
+  renderChevronLeft() {
+    return html36`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>`;
   }
-  handleKeyDown(event, callback) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      callback();
-    }
+  renderChevronRight() {
+    return html36`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>`;
   }
-  renderPrevIcon() {
+  renderNavBtn(dir) {
+    const current = this.activePage;
+    const total = this.computedTotalPages;
+    const isPrev = dir === "prev";
+    const isDisabled = isPrev ? current <= 1 : current >= total;
+    const targetPage = isPrev ? current - 1 : current + 1;
     return html36`
-      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M15 18l-6-6 6-6" />
-      </svg>
+      <button
+        type="button"
+        class="pag-nav-btn"
+        aria-label="${isPrev ? "Previous page" : "Next page"}"
+        ?disabled="${isDisabled}"
+        @click="${() => this.handlePageChange(targetPage)}"
+      >
+        ${isPrev ? this.renderChevronLeft() : this.renderChevronRight()}
+      </button>
     `;
   }
-  renderNextIcon() {
+  renderExtended() {
+    const pages = this.generatePageNumbers();
+    const current = this.activePage;
+    const total = this.computedTotalPages;
     return html36`
-      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M9 18l6-6-6-6" />
-      </svg>
+      <div class="pag-root" role="navigation" aria-label="${this.ariaLabel}">
+        <div class="pag-stack">
+          ${this.renderNavBtn("prev")}
+          <div class="pag-numbers">
+            ${pages.map(
+      (p) => p === -1 ? html36`<span class="pag-ellipsis">...</span>` : html36`<button
+                    type="button"
+                    class="pag-page-btn"
+                    aria-label="Page ${p}"
+                    aria-current="${p === current ? "page" : "false"}"
+                    @click="${() => this.handlePageChange(p)}"
+                  >${p}</button>`
+    )}
+          </div>
+          ${this.renderNavBtn("next")}
+        </div>
+        ${this.showLabel ? html36`<span class="pag-label">Viewing page ${current} of ${total}</span>` : null}
+      </div>
     `;
   }
-  renderItem(item) {
+  renderCompact() {
     const current = this.activePage;
-    const useLinks = !!this.hrefTemplate;
-    if (item.type === "spacer") {
-      return html36`<span class="pagination-spacer"></span>`;
-    }
-    if (item.type === "ellipsis") {
-      return html36`<span class="ellipsis">…</span>`;
-    }
-    if (item.type === "prev") {
-      const disabled = current === 1 || this.disabled;
-      const targetPage = current - 1;
-      if (useLinks) {
-        const href = disabled ? "#" : this.getHref(targetPage);
-        return html36`
-          <a
-            href="${href}"
-            class="prev-btn"
-            aria-label="Go to previous page"
-            aria-disabled="${disabled}"
-            @click="${(e) => {
-          if (disabled) {
-            e.preventDefault();
-            return;
-          }
-          e.preventDefault();
-          this.handlePageChange(targetPage);
-        }}"
-          >
-            ${this.variant === "icons" ? this.renderPrevIcon() : "Previous"}
-          </a>
-        `;
-      }
-      return html36`
-        <button
-          type="button"
-          class="prev-btn"
-          aria-label="Go to previous page"
-          ?disabled="${disabled}"
-          @click="${() => this.handlePageChange(targetPage)}"
-        >
-          ${this.variant === "icons" ? this.renderPrevIcon() : "Previous"}
-        </button>
-      `;
-    }
-    if (item.type === "next") {
-      const disabled = current === this.totalPages || this.disabled;
-      const targetPage = current + 1;
-      if (useLinks) {
-        const href = disabled ? "#" : this.getHref(targetPage);
-        return html36`
-          <a
-            href="${href}"
-            class="next-btn"
-            aria-label="Go to next page"
-            aria-disabled="${disabled}"
-            @click="${(e) => {
-          if (disabled) {
-            e.preventDefault();
-            return;
-          }
-          e.preventDefault();
-          this.handlePageChange(targetPage);
-        }}"
-          >
-            ${this.variant === "icons" ? this.renderNextIcon() : "Next"}
-          </a>
-        `;
-      }
-      return html36`
-        <button
-          type="button"
-          class="next-btn"
-          aria-label="Go to next page"
-          ?disabled="${disabled}"
-          @click="${() => this.handlePageChange(targetPage)}"
-        >
-          ${this.variant === "icons" ? this.renderNextIcon() : "Next"}
-        </button>
-      `;
-    }
-    const pageNum = item.value;
-    const isCurrent = pageNum === current;
-    if (useLinks) {
-      const href = this.getHref(pageNum);
-      return html36`
-        <a
-          href="${href}"
-          aria-label="Go to page ${pageNum}"
-          aria-current="${isCurrent ? "page" : "false"}"
-          @click="${(e) => {
-        e.preventDefault();
-        this.handlePageChange(pageNum);
-      }}"
-        >
-          ${pageNum}
-        </a>
-      `;
-    }
+    const total = this.computedTotalPages;
     return html36`
-      <button
-        type="button"
-        aria-label="Go to page ${pageNum}"
-        aria-current="${isCurrent ? "page" : "false"}"
-        @click="${() => this.handlePageChange(pageNum)}"
-      >
-        ${pageNum}
-      </button>
+      <div class="pag-stack" role="navigation" aria-label="${this.ariaLabel}">
+        ${this.renderNavBtn("prev")}
+        <span class="pag-page-text">Page ${current} of ${total}</span>
+        ${this.renderNavBtn("next")}
+      </div>
     `;
   }
-  render() {
-    const items = this.generatePageItems();
+  renderCountText() {
+    const current = this.activePage;
+    const total = this.computedTotalPages;
+    const effectiveTotalItems = this.totalItems > 0 ? this.totalItems : total * this.perPage;
+    const start = (current - 1) * this.perPage + 1;
+    const end = Math.min(current * this.perPage, effectiveTotalItems);
     return html36`
-      <nav
-        class="${this.density === "compact" ? "compact" : ""}"
-        aria-label="${this.ariaLabel}"
-        role="navigation"
-      >
-        ${items.map((item) => this.renderItem(item))}
-      </nav>
+      <div class="pag-count" role="navigation" aria-label="${this.ariaLabel}">
+        <span class="pag-count-text">${start}–${end} of ${effectiveTotalItems}</span>
+        <div class="pag-count-nav">
+          ${this.renderNavBtn("prev")}
+          <span class="pag-current-num">${current}</span>
+          ${this.renderNavBtn("next")}
+        </div>
+      </div>
     `;
   }
+  render() {
+    if (this.type === "compact") return this.renderCompact();
+    if (this.type === "count-text") return this.renderCountText();
+    return this.renderExtended();
+  }
 };
 RelPagination.styles = css33`
     :host {
       display: inline-block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fontFamilies-primary, 'Poppins', sans-serif);
     }
 
-    nav {
+    :host([type="count-text"]) {
+      display: block;
+      width: 100%;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) button {
+      pointer-events: none;
+    }
+
+    /* ── Root / Stack containers ──────────────────────────────── */
+
+    .pag-root {
       display: flex;
+      flex-direction: column;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs);
-      min-width: max-content;
+      gap: 16px;
     }
 
-    nav.compact {
-      gap: var(--rel-spacing-space-3xs);
+    .pag-stack {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
     }
 
-    button,
-    a {
+    .pag-count {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      width: 100%;
+    }
+
+    /* count-text right-side nav: no gap (40+24+40 = 104px, matches Figma) */
+    .pag-count-nav {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    /* ── Page number list (tighter 4px gap) ──────────────────── */
+
+    .pag-numbers {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    /* ── Prev / Next — circular buttons ──────────────────────── */
+
+    .pag-nav-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       padding: 0;
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-color-text-heading);
-      background: var(--rel-color-bg-primary);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: 1000px;
+      border: 1px solid #e5e5e5;
+      background: #ffffff;
       cursor: pointer;
-      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-      text-decoration: none;
-      outline: none;
-      user-select: none;
+      color: #0b0b0b;
+      box-sizing: border-box;
+      transition: background 0.15s ease;
+      flex-shrink: 0;
     }
 
-    button.prev-btn, button.next-btn,
-    a.prev-btn, a.next-btn {
-      width: auto;
-      padding: 0 var(--rel-spacing-space-sm);
+    .pag-nav-btn:hover:not(:disabled) {
+      background: #f5f5f5;
     }
 
-    nav.compact button,
-    nav.compact a {
-      width: 32px;
-      height: 32px;
-      padding: 0;
-      font-size: var(--rel-fontSizes-xs);
+    .pag-nav-btn:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus, #0059f4);
+      outline-offset: 2px;
     }
 
-    nav.compact button.prev-btn, nav.compact button.next-btn,
-    nav.compact a.prev-btn, nav.compact a.next-btn {
-      width: auto;
-      padding: 0 var(--rel-spacing-space-xs);
+    .pag-nav-btn:disabled {
+      opacity: 0.35;
+      cursor: not-allowed;
     }
 
-    button:hover:not(:disabled),
-    a:hover:not([aria-disabled="true"]) {
-      background: var(--rel-color-bg-secondary);
-      border-color: var(--rel-color-text-primary);
+    .pag-nav-btn svg {
+      width: 20px;
+      height: 20px;
     }
 
-    button:focus-visible,
-    a:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
-      outline-offset: 2px;
+    /* ── Page number buttons — square with 8px radius ─────────── */
+
+    .pag-page-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      padding: 8px;
+      border-radius: 8px;
+      border: 1px solid #e5e5e5;
+      background: #ffffff;
+      cursor: pointer;
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.3px;
+      color: #0b0b0b;
+      line-height: 22px;
+      box-sizing: border-box;
+      transition: background 0.15s ease, border-color 0.15s ease;
     }
 
-    button:disabled,
-    a[aria-disabled="true"] {
-      opacity: 0.5;
-      cursor: not-allowed;
+    .pag-page-btn:hover {
+      background: #f5f5f5;
     }
 
-    button[aria-current="page"],
-    a[aria-current="page"] {
-      background: var(--rel-color-bg-selected);
-      color: var(--rel-color-text-primary);
-      border-color: var(--rel-color-text-heading);
-      font-weight: var(--rel-fontWeights-semibold);
+    .pag-page-btn:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus, #0059f4);
+      outline-offset: 2px;
     }
 
-    button[aria-current="page"]:hover,
-    a[aria-current="page"]:hover {
-      background: var(--rel-color-bg-selected);
-      border-color: var(--rel-color-text-heading);
+    .pag-page-btn[aria-current="page"] {
+      background: #e5e5e5;
+      border-color: #0b0b0b;
     }
 
-    .ellipsis {
+    /* ── Ellipsis ─────────────────────────────────────────────── */
+
+    .pag-ellipsis {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
-      color: var(--rel-color-text-placeholder);
-      font-size: var(--rel-fontSizes-sm);
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.3px;
+      color: #0b0b0b;
       user-select: none;
     }
 
-    nav.compact .ellipsis {
-      width: 32px;
-      height: 32px;
-      font-size: var(--rel-fontSizes-xs);
+    /* ── Compact: "Page X of Y" ───────────────────────────────── */
+
+    .pag-page-text {
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.3px;
+      color: #0b0b0b;
+      line-height: 22px;
+      white-space: nowrap;
     }
 
-    .pagination-spacer {
+    /* ── Count-text: "1-5 of 50" ─────────────────────────────── */
+
+    .pag-count-text {
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.3px;
+      color: #0b0b0b;
+      line-height: 22px;
+      white-space: nowrap;
+    }
+
+    /* ── Count-text: inline current page number ───────────────── */
+
+    .pag-current-num {
       display: inline-flex;
-      width: 40px;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
       height: 40px;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.3px;
+      color: #0b0b0b;
+      line-height: 22px;
     }
 
-    nav.compact .pagination-spacer {
-      width: 32px;
-      height: 32px;
+    /* ── Extended sub-label ───────────────────────────────────── */
+
+    .pag-label {
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: -0.3px;
+      color: #7d7d7d;
+      line-height: 22px;
+      text-align: center;
     }
 
-    .icon {
-      width: 16px;
-      height: 16px;
-      display: inline-block;
+    /* ── Dark mode ───────────────────────────────────────────── */
+
+    :host-context([data-theme="dark"]) .pag-nav-btn,
+    [data-theme="dark"] .pag-nav-btn {
+      background: #1a1a1a;
+      border-color: #333333;
+      color: #f5f5f5;
     }
 
-    nav.compact .icon {
-      width: 14px;
-      height: 14px;
+    :host-context([data-theme="dark"]) .pag-nav-btn:hover:not(:disabled),
+    [data-theme="dark"] .pag-nav-btn:hover:not(:disabled) {
+      background: #2b2b2b;
     }
 
-    :host([disabled]) {
-      cursor: not-allowed;
+    :host-context([data-theme="dark"]) .pag-page-btn,
+    [data-theme="dark"] .pag-page-btn {
+      background: #1a1a1a;
+      border-color: #333333;
+      color: #f5f5f5;
     }
 
-    :host([disabled]) nav {
-      opacity: 0.5;
-      pointer-events: none;
+    :host-context([data-theme="dark"]) .pag-page-btn:hover,
+    [data-theme="dark"] .pag-page-btn:hover {
+      background: #2b2b2b;
+    }
+
+    :host-context([data-theme="dark"]) .pag-page-btn[aria-current="page"],
+    [data-theme="dark"] .pag-page-btn[aria-current="page"] {
+      background: #333333;
+      border-color: #f5f5f5;
+    }
+
+    :host-context([data-theme="dark"]) .pag-ellipsis,
+    :host-context([data-theme="dark"]) .pag-page-text,
+    :host-context([data-theme="dark"]) .pag-count-text,
+    :host-context([data-theme="dark"]) .pag-current-num,
+    [data-theme="dark"] .pag-ellipsis,
+    [data-theme="dark"] .pag-page-text,
+    [data-theme="dark"] .pag-count-text,
+    [data-theme="dark"] .pag-current-num {
+      color: #f5f5f5;
+    }
+
+    :host-context([data-theme="dark"]) .pag-label,
+    [data-theme="dark"] .pag-label {
+      color: #a3a3a3;
     }
   `;
+__decorateClass([
+  property29({ type: String, reflect: true })
+], RelPagination.prototype, "type", 2);
 __decorateClass([
   property29({ type: Number })
 ], RelPagination.prototype, "page", 2);
@@ -8817,19 +9220,16 @@ __decorateClass([
 ], RelPagination.prototype, "totalPages", 2);
 __decorateClass([
   property29({ type: Number })
-], RelPagination.prototype, "siblingCount", 2);
+], RelPagination.prototype, "totalItems", 2);
 __decorateClass([
   property29({ type: Number })
-], RelPagination.prototype, "boundaryCount", 2);
+], RelPagination.prototype, "perPage", 2);
+__decorateClass([
+  property29({ type: Boolean })
+], RelPagination.prototype, "showLabel", 2);
 __decorateClass([
   property29({ type: Boolean, reflect: true })
 ], RelPagination.prototype, "disabled", 2);
-__decorateClass([
-  property29({ type: String })
-], RelPagination.prototype, "density", 2);
-__decorateClass([
-  property29({ type: String })
-], RelPagination.prototype, "variant", 2);
 __decorateClass([
   property29({ type: String })
 ], RelPagination.prototype, "hrefTemplate", 2);
@@ -8837,7 +9237,7 @@ __decorateClass([
   property29({ type: String })
 ], RelPagination.prototype, "ariaLabel", 2);
 __decorateClass([
-  state11()
+  state12()
 ], RelPagination.prototype, "currentPage", 2);
 RelPagination = __decorateClass([
   customElement36("rel-pagination")
@@ -8845,7 +9245,7 @@ RelPagination = __decorateClass([
 
 // src/components/rel-popover/rel-popover.ts
 import { LitElement as LitElement37, html as html37, css as css34 } from "lit";
-import { customElement as customElement37, property as property30, state as state12, query as query6 } from "lit/decorators.js";
+import { customElement as customElement37, property as property30, state as state13, query as query6 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
 var RelPopover = class extends LitElement37 {
   constructor() {
@@ -9132,10 +9532,10 @@ __decorateClass([
   property30({ type: Boolean, attribute: "closeonoutsideclick" })
 ], RelPopover.prototype, "closeOnOutsideClick", 2);
 __decorateClass([
-  state12()
+  state13()
 ], RelPopover.prototype, "internalOpen", 2);
 __decorateClass([
-  state12()
+  state13()
 ], RelPopover.prototype, "contentStyle", 2);
 __decorateClass([
   query6(".content-wrapper")
@@ -10056,90 +10456,412 @@ RelSegmentedButton = __decorateClass([
 ], RelSegmentedButton);
 
 // src/components/rel-select/rel-select.ts
-import { LitElement as LitElement44, html as html44, css as css41 } from "lit";
-import { customElement as customElement44, property as property37 } from "lit/decorators.js";
+import { LitElement as LitElement44, html as html44, css as css41, nothing as nothing5 } from "lit";
+import { customElement as customElement44, property as property37, state as state14, query as query7 } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
 import "./vars-v2-VMGWTFJZ.css";
 import "@reliability-design/icons/rel-icon";
+function normalizeOption(o) {
+  if (typeof o === "string") return { value: o, label: o, supportingText: "" };
+  return { value: o.value, label: o.label ?? o.value, supportingText: o.supportingText ?? "" };
+}
 var RelSelect = class extends LitElement44 {
   constructor() {
     super(...arguments);
     this.label = "";
+    this.labelStyle = "default";
     this.options = [];
+    this.multiple = false;
     this.selected = "";
+    this.selectedValues = [];
     this.state = "default";
     this.supportingText = "";
     this.size = "medium";
     this.border = "rounded";
     this.leftIcon = "";
     this.rightIcon = "";
+    this.placeholder = "Select option";
+    this.searchPlaceholder = "Search option";
+    this.selectAllLabel = "Select all";
+    this.maxVisibleChips = 3;
+    this.noSearch = false;
+    this.open = false;
+    this.highlightedIndex = -1;
+    this.panelStyle = "";
+    this.searchValue = "";
+    this.internalState = "default";
+    this.uniqueId = `select-${Math.random().toString(36).slice(2)}`;
+    this.onOutsidePointerDown = (e) => {
+      if (!this.open) return;
+      const path = e.composedPath();
+      if (path.includes(this)) return;
+      this.closeListbox();
+    };
+    // Continuously re-deriving a fixed-position panel's coordinates from
+    // every page scroll event is fragile (it's what was causing the panel to
+    // jump to the top of the viewport). Instead, close the panel on any
+    // *outside* scroll, same as clicking outside — scrolling the option list
+    // itself (target is the listbox) is the one case that should NOT close it.
+    this.onPageScroll = (e) => {
+      if (!this.open) return;
+      if (e.composedPath()[0] === this.listboxEl) return;
+      this.closeListbox();
+    };
+    this.updatePosition = () => {
+      if (!this.triggerEl || !this.listboxEl) return;
+      this.listboxEl.setAttribute("data-open", "");
+      const t = this.triggerEl.getBoundingClientRect();
+      const c = this.listboxEl.getBoundingClientRect();
+      let top = t.bottom + 4;
+      if (top + c.height > window.innerHeight - 8) {
+        top = Math.max(8, t.top - c.height - 4);
+      }
+      let left = t.left;
+      if (left + t.width > window.innerWidth - 8) {
+        left = Math.max(8, window.innerWidth - t.width - 8);
+      }
+      this.panelStyle = `top:${top}px;left:${left}px;width:${t.width}px;`;
+    };
+    this.onSearchInput = (e) => {
+      this.searchValue = e.target.value;
+      this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
+      requestAnimationFrame(() => this.updatePosition());
+    };
   }
-  connectedCallback() {
-    super.connectedCallback();
-    const leftIcon = this.getAttribute("left-icon");
-    if (leftIcon) this.leftIcon = leftIcon;
-    const rightIcon = this.getAttribute("right-icon");
-    if (rightIcon) this.rightIcon = rightIcon;
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeGlobalListeners();
+  }
+  willUpdate(changed) {
+    if (changed.has("multiple") && this.multiple === false) {
+      this.selectedValues = [];
+    }
   }
-  onChange(event) {
-    const value = event.target.value;
-    this.selected = value;
+  get normalizedOptions() {
+    return this.options.map(normalizeOption);
+  }
+  /** Options matching the current search text (substring match, case-insensitive). */
+  get filteredOptions() {
+    const opts = this.normalizedOptions;
+    if (!this.searchValue) return opts;
+    const v = this.searchValue.toLowerCase();
+    return opts.filter((o) => o.label.toLowerCase().includes(v));
+  }
+  get hasValue() {
+    return this.multiple ? this.selectedValues.length > 0 : !!this.selected;
+  }
+  /** Icon size scales with the select's own size, matching the trigger. */
+  get iconSize() {
+    return this.size === "small" ? "xs" : this.size === "large" ? "md" : "sm";
+  }
+  /** The search field uses "small" sizing for both small and medium select — only "large" select bumps it to "medium". */
+  get searchIconSize() {
+    return this.size === "large" ? "md" : "sm";
+  }
+  get selectAllStatus() {
+    const filtered = this.filteredOptions;
+    if (filtered.length === 0) return "unchecked";
+    const selectedCount = filtered.filter((o) => this.selectedValues.includes(o.value)).length;
+    if (selectedCount === 0) return "unchecked";
+    if (selectedCount === filtered.length) return "checked";
+    return "indeterminate";
+  }
+  addGlobalListeners() {
+    document.addEventListener("pointerdown", this.onOutsidePointerDown);
+    window.addEventListener("resize", this.updatePosition);
+    window.addEventListener("scroll", this.onPageScroll, true);
+  }
+  removeGlobalListeners() {
+    document.removeEventListener("pointerdown", this.onOutsidePointerDown);
+    window.removeEventListener("resize", this.updatePosition);
+    window.removeEventListener("scroll", this.onPageScroll, true);
+  }
+  emitChange() {
     this.dispatchEvent(
       new CustomEvent("changed", {
-        detail: { value },
+        detail: { value: this.multiple ? this.selectedValues : this.selected },
         bubbles: true,
         composed: true
       })
     );
   }
+  openListbox() {
+    if (this.state === "disabled" || this.open) return;
+    this.open = true;
+    this.searchValue = "";
+    this.highlightedIndex = -1;
+    this.addGlobalListeners();
+    requestAnimationFrame(() => {
+      this.updatePosition();
+      if (!this.noSearch) {
+        this.searchInputEl?.focus({ preventScroll: true });
+      }
+    });
+  }
+  closeListbox() {
+    if (!this.open) return;
+    this.open = false;
+    this.removeGlobalListeners();
+    this.triggerEl?.focus();
+  }
+  selectSingleOption(option) {
+    this.selected = option.value;
+    if (this.state === "error") this.state = "default";
+    this.closeListbox();
+    this.emitChange();
+  }
+  toggleMultiOption(option) {
+    const idx = this.selectedValues.indexOf(option.value);
+    this.selectedValues = idx >= 0 ? this.selectedValues.filter((v) => v !== option.value) : [...this.selectedValues, option.value];
+    if (this.state === "error") this.state = "default";
+    this.emitChange();
+  }
+  toggleSelectAll() {
+    const filtered = this.filteredOptions;
+    const status = this.selectAllStatus;
+    if (status === "checked") {
+      const filteredValues = new Set(filtered.map((o) => o.value));
+      this.selectedValues = this.selectedValues.filter((v) => !filteredValues.has(v));
+    } else {
+      const toAdd = filtered.map((o) => o.value).filter((v) => !this.selectedValues.includes(v));
+      this.selectedValues = [...this.selectedValues, ...toAdd];
+    }
+    if (this.state === "error") this.state = "default";
+    this.emitChange();
+  }
+  removeChip(value) {
+    if (this.state === "disabled") return;
+    this.selectedValues = this.selectedValues.filter((v) => v !== value);
+    this.emitChange();
+  }
+  onTriggerClick() {
+    if (this.open) this.closeListbox();
+    else this.openListbox();
+  }
+  onTriggerKeyDown(e) {
+    if (this.state === "disabled") return;
+    if (!this.open) {
+      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+        e.preventDefault();
+        this.openListbox();
+      }
+      return;
+    }
+    if (this.noSearch) this.handleListNavigation(e);
+  }
+  onSearchKeyDown(e) {
+    this.handleListNavigation(e);
+  }
+  handleListNavigation(e) {
+    const filtered = this.filteredOptions;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
+          const opt = filtered[this.highlightedIndex];
+          if (this.multiple) this.toggleMultiOption(opt);
+          else this.selectSingleOption(opt);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        this.closeListbox();
+        break;
+      case "Tab":
+        this.closeListbox();
+        break;
+    }
+  }
+  renderChips() {
+    const values = this.selectedValues;
+    const visible = values.slice(0, this.maxVisibleChips);
+    const overflow = values.length - visible.length;
+    const opts = this.normalizedOptions;
+    return html44`
+      <span class="select-chips">
+        ${repeat(
+      visible,
+      (v) => v,
+      (v) => {
+        const opt = opts.find((o) => o.value === v);
+        return html44`
+              <rel-chip
+                label="${opt?.label ?? v}"
+                size="sm"
+                variant="subtle"
+                border="default"
+                ?removable=${this.state !== "disabled"}
+                @click=${(e) => e.stopPropagation()}
+                @removed=${(e) => {
+          e.stopPropagation();
+          this.removeChip(v);
+        }}
+              ></rel-chip>
+            `;
+      }
+    )}
+        ${overflow > 0 ? html44`<rel-chip label="+${overflow}" size="sm" variant="fill" border="default"></rel-chip>` : nothing5}
+      </span>
+    `;
+  }
   render() {
-    const containerClasses = [
-      "select-container",
-      this.leftIcon ? "with-left-icon" : "",
-      this.rightIcon ? "with-right-icon" : "",
-      `select-${this.size}`
-    ].filter(Boolean).join(" ");
+    const opts = this.normalizedOptions;
+    const filtered = this.filteredOptions;
+    const isDisabled = this.state === "disabled";
+    const showFloatingChrome = this.labelStyle === "floating" && !!this.label;
     const wrapperClasses = [
       "select-wrapper",
-      `select-${this.state}`,
-      `border-${this.border}`
-    ].join(" ");
-    const selectClasses = [this.state === "error" ? "error" : ""].filter(Boolean).join(" ");
-    const isDisabled = this.state === "disabled";
+      this.size,
+      this.state,
+      `border-${this.border}`,
+      showFloatingChrome ? "floating" : "",
+      this.internalState === "focused" ? "focused" : "",
+      this.hasValue ? "has-value" : "",
+      this.open ? "open" : ""
+    ].filter(Boolean).join(" ");
+    const listboxId = `${this.uniqueId}-listbox`;
+    const activeOptionId = this.open && this.highlightedIndex >= 0 ? `${this.uniqueId}-option-${this.highlightedIndex}` : "";
+    const selectedSingle = opts.find((o) => o.value === this.selected);
     return html44`
       <div class="${wrapperClasses}">
-        ${this.label ? html44`<label class="select-label">${this.label}</label>` : ""}
+        ${!showFloatingChrome && this.label ? html44`<label class="select-label" for="${this.uniqueId}">${this.label}</label>` : ""}
 
-        <div class="${containerClasses}">
-          ${this.leftIcon ? html44`<rel-icon name="${this.leftIcon}" size="sm" class="icon left"></rel-icon>` : ""}
+        <div class="select-container">
+          ${showFloatingChrome ? html44`<span class="floating-label${this.leftIcon ? " has-left-icon" : ""}"
+                >${this.label}</span
+              >` : ""}
 
-          <select
-            class="${selectClasses}"
+          <button
+            id="${this.uniqueId}"
+            type="button"
+            class="select-trigger"
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-expanded="${this.open}"
+            aria-controls="${listboxId}"
+            aria-activedescendant="${activeOptionId}"
+            aria-invalid="${this.state === "error"}"
+            aria-label="${this.label || this.placeholder}"
             ?disabled="${isDisabled}"
-            @change="${this.onChange}"
-            .value="${this.selected}">
-            <option value="" disabled ?selected="${!this.selected}" hidden>
-              Select Option
-            </option>
-            ${this.options.map(
-      (option) => html44`
-                <option value="${option}" ?selected="${option === this.selected}">
-                  ${option}
-                </option>
-              `
-    )}
-          </select>
+            @click="${this.onTriggerClick}"
+            @keydown="${this.onTriggerKeyDown}"
+            @focus="${() => this.internalState = "focused"}"
+            @blur="${() => this.internalState = "default"}"
+          >
+            ${this.leftIcon ? html44`<rel-icon name="${this.leftIcon}" size="${this.iconSize}" class="icon left"></rel-icon>` : ""}
 
-          ${this.rightIcon ? html44`<span class="icon right">${this.rightIcon}</span>` : ""}
+            ${this.multiple ? this.selectedValues.length > 0 ? html44`<span class="select-value">${this.renderChips()}</span>` : html44`<span class="select-value placeholder">
+                    <span class="select-value-text">${this.placeholder}</span>
+                  </span>` : html44`<span class="select-value ${selectedSingle ? "" : "placeholder"}">
+                  <span class="select-value-text"
+                    >${selectedSingle ? selectedSingle.label : this.placeholder}</span
+                  >
+                </span>`}
 
-          <rel-icon name="chevron-down" size="sm" class="icon chevron"></rel-icon>
+            <rel-icon
+              name="${this.rightIcon || "chevron-down"}"
+              size="${this.iconSize}"
+              class="icon ${this.rightIcon ? "" : "chevron"}"
+            ></rel-icon>
+          </button>
         </div>
 
-        ${this.supportingText ? html44`
-              <span
-                class="supporting-text ${this.state === "error" ? "error-text" : ""}">
-                ${this.supportingText}
-              </span>
-            ` : ""}
+        ${this.supportingText ? html44`<span class="select-support ${this.state === "error" ? "error" : ""}">
+              ${this.supportingText}
+            </span>` : ""}
+      </div>
+
+      <div
+        id="${listboxId}"
+        class="select-listbox"
+        role="listbox"
+        aria-multiselectable="${this.multiple}"
+        aria-label="${this.label || "Options"}"
+        style="${this.panelStyle}"
+        ?data-open="${this.open}"
+      >
+        ${!this.noSearch ? html44`<div class="select-search">
+              <div class="search-input-wrap">
+                <rel-icon name="search" size="${this.searchIconSize}" class="icon"></rel-icon>
+                <input
+                  class="search-input"
+                  type="text"
+                  placeholder="${this.searchPlaceholder}"
+                  .value="${this.searchValue}"
+                  @input="${this.onSearchInput}"
+                  @keydown="${(e) => this.onSearchKeyDown(e)}"
+                />
+              </div>
+            </div>` : ""}
+
+        ${filtered.length === 0 ? html44`<div class="select-empty">
+              ${opts.length === 0 ? "No options available" : "No matches found"}
+            </div>` : this.multiple ? html44`
+              <div class="select-all-row">
+                <rel-checkbox
+                  label="${this.selectAllLabel}"
+                  status="${this.selectAllStatus}"
+                  @rel-change=${(e) => {
+      e.stopPropagation();
+      this.toggleSelectAll();
+    }}
+                ></rel-checkbox>
+              </div>
+              <div class="select-options">
+                ${repeat(
+      filtered,
+      (option) => option.value,
+      (option, index) => html44`
+                    <div
+                      id="${this.uniqueId}-option-${index}"
+                      class="checkbox-option ${index === this.highlightedIndex ? "highlighted" : ""}"
+                      role="option"
+                      aria-selected="${this.selectedValues.includes(option.value)}"
+                      @pointerenter="${() => this.highlightedIndex = index}"
+                    >
+                      <rel-checkbox
+                        label="${option.label}"
+                        supportingtext="${option.supportingText}"
+                        status="${this.selectedValues.includes(option.value) ? "checked" : "unchecked"}"
+                        @rel-change=${(e) => {
+        e.stopPropagation();
+        this.toggleMultiOption(option);
+      }}
+                      ></rel-checkbox>
+                    </div>
+                  `
+    )}
+              </div>
+            ` : html44`
+              <div class="select-options">
+                ${repeat(
+      filtered,
+      (option) => option.value,
+      (option, index) => html44`
+                    <div
+                      id="${this.uniqueId}-option-${index}"
+                      class="select-option ${index === this.highlightedIndex ? "highlighted" : ""}"
+                      role="option"
+                      aria-selected="${option.value === this.selected}"
+                      @mousedown="${(e) => e.preventDefault()}"
+                      @click="${() => this.selectSingleOption(option)}"
+                      @pointerenter="${() => this.highlightedIndex = index}"
+                    >
+                      <span class="select-option-label">${option.label}</span>
+                      ${option.value === this.selected ? html44`<rel-icon name="check" size="sm" class="select-option-check"></rel-icon>` : ""}
+                    </div>
+                  `
+    )}
+              </div>
+            `}
       </div>
     `;
   }
@@ -10154,258 +10876,686 @@ RelSelect.styles = css41`
     .select-wrapper {
       display: flex;
       flex-direction: column;
+      gap: var(--rel-spacing-space-2xs);
       width: 100%;
     }
 
+    /* Dims everything inside uniformly (label, trigger, icons, value text,
+       supporting text) — matches rel-button's :host([disabled]) opacity
+       approach instead of relying on one barely-different background tint. */
+    .select-wrapper.disabled {
+      opacity: 0.5;
+    }
+
     .select-label {
-      font-size: var(--rel-fontSizes-sm);
-      margin-bottom: var(--rel-spacing-space-3xs);
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-color-text-heading);
+      font-size: var(--rel-fontSizes-sm, 14px);
+      font-weight: var(--rel-fontWeights-regular, 400);
+      color: var(--rel-select-label-color, #363636);
     }
 
+    /* Error only colors the border/focus ring and the supporting text below
+       the field — label, floating label, placeholder, and icons stay normal. */
+
+    /* Container */
     .select-container {
       position: relative;
+    }
+
+    /* Trigger button — visually a text field, semantically a combobox button */
+    .select-trigger {
       display: flex;
       align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+      gap: 8px;
+      background: var(--rel-select-bg, #ffffff);
+      border: 1px solid var(--rel-select-border-default, #e5e5e5);
+      cursor: pointer;
+      font-family: inherit;
+      transition: border-color 0.15s ease;
+      text-align: left;
     }
 
-    .icon {
-      position: absolute;
+    .border-rounded .select-trigger {
+      border-radius: var(--rel-select-radius, 4px);
+    }
+
+    .border-sharp .select-trigger {
+      border-radius: 0;
+    }
+
+    .select-trigger:focus-visible,
+    .select-wrapper.open .select-trigger {
+      outline: none;
+      border-color: var(--rel-select-border-focus, #0b0b0b);
+    }
+
+    .select-wrapper.error .select-trigger {
+      border-color: var(--rel-select-border-error, #ce3131);
+    }
+
+    .select-wrapper.disabled .select-trigger {
+      cursor: not-allowed;
+      background: var(--rel-select-bg-disabled, #fafafa);
+      border-color: var(--rel-select-border-default, #e5e5e5);
+    }
+
+    /* Sizes */
+    .select-wrapper.small .select-trigger {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      min-height: 40px;
+      font-size: var(--rel-fontSizes-sm, 14px);
+    }
+
+    .select-wrapper.medium .select-trigger {
+      padding: 12px;
+      min-height: 48px;
+      font-size: var(--rel-fontSizes-md, 16px);
+    }
+
+    .select-wrapper.large .select-trigger {
+      padding: var(--rel-spacing-space-md);
+      min-height: 56px;
+      font-size: var(--rel-fontSizes-lg, 18px);
+    }
+
+    /* Icons */
+    .select-trigger .icon {
       display: flex;
       align-items: center;
-      justify-content: center;
-      pointer-events: none;
-      top: 50%;
-      transform: translateY(-50%);
-      font-size: 16px;
-      color: var(--rel-color-text-primary);
+      flex-shrink: 0;
+      color: var(--rel-select-icon-color, #0b0b0b);
     }
 
-    .icon.left {
-      left: 10px;
-      pointer-events: none;
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
+    .select-trigger .icon.chevron {
+      transition: transform 0.15s ease;
     }
 
-    .icon.right {
-      right: 36px;
+    .select-wrapper.open .icon.chevron {
+      transform: rotate(180deg);
     }
 
-    .icon.chevron {
-      right: 12px;
+    .select-wrapper.disabled .icon {
+      color: var(--rel-color-text-disabled, #a3a3a3);
+    }
+
+    /* Value area */
+    .select-value {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+      color: var(--rel-select-value-color, #0b0b0b);
+      overflow: hidden;
+    }
+
+    .select-value.placeholder {
+      color: var(--rel-select-placeholder-color, #757575);
+    }
+
+    .select-wrapper.disabled .select-value.placeholder {
+      color: var(--rel-select-placeholder-disabled-color, #7d7d7d);
+    }
+
+    .select-value-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .select-chips {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+
+    /* rel-chip's outer element is a tabindex="0" span, not a native button —
+       a disabled native <button> ancestor doesn't suppress clicks on that
+       automatically the way it would for a nested native form control, so
+       this has to be switched off explicitly. The cursor still correctly
+       falls through to the disabled trigger underneath. */
+    .select-wrapper.disabled .select-chips {
       pointer-events: none;
+    }
+
+    /* Floating label — single element that animates between resting (inside,
+       at the value position) and floated (small, on the border line), same
+       mechanism as rel-textfield's [floatinglabel]. */
+    .floating-label {
       position: absolute;
+      left: 12px;
       top: 50%;
       transform: translateY(-50%);
-      color: var(--rel-color-text-primary);
+      background: var(--rel-select-bg, #ffffff);
+      padding: 0 4px;
+      font-size: var(--rel-fontSizes-md, 16px);
+      font-weight: 400;
+      line-height: 1;
+      color: var(--rel-select-placeholder-color, #757575);
+      pointer-events: none;
+      z-index: 1;
+      white-space: nowrap;
+      transition: top 0.15s ease, left 0.15s ease, font-size 0.15s ease, color 0.15s ease;
     }
 
-    .select-error .icon.chevron {
-      color: var(--rel-error-surface-default, #D50000);
+    .floating-label.has-left-icon {
+      left: 40px;
     }
 
-    .select-disabled .icon.chevron {
-      color: var(--rel-color-text-disabled);
+    .select-wrapper.focused .floating-label,
+    .select-wrapper.has-value .floating-label,
+    .select-wrapper.open .floating-label {
+      top: 0;
+      left: 12px;
+      font-size: 12px;
+      color: var(--rel-select-label-color, #363636);
     }
 
-    select {
+    /* The real placeholder hides while the float-label rests in its spot,
+       and fades in once the label has moved up to the border. */
+    .select-wrapper.floating .select-value.placeholder {
+      opacity: 0;
+      transition: opacity 0.1s ease;
+    }
+
+    .select-wrapper.floating.focused .select-value.placeholder,
+    .select-wrapper.floating.open .select-value.placeholder {
+      opacity: 1;
+    }
+
+    /* Supporting text */
+    .select-support {
+      font-size: 13px;
+      color: var(--rel-select-supporting-color, #404040);
+    }
+
+    .select-support.error {
+      color: var(--rel-select-border-error, #ce3131);
+    }
+
+    /* ── Dropdown listbox ── */
+    .select-listbox {
+      position: fixed;
+      z-index: 1001;
+      display: none;
+      box-sizing: border-box;
+      background: var(--rel-select-bg, #ffffff);
+      border: 1px solid var(--rel-select-menu-border, #d4d4d4);
+      border-radius: var(--rel-select-menu-radius, 8px);
+      /* A border alone doesn't read clearly against a similarly-light page,
+         and a shadow alone barely shows on a dark background — together
+         they hold up in both themes. */
+      box-shadow: var(--rel-select-menu-shadow, 0 8px 24px rgba(11, 11, 11, 0.18));
+      max-height: 360px;
+      overflow-y: auto;
+    }
+
+    .select-listbox[data-open] {
+      display: block;
+    }
+
+    .select-search {
+      position: sticky;
+      top: 0;
+      background: var(--rel-select-bg, #ffffff);
+      padding: var(--rel-spacing-space-xs);
+      border-bottom: 1px solid var(--rel-select-divider, #f5f5f5);
+    }
+
+    /* Base = "small" textfield sizing, shared by both small AND medium
+       select — only "large" select bumps the search field up to "medium". */
+    .search-input-wrap {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border: 1px solid var(--rel-select-search-border, #e5e5e5);
+      border-radius: 4px;
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+    }
+
+    .search-input-wrap .icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      color: var(--rel-select-icon-color, #0b0b0b);
+    }
+
+    .search-input {
       flex: 1;
-      appearance: none;
-      border: 1px solid var(--rel-color-border-default);
-      background-color: var(--rel-color-bg-primary);
-      font-family: var(--rel-fontFamilies-primary);
-      cursor: pointer;
-      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
-      color: var(--rel-color-text-heading);
-      width: 100%;
+      min-width: 0;
+      border: none;
       outline: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: var(--rel-fontSizes-sm, 14px);
+      color: var(--rel-select-value-color, #0b0b0b);
     }
 
-    select:hover:not(:disabled) {
-      border-color: var(--rel-color-text-primary);
+    .search-input::placeholder {
+      color: var(--rel-select-placeholder-color, #757575);
     }
 
-    select:focus-visible:not(:disabled) {
-      border-color: var(--rel-color-border-focus);
-      box-shadow: 0 0 0 2px var(--rel-color-border-focus);
+    :host([size="large"]) .search-input-wrap {
+      padding: 12px;
     }
 
-    /* States */
-    select.error {
-      border-color: var(--rel-error-surface-default, #D50000);
-      border-width: 2px;
+    :host([size="large"]) .search-input {
+      font-size: var(--rel-fontSizes-md, 16px);
     }
 
-    select.error:focus {
-      box-shadow: 0 0 0 3px var(--rel-error-surface-light);
+    .select-options {
+      padding: 4px 0;
     }
 
-    select:disabled {
-      background-color: var(--rel-color-bg-tertiary);
-      border-color: var(--rel-color-border-default);
-      color: var(--rel-color-text-disabled);
-      cursor: not-allowed;
-      opacity: 0.6;
+    .select-option {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: var(--rel-spacing-space-xs) 12px;
+      font-size: var(--rel-fontSizes-md, 16px);
+      font-family: var(--rel-fontFamilies-primary);
+      color: var(--rel-select-value-color, #0b0b0b);
+      cursor: pointer;
     }
 
-    /* Sizes */
-    .select-small select {
-      font-size: var(--rel-fontSizes-xs);
-      padding: var(--rel-spacing-space-3xs) 36px
-        var(--rel-spacing-space-3xs) var(--rel-spacing-space-2xs);
+    .select-option-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .select-medium select {
-      font-size: var(--rel-fontSizes-sm);
-      padding: var(--rel-spacing-space-2xs) 40px
-        var(--rel-spacing-space-2xs) var(--rel-spacing-space-xs);
+    .select-option-check {
+      flex-shrink: 0;
+      color: var(--rel-select-value-color, #0b0b0b);
     }
 
-    .select-large select {
-      font-size: var(--rel-fontSizes-md);
-      padding: var(--rel-spacing-space-xs) 44px
-        var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+    .select-option:hover,
+    .select-option.highlighted {
+      background: var(--rel-select-option-hover, #ececec);
     }
 
-    /* With icons */
-    .with-left-icon.select-small select {
-      padding-left: var(--rel-spacing-space-xl);
+    .select-option[aria-selected="true"] {
+      font-weight: var(--rel-fontWeights-medium);
     }
 
-    .with-left-icon.select-medium select {
-      padding-left: var(--rel-spacing-space-2xl);
+    .checkbox-option {
+      padding: 12px;
     }
 
-    .with-left-icon.select-large select {
-      padding-left: var(--rel-spacing-space-3xl);
+    .checkbox-option:hover,
+    .checkbox-option.highlighted {
+      background: var(--rel-select-option-hover, #ececec);
     }
 
-    .with-right-icon.select-small select {
-      padding-right: var(--rel-spacing-space-2xl);
+    .select-all-row {
+      border-bottom: 1px solid var(--rel-select-divider, #f5f5f5);
+      padding: 12px;
+    }
+
+    .select-empty {
+      padding: var(--rel-spacing-space-xs) 12px;
+      font-size: var(--rel-fontSizes-sm, 14px);
+      color: var(--rel-select-placeholder-color, #757575);
+    }
+
+    /* Dark mode */
+    /* No :not(.error) needed here — error no longer recolors label/floating
+       label, so there's nothing left for these to compete with. */
+    :host-context([data-theme="dark"]) .select-label,
+    [data-theme="dark"] .select-label {
+      color: var(--rel-select-label-color-dark, #f5f5f5);
+    }
+
+    /* :not(.error) — supporting text IS still red on error, and this rule's
+       extra :host-context specificity would otherwise outrank the
+       theme-agnostic .select-support.error rule. */
+    :host-context([data-theme="dark"]) .select-wrapper:not(.error) .select-support,
+    [data-theme="dark"] .select-wrapper:not(.error) .select-support {
+      color: var(--rel-select-supporting-color-dark, #b3b3b3);
+    }
+
+    :host-context([data-theme="dark"]) .select-wrapper.focused .floating-label,
+    [data-theme="dark"] .select-wrapper.focused .floating-label,
+    :host-context([data-theme="dark"]) .select-wrapper.has-value .floating-label,
+    [data-theme="dark"] .select-wrapper.has-value .floating-label,
+    :host-context([data-theme="dark"]) .select-wrapper.open .floating-label,
+    [data-theme="dark"] .select-wrapper.open .floating-label {
+      color: var(--rel-select-label-color-dark, #f5f5f5);
+    }
+
+    /* Background only here — kept unconditional so error-state triggers
+       still get the right dark background. border-color is split into its
+       own :not(.error) rule below: this rule's specificity (with the extra
+       :host-context) ties or beats the theme-agnostic error-border rule, and
+       since it's declared later in the file, an unconditional border-color
+       here would win the tie and show the default dark border instead of red
+       — regardless of open/focus state, i.e. even at rest. */
+    :host-context([data-theme="dark"]) .select-trigger,
+    [data-theme="dark"] .select-trigger,
+    :host-context([data-theme="dark"]) .floating-label,
+    [data-theme="dark"] .floating-label {
+      background: var(--rel-select-bg-dark, #1a1a1a);
+    }
+
+    :host-context([data-theme="dark"]) .select-wrapper:not(.error) .select-trigger,
+    [data-theme="dark"] .select-wrapper:not(.error) .select-trigger {
+      border-color: var(--rel-select-border-default-dark, #333333);
+    }
+
+    /* Own border token, a touch lighter than the trigger's — a shadow alone
+       barely registers on a dark background, so the panel leans more on this
+       border to separate itself from the page behind it. */
+    :host-context([data-theme="dark"]) .select-listbox,
+    [data-theme="dark"] .select-listbox {
+      background: var(--rel-select-bg-dark, #1a1a1a);
+      border-color: var(--rel-select-menu-border-dark, #454545);
+    }
+
+    :host-context([data-theme="dark"]) .select-wrapper.disabled .select-trigger,
+    [data-theme="dark"] .select-wrapper.disabled .select-trigger {
+      background: var(--rel-select-bg-disabled-dark, #141414);
+    }
+
+    /* :not(.error): same trap as the label rules — this rule's extra
+       :host-context specificity would otherwise outrank the theme-agnostic
+       .select-wrapper.error .select-trigger rule and show the focus-white
+       border instead of error-red the moment an error field is opened. */
+    :host-context([data-theme="dark"]) .select-wrapper:not(.error).open .select-trigger,
+    [data-theme="dark"] .select-wrapper:not(.error).open .select-trigger,
+    :host-context([data-theme="dark"]) .select-wrapper:not(.error) .select-trigger:focus-visible,
+    [data-theme="dark"] .select-wrapper:not(.error) .select-trigger:focus-visible {
+      border-color: var(--rel-select-border-focus-dark, #f5f5f5);
+    }
+
+    :host-context([data-theme="dark"]) .select-value,
+    [data-theme="dark"] .select-value,
+    :host-context([data-theme="dark"]) .search-input,
+    [data-theme="dark"] .search-input,
+    :host-context([data-theme="dark"]) .select-option,
+    [data-theme="dark"] .select-option,
+    :host-context([data-theme="dark"]) .select-option-check,
+    [data-theme="dark"] .select-option-check,
+    :host-context([data-theme="dark"]) .icon,
+    [data-theme="dark"] .icon {
+      color: var(--rel-select-value-color-dark, #f5f5f5);
+    }
+
+    :host-context([data-theme="dark"]) .select-option:hover,
+    [data-theme="dark"] .select-option:hover,
+    :host-context([data-theme="dark"]) .select-option.highlighted,
+    [data-theme="dark"] .select-option.highlighted,
+    :host-context([data-theme="dark"]) .checkbox-option:hover,
+    [data-theme="dark"] .checkbox-option:hover,
+    :host-context([data-theme="dark"]) .checkbox-option.highlighted,
+    [data-theme="dark"] .checkbox-option.highlighted {
+      background: var(--rel-select-option-hover-dark, #333333);
+    }
+
+    :host-context([data-theme="dark"]) .select-search,
+    [data-theme="dark"] .select-search {
+      background: var(--rel-select-bg-dark, #1a1a1a);
+      border-color: var(--rel-select-divider-dark, #333333);
+    }
+
+    :host-context([data-theme="dark"]) .select-all-row,
+    [data-theme="dark"] .select-all-row {
+      border-color: var(--rel-select-divider-dark, #333333);
+    }
+
+    :host-context([data-theme="dark"]) .select-value.placeholder,
+    [data-theme="dark"] .select-value.placeholder,
+    :host-context([data-theme="dark"]) .floating-label,
+    [data-theme="dark"] .floating-label,
+    :host-context([data-theme="dark"]) .search-input::placeholder,
+    [data-theme="dark"] .search-input::placeholder,
+    :host-context([data-theme="dark"]) .select-empty,
+    [data-theme="dark"] .select-empty {
+      color: var(--rel-select-placeholder-color-dark, #a3a3a3);
+    }
+
+    :host-context([data-theme="dark"]) .search-input-wrap,
+    [data-theme="dark"] .search-input-wrap {
+      border-color: var(--rel-select-search-border-dark, #333333);
+    }
+  `;
+__decorateClass([
+  property37({ type: String })
+], RelSelect.prototype, "label", 2);
+__decorateClass([
+  property37({ type: String, attribute: "label-style" })
+], RelSelect.prototype, "labelStyle", 2);
+__decorateClass([
+  property37({ type: Array })
+], RelSelect.prototype, "options", 2);
+__decorateClass([
+  property37({ type: Boolean })
+], RelSelect.prototype, "multiple", 2);
+__decorateClass([
+  property37({ type: String })
+], RelSelect.prototype, "selected", 2);
+__decorateClass([
+  property37({ type: Array, attribute: "selected-values" })
+], RelSelect.prototype, "selectedValues", 2);
+__decorateClass([
+  property37({ type: String })
+], RelSelect.prototype, "state", 2);
+__decorateClass([
+  property37({ type: String, attribute: "supporting-text" })
+], RelSelect.prototype, "supportingText", 2);
+__decorateClass([
+  property37({ type: String, reflect: true })
+], RelSelect.prototype, "size", 2);
+__decorateClass([
+  property37({ type: String })
+], RelSelect.prototype, "border", 2);
+__decorateClass([
+  property37({ type: String, attribute: "left-icon" })
+], RelSelect.prototype, "leftIcon", 2);
+__decorateClass([
+  property37({ type: String, attribute: "right-icon" })
+], RelSelect.prototype, "rightIcon", 2);
+__decorateClass([
+  property37({ type: String })
+], RelSelect.prototype, "placeholder", 2);
+__decorateClass([
+  property37({ type: String, attribute: "search-placeholder" })
+], RelSelect.prototype, "searchPlaceholder", 2);
+__decorateClass([
+  property37({ type: String, attribute: "select-all-label" })
+], RelSelect.prototype, "selectAllLabel", 2);
+__decorateClass([
+  property37({ type: Number, attribute: "max-visible-chips" })
+], RelSelect.prototype, "maxVisibleChips", 2);
+__decorateClass([
+  property37({ type: Boolean, attribute: "no-search" })
+], RelSelect.prototype, "noSearch", 2);
+__decorateClass([
+  state14()
+], RelSelect.prototype, "open", 2);
+__decorateClass([
+  state14()
+], RelSelect.prototype, "highlightedIndex", 2);
+__decorateClass([
+  state14()
+], RelSelect.prototype, "panelStyle", 2);
+__decorateClass([
+  state14()
+], RelSelect.prototype, "searchValue", 2);
+__decorateClass([
+  state14()
+], RelSelect.prototype, "internalState", 2);
+__decorateClass([
+  query7(".select-trigger")
+], RelSelect.prototype, "triggerEl", 2);
+__decorateClass([
+  query7(".search-input")
+], RelSelect.prototype, "searchInputEl", 2);
+__decorateClass([
+  query7(".select-listbox")
+], RelSelect.prototype, "listboxEl", 2);
+RelSelect = __decorateClass([
+  customElement44("rel-select")
+], RelSelect);
+
+// src/components/rel-skeleton/rel-skeleton.ts
+import { LitElement as LitElement45, html as html45, css as css42 } from "lit";
+import { customElement as customElement45, property as property38 } from "lit/decorators.js";
+var RelSkeleton = class extends LitElement45 {
+  constructor() {
+    super(...arguments);
+    this.shape = "block";
+    this.lines = 1;
+    this.width = "";
+    this.height = "";
+    this.animation = "pulse";
+    this.loaded = false;
+  }
+  updated(changed) {
+    if (changed.has("width") && this.width) this.style.width = this.width;
+    if (changed.has("height") && this.height) this.style.height = this.height;
+  }
+  render() {
+    if (this.loaded) return html45``;
+    if (this.shape === "line") {
+      const count = Math.max(1, this.lines);
+      return html45`
+        <div class="skeleton-lines">
+          ${Array.from({ length: count }, (_, i) => html45`
+            <div class="skeleton-bar ${i === count - 1 && count > 1 ? "is-last" : ""}"></div>
+          `)}
+        </div>
+      `;
     }
-
-    .with-right-icon.select-medium select {
-      padding-right: var(--rel-spacing-space-3xl);
+    return html45`<div class="skeleton-shape"></div>`;
+  }
+};
+RelSkeleton.styles = css42`
+    :host {
+      display: block;
     }
 
-    .with-right-icon.select-large select {
-      padding-right: 4rem;
+    :host([loaded]) {
+      display: none;
     }
 
-    /* Border */
-    .border-rounded select {
-      border-radius: var(--rel-borders-radius-border-radius-100);
+    /* ── Circle: aspect-ratio keeps it square without requiring explicit height ── */
+    :host([shape="circle"]) {
+      aspect-ratio: 1 / 1;
     }
 
-    .border-sharp select {
-      border-radius: 0;
+    /* ── Base skeleton surface ── */
+    .skeleton-shape,
+    .skeleton-bar {
+      background: var(--rel-skeleton-color, #c8c8c8);
+      border-radius: 4px;
     }
 
-    /* Supporting text */
-    .supporting-text {
-      font-size: var(--rel-fontSizes-xs);
-      margin-top: var(--rel-spacing-space-3xs);
-      color: var(--rel-color-text-placeholder);
+    /* ── Lines layout ── */
+    .skeleton-lines {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
     }
 
-    .error-text {
-      color: var(--rel-error-surface-default, #D50000);
+    .skeleton-bar {
+      height: 14px;
+      width: 100%;
     }
 
-    .select-error .select-label {
-      color: var(--rel-error-surface-default, #D50000);
+    /* Last line shortens to 65% — mimics real paragraph text that doesn't reach the edge */
+    .skeleton-bar.is-last {
+      width: 65%;
     }
 
-    /* Dark mode — flip select background, text, border */
-    :host-context([data-theme="dark"]) select,
-    :host-context(.dark) select {
-      background-color: var(--rel-color-bg-secondary);
-      color: #ffffff;
-      border-color: var(--rel-color-border-default);
+    /* ── Shape (circle / block) ── */
+    .skeleton-shape {
+      width: 100%;
+      height: 100%;
+      min-height: 16px;
     }
 
-    :host-context([data-theme="dark"]) select.error,
-    :host-context(.dark) select.error {
-      border-color: var(--rel-error-surface-default, #FF5252);
-      border-width: 2px;
+    :host([shape="circle"]) .skeleton-shape {
+      border-radius: 50%;
+      /* No min-height — circle is sized entirely by host width + aspect-ratio */
+      min-height: unset;
     }
 
-    /* Error — placeholder text red */
-    select.error::placeholder {
-      color: var(--rel-error-surface-default, #D50000);
+    /* ── Pulse animation ── */
+    @keyframes rel-skeleton-pulse {
+      0%, 100% { opacity: 1; }
+      50%       { opacity: 0.4; }
     }
 
-    /* Error — selected/placeholder option text red */
-    .select-error select {
-      color: var(--rel-error-surface-default, #D50000);
+    :host([animation="pulse"]) .skeleton-shape,
+    :host([animation="pulse"]) .skeleton-bar {
+      animation: rel-skeleton-pulse 1.5s ease-in-out infinite;
     }
 
-    /* Error — icon red */
-    .select-error .icon,
-    .select-error rel-icon {
-      color: var(--rel-error-surface-default, #D50000);
+    /* ── Shimmer animation ── */
+    @keyframes rel-skeleton-shimmer {
+      0%   { background-position: 200% center; }
+      100% { background-position: -200% center; }
     }
 
-    :host-context([data-theme="dark"]) .select-error select,
-    :host-context(.dark) .select-error select {
-      color: var(--rel-error-surface-default, #FF5252);
+    :host([animation="shimmer"]) .skeleton-shape,
+    :host([animation="shimmer"]) .skeleton-bar {
+      background: linear-gradient(
+        90deg,
+        var(--rel-skeleton-color, #c8c8c8) 25%,
+        var(--rel-skeleton-highlight, #e2e2e2) 50%,
+        var(--rel-skeleton-color, #c8c8c8) 75%
+      );
+      background-size: 200% 100%;
+      animation: rel-skeleton-shimmer 1.5s linear infinite;
     }
 
-    :host-context([data-theme="dark"]) .select-error .icon,
-    :host-context([data-theme="dark"]) .select-error rel-icon,
-    :host-context(.dark) .select-error .icon,
-    :host-context(.dark) .select-error rel-icon {
-      color: var(--rel-error-surface-default, #FF5252);
+    /* ── Dark mode ── */
+    :host-context([data-theme="dark"]) {
+      --rel-skeleton-color: #2a2a2a;
+      --rel-skeleton-highlight: #3d3d3d;
     }
 
-    /* Disabled label */
-    .select-disabled .select-label {
-      color: var(--rel-color-text-disabled);
-      cursor: not-allowed;
-      user-select: none;
+    /* ── Respect reduced-motion preference ── */
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton-shape,
+      .skeleton-bar {
+        animation: none !important;
+      }
     }
-
   `;
 __decorateClass([
-  property37({ type: String })
-], RelSelect.prototype, "label", 2);
-__decorateClass([
-  property37({ type: Array })
-], RelSelect.prototype, "options", 2);
-__decorateClass([
-  property37({ type: String })
-], RelSelect.prototype, "selected", 2);
-__decorateClass([
-  property37({ type: String })
-], RelSelect.prototype, "state", 2);
+  property38({ type: String, reflect: true })
+], RelSkeleton.prototype, "shape", 2);
 __decorateClass([
-  property37({ type: String })
-], RelSelect.prototype, "supportingText", 2);
+  property38({ type: Number })
+], RelSkeleton.prototype, "lines", 2);
 __decorateClass([
-  property37({ type: String })
-], RelSelect.prototype, "size", 2);
+  property38({ type: String })
+], RelSkeleton.prototype, "width", 2);
 __decorateClass([
-  property37({ type: String })
-], RelSelect.prototype, "border", 2);
+  property38({ type: String })
+], RelSkeleton.prototype, "height", 2);
 __decorateClass([
-  property37({ type: String })
-], RelSelect.prototype, "leftIcon", 2);
+  property38({ type: String, reflect: true })
+], RelSkeleton.prototype, "animation", 2);
 __decorateClass([
-  property37({ type: String })
-], RelSelect.prototype, "rightIcon", 2);
-RelSelect = __decorateClass([
-  customElement44("rel-select")
-], RelSelect);
+  property38({ type: Boolean, reflect: true })
+], RelSkeleton.prototype, "loaded", 2);
+RelSkeleton = __decorateClass([
+  customElement45("rel-skeleton")
+], RelSkeleton);
 
 // src/components/rel-sheet/rel-sheet.ts
-import { LitElement as LitElement45, html as html45, css as css42 } from "lit";
-import { customElement as customElement45, property as property38, query as query7 } from "lit/decorators.js";
+import { LitElement as LitElement46, html as html46, css as css43 } from "lit";
+import { customElement as customElement46, property as property39, query as query8 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
 import "@reliability-design/icons/rel-icon";
-var RelModal = class extends LitElement45 {
+var RelModal = class extends LitElement46 {
   constructor() {
     super(...arguments);
     this.open = false;
@@ -10515,7 +11665,7 @@ var RelModal = class extends LitElement45 {
     const hasTitle = !!this.title;
     const hasDescription = !!this.description;
     const showHeader = hasTitle || hasDescription || this.dismissible;
-    return html45`
+    return html46`
       <div class="modal-container ${this.open ? "open" : ""}">
         <div
           part="overlay"
@@ -10532,10 +11682,10 @@ var RelModal = class extends LitElement45 {
 
           <div part="header" class="header ${!showHeader ? "empty" : ""}">
             <div class="header-text">
-              ${hasTitle ? html45`<h2 class="title">${this.title}</h2>` : ""}
-              ${hasDescription ? html45`<p class="description">${this.description}</p>` : ""}
+              ${hasTitle ? html46`<h2 class="title">${this.title}</h2>` : ""}
+              ${hasDescription ? html46`<p class="description">${this.description}</p>` : ""}
             </div>
-            ${this.dismissible ? html45`<button
+            ${this.dismissible ? html46`<button
                   part="close-button"
                   class="close-button"
                   @click="${this.handleCloseButtonClick}"
@@ -10556,7 +11706,7 @@ var RelModal = class extends LitElement45 {
     `;
   }
 };
-RelModal.styles = css42`
+RelModal.styles = css43`
     :host {
       --modal-transition-duration: 0.3s;
       --modal-transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
@@ -10606,7 +11756,8 @@ RelModal.styles = css42`
       font-family: var(--rel-fontFamilies-primary);
       width: clamp(360px, 49vw, 708px);
       left: 50%;
-      transition: transform var(--modal-transition-duration) var(--modal-transition-timing);
+      transition: transform var(--modal-transition-duration) var(--modal-transition-timing),
+        opacity var(--modal-transition-duration) var(--modal-transition-timing);
     }
 
     .panel[data-side="bottom"] {
@@ -10641,11 +11792,13 @@ RelModal.styles = css42`
       width: clamp(360px, 49vw, 708px);
       max-height: calc(100vh - 96px);
       border-radius: var(--rel-borders-radius-border-radius-200);
-      transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%) scale(0.96);
+      opacity: 0;
     }
 
     .modal-container.open .panel[data-side="center"] {
-      transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
     }
 
     .header {
@@ -10739,35 +11892,35 @@ RelModal.styles = css42`
     }
   `;
 __decorateClass([
-  property38({ type: Boolean, reflect: true })
+  property39({ type: Boolean, reflect: true })
 ], RelModal.prototype, "open", 2);
 __decorateClass([
-  property38({ type: String })
+  property39({ type: String })
 ], RelModal.prototype, "side", 2);
 __decorateClass([
-  property38({ type: String })
+  property39({ type: String })
 ], RelModal.prototype, "title", 2);
 __decorateClass([
-  property38({ type: String })
+  property39({ type: String })
 ], RelModal.prototype, "description", 2);
 __decorateClass([
-  property38({ type: Boolean })
+  property39({ type: Boolean })
 ], RelModal.prototype, "dismissible", 2);
 __decorateClass([
-  property38({ type: Boolean })
+  property39({ type: Boolean })
 ], RelModal.prototype, "modal", 2);
 __decorateClass([
-  query7(".overlay")
+  query8(".overlay")
 ], RelModal.prototype, "overlayElement", 2);
 RelModal = __decorateClass([
-  customElement45("rel-modal")
+  customElement46("rel-modal")
 ], RelModal);
 
 // src/components/rel-slider/rel-slider.ts
-import { LitElement as LitElement46, html as html46, css as css43 } from "lit";
-import { customElement as customElement46, property as property39, state as state13 } from "lit/decorators.js";
+import { LitElement as LitElement47, html as html47, css as css44 } from "lit";
+import { customElement as customElement47, property as property40, state as state15 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
-var RelSlider = class extends LitElement46 {
+var RelSlider = class extends LitElement47 {
   constructor() {
     super(...arguments);
     this.type = "continuous";
@@ -10864,9 +12017,9 @@ var RelSlider = class extends LitElement46 {
     }
   }
   renderThumbContainer() {
-    return html46`
+    return html47`
       <div class="thumb-container" style="left: ${this.percentage}%">
-        ${this.showBubble ? html46`
+        ${this.showBubble ? html47`
           <div class="value-marker">
             <svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -10891,10 +12044,10 @@ var RelSlider = class extends LitElement46 {
   }
   renderTicks() {
     if (this.type !== "discrete") return "";
-    return html46`
+    return html47`
       <div class="ticks">
         ${this.ticks.map(
-      (tick) => html46`
+      (tick) => html47`
             <div
               class="tick ${this.isTickActive(tick) ? "active" : ""}"
               style="left: ${this.getTickLeftPct(tick)}%"></div>
@@ -10905,10 +12058,10 @@ var RelSlider = class extends LitElement46 {
   }
   renderTickLabels() {
     if (this.type !== "discrete" || !this.showTickLabels) return "";
-    return html46`
+    return html47`
       <div class="tick-labels">
         ${this.ticks.map(
-      (tick) => html46`
+      (tick) => html47`
             <div
               class="tick-label"
               style="left: ${this.getTickLeftPct(tick)}%">
@@ -10929,7 +12082,7 @@ var RelSlider = class extends LitElement46 {
       "track-active",
       this.track === "dotted" ? "dotted" : ""
     ].filter(Boolean).join(" ");
-    return html46`
+    return html47`
       <div class="${sliderClasses}">
         <div class="track"></div>
         <div class="${trackActiveClasses}"></div>
@@ -10952,7 +12105,7 @@ var RelSlider = class extends LitElement46 {
     `;
   }
 };
-RelSlider.styles = css43`
+RelSlider.styles = css44`
     :host {
       --track-height: 5px;
       --thumb-size: 10px;
@@ -11227,45 +12380,45 @@ RelSlider.styles = css43`
     }
   `;
 __decorateClass([
-  property39({ type: String })
+  property40({ type: String })
 ], RelSlider.prototype, "type", 2);
 __decorateClass([
-  property39({ type: Number })
+  property40({ type: Number })
 ], RelSlider.prototype, "min", 2);
 __decorateClass([
-  property39({ type: Number })
+  property40({ type: Number })
 ], RelSlider.prototype, "max", 2);
 __decorateClass([
-  property39({ type: Number })
+  property40({ type: Number })
 ], RelSlider.prototype, "step", 2);
 __decorateClass([
-  property39({ type: Boolean })
+  property40({ type: Boolean })
 ], RelSlider.prototype, "disabled", 2);
 __decorateClass([
-  property39({ type: String })
+  property40({ type: String })
 ], RelSlider.prototype, "track", 2);
 __decorateClass([
-  property39({ type: Boolean })
+  property40({ type: Boolean })
 ], RelSlider.prototype, "showTickLabels", 2);
 __decorateClass([
-  property39({ type: Boolean })
+  property40({ type: Boolean })
 ], RelSlider.prototype, "showBubble", 2);
 __decorateClass([
-  property39({ type: Number })
+  property40({ type: Number })
 ], RelSlider.prototype, "value", 2);
 __decorateClass([
-  state13()
+  state15()
 ], RelSlider.prototype, "ticks", 2);
 RelSlider = __decorateClass([
-  customElement46("rel-slider")
+  customElement47("rel-slider")
 ], RelSlider);
 
 // src/components/rel-snackbar/rel-snackbar.ts
-import { LitElement as LitElement47, html as html47, css as css44 } from "lit";
-import { customElement as customElement47, property as property40, state as state14 } from "lit/decorators.js";
+import { LitElement as LitElement48, html as html48, css as css45 } from "lit";
+import { customElement as customElement48, property as property41, state as state16 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
 import "@reliability-design/icons/rel-icon";
-var RelSnackbar = class extends LitElement47 {
+var RelSnackbar = class extends LitElement48 {
   constructor() {
     super(...arguments);
     this.message = "This is a snackbar message";
@@ -11339,8 +12492,8 @@ var RelSnackbar = class extends LitElement47 {
       warning: "warning"
     };
     const name = iconMap[this.type];
-    if (!name) return html47``;
-    return html47`<rel-icon name="${name}" size="lg" class="snackbar-icon"></rel-icon>`;
+    if (!name) return html48``;
+    return html48`<rel-icon name="${name}" size="lg" class="snackbar-icon"></rel-icon>`;
   }
   render() {
     const snackbarClasses = [
@@ -11349,7 +12502,7 @@ var RelSnackbar = class extends LitElement47 {
       !this.visible ? "hidden" : "",
       this.type !== "default" ? `type-${this.type}` : ""
     ].filter(Boolean).join(" ");
-    return html47`
+    return html48`
       <div class="${snackbarClasses}">
         <div class="snackbar-body">
           ${this.type !== "default" ? this.renderIcon() : ""}
@@ -11357,12 +12510,12 @@ var RelSnackbar = class extends LitElement47 {
         </div>
 
         <div class="snackbar-actions">
-          ${this.action ? html47`
+          ${this.action ? html48`
                 <button class="snackbar-action" @click="${this.onActionClick}">
                   ${this.action}
                 </button>
               ` : ""}
-          ${this.iconClose ? html47`
+          ${this.iconClose ? html48`
                 <button class="snackbar-close" @click="${this.dismiss}">
                   <rel-icon name="close" size="md"></rel-icon>
                 </button>
@@ -11372,7 +12525,7 @@ var RelSnackbar = class extends LitElement47 {
     `;
   }
 };
-RelSnackbar.styles = css44`
+RelSnackbar.styles = css45`
     :host {
       display: block;
       font-family: var(--rel-fontFamilies-primary);
@@ -11546,41 +12699,41 @@ RelSnackbar.styles = css44`
     }
   `;
 __decorateClass([
-  property40({ type: String })
+  property41({ type: String })
 ], RelSnackbar.prototype, "message", 2);
 __decorateClass([
-  property40({ type: String })
+  property41({ type: String })
 ], RelSnackbar.prototype, "action", 2);
 __decorateClass([
-  property40({ type: Boolean })
+  property41({ type: Boolean })
 ], RelSnackbar.prototype, "longerAction", 2);
 __decorateClass([
-  property40({ type: Boolean })
+  property41({ type: Boolean })
 ], RelSnackbar.prototype, "iconClose", 2);
 __decorateClass([
-  property40({ type: String })
+  property41({ type: String })
 ], RelSnackbar.prototype, "lines", 2);
 __decorateClass([
-  property40({ type: Number })
+  property41({ type: Number })
 ], RelSnackbar.prototype, "duration", 2);
 __decorateClass([
-  property40({ type: String })
+  property41({ type: String })
 ], RelSnackbar.prototype, "type", 2);
 __decorateClass([
-  property40({ type: Boolean, reflect: true })
+  property41({ type: Boolean, reflect: true })
 ], RelSnackbar.prototype, "show", 2);
 __decorateClass([
-  state14()
+  state16()
 ], RelSnackbar.prototype, "visible", 2);
 RelSnackbar = __decorateClass([
-  customElement47("rel-snackbar")
+  customElement48("rel-snackbar")
 ], RelSnackbar);
 
 // src/components/rel-stepper/rel-stepper.ts
-import { LitElement as LitElement48, html as html48, css as css45 } from "lit";
-import { customElement as customElement48, property as property41 } from "lit/decorators.js";
+import { LitElement as LitElement49, html as html49, css as css46 } from "lit";
+import { customElement as customElement49, property as property42 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
-var RelStepper = class extends LitElement48 {
+var RelStepper = class extends LitElement49 {
   constructor() {
     super(...arguments);
     this.steps = [];
@@ -11619,7 +12772,7 @@ var RelStepper = class extends LitElement48 {
   }
   renderIndicator(step, index) {
     if (step.status === "done") {
-      return html48`
+      return html49`
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="14"
@@ -11635,7 +12788,7 @@ var RelStepper = class extends LitElement48 {
         </svg>
       `;
     }
-    return html48`<span>${index + 1}</span>`;
+    return html49`<span>${index + 1}</span>`;
   }
   render() {
     const stepperClasses = [
@@ -11646,26 +12799,26 @@ var RelStepper = class extends LitElement48 {
     ].filter(Boolean).join(" ");
     const isVertical = this.orientation === "vertical";
     const isTextRight = this.textAlign === "right";
-    return html48`
+    return html49`
       <div class="${stepperClasses}">
         ${this.steps.map(
-      (step, idx) => html48`
+      (step, idx) => html49`
             <div
               class="${this.getStepClasses(step)}"
               @click="${() => this.onStepClick(step, idx)}"
             >
-              ${isVertical && isTextRight ? html48`
+              ${isVertical && isTextRight ? html49`
                     <!-- Indicator with connector below -->
                     <div class="indicator-wrapper">
                       <div class="indicator">
                         ${this.renderIndicator(step, idx)}
                       </div>
-                      ${idx < this.steps.length - 1 ? html48`<div class="connector"></div>` : ""}
+                      ${idx < this.steps.length - 1 ? html49`<div class="connector"></div>` : ""}
                     </div>
 
                     <!-- Step Label to the right -->
                     <div class="step-label">${step.title}</div>
-                  ` : isVertical ? html48`
+                  ` : isVertical ? html49`
                     <div class="step-content text-below-content">
                       <!-- Step Indicator -->
                       <div class="indicator">
@@ -11677,8 +12830,8 @@ var RelStepper = class extends LitElement48 {
                     </div>
 
                     <!-- Connector -->
-                    ${idx < this.steps.length - 1 ? html48`<div class="connector"></div>` : ""}
-                  ` : html48`
+                    ${idx < this.steps.length - 1 ? html49`<div class="connector"></div>` : ""}
+                  ` : html49`
                     <!-- Step Indicator -->
                     <div class="indicator">
                       ${this.renderIndicator(step, idx)}
@@ -11688,7 +12841,7 @@ var RelStepper = class extends LitElement48 {
                     <div class="step-label">${step.title}</div>
 
                     <!-- Connector (for horizontal only) -->
-                    ${!isVertical && idx < this.steps.length - 1 ? html48`<div class="connector"></div>` : ""}
+                    ${!isVertical && idx < this.steps.length - 1 ? html49`<div class="connector"></div>` : ""}
                   `}
             </div>
           `
@@ -11697,7 +12850,7 @@ var RelStepper = class extends LitElement48 {
     `;
   }
 };
-RelStepper.styles = css45`
+RelStepper.styles = css46`
     :host {
       display: block;
       font-family: var(--rel-fontFamilies-primary);
@@ -12001,26 +13154,26 @@ RelStepper.styles = css45`
     }
   `;
 __decorateClass([
-  property41({ type: Array })
+  property42({ type: Array })
 ], RelStepper.prototype, "steps", 2);
 __decorateClass([
-  property41({ type: String })
+  property42({ type: String })
 ], RelStepper.prototype, "textAlign", 2);
 __decorateClass([
-  property41({ type: String })
+  property42({ type: String })
 ], RelStepper.prototype, "orientation", 2);
 __decorateClass([
-  property41({ type: String })
+  property42({ type: String })
 ], RelStepper.prototype, "size", 2);
 RelStepper = __decorateClass([
-  customElement48("rel-stepper")
+  customElement49("rel-stepper")
 ], RelStepper);
 
 // src/components/rel-switch/rel-switch.ts
-import { LitElement as LitElement49, html as html49, css as css46 } from "lit";
-import { customElement as customElement49, property as property42, state as state15 } from "lit/decorators.js";
+import { LitElement as LitElement50, html as html50, css as css47 } from "lit";
+import { customElement as customElement50, property as property43, state as state17 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
-var RelSwitch = class extends LitElement49 {
+var RelSwitch = class extends LitElement50 {
   constructor() {
     super(...arguments);
     this.checked = false;
@@ -12079,7 +13232,7 @@ var RelSwitch = class extends LitElement49 {
       this.isFocused && "switch-focused",
       this.isPressed && "switch-pressed"
     ].filter(Boolean).join(" ");
-    return html49`
+    return html50`
       <label class="${wrapperClasses}">
         <input
           type="checkbox"
@@ -12098,7 +13251,7 @@ var RelSwitch = class extends LitElement49 {
     `;
   }
 };
-RelSwitch.styles = css46`
+RelSwitch.styles = css47`
     :host {
       --switch-track: var(--rel-color-text-placeholder);
       --switch-knob-on: var(--rel-color-text-primary);
@@ -12198,29 +13351,29 @@ RelSwitch.styles = css46`
     }
   `;
 __decorateClass([
-  property42({ type: Boolean })
+  property43({ type: Boolean })
 ], RelSwitch.prototype, "checked", 2);
 __decorateClass([
-  property42({ type: Boolean })
+  property43({ type: Boolean })
 ], RelSwitch.prototype, "disabled", 2);
 __decorateClass([
-  property42({ type: String })
+  property43({ type: String })
 ], RelSwitch.prototype, "value", 2);
 __decorateClass([
-  state15()
+  state17()
 ], RelSwitch.prototype, "isFocused", 2);
 __decorateClass([
-  state15()
+  state17()
 ], RelSwitch.prototype, "isPressed", 2);
 RelSwitch = __decorateClass([
-  customElement49("rel-switch")
+  customElement50("rel-switch")
 ], RelSwitch);
 
 // src/components/rel-tab/rel-tab.ts
-import { LitElement as LitElement50, html as html50, css as css47 } from "lit";
-import { customElement as customElement50, property as property43, state as state16 } from "lit/decorators.js";
+import { LitElement as LitElement51, html as html51, css as css48 } from "lit";
+import { customElement as customElement51, property as property44, state as state18 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
-var RelTabItem = class extends LitElement50 {
+var RelTabItem = class extends LitElement51 {
   constructor() {
     super(...arguments);
     this.label = "";
@@ -12229,25 +13382,25 @@ var RelTabItem = class extends LitElement50 {
     this.disabled = false;
   }
   render() {
-    return html50``;
+    return html51``;
   }
 };
 __decorateClass([
-  property43({ type: String })
+  property44({ type: String })
 ], RelTabItem.prototype, "label", 2);
 __decorateClass([
-  property43({ type: String })
+  property44({ type: String })
 ], RelTabItem.prototype, "value", 2);
 __decorateClass([
-  property43({ type: Number })
+  property44({ type: Number })
 ], RelTabItem.prototype, "badge", 2);
 __decorateClass([
-  property43({ type: Boolean })
+  property44({ type: Boolean })
 ], RelTabItem.prototype, "disabled", 2);
 RelTabItem = __decorateClass([
-  customElement50("rel-tab-item")
+  customElement51("rel-tab-item")
 ], RelTabItem);
-var RelTab = class extends LitElement50 {
+var RelTab = class extends LitElement51 {
   constructor() {
     super(...arguments);
     this.tabs = [];
@@ -12304,11 +13457,11 @@ var RelTab = class extends LitElement50 {
   }
   render() {
     const tabs = this._effectiveTabs;
-    return html50`
+    return html51`
       <slot name="items" style="display:none;" @slotchange="${this._onSlotChange}"></slot>
       <div class="tabs-wrapper" role="tablist">
         ${tabs.map(
-      (tab, i) => html50`
+      (tab, i) => html51`
             <div
               class="tab ${i === this.activeIndex ? "active" : ""} ${tab.disabled ? "disabled" : ""}"
               role="tab"
@@ -12319,7 +13472,7 @@ var RelTab = class extends LitElement50 {
               @keydown="${(e) => this.onKeyDown(e, i)}"
             >
               <span class="tab-label">${tab.label}</span>
-              ${tab.badge ? html50`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>` : ""}
+              ${tab.badge ? html51`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>` : ""}
               <span class="tab-underline"></span>
             </div>
           `
@@ -12331,7 +13484,7 @@ var RelTab = class extends LitElement50 {
     `;
   }
 };
-RelTab.styles = css47`
+RelTab.styles = css48`
     :host {
       --tab-active-color: var(--rel-colors-green-primary);
       --tab-text-default: var(--rel-color-text-primary);
@@ -12403,24 +13556,24 @@ RelTab.styles = css47`
     }
   `;
 __decorateClass([
-  property43({ type: Array })
+  property44({ type: Array })
 ], RelTab.prototype, "tabs", 2);
 __decorateClass([
-  property43({ type: Number, reflect: true })
+  property44({ type: Number, reflect: true })
 ], RelTab.prototype, "activeIndex", 2);
 __decorateClass([
-  state16()
+  state18()
 ], RelTab.prototype, "_tabItems", 2);
 RelTab = __decorateClass([
-  customElement50("rel-tab")
+  customElement51("rel-tab")
 ], RelTab);
 
 // src/components/rel-textfield/rel-textfield.ts
-import { LitElement as LitElement51, html as html51, css as css48 } from "lit";
-import { customElement as customElement51, property as property44, state as state17 } from "lit/decorators.js";
+import { LitElement as LitElement52, html as html52, css as css49 } from "lit";
+import { customElement as customElement52, property as property45, state as state19 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
 import "@reliability-design/icons/rel-icon";
-var RelTextfield = class extends LitElement51 {
+var RelTextfield = class extends LitElement52 {
   constructor() {
     super(...arguments);
     this.placeholder = "";
@@ -12429,6 +13582,7 @@ var RelTextfield = class extends LitElement51 {
     this.state = "default";
     this.size = "medium";
     this.floatingLabel = false;
+    this.variant = "default";
     this.internalState = "default";
     this._wasError = false;
     this.uniqueId = `textfield-${Math.random().toString(36).slice(2)}`;
@@ -12481,17 +13635,17 @@ var RelTextfield = class extends LitElement51 {
       this.leftIcon ? "has-left-icon" : "",
       this.rightIcon ? "has-right-icon" : ""
     ].filter(Boolean).join(" ");
-    return html51`
+    return html52`
       <div class="${wrapperClasses}">
-        ${!this.floatingLabel && this.label ? html51`<label class="textfield-label" for="${this.uniqueId}">${this.label}</label>` : ""}
+        ${!this.floatingLabel && this.label ? html52`<label class="textfield-label" for="${this.uniqueId}">${this.label}</label>` : ""}
 
         <div
           class="textfield-container ${this.state === "disabled" ? "disabled" : ""}"
         >
-          ${this.floatingLabel && this.label ? html51`<label
+          ${this.floatingLabel && this.label ? html52`<label
                 class="textfield-label${this.leftIcon ? " has-left-icon" : ""}"
                 for="${this.uniqueId}">${this.label}</label>` : ""}
-          ${this.leftIcon ? html51`<rel-icon name="${this.leftIcon}" size="sm" class="icon left"></rel-icon>` : ""}
+          ${this.leftIcon ? html52`<rel-icon name="${this.leftIcon}" size="sm" class="icon left"></rel-icon>` : ""}
 
           <input
             type="${this.type}"
@@ -12506,10 +13660,10 @@ var RelTextfield = class extends LitElement51 {
             @input="${this.handleInput}"
           />
 
-          ${this.rightIcon ? html51`<rel-icon name="${this.rightIcon}" size="sm" class="icon right"></rel-icon>` : ""}
+          ${this.rightIcon ? html52`<rel-icon name="${this.rightIcon}" size="sm" class="icon right"></rel-icon>` : ""}
         </div>
 
-        ${this.supportingText ? html51`<div
+        ${this.supportingText ? html52`<div
               class="textfield-support ${this.state === "error" ? "error" : ""}"
             >
               ${this.supportingText}
@@ -12518,7 +13672,7 @@ var RelTextfield = class extends LitElement51 {
     `;
   }
 };
-RelTextfield.styles = css48`
+RelTextfield.styles = css49`
     :host {
       display: block;
       font-family: var(--rel-fontFamilies-primary);
@@ -12717,7 +13871,7 @@ RelTextfield.styles = css48`
     }
 
     .textfield-support.error {
-      color: var(--rel-error-text);
+      color: var(--rel-error-surface-default, #CC0000);
     }
 
     /* Placeholder */
@@ -12725,6 +13879,14 @@ RelTextfield.styles = css48`
       color: var(--rel-color-text-placeholder);
     }
 
+    :host([floatinglabel]) .textfield-input::placeholder {
+      opacity: 0;
+    }
+
+    :host([floatinglabel]) .textfield-wrapper.focused .textfield-input::placeholder {
+      opacity: 1;
+    }
+
     /* Suppress Chrome autofill blue background */
     .textfield-input:-webkit-autofill,
     .textfield-input:-webkit-autofill:hover,
@@ -12732,49 +13894,90 @@ RelTextfield.styles = css48`
       -webkit-box-shadow: 0 0 0px 1000px var(--rel-color-bg-primary) inset;
       -webkit-text-fill-color: var(--rel-color-text-primary);
     }
+
+    /* ── Underline variant ── */
+    :host([variant="underline"]) .textfield-container {
+      border: none;
+      border-bottom: 2px solid var(--rel-color-border-default);
+      border-radius: 0;
+      background: var(--rel-color-bg-tertiary, #f5f5f5);
+      box-shadow: none;
+      overflow: visible;
+    }
+
+    :host([variant="underline"]) .textfield-wrapper.focused .textfield-container,
+    :host([variant="underline"]) .textfield-container:focus-within {
+      border-bottom: 2px solid var(--rel-color-text-primary);
+      box-shadow: none;
+    }
+
+    :host([variant="underline"]) .textfield-wrapper.error .textfield-container {
+      border-bottom: 2px solid var(--rel-error-surface-default, #CC0000);
+      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);
+    }
+
+    /* Remove border radius on input for underline variant */
+    :host([variant="underline"]) .textfield-input {
+      background: transparent;
+    }
+
+    /* 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);
+    }
   `;
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelTextfield.prototype, "label", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelTextfield.prototype, "placeholder", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelTextfield.prototype, "type", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelTextfield.prototype, "value", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelTextfield.prototype, "leftIcon", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelTextfield.prototype, "rightIcon", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelTextfield.prototype, "supportingText", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelTextfield.prototype, "state", 2);
 __decorateClass([
-  property44({ type: String })
+  property45({ type: String })
 ], RelTextfield.prototype, "size", 2);
 __decorateClass([
-  property44({ type: Boolean, reflect: true })
+  property45({ type: Boolean, reflect: true })
 ], RelTextfield.prototype, "floatingLabel", 2);
 __decorateClass([
-  state17()
+  property45({ type: String, reflect: true })
+], RelTextfield.prototype, "variant", 2);
+__decorateClass([
+  state19()
 ], RelTextfield.prototype, "internalState", 2);
 RelTextfield = __decorateClass([
-  customElement51("rel-textfield")
+  customElement52("rel-textfield")
 ], RelTextfield);
 
 // src/components/rel-toast/rel-toast.ts
-import { LitElement as LitElement52, html as html52, css as css49 } from "lit";
-import { customElement as customElement52, property as property45, state as state18 } from "lit/decorators.js";
+import { LitElement as LitElement53, html as html53, css as css50 } from "lit";
+import { customElement as customElement53, property as property46, state as state20 } from "lit/decorators.js";
 import "./vars-v2-VMGWTFJZ.css";
-var RelToast = class extends LitElement52 {
+var RelToast = class extends LitElement53 {
   constructor() {
     super(...arguments);
     this.message = "";
@@ -12832,11 +14035,11 @@ var RelToast = class extends LitElement52 {
     this.close();
   }
   render() {
-    return html52`
+    return html53`
       <div class="toast ${this.type} ${this.visible ? "" : "hidden"}" role="status" aria-live="polite">
         <span class="toast-message">${this.message}</span>
 
-        ${this.actionLabel ? html52`<button
+        ${this.actionLabel ? html53`<button
               class="toast-action"
               @click="${this.handleActionClick}"
             >
@@ -12848,7 +14051,7 @@ var RelToast = class extends LitElement52 {
     `;
   }
 };
-RelToast.styles = css49`
+RelToast.styles = css50`
     :host {
       position: fixed;
       bottom: 24px;
@@ -12895,7 +14098,7 @@ RelToast.styles = css49`
     .toast-action {
       background: transparent;
       border: none;
-      color: var(--rel-colors-green-primary);
+      color: inherit;
       font-weight: 600;
       font-size: 0.85rem;
       cursor: pointer;
@@ -12936,11 +14139,6 @@ RelToast.styles = css49`
     }
 
     /* Dark mode overrides */
-    :host-context([data-theme="dark"]) .toast-action,
-    :host-context(.dark) .toast-action {
-      color: var(--rel-colors-green-tertiary);
-    }
-
     :host-context([data-theme="dark"]) .toast.error,
     :host-context(.dark) .toast.error {
       background-color: var(--rel-error-surface-default);
@@ -12966,31 +14164,31 @@ RelToast.styles = css49`
     }
   `;
 __decorateClass([
-  property45({ type: String })
+  property46({ type: String })
 ], RelToast.prototype, "message", 2);
 __decorateClass([
-  property45({ type: String })
+  property46({ type: String })
 ], RelToast.prototype, "type", 2);
 __decorateClass([
-  property45({ type: String })
+  property46({ type: String })
 ], RelToast.prototype, "actionLabel", 2);
 __decorateClass([
-  property45({ type: Number })
+  property46({ type: Number })
 ], RelToast.prototype, "duration", 2);
 __decorateClass([
-  property45({ type: Boolean, reflect: true })
+  property46({ type: Boolean, reflect: true })
 ], RelToast.prototype, "show", 2);
 __decorateClass([
-  state18()
+  state20()
 ], RelToast.prototype, "visible", 2);
 RelToast = __decorateClass([
-  customElement52("rel-toast")
+  customElement53("rel-toast")
 ], RelToast);
 
 // src/components/rel-tooltip/rel-tooltip.ts
-import { LitElement as LitElement53, html as html53, css as css50 } from "lit";
-import { customElement as customElement53, property as property46 } from "lit/decorators.js";
-var RelTooltip = class extends LitElement53 {
+import { LitElement as LitElement54, html as html54, css as css51 } from "lit";
+import { customElement as customElement54, property as property47 } from "lit/decorators.js";
+var RelTooltip = class extends LitElement54 {
   constructor() {
     super(...arguments);
     this.text = "";
@@ -13011,7 +14209,7 @@ var RelTooltip = class extends LitElement53 {
     }
   }
   render() {
-    return html53`
+    return html54`
       <slot @slotchange="${this.linkTrigger}"></slot>
       <div
         class="tooltip-bubble ${this.position}"
@@ -13019,12 +14217,12 @@ var RelTooltip = class extends LitElement53 {
         role="tooltip"
       >
         ${this.text}
-        ${this.showTail ? html53`<span class="tooltip-tail"></span>` : ""}
+        ${this.showTail ? html54`<span class="tooltip-tail"></span>` : ""}
       </div>
     `;
   }
 };
-RelTooltip.styles = css50`
+RelTooltip.styles = css51`
     :host {
       display: inline-block;
       position: relative;
@@ -13105,16 +14303,16 @@ RelTooltip.styles = css50`
     }
   `;
 __decorateClass([
-  property46({ type: String })
+  property47({ type: String })
 ], RelTooltip.prototype, "text", 2);
 __decorateClass([
-  property46({ type: String })
+  property47({ type: String })
 ], RelTooltip.prototype, "position", 2);
 __decorateClass([
-  property46({ type: Boolean, attribute: "show-tail" })
+  property47({ type: Boolean, attribute: "show-tail" })
 ], RelTooltip.prototype, "showTail", 2);
 RelTooltip = __decorateClass([
-  customElement53("rel-tooltip")
+  customElement54("rel-tooltip")
 ], RelTooltip);
 
 // src/index.ts
@@ -13157,6 +14355,7 @@ export {
   RelResizablePanel,
   RelSegmentedButton,
   RelSelect,
+  RelSkeleton,
   RelSlider,
   RelSnackbar,
   RelStepper,