@reliability-design/web 1.0.2

package/dist/index.mjs

@@ -0,0 +1,4544 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/components/rel-accordion/rel-accordion.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var RelAccordion = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "Accordion";
+    this.open = false;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  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">
+        <div class="header" @click=${this.toggle}>
+          <div class="title">${this.title}</div>
+
+          <div class="icon ${this.open ? "rotated" : ""}">
+            ${this.chevron()}
+          </div>
+        </div>
+
+        ${this.open ? html`<div class="body"><slot></slot></div>` : ""}
+      </div>
+    `;
+  }
+};
+RelAccordion.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .accordion {
+      background: var(--rel-colors-white);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-200); /* 8px */
+      box-shadow: var(--rel-shadows-shadow-100);
+      transition: all 0.2s ease;
+      overflow: hidden;
+    }
+
+    /* HEADER --------------------------------------------------- */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--rel-spacing-space-md); /* 16px */
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .title {
+      font-size: var(--rel-fontSizes-lg); /* 20px */
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-black);
+    }
+
+    /* ICON ----------------------------------------------------- */
+    .icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.25s ease;
+    }
+
+    .icon svg {
+      width: 20px;
+      height: 20px;
+      stroke: var(--rel-colors-gray-primary);
+      stroke-width: 2;
+      fill: none;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .rotated {
+      transform: rotate(180deg);
+    }
+
+    /* BODY ------------------------------------------------------ */
+    .body {
+      padding: var(--rel-spacing-space-xl) var(--rel-spacing-space-md)
+        var(--rel-spacing-space-lg);
+      /* 24px 16px 20px */
+      font-size: var(--rel-fontSizes-lg); /* 20px */
+      color: var(--rel-colors-gray-primary);
+      animation: fadeIn 0.2s ease;
+    }
+
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], RelAccordion.prototype, "title", 2);
+__decorateClass([
+  property({ type: Boolean })
+], RelAccordion.prototype, "open", 2);
+RelAccordion = __decorateClass([
+  customElement("rel-accordion")
+], RelAccordion);
+
+// src/components/rel-alert/rel-alert.ts
+import { LitElement as LitElement2, html as html2, css as css2 } from "lit";
+import { customElement as customElement2, property as property2 } from "lit/decorators.js";
+var RelAlert = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.type = "neutral";
+    this.message1 = "";
+    this.dismissible = true;
+    this.dismissed = false;
+  }
+  get iconSvg() {
+    switch (this.type) {
+      case "info":
+        return html2`<svg viewBox="0 0 18 18" fill="none">
+          <path
+            d="M9 4.75c-.24 0-.44.08-.61.25-.16.16-.24.36-.24.6 0 .24.08.44.24.61.17.17.37.25.61.25.24 0 .44-.08.61-.25.17-.16.24-.36.24-.61 0-.24-.08-.44-.24-.6-.17-.17-.37-.25-.61-.25Zm.85 3.4h-1.7v5.1h1.7V8.15ZM9 .5c1.18 0 2.29.22 3.32.67 1.03.45 1.93 1.05 2.69 1.81.75.76 1.35 1.66 1.8 2.69.46 1.03.68 2.14.68 3.33 0 1.18-.22 2.29-.68 3.32-.45 1.04-1.05 1.93-1.8 2.69-.76.75-1.66 1.35-2.69 1.8-1.04.46-2.15.68-3.32.68-1.18 0-2.29-.22-3.32-.68-1.04-.45-1.93-1.05-2.69-1.8-.75-.76-1.35-1.66-1.8-2.69C1.92 11.28 1.7 10.17 1.7 9c0-1.18.22-2.29.68-3.32.45-1.04 1.05-1.93 1.8-2.69.76-.75 1.66-1.35 2.69-1.8C6.71.73 7.82.5 9 .5Z"
+            fill="#4A90E2"
+          />
+        </svg>`;
+      case "success":
+        return html2`<svg viewBox="0 0 18 18" fill="none">
+          <path
+            d="M7.81 12.91 13.8 6.92l-1.19-1.19L7.81 10.53 5.39 8.11 4.2 9.3l3.61 3.61ZM9 17.5a8.49 8.49 0 1 1 0-17 8.49 8.49 0 0 1 0 17Z"
+            fill="#4CAA47"
+          />
+        </svg>`;
+      case "warning":
+        return html2`<svg viewBox="0 0 16 14" fill="none">
+          <path
+            d="M0 14 8 0l8 14H0Zm2.51-1.47h10.98L8 2.95 2.51 12.53ZM8 11.79c.21 0 .38-.07.52-.21.14-.14.21-.31.21-.52 0-.21-.07-.38-.21-.52A.7.7 0 0 0 8 10.32a.7.7 0 0 0-.52.21c-.14.14-.21.31-.21.52 0 .21.07.38.21.52.14.14.31.21.52.21Zm-.73-2.21h1.46V5.89H7.27v3.69Z"
+            fill="#FF6D00"
+          />
+        </svg>`;
+      case "error":
+        return html2`<svg viewBox="0 0 18 18" fill="none">
+          <path
+            d="M9 13.25c.24 0 .44-.08.61-.24.17-.17.24-.38.24-.61 0-.24-.08-.44-.24-.61-.17-.16-.37-.24-.61-.24-.24 0-.44.08-.61.24-.17.17-.24.37-.24.61 0 .24.08.44.24.61.17.16.37.24.61.24Zm-.85-3.4h1.7V4.75h-1.7v5.1ZM9 17.5c-1.18 0-2.29-.23-3.32-.68C4.64 16.37 3.74 15.77 2.99 15.02c-.75-.75-1.35-1.65-1.8-2.69C.73 11.29.5 10.18.5 9c0-1.18.23-2.29.68-3.32.45-1.03 1.05-1.93 1.8-2.69C5.03 1.23 5.94.63 6.97.18 8 .72 9.12.5 10.3.5c1.17 0 2.28.23 3.32.68 1.03.45 1.93 1.05 2.68 1.8.75.76 1.35 1.66 1.8 2.69.46 1.03.68 2.14.68 3.33 0 1.18-.22 2.29-.68 3.32-.45 1.04-1.05 1.93-1.8 2.69-.76.75-1.66 1.35-2.69 1.8-1.04.46-2.15.68-3.32.68Z"
+            fill="#C62828"
+          />
+        </svg>`;
+      default:
+        return html2``;
+    }
+  }
+  dismissAlert() {
+    this.dismissed = true;
+  }
+  render() {
+    if (this.dismissed) return null;
+    return html2`
+      <div class="rel-alert alert-${this.type}">
+        <div class="rel-icon">${this.iconSvg}</div>
+
+        <div class="rel-content">
+          <p class="rel-message1">${this.message1}</p>
+
+          ${this.message2 ? html2`<p class="rel-message2">${this.message2}</p>` : ""}
+          ${this.urlText && this.urlHref ? html2`<a class="rel-link" href="${this.urlHref}"
+                >${this.urlText}</a
+              >` : ""}
+        </div>
+
+        ${this.dismissible ? html2`<button class="rel-close" @click=${this.dismissAlert}>
+              ✕
+            </button>` : ""}
+      </div>
+    `;
+  }
+};
+RelAlert.styles = css2`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .rel-alert {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs); /* 8px */
+      padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
+      /* 12px vertical, 16px horizontal */
+      border-radius: var(--rel-borders-radius-border-radius-200); /* 8px */
+      width: fit-content;
+      min-width: 360px;
+      box-sizing: border-box;
+    }
+
+    .rel-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .rel-message1 {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-medium);
+    }
+
+    .rel-message2 {
+      margin: 0;
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-regular);
+      opacity: 0.9;
+    }
+
+    .rel-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .rel-icon svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .rel-link {
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      text-decoration: underline;
+      margin-top: 2px;
+      color: inherit;
+    }
+
+    .rel-close {
+      margin-left: auto;
+      background: none;
+      border: none;
+      cursor: pointer;
+      width: 16px;
+      height: 16px;
+      opacity: 0.6;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .rel-close:hover {
+      opacity: 1;
+    }
+
+    /* COLORS — using token system */
+
+    .alert-info {
+      background: var(--rel-background-info);
+      color: var(--rel-text-info);
+    }
+
+    .alert-success {
+      background: var(--rel-background-success);
+      color: var(--rel-text-success);
+    }
+
+    .alert-warning {
+      background: var(--rel-background-warning);
+      color: var(--rel-text-warning);
+    }
+
+    .alert-error {
+      background: var(--rel-background-error);
+      color: var(--rel-text-error);
+    }
+
+    .alert-neutral {
+      background: var(--rel-colors-white);
+      color: var(--rel-text-primary);
+      border: 1px solid var(--rel-border-default);
+    }
+  `;
+__decorateClass([
+  property2({ type: String })
+], RelAlert.prototype, "type", 2);
+__decorateClass([
+  property2({ type: String })
+], RelAlert.prototype, "message1", 2);
+__decorateClass([
+  property2({ type: String })
+], RelAlert.prototype, "message2", 2);
+__decorateClass([
+  property2({ type: String })
+], RelAlert.prototype, "urlText", 2);
+__decorateClass([
+  property2({ type: String })
+], RelAlert.prototype, "urlHref", 2);
+__decorateClass([
+  property2({ type: Boolean })
+], RelAlert.prototype, "dismissible", 2);
+__decorateClass([
+  property2({ type: Boolean })
+], RelAlert.prototype, "dismissed", 2);
+RelAlert = __decorateClass([
+  customElement2("rel-alert")
+], RelAlert);
+
+// src/components/rel-avatar/rel-avatar.ts
+import { LitElement as LitElement3, html as html3, css as css3 } from "lit";
+import { customElement as customElement3, property as property3 } from "lit/decorators.js";
+var RelAvatar = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.type = "image";
+    this.src = "";
+    this.text = "";
+    this.alt = "Avatar";
+  }
+  render() {
+    return html3`
+      <div class="avatar avatar-${this.size}">
+        ${this.type === "image" ? html3`<img src=${this.src} alt=${this.alt} />` : this.type === "text" ? html3`<span>${this.text}</span>` : html3`<span class="icon-slot"><slot></slot></span>`}
+      </div>
+    `;
+  }
+};
+RelAvatar.styles = css3`
+    :host {
+      display: inline-flex;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      overflow: hidden;
+
+      background-color: var(--rel-colors-gray-heading);
+      color: var(--rel-colors-white);
+      font-weight: var(--rel-fontWeights-bold);
+
+      user-select: none;
+      text-transform: uppercase;
+    }
+
+    /* -------------------------
+        CORRECTED SIZE CLASSES
+    ------------------------- */
+    .avatar-lg {
+      width: 40px;
+      height: 40px;
+      font-size: var(--rel-fontSizes-xl);
+      line-height: 38px;
+    }
+
+    .avatar-md {
+      width: 32px;
+      height: 32px;
+      font-size: var(--rel-fontSizes-lg);
+      line-height: 32px;
+    }
+
+    .avatar-sm {
+      width: 24px;
+      height: 24px;
+      font-size: var(--rel-fontSizes-md);
+      line-height: 24px;
+    }
+
+    .avatar-xs {
+      width: 18px;
+      height: 18px;
+      font-size: var(--rel-fontSizes-xs);
+      line-height: 18px;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .icon-slot {
+      width: 100%;
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-slot ::slotted(*) {
+      font-size: var(--rel-fontSizes-md);
+    }
+
+    .icon-slot ::slotted(svg) {
+      width: 50%;
+      height: 50%;
+    }
+  `;
+__decorateClass([
+  property3({ type: String })
+], RelAvatar.prototype, "size", 2);
+__decorateClass([
+  property3({ type: String })
+], RelAvatar.prototype, "type", 2);
+__decorateClass([
+  property3({ type: String })
+], RelAvatar.prototype, "src", 2);
+__decorateClass([
+  property3({ type: String })
+], RelAvatar.prototype, "text", 2);
+__decorateClass([
+  property3({ type: String })
+], RelAvatar.prototype, "alt", 2);
+RelAvatar = __decorateClass([
+  customElement3("rel-avatar")
+], RelAvatar);
+
+// src/components/rel-badge/rel-badge.ts
+import { LitElement as LitElement4, html as html4, css as css4 } from "lit";
+import { customElement as customElement4, property as property4 } from "lit/decorators.js";
+var RelBadge = class extends LitElement4 {
+  constructor() {
+    super(...arguments);
+    this.number = "";
+    this.size = "md";
+    this.variant = "number";
+  }
+  get classes() {
+    return ["badge", `badge-${this.size}`, `badge-${this.variant}`].join(" ");
+  }
+  render() {
+    const isDot = this.variant === "dot";
+    return html4`
+      <span class="${this.classes}">${isDot ? "" : this.number}</span>
+    `;
+  }
+};
+RelBadge.styles = css4`
+    :host {
+      display: inline-flex;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-family: "Poppins", sans-serif;
+      font-weight: 600;
+      background-color: var(--rel-colors-red-primary);
+      color: var(--rel-colors-white);
+      border-radius: 50%;
+    }
+
+    /* PERFECT CIRCLES — FIXED SIZES */
+    .badge-sm {
+      width: 20px;
+      height: 20px;
+      font-size: 12px;
+    }
+
+    .badge-md {
+      width: 28px;
+      height: 28px;
+      font-size: 14px;
+    }
+
+    .badge-lg {
+      width: 40px;
+      height: 40px;
+      font-size: 20px;
+    }
+
+    /* DOT — smaller circle */
+    .badge-dot {
+      width: 10px !important;
+      height: 10px !important;
+      padding: 0 !important;
+    }
+
+    .badge-number {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `;
+__decorateClass([
+  property4({ type: String })
+], RelBadge.prototype, "number", 2);
+__decorateClass([
+  property4({ type: String })
+], RelBadge.prototype, "size", 2);
+__decorateClass([
+  property4({ type: String })
+], RelBadge.prototype, "variant", 2);
+RelBadge = __decorateClass([
+  customElement4("rel-badge")
+], RelBadge);
+
+// src/components/rel-breadcrumb/rel-breadcrumb.ts
+import { LitElement as LitElement5, html as html5, css as css5 } from "lit";
+import { customElement as customElement5, property as property5 } from "lit/decorators.js";
+var RelBreadcrumbs = class extends LitElement5 {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+  }
+  render() {
+    return html5`
+      <nav aria-label="Breadcrumb">
+        <ol>
+          ${this.items.map((item, index) => {
+      const last = index === this.items.length - 1;
+      return html5`
+              <li>
+                ${item.url && !last ? html5`<a href="${item.url}">${item.label}</a>` : html5`<span class="current">${item.label}</span>`}
+                ${!last ? html5`
+                      <svg viewBox="0 0 24 24">
+                        <polyline
+                          points="9 18 15 12 9 6"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        ></polyline>
+                      </svg>
+                    ` : ""}
+              </li>
+            `;
+    })}
+        </ol>
+      </nav>
+    `;
+  }
+};
+RelBreadcrumbs.styles = css5`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-md);
+      color: var(--rel-colors-gray-text);
+    }
+
+    nav {
+      display: block;
+      width: 100%;
+    }
+
+    ol {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+    }
+
+    a {
+      text-decoration: none;
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+      transition: color 0.2s ease;
+    }
+
+    a:hover {
+      text-decoration: underline;
+      color: var(--rel-colors-primary);
+    }
+
+    .current {
+      font-weight: var(--rel-fontWeights-bold);
+      color: var(--rel-colors-black);
+      cursor: default;
+    }
+
+    svg {
+      stroke: var(--rel-colors-gray-text);
+      width: 16px;
+      height: 16px;
+      margin: 0 10px;
+    }
+  `;
+__decorateClass([
+  property5({ type: Array })
+], RelBreadcrumbs.prototype, "items", 2);
+RelBreadcrumbs = __decorateClass([
+  customElement5("rel-breadcrumbs")
+], RelBreadcrumbs);
+
+// src/components/rel-button/rel-button.ts
+import { LitElement as LitElement6, html as html6, css as css6 } from "lit";
+import { customElement as customElement6, property as property6 } from "lit/decorators.js";
+var RelButton = class extends LitElement6 {
+  constructor() {
+    super(...arguments);
+    this.variant = "default";
+    this.tone = "default";
+    this.size = "medium";
+    this.border = "corner-radius";
+    this.disabled = false;
+  }
+  get classes() {
+    return [
+      `btn-${this.variant}`,
+      `tone-${this.tone}`,
+      `size-${this.size}`,
+      `border-${this.border}`,
+      this.disabled ? "btn-disabled" : ""
+    ].join(" ");
+  }
+  render() {
+    return html6`
+      <button class="${this.classes}" ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+RelButton.styles = css6`
+    :host {
+      display: inline-flex;
+    }
+
+    button {
+      font-family: var(--rel-fontFamilies-primary);
+      font-weight: var(--rel-fontWeights-semibold);
+      cursor: pointer;
+      border: none;
+      transition: all 0.15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--rel-spacing-space-2xs);
+      outline: none;
+    }
+
+    /* -------------------------
+        SIZES (Figma)
+    -------------------------- */
+    .size-small {
+      height: 32px;
+      padding: 0 var(--rel-spacing-space-md);
+      font-size: var(--rel-fontSizes-sm);
+    }
+
+    .size-medium {
+      height: 40px;
+      padding: 0 var(--rel-spacing-space-lg);
+      font-size: var(--rel-fontSizes-md);
+    }
+
+    .size-large {
+      height: 48px;
+      padding: 0 var(--rel-spacing-space-xl);
+      font-size: var(--rel-fontSizes-lg);
+    }
+
+    /* -------------------------
+        BORDER RADII (Tokens)
+    -------------------------- */
+    .border-corner-radius {
+      border-radius: var(--rel-borders-radius-border-radius-500);
+    }
+
+    .border-small-corner-radius {
+      border-radius: var(--rel-borders-radius-border-radius-200);
+    }
+
+    .border-no-corner-radius {
+      border-radius: var(--rel-borders-radius-border-radius-0);
+    }
+
+    /* -------------------------
+        DISABLED STATE
+    -------------------------- */
+    :host([disabled]) button,
+    button:disabled {
+      cursor: not-allowed;
+      background-color: var(--rel-colors-gray-border) !important;
+      color: var(--rel-colors-gray-disabled-text) !important;
+      border-color: var(--rel-colors-gray-border) !important;
+      opacity: 1;
+      pointer-events: none;
+    }
+
+    /* -------------------------
+        VARIANTS & TONES
+    -------------------------- */
+
+    /* DEFAULT */
+    .btn-default.tone-default {
+      background: var(--rel-colors-gray-primary);
+      color: var(--rel-colors-white);
+    }
+    .btn-default.tone-critical {
+      background: var(--rel-colors-red-primary);
+      color: var(--rel-colors-white);
+    }
+    .btn-default.tone-success {
+      background: var(--rel-colors-green-success);
+      color: var(--rel-colors-white);
+    }
+
+    /* PRIMARY */
+    .btn-primary.tone-default {
+      background: var(--rel-colors-green-primary);
+      color: var(--rel-colors-black);
+    }
+    .btn-primary.tone-critical {
+      background: var(--rel-colors-red-primary);
+      color: var(--rel-colors-white);
+    }
+    .btn-primary.tone-success {
+      background: var(--rel-colors-green-success);
+      color: var(--rel-colors-white);
+    }
+
+    /* SECONDARY */
+    .btn-secondary {
+      background: var(--rel-colors-white);
+      border: 1px solid var(--rel-colors-black);
+      color: var(--rel-colors-black);
+    }
+
+    /* TEXT */
+    .btn-text {
+      background: transparent;
+      color: var(--rel-colors-black);
+    }
+
+    /* LINK */
+    .btn-link {
+      background: transparent;
+      color: var(--rel-colors-blue-primary);
+      text-decoration: underline;
+    }
+
+    /* ICON */
+    .btn-icon {
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      border-radius: 50%;
+      background: var(--rel-colors-gray-light);
+      color: var(--rel-colors-black);
+    }
+
+    /* -------------------------
+        STATES: Hover / Active
+    -------------------------- */
+    button:hover:not(.btn-disabled) {
+      filter: brightness(0.92);
+    }
+
+    button:active:not(.btn-disabled) {
+      transform: scale(0.97);
+    }
+
+    /* TEXT BUTTON — hover border */
+    .btn-text:not(.btn-disabled):hover {
+      border: 1px solid var(--rel-colors-black);
+      text-decoration: none;
+    }
+
+    /* LINK BUTTON — hover border */
+    .btn-link:not(.btn-disabled):hover {
+      border: 1px solid var(--rel-colors-blue-primary);
+      text-decoration: underline;
+    }
+
+    /* -------------------------
+        FOCUS RING
+    -------------------------- */
+    button:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+  `;
+__decorateClass([
+  property6({ type: String })
+], RelButton.prototype, "variant", 2);
+__decorateClass([
+  property6({ type: String })
+], RelButton.prototype, "tone", 2);
+__decorateClass([
+  property6({ type: String })
+], RelButton.prototype, "size", 2);
+__decorateClass([
+  property6({ type: String })
+], RelButton.prototype, "border", 2);
+__decorateClass([
+  property6({ type: Boolean, reflect: true })
+], RelButton.prototype, "disabled", 2);
+RelButton = __decorateClass([
+  customElement6("rel-button")
+], RelButton);
+
+// src/components/rel-card/rel-card.ts
+import { LitElement as LitElement7, html as html7, css as css7 } from "lit";
+import { customElement as customElement7 } from "lit/decorators.js";
+var RelCard = class extends LitElement7 {
+  render() {
+    return html7` <div class="card"><slot></slot></div> `;
+  }
+};
+RelCard.styles = css7`
+    :host {
+      display: block;
+    }
+
+    .card {
+      background-color: var(--rel-colors-white, #ffffff);
+      border-radius: var(--rel-borderRadius-lg, 12px);
+      padding: var(--rel-spacing-space-md, 16px);
+
+      box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3),
+        0px 6px 10px 4px rgba(0, 0, 0, 0.15);
+
+      font-family: var(--rel-fontFamilies-primary);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .card:hover {
+      transform: translateY(-3px);
+      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.35),
+        0px 8px 14px 4px rgba(0, 0, 0, 0.2);
+    }
+  `;
+RelCard = __decorateClass([
+  customElement7("rel-card")
+], RelCard);
+
+// src/components/rel-cardmedia/rel-cardmedia.ts
+import { LitElement as LitElement8, html as html8, css as css8 } from "lit";
+import { customElement as customElement8, property as property7 } from "lit/decorators.js";
+var RelCardMedia = class extends LitElement8 {
+  constructor() {
+    super(...arguments);
+    this.imageSrc = "";
+    this.imageAlt = "Card image";
+    this.title = "";
+    this.subtitle = "";
+  }
+  render() {
+    return html8`
+      <div class="card-media">
+        ${this.imageSrc ? html8`
+              <div class="card-image">
+                <img src="${this.imageSrc}" alt="${this.imageAlt}" />
+              </div>
+            ` : null}
+
+        <div class="card-content">
+          ${this.title ? html8`<h3>${this.title}</h3>` : null}
+          ${this.subtitle ? html8`<p>${this.subtitle}</p>` : null}
+
+          <!-- Slot for extra content such as buttons, descriptions, etc -->
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+RelCardMedia.styles = css8`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .card-media {
+      background-color: var(--rel-colors-white, #ffffff);
+      border-radius: var(--rel-borderRadius-lg, 12px);
+      overflow: hidden;
+
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3),
+        0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .card-media:hover {
+      transform: translateY(-4px);
+      box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.35),
+        0px 10px 16px 6px rgba(0, 0, 0, 0.2);
+    }
+
+    .card-image img {
+      display: block;
+      width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+
+    .card-content {
+      padding: var(--rel-spacing-space-md, 16px);
+    }
+
+    .card-content h3 {
+      margin: 0 0 4px 0;
+      font-size: var(--rel-fontSizes-md, 16px);
+      font-weight: var(--rel-fontWeights-semibold, 600);
+      color: var(--rel-colors-gray-heading, #2b2b2b);
+    }
+
+    .card-content p {
+      margin: 0 0 8px 0;
+      font-size: var(--rel-fontSizes-sm, 14px);
+      color: var(--rel-colors-gray-text, #555);
+    }
+  `;
+__decorateClass([
+  property7({ type: String })
+], RelCardMedia.prototype, "imageSrc", 2);
+__decorateClass([
+  property7({ type: String })
+], RelCardMedia.prototype, "imageAlt", 2);
+__decorateClass([
+  property7({ type: String })
+], RelCardMedia.prototype, "title", 2);
+__decorateClass([
+  property7({ type: String })
+], RelCardMedia.prototype, "subtitle", 2);
+RelCardMedia = __decorateClass([
+  customElement8("rel-card-media")
+], RelCardMedia);
+
+// src/components/rel-checkbox/rel-checkbox.ts
+import { LitElement as LitElement9, html as html9, css as css9 } from "lit";
+import { customElement as customElement9, property as property8 } from "lit/decorators.js";
+var RelCheckbox = class extends LitElement9 {
+  constructor() {
+    super(...arguments);
+    this.label = "Label";
+    this.supportingtext = "";
+    this.state = "default";
+    this.status = "unchecked";
+  }
+  toggle() {
+    if (this.state === "disabled") return;
+    if (this.status === "unchecked") this.status = "checked";
+    else if (this.status === "checked") this.status = "indeterminate";
+    else this.status = "unchecked";
+    this.dispatchEvent(new CustomEvent("changed", { detail: this.status }));
+  }
+  render() {
+    const className = `
+      wrapper
+      ${this.state}
+      ${this.status}
+    `;
+    return html9`
+      <div class="${className}">
+        <label class="row">
+          <input
+            type="checkbox"
+            @change=${this.toggle}
+            ?disabled=${this.state === "disabled"}
+          />
+
+          <span class="box">
+            <!-- CHECK ICON -->
+            <svg class="check-icon" viewBox="0 0 18 14" fill="white">
+              <path
+                d="M6.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
+              />
+            </svg>
+
+            <!-- INDETERMINATE ICON -->
+            <svg class="indeterminate-icon" viewBox="0 0 16 2" fill="white">
+              <rect width="16" height="2" />
+            </svg>
+          </span>
+
+          <span class="label">${this.label}</span>
+        </label>
+
+        ${this.supportingtext ? html9`<span class="text">${this.supportingtext}</span>` : null}
+      </div>
+    `;
+  }
+};
+RelCheckbox.styles = css9`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      cursor: pointer;
+    }
+
+    input {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .box {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      border: 2px solid var(--rel-colors-gray-heading);
+      background: var(--rel-colors-white);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+    }
+
+    /* ICONS FIXED SIZE */
+    svg {
+      width: 12px;
+      height: 12px;
+      display: none;
+      pointer-events: none;
+    }
+
+    /* CHECKED */
+    .checked .box {
+      background: var(--rel-colors-gray-heading);
+      border-color: var(--rel-colors-gray-heading);
+    }
+    .checked .check-icon {
+      display: block;
+    }
+
+    /* INDETERMINATE */
+    .indeterminate .box {
+      background: var(--rel-colors-gray-heading);
+      border-color: var(--rel-colors-gray-heading);
+    }
+    .indeterminate .indeterminate-icon {
+      display: block;
+    }
+
+    /* ERROR */
+    .error .box {
+      border-color: var(--rel-colors-red-primary);
+    }
+    .error.checked .box,
+    .error.indeterminate .box {
+      background: var(--rel-colors-red-primary);
+      border-color: var(--rel-colors-red-primary);
+    }
+    .error .label,
+    .error .text {
+      color: var(--rel-colors-red-primary);
+    }
+
+    /* DISABLED */
+    .disabled {
+      opacity: 0.55;
+      cursor: not-allowed !important;
+    }
+
+    .label {
+      font-size: var(--rel-fontSizes-md);
+      color: var(--rel-colors-gray-heading);
+      font-weight: var(--rel-fontWeights-medium);
+    }
+
+    .text {
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-colors-gray-text);
+    }
+
+    /* Focus ring */
+    input:focus-visible + .box {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+  `;
+__decorateClass([
+  property8({ type: String })
+], RelCheckbox.prototype, "label", 2);
+__decorateClass([
+  property8({ type: String })
+], RelCheckbox.prototype, "supportingtext", 2);
+__decorateClass([
+  property8({ type: String })
+], RelCheckbox.prototype, "state", 2);
+__decorateClass([
+  property8({ type: String })
+], RelCheckbox.prototype, "status", 2);
+RelCheckbox = __decorateClass([
+  customElement9("rel-checkbox")
+], RelCheckbox);
+
+// src/components/rel-chip/rel-chip.ts
+import { LitElement as LitElement10, html as html10, css as css10 } from "lit";
+import { customElement as customElement10, property as property9, state as state2 } from "lit/decorators.js";
+var RelChip = class extends LitElement10 {
+  constructor() {
+    super(...arguments);
+    this.label = "Label";
+    this.tone = "default";
+    this.removable = false;
+    this.outline = false;
+    this.removed = false;
+  }
+  get classes() {
+    return [
+      "chip",
+      `chip-${this.tone}`,
+      this.outline ? "chip-outline" : ""
+    ].join(" ");
+  }
+  handleRemove(event) {
+    event.stopPropagation();
+    this.removed = true;
+    this.dispatchEvent(
+      new CustomEvent("removed", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleKeyDown(event) {
+    if (!this.removable) return;
+    if (event.key === "Backspace" || event.key === "Delete") {
+      event.preventDefault();
+      this.handleRemove(event);
+    }
+  }
+  render() {
+    if (this.removed) {
+      return null;
+    }
+    return html10`
+      <button
+        class="${this.classes}"
+        type="button"
+        role="button"
+        aria-label="${this.label}"
+        @keydown=${this.handleKeyDown}
+        tabindex="0"
+      >
+        ${this.avatar ? html10`<img src="${this.avatar}" alt="avatar" class="chip-avatar" />` : ""}
+        ${this.leadingIcon ? html10`<span class="chip-icon leading">
+              <slot name="leading-icon">${this.renderIcon(this.leadingIcon)}</slot>
+            </span>` : ""}
+        <span class="chip-label">${this.label}</span>
+        ${this.trailingIcon ? html10`<span class="chip-icon trailing">
+              <slot name="trailing-icon">${this.renderIcon(this.trailingIcon)}</slot>
+            </span>` : ""}
+        ${this.removable ? html10`<button
+              type="button"
+              class="chip-remove"
+              @click=${this.handleRemove}
+              aria-label="Remove chip"
+            >
+              
+            </button>` : ""}
+      </button>
+    `;
+  }
+  renderIcon(iconString) {
+    const template = document.createElement("template");
+    template.innerHTML = iconString.trim();
+    return html10`${template.content.cloneNode(true)}`;
+  }
+};
+RelChip.styles = css10`
+    :host {
+      display: inline-block;
+    }
+
+    :host([removed]) {
+      display: none;
+    }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      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-500);
+      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
+      gap: var(--rel-spacing-space-2xs);
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+      border: var(--rel-borders-width-stroke-100) solid transparent;
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    .chip:hover {
+      filter: brightness(0.92);
+      transform: translateY(-1px);
+      box-shadow: var(--rel-shadows-shadow-100);
+    }
+
+    .chip:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    .chip:active {
+      transform: scale(0.97) translateY(0);
+      box-shadow: none;
+      filter: brightness(0.88);
+    }
+
+    /* Tone Variants - Filled */
+    .chip-default {
+      background: var(--rel-colors-gray-border);
+      color: var(--rel-colors-black);
+    }
+
+    .chip-default:focus {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-gray-primary);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    .chip-blue {
+      background: var(--rel-colors-blue-tertiary);
+      color: var(--rel-colors-white);
+    }
+
+    .chip-blue:focus {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-blue-tertiary);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    .chip-yellow {
+      background: var(--rel-colors-yellow-pending);
+      color: var(--rel-colors-black);
+    }
+
+    .chip-yellow:focus {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-yellow-pending);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    .chip-red {
+      background: var(--rel-colors-red-secondary);
+      color: var(--rel-colors-white);
+    }
+
+    .chip-red:focus {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-red-secondary);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    .chip-green {
+      background: var(--rel-colors-green-success);
+      color: var(--rel-colors-white);
+    }
+
+    .chip-green:focus {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-green-success);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    /* Outline Variants */
+    .chip-outline.chip-default {
+      background: transparent;
+      border-color: var(--rel-colors-gray-border);
+      color: var(--rel-colors-black);
+    }
+
+    .chip-outline.chip-blue {
+      background: transparent;
+      border-color: var(--rel-colors-blue-tertiary);
+      color: var(--rel-colors-blue-tertiary);
+    }
+
+    .chip-outline.chip-yellow {
+      background: transparent;
+      border-color: var(--rel-colors-yellow-pending);
+      color: var(--rel-colors-yellow-pending);
+    }
+
+    .chip-outline.chip-red {
+      background: transparent;
+      border-color: var(--rel-colors-red-secondary);
+      color: var(--rel-colors-red-secondary);
+    }
+
+    .chip-outline.chip-green {
+      background: transparent;
+      border-color: var(--rel-colors-green-success);
+      color: var(--rel-colors-green-success);
+    }
+
+    .chip-avatar {
+      width: 20px;
+      height: 20px;
+      border-radius: var(--rel-borders-radius-border-radius-500);
+      object-fit: cover;
+    }
+
+    .chip-icon {
+      display: flex;
+      align-items: center;
+      line-height: 0;
+    }
+
+    .chip-icon ::slotted(svg),
+    .chip-icon svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    .chip-label {
+      line-height: var(--rel-lineHeights-md);
+    }
+
+    .chip-remove {
+      background: transparent;
+      border: none;
+      color: inherit;
+      font-size: var(--rel-fontSizes-md);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: 0;
+      margin-left: var(--rel-spacing-space-3xs);
+    }
+
+    .chip-remove:hover {
+      opacity: 0.6;
+    }
+  `;
+__decorateClass([
+  property9({ type: String })
+], RelChip.prototype, "label", 2);
+__decorateClass([
+  property9({ type: String })
+], RelChip.prototype, "tone", 2);
+__decorateClass([
+  property9({ type: String })
+], RelChip.prototype, "leadingIcon", 2);
+__decorateClass([
+  property9({ type: String })
+], RelChip.prototype, "trailingIcon", 2);
+__decorateClass([
+  property9({ type: String })
+], RelChip.prototype, "avatar", 2);
+__decorateClass([
+  property9({ type: Boolean })
+], RelChip.prototype, "removable", 2);
+__decorateClass([
+  property9({ type: Boolean })
+], RelChip.prototype, "outline", 2);
+__decorateClass([
+  state2()
+], RelChip.prototype, "removed", 2);
+RelChip = __decorateClass([
+  customElement10("rel-chip")
+], RelChip);
+
+// src/components/rel-container/rel-container.ts
+import { LitElement as LitElement11, html as html11, css as css11 } from "lit";
+import { customElement as customElement11, property as property10 } from "lit/decorators.js";
+var RelContainer = class extends LitElement11 {
+  constructor() {
+    super(...arguments);
+    this.padding = "md";
+    this.shadow = false;
+    this.background = "white";
+  }
+  get classes() {
+    return [
+      "reliability-container",
+      `bg-${this.background}`,
+      `padding-${this.padding}`,
+      this.shadow ? "shadow" : ""
+    ].join(" ");
+  }
+  render() {
+    return html11`
+      <div class="${this.classes}">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+RelContainer.styles = css11`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .reliability-container {
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Background Variants */
+    .bg-white {
+      background-color: var(--rel-colors-white);
+    }
+
+    .bg-light {
+      background-color: var(--rel-colors-gray-light);
+    }
+
+    .bg-none {
+      background: transparent;
+    }
+
+    /* Padding Variants */
+    .padding-sm {
+      padding: var(--rel-spacing-space-xs);
+    }
+
+    .padding-md {
+      padding: var(--rel-spacing-space-md);
+    }
+
+    .padding-lg {
+      padding: var(--rel-spacing-space-2xl);
+    }
+
+    /* Shadow */
+    .shadow {
+      box-shadow: var(--rel-shadows-shadow-300);
+    }
+  `;
+__decorateClass([
+  property10({ type: String })
+], RelContainer.prototype, "padding", 2);
+__decorateClass([
+  property10({ type: Boolean })
+], RelContainer.prototype, "shadow", 2);
+__decorateClass([
+  property10({ type: String })
+], RelContainer.prototype, "background", 2);
+RelContainer = __decorateClass([
+  customElement11("rel-container")
+], RelContainer);
+
+// src/components/rel-divider/rel-divider.ts
+import { LitElement as LitElement12, html as html12, css as css12 } from "lit";
+import { customElement as customElement12, property as property11 } from "lit/decorators.js";
+var RelDivider = class extends LitElement12 {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+  }
+  render() {
+    return html12`
+      <div class="rel-divider ${this.orientation}" role="separator"></div>
+    `;
+  }
+};
+RelDivider.styles = css12`
+    :host {
+      display: block;
+    }
+
+    .rel-divider {
+      position: relative;
+      display: flex;
+      background: transparent;
+      font-family: var(--rel-fontFamilies-primary);
+      color: var(--rel-colors-gray-primary);
+    }
+
+    /* Horizontal */
+    .rel-divider.horizontal {
+      width: 100%;
+      height: var(--rel-borders-width-stroke-100);
+      background-color: var(--rel-colors-gray-border);
+      margin: var(--rel-spacing-space-md) 0;
+    }
+
+    /* Vertical */
+    .rel-divider.vertical {
+      width: var(--rel-borders-width-stroke-100);
+      background-color: var(--rel-colors-gray-border);
+      margin: 0 var(--rel-spacing-space-md);
+      align-self: stretch;
+      height: 100%;
+    }
+  `;
+__decorateClass([
+  property11({ type: String })
+], RelDivider.prototype, "orientation", 2);
+RelDivider = __decorateClass([
+  customElement12("rel-divider")
+], RelDivider);
+
+// src/components/rel-layout/rel-layout.ts
+import { LitElement as LitElement13, html as html13, css as css13 } from "lit";
+import { customElement as customElement13, property as property12 } from "lit/decorators.js";
+var RelLayout = class extends LitElement13 {
+  constructor() {
+    super(...arguments);
+    this.gap = "1rem";
+    this.columns = 4;
+    this.responsive = true;
+  }
+  render() {
+    const gridStyle = `
+      gap: ${this.gap};
+      grid-template-columns: repeat(${this.columns}, 1fr);
+    `;
+    return html13`
+      <div class="layout-grid" style="${gridStyle}">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+RelLayout.styles = css13`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .layout-grid {
+      display: grid;
+      width: 100%;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    /* Responsive breakpoints - only applied when responsive is true */
+    :host([responsive]) .layout-grid {
+      /* Default: use columns property */
+    }
+
+    @media (max-width: 1024px) {
+      :host([responsive]) .layout-grid {
+        grid-template-columns: repeat(3, 1fr) !important;
+      }
+    }
+
+    @media (max-width: 768px) {
+      :host([responsive]) .layout-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+      }
+    }
+
+    @media (max-width: 480px) {
+      :host([responsive]) .layout-grid {
+        grid-template-columns: 1fr !important;
+      }
+    }
+  `;
+__decorateClass([
+  property12({ type: String })
+], RelLayout.prototype, "gap", 2);
+__decorateClass([
+  property12({ type: Number })
+], RelLayout.prototype, "columns", 2);
+__decorateClass([
+  property12({ type: Boolean })
+], RelLayout.prototype, "responsive", 2);
+RelLayout = __decorateClass([
+  customElement13("rel-layout")
+], RelLayout);
+
+// src/components/rel-menu/rel-menu.ts
+import { LitElement as LitElement14, html as html14, css as css14 } from "lit";
+import { customElement as customElement14, property as property13, state as state3 } from "lit/decorators.js";
+var RelMenu = class extends LitElement14 {
+  constructor() {
+    super(...arguments);
+    this.type = "default";
+    this.items = [];
+    this.focusedIndex = 0;
+    this.handleDocumentClick = (e) => {
+      const path = e.composedPath();
+      const hit = path.some((n) => n?.classList?.contains("rel-menu"));
+      if (!hit) {
+        this.items.forEach((i) => i.open = false);
+        this.requestUpdate();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.handleDocumentClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
+  onItemEnter(item) {
+    if (this.type === "arrow" && item.submenu?.length) {
+      this.items.forEach((i) => {
+        if (i !== item) i.open = false;
+      });
+      item.open = true;
+      this.requestUpdate();
+    }
+  }
+  onItemLeave(_item) {
+  }
+  onItemClick(item, index, ev) {
+    ev?.stopPropagation();
+    if (item.disabled) return;
+    this.focusedIndex = index;
+    if (this.type === "checkbox") {
+      item.checked = !item.checked;
+      this.dispatchEvent(
+        new CustomEvent("item-checked", {
+          detail: { item, checked: item.checked },
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.requestUpdate();
+      return;
+    }
+    if (this.type === "arrow" && item.submenu?.length) {
+      const next = !item.open;
+      this.items.forEach((i) => i.open = false);
+      item.open = next;
+      this.requestUpdate();
+      return;
+    }
+    this.items.forEach((i) => i.active = false);
+    item.active = true;
+    this.dispatchEvent(
+      new CustomEvent("item-selected", {
+        detail: { item },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.requestUpdate();
+  }
+  onSubClick(parent, sub, ev) {
+    ev?.stopPropagation();
+    this.items.forEach((i) => {
+      i.active = false;
+      i.submenu?.forEach((s) => s.active = false);
+    });
+    sub.active = true;
+    parent.open = false;
+    this.dispatchEvent(
+      new CustomEvent("submenu-selected", {
+        detail: { parent, sub },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.requestUpdate();
+  }
+  toggleCheckbox(item, ev) {
+    ev.stopPropagation();
+    if (!item.disabled) {
+      item.checked = !item.checked;
+      this.dispatchEvent(
+        new CustomEvent("item-checked", {
+          detail: { item, checked: item.checked },
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.requestUpdate();
+    }
+  }
+  onKeydown(ev) {
+    const last = this.items.length - 1;
+    if (ev.key === "ArrowDown") {
+      this.focusedIndex = Math.min(last, this.focusedIndex + 1);
+      ev.preventDefault();
+    } else if (ev.key === "ArrowUp") {
+      this.focusedIndex = Math.max(0, this.focusedIndex - 1);
+      ev.preventDefault();
+    } else if (ev.key === "ArrowRight") {
+      const item = this.items[this.focusedIndex];
+      if (this.type === "arrow" && item?.submenu?.length) {
+        item.open = true;
+        this.requestUpdate();
+      }
+    } else if (ev.key === "ArrowLeft" || ev.key === "Escape") {
+      this.items.forEach((i) => i.open = false);
+      this.requestUpdate();
+    } else if (ev.key === "Enter" || ev.key === " ") {
+      const item = this.items[this.focusedIndex];
+      this.onItemClick(item, this.focusedIndex);
+      ev.preventDefault();
+    }
+  }
+  renderMenuItem(item, index) {
+    const isFocused = this.focusedIndex === index;
+    return html14`
+      <div
+        class="rel-menu-item ${item.active ? "active" : ""} ${item.disabled ? "disabled" : ""}"
+        role="menuitem"
+        ?data-focused="${isFocused}"
+        @mouseenter="${() => this.onItemEnter(item)}"
+        @mouseleave="${() => this.onItemLeave(item)}"
+        @click="${(e) => this.onItemClick(item, index, e)}">
+        ${this.type === "checkbox" ? html14`
+              <div class="menu-check-row">
+                <input
+                  class="menu-checkbox"
+                  type="checkbox"
+                  .checked="${item.checked || false}"
+                  ?disabled="${item.disabled}"
+                  @click="${(e) => this.toggleCheckbox(item, e)}" />
+                <span class="menu-label">${item.label}</span>
+              </div>
+            ` : html14`
+              <span class="menu-label">${item.label}</span>
+              ${this.type === "arrow" && item.submenu?.length ? html14`<span class="chevron">▸</span>` : ""}
+            `}
+        ${this.type === "arrow" && item.submenu?.length ? html14`
+              <div
+                class="rel-submenu ${item.open ? "visible" : ""}"
+                @click="${(e) => e.stopPropagation()}">
+                ${item.submenu.map(
+      (sub) => html14`
+                    <div
+                      class="rel-menu-item ${sub.active ? "active" : ""}"
+                      role="menuitem"
+                      @click="${(e) => this.onSubClick(item, sub, e)}">
+                      <span class="menu-label">${sub.label}</span>
+                    </div>
+                  `
+    )}
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+  render() {
+    return html14`
+      <div
+        class="rel-menu"
+        role="menu"
+        tabindex="0"
+        @keydown="${this.onKeydown}"
+        @click="${(e) => e.stopPropagation()}">
+        ${this.items.map((item, index) => this.renderMenuItem(item, index))}
+      </div>
+    `;
+  }
+};
+RelMenu.styles = css14`
+    :host {
+      display: inline-block;
+    }
+
+    .rel-menu {
+      position: relative;
+      display: inline-block;
+      background: var(--rel-colors-white);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      box-shadow: var(--rel-shadows-shadow-300);
+      min-width: 220px;
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+      padding: var(--rel-spacing-space-3xs) 0;
+      outline: none;
+    }
+
+    .rel-menu-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      line-height: var(--rel-lineHeights-sm);
+      cursor: pointer;
+      transition: background 0.15s ease, color 0.15s ease;
+      user-select: none;
+    }
+
+    .rel-menu-item:hover {
+      background: var(--rel-colors-gray-border);
+    }
+
+    .rel-menu-item:active {
+      background: var(--rel-colors-gray-tertiary);
+    }
+
+    .rel-menu-item.active {
+      background: var(--rel-colors-gray-tertiary);
+    }
+
+    .rel-menu-item.disabled {
+      background-color: var(--rel-colors-gray-light);
+      color: var(--rel-colors-gray-placeholder);
+      cursor: not-allowed;
+    }
+
+    .rel-menu-item[data-focused="true"] {
+      border-top: var(--rel-borders-width-stroke-200) solid var(--rel-colors-gray-primary);
+      border-bottom: var(--rel-borders-width-stroke-200) solid var(--rel-colors-gray-primary);
+    }
+
+    .menu-check-row {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+      width: 100%;
+    }
+
+    .menu-checkbox {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+
+    .menu-checkbox:disabled {
+      cursor: not-allowed;
+    }
+
+    .menu-label {
+      flex: 1 1 auto;
+    }
+
+    .chevron {
+      font-size: var(--rel-fontSizes-lg);
+      opacity: 0.75;
+      transform: translateY(1px);
+    }
+
+    .rel-submenu {
+      position: absolute;
+      top: calc(-1 * var(--rel-spacing-space-3xs));
+      left: calc(100% + var(--rel-spacing-space-2xs));
+      min-width: 200px;
+      background: var(--rel-colors-white);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      box-shadow: var(--rel-shadows-shadow-300);
+      padding: var(--rel-spacing-space-3xs) 0;
+      display: none;
+      z-index: 20;
+    }
+
+    .rel-submenu.visible {
+      display: block;
+    }
+
+    .rel-submenu .rel-menu-item {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+    }
+  `;
+__decorateClass([
+  property13({ type: String })
+], RelMenu.prototype, "type", 2);
+__decorateClass([
+  property13({ type: Array })
+], RelMenu.prototype, "items", 2);
+__decorateClass([
+  state3()
+], RelMenu.prototype, "focusedIndex", 2);
+RelMenu = __decorateClass([
+  customElement14("rel-menu")
+], RelMenu);
+
+// src/components/rel-progress/rel-progress.ts
+import { LitElement as LitElement15, html as html15, css as css15 } from "lit";
+import { customElement as customElement15, property as property14 } from "lit/decorators.js";
+var RelProgress = class extends LitElement15 {
+  constructor() {
+    super(...arguments);
+    this.mode = "linear-determinate";
+    this.value = 0;
+    this.radius = 15.9155;
+    this.circumference = 2 * Math.PI * this.radius;
+  }
+  renderLinearDeterminate() {
+    return html15`
+      <div class="linear-track">
+        <div class="linear-bar" style="width: ${this.value}%"></div>
+      </div>
+    `;
+  }
+  renderLinearIndeterminate() {
+    return html15`
+      <div class="linear-track">
+        <div class="linear-bar indeterminate"></div>
+      </div>
+    `;
+  }
+  renderCircularDeterminate() {
+    const offset = this.circumference - this.value / 100 * this.circumference;
+    return html15`
+      <div class="circular">
+        <svg viewBox="0 0 36 36" class="circular-svg">
+          <circle class="circular-bg" cx="18" cy="18" r="15.9155" />
+          <circle
+            class="circular-progress"
+            cx="18"
+            cy="18"
+            r="15.9155"
+            stroke-dasharray="${this.circumference}"
+            stroke-dashoffset="${offset}" />
+        </svg>
+      </div>
+    `;
+  }
+  renderCircularIndeterminate() {
+    return html15`
+      <div class="circular">
+        <svg viewBox="0 0 50 50" class="spinner">
+          <circle class="spinner-path" cx="25" cy="25" r="20" fill="none" stroke-width="4" />
+        </svg>
+      </div>
+    `;
+  }
+  render() {
+    switch (this.mode) {
+      case "linear-determinate":
+        return this.renderLinearDeterminate();
+      case "linear-indeterminate":
+        return this.renderLinearIndeterminate();
+      case "circular-determinate":
+        return this.renderCircularDeterminate();
+      case "circular-indeterminate":
+        return this.renderCircularIndeterminate();
+      default:
+        return this.renderLinearDeterminate();
+    }
+  }
+};
+RelProgress.styles = css15`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    :host([mode*="circular"]) {
+      display: inline-block;
+    }
+
+    /* Linear Progress */
+    .linear-track {
+      background: var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      height: 6px;
+      overflow: hidden;
+      width: 100%;
+    }
+
+    .linear-bar {
+      background: var(--rel-colors-black);
+      height: 100%;
+      transition: width 0.3s ease;
+    }
+
+    .linear-bar.indeterminate {
+      width: 30%;
+      animation: linear-indeterminate 1.5s infinite;
+    }
+
+    @keyframes linear-indeterminate {
+      0% {
+        margin-left: -30%;
+      }
+      50% {
+        margin-left: 50%;
+      }
+      100% {
+        margin-left: 100%;
+      }
+    }
+
+    /* Circular Progress */
+    .circular {
+      display: inline-block;
+      width: 48px;
+      height: 48px;
+    }
+
+    .circular-svg {
+      transform: rotate(-90deg);
+      width: 100%;
+      height: 100%;
+    }
+
+    .circular-bg {
+      fill: none;
+      stroke: var(--rel-colors-gray-border);
+      stroke-width: 3;
+    }
+
+    .circular-progress {
+      fill: none;
+      stroke: var(--rel-colors-black);
+      stroke-width: 3;
+      stroke-linecap: round;
+      transition: stroke-dashoffset 0.35s;
+      transform: rotate(0deg);
+      transform-origin: center;
+    }
+
+    /* Circular Indeterminate Spinner */
+    .spinner {
+      animation: rotate 2s linear infinite;
+    }
+
+    .spinner-path {
+      stroke: var(--rel-colors-black);
+      stroke-linecap: round;
+      animation: dash 1.5s ease-in-out infinite;
+    }
+
+    @keyframes rotate {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+      }
+      100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+      }
+    }
+  `;
+__decorateClass([
+  property14({ type: String })
+], RelProgress.prototype, "mode", 2);
+__decorateClass([
+  property14({ type: Number })
+], RelProgress.prototype, "value", 2);
+RelProgress = __decorateClass([
+  customElement15("rel-progress")
+], RelProgress);
+
+// src/components/rel-radio/rel-radio.ts
+import { LitElement as LitElement16, html as html16, css as css16 } from "lit";
+import { customElement as customElement16, property as property15 } from "lit/decorators.js";
+var RelRadio = class extends LitElement16 {
+  constructor() {
+    super(...arguments);
+    this.options = [];
+    this.name = "radio-group";
+    this.selectedValue = null;
+  }
+  onChange(value) {
+    this.selectedValue = value;
+    this.dispatchEvent(
+      new CustomEvent("changed", {
+        detail: { value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  isChecked(value) {
+    return this.selectedValue === value;
+  }
+  renderOption(option) {
+    const isChecked = this.isChecked(option.value);
+    const classes = [
+      "rel-radio-option",
+      option.disabled ? "disabled" : "",
+      option.error ? "error" : ""
+    ].filter(Boolean).join(" ");
+    return html16`
+      <label class="${classes}">
+        <div class="radio-main">
+          <input
+            type="radio"
+            name="${this.name}"
+            .value="${option.value}"
+            .checked="${isChecked}"
+            ?disabled="${option.disabled}"
+            @change="${() => !option.disabled && this.onChange(option.value)}" />
+          <span class="radio-custom"></span>
+          <span class="radio-label">${option.label}</span>
+        </div>
+
+        ${option.supportingText ? html16`
+              <div class="radio-supporting ${option.error ? "error-text" : ""}">
+                ${option.supportingText}
+              </div>
+            ` : ""}
+      </label>
+    `;
+  }
+  render() {
+    return html16`
+      <div class="rel-radio-group">
+        ${this.options.map((option) => this.renderOption(option))}
+      </div>
+    `;
+  }
+};
+RelRadio.styles = css16`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .rel-radio-group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--rel-spacing-space-xs);
+    }
+
+    .rel-radio-option {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--rel-spacing-space-3xs);
+      cursor: pointer;
+      position: relative;
+    }
+
+    .radio-main {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    .rel-radio-option input {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .radio-custom {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--rel-colors-black);
+      border-radius: 50%;
+      display: inline-block;
+      position: relative;
+      flex-shrink: 0;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .rel-radio-option input:focus + .radio-custom {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-black);
+      outline-offset: var(--rel-spacing-space-3xs);
+    }
+
+    .rel-radio-option input:checked + .radio-custom::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 10px;
+      height: 10px;
+      background-color: var(--rel-colors-black);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    /* Error state */
+    .rel-radio-option.error .radio-custom {
+      border-color: var(--rel-colors-red-secondary);
+    }
+
+    .rel-radio-option.error input:checked + .radio-custom::after {
+      background-color: var(--rel-colors-red-secondary);
+    }
+
+    .rel-radio-option.error .radio-label,
+    .rel-radio-option.error .radio-supporting {
+      color: var(--rel-colors-red-secondary);
+    }
+
+    .rel-radio-option.error input:focus + .radio-custom {
+      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-red-secondary);
+    }
+
+    /* Disabled state */
+    .rel-radio-option.disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
+    }
+
+    .rel-radio-option.disabled .radio-label,
+    .rel-radio-option.disabled .radio-supporting {
+      cursor: not-allowed !important;
+    }
+
+    /* Text styles */
+    .radio-label {
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+      line-height: var(--rel-lineHeights-sm);
+    }
+
+    .radio-supporting {
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-colors-gray-placeholder);
+      margin-left: 28px;
+      line-height: var(--rel-lineHeights-xs);
+    }
+
+    .radio-supporting.error-text {
+      color: var(--rel-colors-red-secondary);
+    }
+  `;
+__decorateClass([
+  property15({ type: Array })
+], RelRadio.prototype, "options", 2);
+__decorateClass([
+  property15({ type: String })
+], RelRadio.prototype, "name", 2);
+__decorateClass([
+  property15({ type: String })
+], RelRadio.prototype, "selectedValue", 2);
+RelRadio = __decorateClass([
+  customElement16("rel-radio")
+], RelRadio);
+
+// src/components/rel-segmented-button/rel-segmented-button.ts
+import { LitElement as LitElement17, html as html17, css as css17 } from "lit";
+import { customElement as customElement17, property as property16 } from "lit/decorators.js";
+var RelSegmentedButton = class extends LitElement17 {
+  constructor() {
+    super(...arguments);
+    this.options = [];
+    this.active = "";
+    this.size = "medium";
+    this.align = "left";
+  }
+  setActive(option) {
+    if (!option.disabled) {
+      this.active = option.value;
+      this.dispatchEvent(
+        new CustomEvent("changed", {
+          detail: { value: option.value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  renderSegment(option) {
+    const isActive = this.active === option.value;
+    const classes = [
+      "segment",
+      isActive ? "active" : "",
+      option.disabled ? "disabled" : ""
+    ].filter(Boolean).join(" ");
+    return html17`
+      <button
+        class="${classes}"
+        ?disabled="${option.disabled}"
+        @click="${() => this.setActive(option)}">
+        ${option.label}
+      </button>
+    `;
+  }
+  render() {
+    const containerClasses = [
+      "segmented-buttons",
+      this.size,
+      `align-${this.align}`
+    ].join(" ");
+    return html17`
+      <div class="${containerClasses}">
+        ${this.options.map((option) => this.renderSegment(option))}
+      </div>
+    `;
+  }
+};
+RelSegmentedButton.styles = css17`
+    :host {
+      display: inline-block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .segmented-buttons {
+      display: inline-flex;
+      border: 2px solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      overflow: hidden;
+    }
+
+    /* Alignment */
+    .align-left {
+      justify-content: flex-start;
+    }
+
+    .align-middle {
+      justify-content: center;
+    }
+
+    .align-right {
+      justify-content: flex-end;
+    }
+
+    /* Base segment styling */
+    .segment {
+      background: var(--rel-colors-white);
+      border: none;
+      cursor: pointer;
+      font-weight: var(--rel-fontWeights-medium);
+      border-right: 2px solid var(--rel-colors-gray-border);
+      transition: all 0.2s ease-in-out;
+      color: var(--rel-colors-gray-heading);
+      font-family: var(--rel-fontFamilies-primary);
+      outline: none;
+    }
+
+    .segment:last-child {
+      border-right: none;
+    }
+
+    /* Hover */
+    .segment:hover:not(.disabled):not(.active) {
+      background: var(--rel-colors-gray-bg);
+    }
+
+    /* Active */
+    .segment.active {
+      background: var(--rel-colors-black);
+      color: var(--rel-colors-white);
+    }
+
+    .segment.active:hover:not(.disabled) {
+      background: var(--rel-colors-black);
+      color: var(--rel-colors-white);
+    }
+
+    /* Disabled */
+    .segment.disabled,
+    .segment:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      background: var(--rel-colors-gray-bg);
+      color: var(--rel-colors-gray-placeholder);
+      pointer-events: none;
+    }
+
+    /* Sizes */
+    .segmented-buttons.small .segment {
+      padding: var(--rel-spacing-space-3xs) var(--rel-spacing-space-xs);
+      font-size: var(--rel-fontSizes-xs);
+    }
+
+    .segmented-buttons.medium .segment {
+      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
+      font-size: var(--rel-fontSizes-sm);
+    }
+  `;
+__decorateClass([
+  property16({ type: Array })
+], RelSegmentedButton.prototype, "options", 2);
+__decorateClass([
+  property16({ type: String })
+], RelSegmentedButton.prototype, "active", 2);
+__decorateClass([
+  property16({ type: String })
+], RelSegmentedButton.prototype, "size", 2);
+__decorateClass([
+  property16({ type: String })
+], RelSegmentedButton.prototype, "align", 2);
+RelSegmentedButton = __decorateClass([
+  customElement17("rel-segmented-button")
+], RelSegmentedButton);
+
+// src/components/rel-select/rel-select.ts
+import { LitElement as LitElement18, html as html18, css as css18 } from "lit";
+import { customElement as customElement18, property as property17 } from "lit/decorators.js";
+var RelSelect = class extends LitElement18 {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.options = [];
+    this.selected = "";
+    this.state = "default";
+    this.supportingText = "";
+    this.size = "medium";
+    this.border = "rounded";
+    this.leftIcon = "";
+    this.rightIcon = "";
+  }
+  onChange(event) {
+    const value = event.target.value;
+    this.selected = value;
+    this.dispatchEvent(
+      new CustomEvent("changed", {
+        detail: { value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    const containerClasses = [
+      "select-container",
+      this.leftIcon ? "with-left-icon" : "",
+      this.rightIcon ? "with-right-icon" : "",
+      `select-${this.size}`
+    ].filter(Boolean).join(" ");
+    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";
+    return html18`
+      <div class="${wrapperClasses}">
+        ${this.label ? html18`<label class="select-label">${this.label}</label>` : ""}
+
+        <div class="${containerClasses}">
+          ${this.leftIcon ? html18`<span class="icon left">${this.leftIcon}</span>` : ""}
+
+          <select
+            class="${selectClasses}"
+            ?disabled="${isDisabled}"
+            @change="${this.onChange}"
+            .value="${this.selected}">
+            <option value="" disabled ?selected="${!this.selected}" hidden>
+              Select Option
+            </option>
+            ${this.options.map(
+      (option) => html18`
+                <option value="${option}" ?selected="${option === this.selected}">
+                  ${option}
+                </option>
+              `
+    )}
+          </select>
+
+          ${this.rightIcon ? html18`<span class="icon right">${this.rightIcon}</span>` : ""}
+        </div>
+
+        ${this.supportingText ? html18`
+              <span
+                class="supporting-text ${this.state === "error" ? "error-text" : ""}">
+                ${this.supportingText}
+              </span>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+RelSelect.styles = css18`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+      width: 100%;
+    }
+
+    .select-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .select-label {
+      font-size: var(--rel-fontSizes-sm);
+      margin-bottom: var(--rel-spacing-space-3xs);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-colors-gray-heading);
+    }
+
+    .select-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .icon {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 16px;
+      color: var(--rel-colors-gray-primary);
+    }
+
+    .icon.left {
+      left: 12px;
+    }
+
+    .icon.right {
+      right: 36px;
+    }
+
+    select {
+      flex: 1;
+      appearance: none;
+      border: 1px solid var(--rel-colors-gray-border);
+      background-color: var(--rel-colors-white);
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 12px center;
+      font-family: var(--rel-fontFamilies-primary);
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+      color: var(--rel-colors-gray-heading);
+      width: 100%;
+      outline: none;
+    }
+
+    select:hover:not(:disabled) {
+      border-color: var(--rel-colors-gray-primary);
+    }
+
+    select:focus:not(:disabled) {
+      border-color: var(--rel-colors-black);
+      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
+    }
+
+    /* States */
+    select.error {
+      border-color: var(--rel-colors-red-secondary);
+    }
+
+    select.error:focus {
+      box-shadow: 0 0 0 3px rgba(213, 0, 0, 0.1);
+    }
+
+    select:disabled {
+      background-color: var(--rel-colors-gray-bg);
+      border-color: var(--rel-colors-gray-border);
+      color: var(--rel-colors-gray-placeholder);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    /* Sizes */
+    .select-small select {
+      font-size: var(--rel-fontSizes-xs);
+      padding: var(--rel-spacing-space-3xs) var(--rel-spacing-space-lg)
+        var(--rel-spacing-space-3xs) var(--rel-spacing-space-2xs);
+    }
+
+    .select-medium select {
+      font-size: var(--rel-fontSizes-sm);
+      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-xl)
+        var(--rel-spacing-space-2xs) var(--rel-spacing-space-xs);
+    }
+
+    .select-large select {
+      font-size: var(--rel-fontSizes-md);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-2xl)
+        var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+    }
+
+    /* With icons */
+    .with-left-icon.select-small select {
+      padding-left: var(--rel-spacing-space-xl);
+    }
+
+    .with-left-icon.select-medium select {
+      padding-left: var(--rel-spacing-space-2xl);
+    }
+
+    .with-left-icon.select-large select {
+      padding-left: var(--rel-spacing-space-3xl);
+    }
+
+    .with-right-icon.select-small select {
+      padding-right: var(--rel-spacing-space-2xl);
+    }
+
+    .with-right-icon.select-medium select {
+      padding-right: var(--rel-spacing-space-3xl);
+    }
+
+    .with-right-icon.select-large select {
+      padding-right: 4rem;
+    }
+
+    /* Border */
+    .border-rounded select {
+      border-radius: var(--rel-borders-radius-border-radius-300);
+    }
+
+    .border-sharp select {
+      border-radius: 0;
+    }
+
+    /* Supporting text */
+    .supporting-text {
+      font-size: var(--rel-fontSizes-xs);
+      margin-top: var(--rel-spacing-space-3xs);
+      color: var(--rel-colors-gray-placeholder);
+    }
+
+    .error-text {
+      color: var(--rel-colors-red-secondary);
+    }
+  `;
+__decorateClass([
+  property17({ type: String })
+], RelSelect.prototype, "label", 2);
+__decorateClass([
+  property17({ type: Array })
+], RelSelect.prototype, "options", 2);
+__decorateClass([
+  property17({ type: String })
+], RelSelect.prototype, "selected", 2);
+__decorateClass([
+  property17({ type: String })
+], RelSelect.prototype, "state", 2);
+__decorateClass([
+  property17({ type: String })
+], RelSelect.prototype, "supportingText", 2);
+__decorateClass([
+  property17({ type: String })
+], RelSelect.prototype, "size", 2);
+__decorateClass([
+  property17({ type: String })
+], RelSelect.prototype, "border", 2);
+__decorateClass([
+  property17({ type: String })
+], RelSelect.prototype, "leftIcon", 2);
+__decorateClass([
+  property17({ type: String })
+], RelSelect.prototype, "rightIcon", 2);
+RelSelect = __decorateClass([
+  customElement18("rel-select")
+], RelSelect);
+
+// src/components/rel-slider/rel-slider.ts
+import { LitElement as LitElement19, html as html19, css as css19 } from "lit";
+import { customElement as customElement19, property as property18, state as state4 } from "lit/decorators.js";
+var RelSlider = class extends LitElement19 {
+  constructor() {
+    super(...arguments);
+    this.type = "continuous";
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.disabled = false;
+    this.track = "solid";
+    this.showTickLabels = false;
+    this.showBubble = true;
+    this.value = 0;
+    this.ticks = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setupTicks();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("type") || changedProperties.has("min") || changedProperties.has("max") || changedProperties.has("step")) {
+      this.setupTicks();
+    }
+    if (changedProperties.has("value")) {
+      this.updateActiveWidth();
+    }
+  }
+  get percentage() {
+    if (this.max === this.min) return 0;
+    return (this.value - this.min) / (this.max - this.min) * 100;
+  }
+  setupTicks() {
+    if (this.type !== "discrete") {
+      this.ticks = [];
+      return;
+    }
+    const step = Math.max(1, this.step);
+    const ticks = [];
+    for (let v = this.min; v <= this.max; v += step) {
+      ticks.push(v);
+    }
+    if (ticks[ticks.length - 1] !== this.max) {
+      ticks.push(this.max);
+    }
+    this.ticks = ticks;
+  }
+  getTickLeftPct(tick) {
+    const pct = (tick - this.min) / (this.max - this.min) * 100;
+    return Math.round(pct * 1e3) / 1e3;
+  }
+  isTickActive(tick) {
+    return tick <= this.value;
+  }
+  onInput(ev) {
+    const el = ev.target;
+    let next = Number(el.value);
+    if (this.type === "discrete") {
+      const snapped = Math.round((next - this.min) / this.step) * this.step + this.min;
+      next = Math.min(this.max, Math.max(this.min, snapped));
+      el.value = String(next);
+    }
+    this.value = next;
+    this.updateActiveWidth();
+    this.dispatchEvent(
+      new CustomEvent("valueChange", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  updateActiveWidth() {
+    const activeEl = this.shadowRoot?.querySelector(".track-active");
+    if (activeEl) {
+      if (this.type === "discrete") {
+        const stepPercent = this.step / (this.max - this.min) * 100;
+        const snappedPct = Math.round(this.percentage / stepPercent) * stepPercent;
+        activeEl.style.width = `${snappedPct}%`;
+      } else {
+        activeEl.style.width = `${this.percentage}%`;
+      }
+    }
+  }
+  renderThumbContainer() {
+    return html19`
+      <div class="thumb-container" style="left: ${this.percentage}%">
+        ${this.showBubble ? html19`
+          <div class="value-marker">
+            <svg viewBox="0 0 24 32" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M12 0C18.6274 0 24 5.37258 24 12C24 21 12 32 12 32C12 32 0 21 0 12C0 5.37258 5.37258 0 12 0Z"
+                fill="black" />
+              <text
+                x="12"
+                y="16"
+                text-anchor="middle"
+                fill="white"
+                font-size="12"
+                font-family="Poppins"
+                font-weight="600">
+                ${this.value}
+              </text>
+            </svg>
+          </div>
+        ` : ""}
+        <div class="custom-thumb"></div>
+      </div>
+    `;
+  }
+  renderTicks() {
+    if (this.type !== "discrete") return "";
+    return html19`
+      <div class="ticks">
+        ${this.ticks.map(
+      (tick) => html19`
+            <div
+              class="tick ${this.isTickActive(tick) ? "active" : ""}"
+              style="left: ${this.getTickLeftPct(tick)}%"></div>
+          `
+    )}
+      </div>
+    `;
+  }
+  renderTickLabels() {
+    if (this.type !== "discrete" || !this.showTickLabels) return "";
+    return html19`
+      <div class="tick-labels">
+        ${this.ticks.map(
+      (tick) => html19`
+            <div
+              class="tick-label"
+              style="left: ${this.getTickLeftPct(tick)}%">
+              ${tick}
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  render() {
+    const sliderClasses = [
+      "rel-slider",
+      this.disabled ? "disabled" : "",
+      this.type === "discrete" ? "has-ticks" : ""
+    ].filter(Boolean).join(" ");
+    const trackActiveClasses = [
+      "track-active",
+      this.track === "dotted" ? "dotted" : ""
+    ].filter(Boolean).join(" ");
+    return html19`
+      <div class="${sliderClasses}">
+        <div class="track"></div>
+        <div class="${trackActiveClasses}"></div>
+
+        <input
+          class="slider-input"
+          type="range"
+          .min="${String(this.min)}"
+          .max="${String(this.max)}"
+          .step="${this.type === "discrete" ? String(this.step) : "1"}"
+          .value="${String(this.value)}"
+          ?disabled="${this.disabled}"
+          @input="${this.onInput}" />
+
+        ${this.renderThumbContainer()}
+        ${this.renderTicks()}
+        ${this.renderTickLabels()}
+      </div>
+    `;
+  }
+};
+RelSlider.styles = css19`
+    :host {
+      --track-height: 5px;
+      --thumb-size: 10px;
+      --thumb-stroke: 7px;
+      --thumb-halo-color: rgba(224, 222, 222, 0.8);
+      --tick-size: 4px;
+      --shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+      --halo: 0 2px 0 #e9e9e9, 0 6px 10px rgba(0, 0, 0, 0.07);
+      --marker-width: 24px;
+      --marker-height: 28px;
+
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .rel-slider {
+      position: relative;
+      width: 100%;
+      height: 60px;
+      user-select: none;
+    }
+
+    /* Track */
+    .track {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      height: var(--track-height);
+      background: var(--rel-colors-gray-border);
+      border-radius: 2px;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+
+    .track-active {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      height: var(--track-height);
+      background: var(--rel-colors-black);
+      border-radius: 2px;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+
+    .track-active.dotted {
+      background: radial-gradient(
+            circle,
+            var(--rel-colors-white) 0 1px,
+            transparent 1px
+          )
+          center/12px 4px repeat-x,
+        var(--rel-colors-black);
+    }
+
+    /* Input */
+    .slider-input {
+      -webkit-appearance: none;
+      appearance: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      left: 0;
+      height: 100%;
+      background: transparent;
+      outline: none;
+      cursor: pointer;
+      z-index: 2;
+      margin: 0;
+      padding: 0;
+    }
+
+    .slider-input::-webkit-slider-runnable-track {
+      background: transparent;
+      height: 100%;
+      border: none;
+    }
+
+    .slider-input::-moz-range-track {
+      background: transparent;
+      height: 100%;
+      border: none;
+    }
+
+    /* Hide native thumb */
+    .slider-input::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 1px;
+      height: 1px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+    }
+
+    .slider-input::-moz-range-thumb {
+      width: 1px;
+      height: 1px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+    }
+
+    /* Custom Thumb Container */
+    .thumb-container {
+      position: absolute;
+      left: 0;
+      top: 23.5%;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      z-index: 5;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0;
+    }
+
+    /* Value Marker */
+    .value-marker {
+      width: var(--marker-width);
+      height: var(--marker-height);
+      margin-bottom: 4px;
+    }
+
+    .value-marker svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    /* Custom Thumb */
+    .custom-thumb {
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+      background: var(--rel-colors-black);
+      border-radius: 50%;
+      transition: box-shadow 0.15s ease;
+    }
+
+    .slider-input:active ~ .thumb-container .custom-thumb {
+      box-shadow: 0 0 0 var(--thumb-stroke) var(--thumb-halo-color),
+        var(--shadow), var(--halo);
+    }
+
+    /* Ticks */
+    .ticks {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
+
+    .tick {
+      position: absolute;
+      width: var(--tick-size);
+      height: var(--tick-size);
+      background: var(--rel-colors-gray-primary);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+      transition: background 0.2s;
+      z-index: 3;
+    }
+
+    .tick.active {
+      background: var(--rel-colors-white);
+    }
+
+    /* Tick labels */
+    .tick-labels {
+      position: absolute;
+      top: calc(50% + var(--tick-size) + 6px);
+      left: 0;
+      width: 100%;
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-colors-gray-heading);
+      pointer-events: none;
+    }
+
+    .tick-label {
+      position: absolute;
+      transform: translateX(-50%);
+    }
+
+    /* Disabled State */
+    .rel-slider.disabled .track {
+      background: var(--rel-colors-gray-primary);
+    }
+
+    .rel-slider.disabled .track-active {
+      background: var(--rel-colors-gray-placeholder);
+    }
+
+    .rel-slider.disabled .track-active.dotted {
+      background: radial-gradient(
+            circle,
+            #eaeaea 0 1px,
+            transparent 1px
+          )
+          center/12px 4px repeat-x,
+        var(--rel-colors-gray-placeholder);
+    }
+
+    .rel-slider.disabled .tick {
+      background: var(--rel-colors-gray-placeholder);
+    }
+
+    .rel-slider.disabled .tick-label {
+      color: var(--rel-colors-gray-placeholder);
+    }
+
+    .rel-slider.disabled .slider-input {
+      cursor: not-allowed;
+    }
+
+    .rel-slider.disabled .custom-thumb {
+      background: var(--rel-colors-gray-placeholder);
+      box-shadow: 0 0 0 var(--thumb-stroke) #f5f5f5;
+    }
+
+    .rel-slider.disabled .value-marker svg path {
+      fill: var(--rel-colors-gray-placeholder);
+    }
+  `;
+__decorateClass([
+  property18({ type: String })
+], RelSlider.prototype, "type", 2);
+__decorateClass([
+  property18({ type: Number })
+], RelSlider.prototype, "min", 2);
+__decorateClass([
+  property18({ type: Number })
+], RelSlider.prototype, "max", 2);
+__decorateClass([
+  property18({ type: Number })
+], RelSlider.prototype, "step", 2);
+__decorateClass([
+  property18({ type: Boolean })
+], RelSlider.prototype, "disabled", 2);
+__decorateClass([
+  property18({ type: String })
+], RelSlider.prototype, "track", 2);
+__decorateClass([
+  property18({ type: Boolean })
+], RelSlider.prototype, "showTickLabels", 2);
+__decorateClass([
+  property18({ type: Boolean })
+], RelSlider.prototype, "showBubble", 2);
+__decorateClass([
+  property18({ type: Number })
+], RelSlider.prototype, "value", 2);
+__decorateClass([
+  state4()
+], RelSlider.prototype, "ticks", 2);
+RelSlider = __decorateClass([
+  customElement19("rel-slider")
+], RelSlider);
+
+// src/components/rel-snackbar/rel-snackbar.ts
+import { LitElement as LitElement20, html as html20, css as css20 } from "lit";
+import { customElement as customElement20, property as property19, state as state5 } from "lit/decorators.js";
+var RelSnackbar = class extends LitElement20 {
+  constructor() {
+    super(...arguments);
+    this.message = "This is a snackbar message";
+    this.longerAction = false;
+    this.iconClose = true;
+    this.lines = "single";
+    this.duration = 4e3;
+    this.visible = true;
+    this.timeout = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAutoDismiss();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.clearTimeout();
+  }
+  setAutoDismiss() {
+    if (this.duration > 0) {
+      this.clearTimeout();
+      const delay = this.longerAction ? this.duration * 2 : this.duration;
+      this.timeout = window.setTimeout(() => this.dismiss(), delay);
+    }
+  }
+  clearTimeout() {
+    if (this.timeout !== null) {
+      window.clearTimeout(this.timeout);
+      this.timeout = null;
+    }
+  }
+  onActionClick() {
+    this.dispatchEvent(
+      new CustomEvent("actionClick", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.dismiss();
+  }
+  dismiss() {
+    this.visible = false;
+    this.dispatchEvent(
+      new CustomEvent("close", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    const snackbarClasses = [
+      "snackbar",
+      this.lines === "double" ? "two-line" : "",
+      !this.visible ? "hidden" : ""
+    ].filter(Boolean).join(" ");
+    return html20`
+      <div class="${snackbarClasses}">
+        <div class="snackbar-message">${this.message}</div>
+
+        <div class="snackbar-actions">
+          ${this.action ? html20`
+                <button class="snackbar-action" @click="${this.onActionClick}">
+                  ${this.action}
+                </button>
+              ` : ""}
+          ${this.iconClose ? html20`
+                <button class="snackbar-close" @click="${this.dismiss}">
+                  ✖
+                </button>
+              ` : ""}
+        </div>
+      </div>
+    `;
+  }
+};
+RelSnackbar.styles = css20`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .snackbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      min-width: 280px;
+      max-width: 500px;
+      margin: 0;
+      padding: 12px 16px;
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      background-color: var(--rel-colors-black);
+      color: var(--rel-colors-white);
+      font-family: var(--rel-fontFamilies-primary);
+      box-shadow: var(--rel-shadows-shadow-300);
+      animation: slide-up 0.3s ease-out;
+    }
+
+    .snackbar.two-line {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .snackbar.hidden {
+      display: none;
+    }
+
+    .snackbar-message {
+      font-size: var(--rel-fontSizes-sm);
+      line-height: var(--rel-lineHeights-lineheight-200);
+      margin-right: 12px;
+      flex: 1;
+    }
+
+    .snackbar.two-line .snackbar-message {
+      margin-right: 0;
+      margin-bottom: 8px;
+      flex: none;
+    }
+
+    .snackbar-actions {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+      flex-shrink: 0;
+      align-self: center;
+    }
+
+    .snackbar.two-line .snackbar-actions {
+      align-self: flex-end;
+    }
+
+    .snackbar-action {
+      background: none;
+      border: none;
+      color: var(--rel-colors-green-secondary);
+      font-weight: var(--rel-fontWeights-semibold);
+      font-size: var(--rel-fontSizes-sm);
+      font-family: var(--rel-fontFamilies-primary);
+      cursor: pointer;
+      padding: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .snackbar-action:hover {
+      opacity: 0.8;
+    }
+
+    .snackbar-action:active {
+      opacity: 0.6;
+    }
+
+    .snackbar-close {
+      background: none;
+      border: none;
+      color: var(--rel-colors-white);
+      cursor: pointer;
+      font-size: 16px;
+      padding: 0;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.2s ease;
+    }
+
+    .snackbar-close:hover {
+      opacity: 0.8;
+    }
+
+    .snackbar-close:active {
+      opacity: 0.6;
+    }
+
+    @keyframes slide-up {
+      from {
+        transform: translateY(50px);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  `;
+__decorateClass([
+  property19({ type: String })
+], RelSnackbar.prototype, "message", 2);
+__decorateClass([
+  property19({ type: String })
+], RelSnackbar.prototype, "action", 2);
+__decorateClass([
+  property19({ type: Boolean })
+], RelSnackbar.prototype, "longerAction", 2);
+__decorateClass([
+  property19({ type: Boolean })
+], RelSnackbar.prototype, "iconClose", 2);
+__decorateClass([
+  property19({ type: String })
+], RelSnackbar.prototype, "lines", 2);
+__decorateClass([
+  property19({ type: Number })
+], RelSnackbar.prototype, "duration", 2);
+__decorateClass([
+  state5()
+], RelSnackbar.prototype, "visible", 2);
+RelSnackbar = __decorateClass([
+  customElement20("rel-snackbar")
+], RelSnackbar);
+
+// src/components/rel-stepper/rel-stepper.ts
+import { LitElement as LitElement21, html as html21, css as css21 } from "lit";
+import { customElement as customElement21, property as property20 } from "lit/decorators.js";
+var RelStepper = class extends LitElement21 {
+  constructor() {
+    super(...arguments);
+    this.steps = [];
+    this.textAlign = "below";
+    this.orientation = "horizontal";
+    this.size = "large";
+  }
+  isDone(step) {
+    return step.status === "done";
+  }
+  isProgress(step) {
+    return step.status === "progress";
+  }
+  isDisabled(step) {
+    return step.status === "disabled";
+  }
+  getStepClasses(step) {
+    const classes = ["rel-step"];
+    if (this.isDone(step)) classes.push("done");
+    if (this.isProgress(step)) classes.push("progress");
+    if (this.isDisabled(step)) classes.push("disabled");
+    return classes.join(" ");
+  }
+  renderIndicator(step, index) {
+    if (step.status === "done") {
+      return html21`
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="10"
+          viewBox="0 0 18 14"
+          fill="none"
+          class="check-icon"
+        >
+          <path
+            d="M6.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
+            fill="white"
+          />
+        </svg>
+      `;
+    }
+    return html21`<span>${index + 1}</span>`;
+  }
+  render() {
+    const stepperClasses = [
+      "rel-stepper",
+      this.orientation === "vertical" ? "vertical" : "horizontal",
+      this.textAlign === "below" ? "text-below" : "text-right",
+      this.size === "small" ? "small" : "large"
+    ].filter(Boolean).join(" ");
+    const isVertical = this.orientation === "vertical";
+    const isTextRight = this.textAlign === "right";
+    return html21`
+      <div class="${stepperClasses}">
+        ${this.steps.map(
+      (step, idx) => html21`
+            <div class="${this.getStepClasses(step)}">
+              ${isVertical && isTextRight ? html21`
+                    <!-- Indicator with connector below -->
+                    <div class="indicator-wrapper">
+                      <div class="indicator">
+                        ${this.renderIndicator(step, idx)}
+                      </div>
+                      ${idx < this.steps.length - 1 ? html21`<div class="connector"></div>` : ""}
+                    </div>
+
+                    <!-- Step Label to the right -->
+                    <div class="step-label">${step.title}</div>
+                  ` : isVertical ? html21`
+                    <div class="step-content text-below-content">
+                      <!-- Step Indicator -->
+                      <div class="indicator">
+                        ${this.renderIndicator(step, idx)}
+                      </div>
+
+                      <!-- Step Label -->
+                      <div class="step-label">${step.title}</div>
+                    </div>
+
+                    <!-- Connector -->
+                    ${idx < this.steps.length - 1 ? html21`<div class="connector"></div>` : ""}
+                  ` : html21`
+                    <!-- Step Indicator -->
+                    <div class="indicator">
+                      ${this.renderIndicator(step, idx)}
+                    </div>
+
+                    <!-- Step Label -->
+                    <div class="step-label">${step.title}</div>
+
+                    <!-- Connector (for horizontal only) -->
+                    ${!isVertical && idx < this.steps.length - 1 ? html21`<div class="connector"></div>` : ""}
+                  `}
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+RelStepper.styles = css21`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    /********************************************
+     * Base Stepper Styles
+     ********************************************/
+    .rel-stepper {
+      display: flex;
+      font-family: var(--rel-fontFamilies-primary);
+      width: 100%;
+      position: relative;
+    }
+
+    /* Orientation */
+    .rel-stepper.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: center;
+    }
+
+    .rel-stepper.vertical.text-below {
+      flex-direction: column;
+      align-items: center;
+      justify-content: start;
+    }
+
+    .rel-stepper.vertical.text-right {
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: start;
+    }
+
+    /********************************************
+     * Step Container
+     ********************************************/
+    .rel-step {
+      display: flex;
+      position: relative;
+    }
+
+    .rel-stepper.horizontal.text-below .rel-step {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      position: relative;
+      flex: 0;
+    }
+
+    .rel-stepper.horizontal.text-right .rel-step {
+      flex-direction: row;
+      align-items: center;
+      position: relative;
+      flex: 0;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    /* Vertical layout variants */
+    .rel-stepper.vertical.text-below .rel-step {
+      flex-direction: column;
+      align-items: center;
+      justify-content: start;
+      position: relative;
+    }
+
+    .rel-stepper.vertical.text-right .rel-step {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: center;
+      position: relative;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    /* Wrapper for indicator and connector */
+    .indicator-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+
+    /* Wrapper for indicator and label (text-below only) */
+    .step-content {
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+    }
+
+    .text-below-content {
+      flex-direction: column;
+    }
+
+    .text-right-content {
+      flex-direction: row;
+    }
+
+    /********************************************
+     * Indicator
+     ********************************************/
+    .indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      border: 2px solid var(--rel-colors-gray-border);
+      background: var(--rel-colors-white);
+      border-radius: 50%;
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      position: relative;
+      z-index: 2;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .indicator svg {
+      width: 12px;
+      height: auto;
+      display: block;
+    }
+
+    /********************************************
+     * Labels
+     ********************************************/
+    .step-label {
+      white-space: nowrap;
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-colors-gray-paragraph);
+    }
+
+    /* Horizontal text-below specific */
+    .rel-stepper.horizontal.text-below .step-label {
+      margin-top: var(--rel-spacing-space-2xs);
+      text-align: center;
+    }
+
+    /* Horizontal text-right specific */
+    .rel-stepper.horizontal.text-right .step-label {
+      margin-top: 0;
+      margin-left: 0;
+      margin-right: var(--rel-spacing-space-xs);
+      text-align: left;
+    }
+
+    /* Vertical text-right specific */
+    .rel-stepper.vertical.text-right .step-label {
+      margin-top: 0;
+      margin-left: 0;
+      text-align: left;
+    }
+
+    /* Vertical text-below specific */
+    .rel-stepper.vertical.text-below .step-label {
+      margin-top: 0;
+      margin-left: 0;
+      text-align: center;
+    }
+
+    /********************************************
+     * Connector Lines
+     ********************************************/
+    .connector {
+      position: absolute;
+      background: var(--rel-colors-gray-border);
+      z-index: 1;
+    }
+
+    /* Horizontal connector */
+    .rel-stepper.horizontal .connector {
+      top: 50%;
+      left: 100%;
+      transform: translateY(-50%);
+      height: 2px;
+      position: absolute;
+      background: var(--rel-colors-gray-border);
+    }
+
+    .rel-stepper.horizontal .rel-step:last-child .connector {
+      display: none;
+    }
+
+    /* Vertical connectors */
+    .rel-stepper.vertical.text-below .connector {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      position: absolute;
+    }
+
+    .rel-stepper.vertical.text-right .connector {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      position: absolute;
+    }
+
+    .rel-stepper.vertical .rel-step:last-child .connector {
+      display: none;
+    }
+
+    .rel-stepper.vertical.text-right .rel-step:last-child .indicator-wrapper .connector {
+      display: none;
+    }
+
+    /********************************************
+     * Step States
+     ********************************************/
+    .rel-step.done .indicator {
+      background: var(--rel-colors-black);
+      border-color: var(--rel-colors-black);
+      color: var(--rel-colors-white);
+    }
+
+    .rel-step.progress .indicator {
+      border-color: var(--rel-colors-black);
+      color: var(--rel-colors-black);
+      background: var(--rel-colors-white);
+    }
+
+    .rel-step.disabled .indicator {
+      background: var(--rel-colors-gray-bg-subtle);
+      border-color: var(--rel-colors-gray-border);
+      color: var(--rel-colors-gray-disabled);
+    }
+
+    .rel-step.done .connector {
+      background: var(--rel-colors-black);
+    }
+
+    .rel-step.progress .connector {
+      background: var(--rel-colors-black);
+    }
+
+    .rel-step.done .step-label {
+      color: var(--rel-colors-black);
+      font-weight: var(--rel-fontWeights-semibold);
+    }
+
+    .rel-step.progress .step-label {
+      color: var(--rel-colors-black);
+      font-weight: var(--rel-fontWeights-semibold);
+    }
+
+    .rel-step.disabled .step-label {
+      color: var(--rel-colors-gray-disabled);
+    }
+
+    /********************************************
+     * Size Property — controls connector length
+     ********************************************/
+    /* Horizontal */
+    .rel-stepper.large.horizontal {
+      gap: 86px;
+    }
+
+    .rel-stepper.small.horizontal {
+      gap: 60px;
+    }
+
+    .rel-stepper.large.horizontal .connector {
+      width: 86px;
+    }
+
+    .rel-stepper.small.horizontal .connector {
+      width: 60px;
+    }
+
+    /* Vertical */
+    .rel-stepper.large.vertical .connector {
+      height: 86px;
+    }
+
+    .rel-stepper.large.vertical {
+      gap: 86px;
+    }
+
+    .rel-stepper.small.vertical .connector {
+      height: 42px;
+    }
+
+    .rel-stepper.small.vertical {
+      gap: 42px;
+    }
+  `;
+__decorateClass([
+  property20({ type: Array })
+], RelStepper.prototype, "steps", 2);
+__decorateClass([
+  property20({ type: String })
+], RelStepper.prototype, "textAlign", 2);
+__decorateClass([
+  property20({ type: String })
+], RelStepper.prototype, "orientation", 2);
+__decorateClass([
+  property20({ type: String })
+], RelStepper.prototype, "size", 2);
+RelStepper = __decorateClass([
+  customElement21("rel-stepper")
+], RelStepper);
+
+// src/components/rel-switch/rel-switch.ts
+import { LitElement as LitElement22, html as html22, css as css22 } from "lit";
+import { customElement as customElement22, property as property21, state as state6 } from "lit/decorators.js";
+var RelSwitch = class extends LitElement22 {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.disabled = false;
+    this.isFocused = false;
+    this.isPressed = false;
+  }
+  toggle() {
+    if (this.disabled) return;
+    this.checked = !this.checked;
+    this.requestUpdate();
+    this.dispatchEvent(
+      new CustomEvent("changed", {
+        detail: this.checked,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleFocus() {
+    this.isFocused = true;
+  }
+  handleBlur() {
+    this.isFocused = false;
+    this.isPressed = false;
+  }
+  handleMouseDown() {
+    if (!this.disabled) this.isPressed = true;
+  }
+  handleMouseUp() {
+    if (!this.disabled) this.isPressed = false;
+  }
+  render() {
+    const wrapperClasses = [
+      "switch-wrapper",
+      this.disabled && "switch-disabled",
+      this.isFocused && "switch-focused",
+      this.isPressed && "switch-pressed"
+    ].filter(Boolean).join(" ");
+    return html22`
+      <label class="${wrapperClasses}">
+        <input
+          type="checkbox"
+          ?disabled=${this.disabled}
+          .checked=${this.checked}
+          @change=${this.toggle}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @mousedown=${this.handleMouseDown}
+          @mouseup=${this.handleMouseUp}
+        />
+        <span class="switch-slider"></span>
+      </label>
+    `;
+  }
+};
+RelSwitch.styles = css22`
+    :host {
+      --switch-track: #7e8186;
+      --switch-knob-on: #000000;
+      --switch-knob-off: #ffffff;
+      --switch-halo: rgba(224, 224, 224, 0.8);
+      --switch-disabled: #d1d5db;
+      display: inline-block;
+    }
+
+    /* Wrapper */
+    .switch-wrapper {
+      position: relative;
+      display: inline-block;
+      width: 42px;
+      height: 22px;
+      cursor: pointer;
+    }
+
+    .switch-wrapper.switch-disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    /* Hide native checkbox */
+    .switch-wrapper input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+
+    /* Track */
+    .switch-slider {
+      position: absolute;
+      top: 50%;
+      left: 4px;
+      right: 4px;
+      height: 12px;
+      background-color: var(--switch-track);
+      border-radius: 999px;
+      transform: translateY(-50%);
+      transition: background-color 0.25s ease;
+    }
+
+    /* Knob */
+    .switch-slider::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: -2px;
+      transform: translateY(-50%);
+      height: 18px;
+      width: 18px;
+      background-color: var(--switch-knob-off);
+      border-radius: 50%;
+      transition: transform 0.25s ease, background-color 0.25s ease,
+        box-shadow 0.2s ease;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    }
+
+    /* ON state */
+    input:checked + .switch-slider::before {
+      background-color: var(--switch-knob-on);
+      transform: translateY(-50%) translateX(22px);
+    }
+
+    /* Hover */
+    .switch-wrapper:hover:not(.switch-disabled) .switch-slider {
+      background-color: #666;
+    }
+
+    /* Focus halo */
+    .switch-focused .switch-slider::before {
+      box-shadow: 0 0 0 6px var(--switch-halo);
+    }
+
+    /* Pressed */
+    .switch-pressed .switch-slider::before {
+      transform: scale(0.9) translateY(-50%);
+    }
+    .switch-pressed input:checked + .switch-slider::before {
+      transform: scale(0.9) translateY(-50%) translateX(22px);
+    }
+
+    /* Disabled */
+    .switch-disabled .switch-slider {
+      background-color: var(--switch-disabled);
+    }
+    .switch-disabled .switch-slider::before {
+      background-color: var(--switch-disabled);
+    }
+  `;
+__decorateClass([
+  property21({ type: Boolean })
+], RelSwitch.prototype, "checked", 2);
+__decorateClass([
+  property21({ type: Boolean })
+], RelSwitch.prototype, "disabled", 2);
+__decorateClass([
+  state6()
+], RelSwitch.prototype, "isFocused", 2);
+__decorateClass([
+  state6()
+], RelSwitch.prototype, "isPressed", 2);
+RelSwitch = __decorateClass([
+  customElement22("rel-switch")
+], RelSwitch);
+
+// src/components/rel-tab/rel-tab.ts
+import { LitElement as LitElement23, html as html23, css as css23 } from "lit";
+import { customElement as customElement23, property as property22 } from "lit/decorators.js";
+var RelTab = class extends LitElement23 {
+  constructor() {
+    super(...arguments);
+    this.tabs = [];
+    this.activeIndex = 0;
+  }
+  selectTab(index) {
+    if (this.tabs[index]?.disabled) return;
+    this.activeIndex = index;
+    this.dispatchEvent(
+      new CustomEvent("tab-change", {
+        detail: { index },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  onKeyDown(event, index) {
+    if (this.tabs[index]?.disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.selectTab(index);
+    }
+  }
+  render() {
+    return html23`
+      <div class="tabs-wrapper">
+        ${this.tabs.map(
+      (tab, i) => html23`
+            <div
+              class="tab ${i === this.activeIndex ? "active" : ""} ${tab.disabled ? "disabled" : ""}"
+              role="tab"
+              tabindex="${tab.disabled ? -1 : 0}"
+              @click="${() => this.selectTab(i)}"
+              @keydown="${(e) => this.onKeyDown(e, i)}"
+            >
+              <span class="tab-label">${tab.label}</span>
+              ${tab.badge ? html23`<span class="tab-badge">${tab.badge}</span>` : ""}
+              <span class="tab-underline"></span>
+            </div>
+          `
+    )}
+      </div>
+      <div class="tab-content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+RelTab.styles = css23`
+    :host {
+      --tab-active-color: #00f49c;
+      --tab-text-default: #111;
+      --tab-text-disabled: #a5a7aa;
+      --tab-text-hover: #000;
+      --tab-underline-height: 3px;
+      --tab-hover-color: #f3f3f3;
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .tabs-wrapper {
+      display: flex;
+      border-bottom: 1px solid #e5e5e5;
+      font-family: var(--rel-fontFamilies-primary);
+      user-select: none;
+    }
+
+    .tab {
+      position: relative;
+      padding: 0.75rem 1rem;
+      cursor: pointer;
+      color: var(--tab-text-default);
+      font-size: 0.9rem;
+      font-weight: 500;
+      transition: color 0.2s ease;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .tab:hover:not(.disabled) .tab-label {
+      color: var(--tab-text-hover);
+    }
+
+    .tab.disabled {
+      color: var(--tab-text-disabled);
+      cursor: not-allowed;
+    }
+
+    /* Underline */
+    .tab-underline {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      height: var(--tab-underline-height);
+      width: 100%;
+      background-color: transparent;
+      transition: background-color 0.2s ease, transform 0.2s ease;
+    }
+
+    .tab.active .tab-underline {
+      background-color: var(--tab-active-color);
+    }
+
+    .tab:hover:not(.disabled):not(.active) {
+      background-color: var(--tab-hover-color);
+    }
+
+    /* Badge */
+    .tab-badge {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      background: #ff0400;
+      color: #fff;
+      border-radius: 50%;
+      font-size: 11px;
+      font-weight: 600;
+      min-width: 16px;
+      text-align: center;
+      height: 16px;
+      padding: 2px;
+    }
+
+    /* Tab content */
+    .tab-content {
+      padding: 1rem 0;
+    }
+  `;
+__decorateClass([
+  property22({ type: Array })
+], RelTab.prototype, "tabs", 2);
+__decorateClass([
+  property22({ type: Number })
+], RelTab.prototype, "activeIndex", 2);
+RelTab = __decorateClass([
+  customElement23("rel-tab")
+], RelTab);
+
+// src/components/rel-textfield/rel-textfield.ts
+import { LitElement as LitElement24, html as html24, css as css24 } from "lit";
+import { customElement as customElement24, property as property23, state as state7 } from "lit/decorators.js";
+var RelTextfield = class extends LitElement24 {
+  constructor() {
+    super(...arguments);
+    this.placeholder = "";
+    this.type = "text";
+    this.value = "";
+    this.state = "default";
+    this.size = "medium";
+    this.internalState = "default";
+  }
+  get currentState() {
+    return this.state !== "default" ? this.state : this.internalState;
+  }
+  handleFocus() {
+    if (this.state !== "disabled" && this.state !== "error") {
+      this.internalState = "focused";
+    }
+  }
+  handleBlur() {
+    if (this.internalState === "focused") {
+      this.internalState = "default";
+    }
+  }
+  handleInput(e) {
+    const input = e.target;
+    this.value = input.value;
+    this.dispatchEvent(
+      new CustomEvent("input-change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    const wrapperClasses = [
+      "textfield-wrapper",
+      this.size,
+      this.currentState
+    ].join(" ");
+    const inputClasses = [
+      "textfield-input",
+      this.leftIcon ? "has-left-icon" : "",
+      this.rightIcon ? "has-right-icon" : ""
+    ].filter(Boolean).join(" ");
+    return html24`
+      <div class="${wrapperClasses}">
+        ${this.label ? html24`<label class="textfield-label">${this.label}</label>` : ""}
+
+        <div
+          class="textfield-container ${this.state === "disabled" ? "disabled" : ""}"
+        >
+          ${this.leftIcon ? html24`<span class="icon left">${this.leftIcon}</span>` : ""}
+
+          <input
+            type="${this.type}"
+            class="${inputClasses}"
+            placeholder="${this.placeholder}"
+            .value="${this.value}"
+            ?disabled="${this.state === "disabled"}"
+            aria-invalid="${this.state === "error"}"
+            @focus="${this.handleFocus}"
+            @blur="${this.handleBlur}"
+            @input="${this.handleInput}"
+          />
+
+          ${this.rightIcon ? html24`<span class="icon right">${this.rightIcon}</span>` : ""}
+        </div>
+
+        ${this.supportingText ? html24`<div
+              class="textfield-support ${this.state === "error" ? "error" : ""}"
+            >
+              ${this.supportingText}
+            </div>` : ""}
+      </div>
+    `;
+  }
+};
+RelTextfield.styles = css24`
+    :host {
+      display: block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    /* Wrapper */
+    .textfield-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      width: 100%;
+    }
+
+    /* Label */
+    .textfield-label {
+      font-size: 0.85rem;
+      font-weight: 500;
+      color: #111;
+    }
+
+    /* Container */
+    .textfield-container {
+      display: flex;
+      align-items: center;
+      position: relative;
+      border: 1px solid #ccc;
+      border-radius: 6px;
+      background: white;
+      transition: border 0.2s;
+    }
+
+    .textfield-container.disabled {
+      background: #f5f5f5;
+      cursor: not-allowed;
+    }
+
+    /* Input */
+    .textfield-input {
+      flex: 1;
+      border: none;
+      outline: none;
+      font-size: 0.9rem;
+      padding: 0.5rem 0.75rem;
+      background: transparent;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .textfield-input:disabled {
+      cursor: not-allowed;
+      color: #999;
+    }
+
+    .icon {
+      position: absolute;
+      display: flex;
+      pointer-events: none;
+      color: #7e8186;
+    }
+
+    .icon.left {
+      left: 8px;
+    }
+
+    .icon.right {
+      right: 8px;
+    }
+
+    .textfield-wrapper.small .textfield-input {
+      padding: 0.5rem 1rem;
+      font-size: 0.9rem;
+    }
+
+    .textfield-wrapper.medium .textfield-input {
+      padding: 0.688rem 1rem;
+      font-size: 1rem;
+    }
+
+    .textfield-wrapper.large .textfield-input {
+      padding: 0.875rem 1rem;
+      font-size: 1.1rem;
+    }
+
+    /* Adjust padding when icons are present */
+    .textfield-wrapper .textfield-input.has-left-icon {
+      padding-left: 2.5rem;
+    }
+
+    .textfield-wrapper .textfield-input.has-right-icon {
+      padding-right: 2.5rem;
+    }
+
+    /* States */
+    .textfield-wrapper.focused .textfield-container {
+      border-color: #111;
+    }
+
+    .textfield-wrapper.error .textfield-container {
+      border-color: #d50000;
+    }
+
+    .textfield-wrapper.disabled .textfield-container {
+      border-color: #d7d9db;
+    }
+
+    /* Supporting text */
+    .textfield-support {
+      font-size: 0.75rem;
+      color: #666;
+    }
+
+    .textfield-support.error {
+      color: #d50000;
+    }
+  `;
+__decorateClass([
+  property23({ type: String })
+], RelTextfield.prototype, "label", 2);
+__decorateClass([
+  property23({ type: String })
+], RelTextfield.prototype, "placeholder", 2);
+__decorateClass([
+  property23({ type: String })
+], RelTextfield.prototype, "type", 2);
+__decorateClass([
+  property23({ type: String })
+], RelTextfield.prototype, "value", 2);
+__decorateClass([
+  property23({ type: String })
+], RelTextfield.prototype, "leftIcon", 2);
+__decorateClass([
+  property23({ type: String })
+], RelTextfield.prototype, "rightIcon", 2);
+__decorateClass([
+  property23({ type: String })
+], RelTextfield.prototype, "supportingText", 2);
+__decorateClass([
+  property23({ type: String })
+], RelTextfield.prototype, "state", 2);
+__decorateClass([
+  property23({ type: String })
+], RelTextfield.prototype, "size", 2);
+__decorateClass([
+  state7()
+], RelTextfield.prototype, "internalState", 2);
+RelTextfield = __decorateClass([
+  customElement24("rel-textfield")
+], RelTextfield);
+
+// src/components/rel-toast/rel-toast.ts
+import { LitElement as LitElement25, html as html25, css as css25 } from "lit";
+import { customElement as customElement25, property as property24, state as state8 } from "lit/decorators.js";
+var RelToast = class extends LitElement25 {
+  constructor() {
+    super(...arguments);
+    this.message = "";
+    this.type = "default";
+    this.duration = 4e3;
+    this.visible = false;
+  }
+  show() {
+    this.visible = true;
+    if (this.duration > 0) {
+      this.timeoutId = window.setTimeout(() => this.close(), this.duration);
+    }
+  }
+  close() {
+    this.visible = false;
+    this.dispatchEvent(
+      new CustomEvent("dismissed", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
+  }
+  handleActionClick(event) {
+    event.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent("action", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.close();
+  }
+  render() {
+    return html25`
+      <div class="toast ${this.type} ${this.visible ? "" : "hidden"}">
+        <span class="toast-message">${this.message}</span>
+
+        ${this.actionLabel ? html25`<button
+              class="toast-action"
+              @click="${this.handleActionClick}"
+            >
+              ${this.actionLabel}
+            </button>` : ""}
+
+        <button class="toast-close" @click="${this.close}">✕</button>
+      </div>
+    `;
+  }
+};
+RelToast.styles = css25`
+    :host {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      pointer-events: none;
+      z-index: 1000;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    /* Toast container */
+    .toast {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      background-color: #111;
+      color: #fff;
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: 0.9rem;
+      border-radius: 8px;
+      padding: 1rem 1rem;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      pointer-events: all;
+      animation: fadeInUp 0.25s ease;
+    }
+
+    .toast.error {
+      background-color: #d50000;
+    }
+
+    .toast.hidden {
+      display: none;
+    }
+
+    /* Message */
+    .toast-message {
+      flex: 1;
+    }
+
+    /* Action button */
+    .toast-action {
+      background: transparent;
+      border: none;
+      color: #0edb90;
+      font-weight: 600;
+      font-size: 0.85rem;
+      cursor: pointer;
+      transition: opacity 0.2s;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .toast-action:hover {
+      opacity: 0.75;
+    }
+
+    /* Close button */
+    .toast-close {
+      background: transparent;
+      border: none;
+      color: inherit;
+      font-size: 1rem;
+      cursor: pointer;
+      line-height: 1;
+      padding: 0;
+      margin-left: 4px;
+    }
+
+    .toast-close:hover {
+      opacity: 0.75;
+    }
+
+    /* Animations */
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+  `;
+__decorateClass([
+  property24({ type: String })
+], RelToast.prototype, "message", 2);
+__decorateClass([
+  property24({ type: String })
+], RelToast.prototype, "type", 2);
+__decorateClass([
+  property24({ type: String })
+], RelToast.prototype, "actionLabel", 2);
+__decorateClass([
+  property24({ type: Number })
+], RelToast.prototype, "duration", 2);
+__decorateClass([
+  state8()
+], RelToast.prototype, "visible", 2);
+RelToast = __decorateClass([
+  customElement25("rel-toast")
+], RelToast);
+
+// src/components/rel-tooltip/rel-tooltip.ts
+import { LitElement as LitElement26, html as html26, css as css26 } from "lit";
+import { customElement as customElement26, property as property25 } from "lit/decorators.js";
+var RelTooltip = class extends LitElement26 {
+  constructor() {
+    super(...arguments);
+    this.text = "";
+    this.position = "above";
+    this.showTail = false;
+  }
+  render() {
+    return html26`
+      <slot></slot>
+      <div class="tooltip-bubble ${this.position}">
+        ${this.text}
+        ${this.showTail ? html26`<span class="tooltip-tail"></span>` : ""}
+      </div>
+    `;
+  }
+};
+RelTooltip.styles = css26`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    /* Tooltip container */
+    .tooltip-bubble {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #111;
+      color: #fff;
+      padding: 0.5rem 0.75rem;
+      border-radius: 6px;
+      font-size: 0.875rem;
+      font-family: var(--rel-fontFamilies-primary);
+      white-space: nowrap;
+      z-index: 1000;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s ease;
+    }
+
+    :host(:hover) .tooltip-bubble {
+      opacity: 1;
+    }
+
+    /* Positioning */
+    .tooltip-bubble.above {
+      bottom: calc(100% + 8px);
+    }
+
+    .tooltip-bubble.below {
+      top: calc(100% + 8px);
+    }
+
+    /* Tail/Arrow */
+    .tooltip-tail {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+    }
+
+    .tooltip-bubble.above .tooltip-tail {
+      bottom: -6px;
+      border-top: 6px solid #111;
+    }
+
+    .tooltip-bubble.below .tooltip-tail {
+      top: -6px;
+      border-bottom: 6px solid #111;
+    }
+  `;
+__decorateClass([
+  property25({ type: String })
+], RelTooltip.prototype, "text", 2);
+__decorateClass([
+  property25({ type: String })
+], RelTooltip.prototype, "position", 2);
+__decorateClass([
+  property25({ type: Boolean })
+], RelTooltip.prototype, "showTail", 2);
+RelTooltip = __decorateClass([
+  customElement26("rel-tooltip")
+], RelTooltip);
+export {
+  RelAccordion,
+  RelAlert,
+  RelAvatar,
+  RelBadge,
+  RelBreadcrumbs,
+  RelButton,
+  RelCard,
+  RelCardMedia,
+  RelCheckbox,
+  RelChip,
+  RelContainer,
+  RelDivider,
+  RelLayout,
+  RelMenu,
+  RelProgress,
+  RelRadio,
+  RelSegmentedButton,
+  RelSelect,
+  RelSlider,
+  RelSnackbar,
+  RelStepper,
+  RelSwitch,
+  RelTab,
+  RelTextfield,
+  RelToast,
+  RelTooltip
+};
+//# sourceMappingURL=index.mjs.map