@reliability-design/web 1.0.6 → 1.2.0

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

@@ -1,26 +1,23 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-
 @customElement("rel-accordion")
 export class RelAccordion extends LitElement {
   @property({ type: String }) title = "Accordion";
   @property({ type: Boolean, reflect: true }) open = false;
-
   static styles = css`
     :host {
       display: block;
       width: 100%;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
     }
-
     .accordion {
-      background: var(--rel-colors-white, #fff);
-      border: 1px solid var(--rel-border-default, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      box-shadow: var(--rel-shadows-shadow-100);
+      background: var(--rel-color-bg-primary);
+      border: none;
+      border-bottom: 1px solid var(--rel-gray-text-placeholder);
+      border-radius: 0;
       overflow: hidden;
     }
-
     /* HEADER --------------------------------------------------- */
     .header {
       display: flex;
@@ -29,24 +26,23 @@ export class RelAccordion extends LitElement {
       padding: var(--rel-spacing-space-md, 16px);
       cursor: pointer;
       user-select: none;
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      border-radius: 0;
     }
-
     .header:hover {
       background: var(--rel-surface-surface, #f5f5f5);
     }
-
+    :host([open]) .header:hover {
+      background: transparent;
+    }
     .header:focus-visible {
-      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: -2px;
     }
-
     .title {
       font-size: var(--rel-fontSizes-lg, 20px);
       font-weight: var(--rel-fontWeights-medium, 500);
       color: var(--rel-text-heading, #2b2b2b);
     }
-
     /* ICON ----------------------------------------------------- */
     .icon {
       width: 20px;
@@ -56,7 +52,6 @@ export class RelAccordion extends LitElement {
       justify-content: center;
       transition: transform 0.25s ease;
     }
-
     .icon svg {
       width: 20px;
       height: 20px;
@@ -66,11 +61,9 @@ export class RelAccordion extends LitElement {
       stroke-linecap: round;
       stroke-linejoin: round;
     }
-
     .icon.rotated {
       transform: rotate(180deg);
     }
-
     /* BODY ------------------------------------------------------ */
     .body {
       overflow: hidden;
@@ -78,15 +71,15 @@ export class RelAccordion extends LitElement {
       padding: 0 var(--rel-spacing-space-md, 16px);
       font-size: var(--rel-fontSizes-md, 14px);
       color: var(--rel-text-primary, #333);
-      transition: max-height 0.25s ease, padding 0.2s ease;
+      transition:
+        max-height 0.25s ease,
+        padding 0.2s ease;
     }
-
     .body.open {
       max-height: 1000px;
-      padding: var(--rel-spacing-space-xl, 24px) var(--rel-spacing-space-md, 16px)
-        var(--rel-spacing-space-lg, 20px);
+      padding: var(--rel-spacing-space-xl, 24px)
+        var(--rel-spacing-space-md, 16px) var(--rel-spacing-space-lg, 20px);
     }
-
     @media (prefers-reduced-motion: reduce) {
       .icon,
       .body {
@@ -94,19 +87,16 @@ export class RelAccordion extends LitElement {
       }
     }
   `;
-
   private toggle() {
     this.open = !this.open;
-
     this.dispatchEvent(
       new CustomEvent<boolean>("open-change", {
         detail: this.open,
         bubbles: true,
         composed: true,
-      })
+      }),
     );
   }
-
   private chevron() {
     return html`
       <svg viewBox="0 0 24 24">
@@ -114,11 +104,11 @@ export class RelAccordion extends LitElement {
       </svg>
     `;
   }
-
   render() {
     return html`
       <div class="accordion">
-        <div class="header"
+        <div
+          class="header"
           role="button"
           tabindex="0"
           aria-expanded="${this.open}"
@@ -128,14 +118,13 @@ export class RelAccordion extends LitElement {
               e.preventDefault();
               this.toggle();
             }
-          }}>
+          }}
+        >
           <div class="title">${this.title}</div>
-
           <div class="icon ${this.open ? "rotated" : ""}">
             ${this.chevron()}
           </div>
         </div>
-
         <!-- IMPORTANT: slot is ALWAYS rendered -->
         <div class="body ${this.open ? "open" : ""}">
           <slot></slot>

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -89,31 +90,100 @@ export class RelAlert extends LitElement {
       opacity: 1;
     }
 
-    /* COLORS */
+    /* COLORS — light mode */
+    .alert-neutral {
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-primary);
+    }
+
     .alert-info {
       background: var(--rel-background-info);
-      color: var(--rel-text-info);
+      color: var(--rel-color-text-primary);
+      --rel-icon-info: var(--rel-colors-blue-tertiary);
     }
 
     .alert-success {
       background: var(--rel-background-success);
-      color: var(--rel-text-success);
+      color: var(--rel-color-text-primary);
+      --rel-icon-success: var(--rel-success-surface-dark);
     }
 
     .alert-warning {
-      background: var(--rel-background-warning);
-      color: var(--rel-text-warning);
+      background: var(--rel-colors-gold-light);
+      color: var(--rel-color-text-primary);
+      --rel-icon-warning: var(--rel-warning-surface-dark);
     }
 
     .alert-error {
-      background: var(--rel-background-error);
-      color: var(--rel-text-error);
+      background: var(--rel-background-error-light);
+      color: var(--rel-error-surface-dark);
+      --rel-icon-error: var(--rel-error-surface-dark);
     }
 
-    .alert-neutral {
-      background: var(--rel-colors-white);
-      color: var(--rel-text-primary);
-      border: 1px solid var(--rel-border-default);
+    .alert-error .rel-close {
+      color: var(--rel-color-text-primary);
+    }
+
+    /* COLORS — dark mode */
+    :host-context([data-theme="dark"]) .rel-alert,
+    :host-context(.dark) .rel-alert {
+      background: var(--rel-color-bg-tertiary);
+      color: var(--rel-color-text-primary);
+      border: none;
+    }
+
+    :host-context([data-theme="dark"]) .rel-close,
+    :host-context(.dark) .rel-close {
+      color: var(--rel-color-text-primary);
+    }
+
+    :host-context([data-theme="dark"]) .alert-neutral,
+    :host-context(.dark) .alert-neutral {
+      border: 1px solid var(--rel-color-border-strong);
+    }
+
+    :host-context([data-theme="dark"]) .alert-info,
+    :host-context(.dark) .alert-info {
+      border: 1px solid var(--rel-colors-blue-tertiary);
+      --rel-icon-info: var(--rel-colors-blue-tertiary);
+    }
+
+    :host-context([data-theme="dark"]) .alert-info .rel-message2,
+    :host-context(.dark) .alert-info .rel-message2 {
+      color: var(--rel-colors-blue-tertiary);
+    }
+
+    :host-context([data-theme="dark"]) .alert-warning,
+    :host-context(.dark) .alert-warning {
+      border: 1px solid var(--rel-warning-surface-dark);
+      --rel-icon-warning: var(--rel-warning-surface-dark);
+    }
+
+    :host-context([data-theme="dark"]) .alert-warning .rel-message2,
+    :host-context(.dark) .alert-warning .rel-message2 {
+      color: var(--rel-warning-surface-dark);
+    }
+
+    :host-context([data-theme="dark"]) .alert-success,
+    :host-context(.dark) .alert-success {
+      border: 1px solid var(--rel-success-surface-dark);
+      --rel-icon-success: var(--rel-success-surface-dark);
+    }
+
+    :host-context([data-theme="dark"]) .alert-success .rel-message2,
+    :host-context(.dark) .alert-success .rel-message2 {
+      color: var(--rel-success-surface-dark);
+    }
+
+    :host-context([data-theme="dark"]) .alert-error,
+    :host-context(.dark) .alert-error {
+      border: 1px solid var(--rel-error-surface-dark);
+      --rel-icon-error: var(--rel-error-surface-dark);
+    }
+
+    :host-context([data-theme="dark"]) .alert-error .rel-message2,
+    :host-context(.dark) .alert-error .rel-message2 {
+      color: var(--rel-error-surface-dark);
     }
   `;
 

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -12,6 +13,7 @@ export class RelAvatar extends LitElement {
   @property({ type: String }) src = "";
   @property({ type: String }) text = "";
   @property({ type: String }) alt = "Avatar";
+  @property({ type: String }) bg: string = "";
 
   static styles = css`
     :host {
@@ -26,8 +28,8 @@ export class RelAvatar extends LitElement {
       border-radius: 50%;
       overflow: hidden;
 
-      background-color: var(--rel-colors-gray-heading);
-      color: var(--rel-colors-white);
+      background-color: var(--rel-colors-gray-disabled-text);
+      color: var(--rel-avatar-color, #ffffff);
       font-weight: var(--rel-fontWeights-bold);
 
       user-select: none;
@@ -71,6 +73,7 @@ export class RelAvatar extends LitElement {
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      color: #ffffff;
     }
 
     .icon-slot ::slotted(svg) {
@@ -81,7 +84,7 @@ export class RelAvatar extends LitElement {
 
   render() {
     return html`
-      <div class="avatar avatar-${this.size}">
+      <div class="avatar avatar-${this.size}" style=${this.bg ? `background-color: ${this.bg}` : ""}>
         ${this.type === "image" && this.src
           ? html`<img src=${this.src} alt=${this.alt} />`
           : this.type === "text"

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -5,6 +6,10 @@ import { customElement, property } from "lit/decorators.js";
 export class RelBadge extends LitElement {
   @property({ type: String }) number = "";
 
+  @property({ type: String }) ariaLabel: string = "";
+
+  @property({ type: String }) suffix: string = "notifications";
+
   @property({ type: String, reflect: true })
   size: "sm" | "md" | "lg" = "md";
 
@@ -22,8 +27,8 @@ export class RelBadge extends LitElement {
       justify-content: center;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
       font-weight: var(--rel-fontWeights-semibold, 600);
-      background-color: var(--rel-colors-red-primary);
-      color: var(--rel-colors-white, #fff);
+      background-color: var(--rel-error-surface-default);
+      color: #ffffff;
       border-radius: 50%;
     }
 
@@ -69,7 +74,7 @@ export class RelBadge extends LitElement {
 
   render() {
     return html`
-      <span class="${this.classes}">
+      <span class="${this.classes}" aria-label=${this.ariaLabel || `${this.number} ${this.suffix}`}>
         ${this.variant === "number" ? this.number : null}
       </span>
     `;

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

@@ -1,3 +1,4 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -38,25 +39,24 @@ export class RelBreadcrumbs extends LitElement {
 
     a {
       text-decoration: none;
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-text-heading, #2b2b2b);
-      transition: color 0.2s ease;
+      font-weight: var(--rel-fontWeights-regular);
+      color: var(--rel-color-text-primary);
     }
 
     a:hover {
       text-decoration: underline;
-      color: var(--rel-colors-blue-primary, #0091ea);
+      color: var(--rel-color-text-primary);
     }
 
     a:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
       border-radius: 2px;
     }
 
     .current {
       font-weight: var(--rel-fontWeights-bold);
-      color: var(--rel-text-heading, #2b2b2b);
+      color: var(--rel-color-text-primary);
       cursor: default;
     }
 

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

@@ -1,5 +1,7 @@
+import "../../styles/vars-v2.css";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 
 @customElement("rel-button")
 export class RelButton extends LitElement {
@@ -8,7 +10,7 @@ export class RelButton extends LitElement {
     "default";
 
   @property({ type: String })
-  tone: "default" | "critical" | "success" = "default";
+  tone: "default" | "primary" | "secondary" | "critical" | "success" = "default";
 
   @property({ type: String })
   size: "small" | "medium" | "large" = "medium";
@@ -19,6 +21,8 @@ export class RelButton extends LitElement {
 
   @property({ type: Boolean, reflect: true }) disabled = false;
 
+  @property({ type: String, attribute: "aria-label" }) ariaLabel: string | null = null;
+
   static styles = css`
     :host {
       display: inline-flex;
@@ -70,11 +74,23 @@ export class RelButton extends LitElement {
     }
 
     /* Disabled */
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
     :host([disabled]) button {
       cursor: not-allowed;
-      background-color: var(--rel-colors-gray-border) !important;
-      color: var(--rel-colors-gray-disabled-text) !important;
+      background-color: var(--rel-color-bg-tertiary) !important;
+      color: var(--rel-color-text-disabled) !important;
+      border: none !important;
       pointer-events: none;
+      filter: none !important;
+    }
+
+    :host([disabled]):host-context([data-theme="dark"]) button,
+    :host([disabled]):host-context(.dark) button {
+      background-color: var(--rel-color-bg-tertiary) !important;
+      color: var(--rel-color-text-disabled) !important;
     }
 
     /* Variants & tones (unchanged) */
@@ -83,30 +99,30 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-white);
     }
     .btn-default.tone-critical {
-      background: var(--rel-colors-red-primary);
-      color: var(--rel-colors-white);
+      background: var(--rel-error-surface-default);
+      color: #ffffff;
     }
     .btn-default.tone-success {
-      background: var(--rel-colors-green-success);
-      color: var(--rel-colors-white);
+      background: var(--rel-colors-green-tertiary);
+      color: #ffffff;
     }
 
     .btn-primary.tone-default {
       background: var(--rel-colors-green-primary);
-      color: var(--rel-colors-black);
+      color: #000000;
     }
     .btn-primary.tone-critical {
-      background: var(--rel-colors-red-primary);
-      color: var(--rel-colors-white);
+      background: var(--rel-error-surface-default);
+      color: #ffffff;
     }
     .btn-primary.tone-success {
-      background: var(--rel-colors-green-success);
-      color: var(--rel-colors-white);
+      background: var(--rel-colors-green-tertiary);
+      color: #ffffff;
     }
 
     .btn-secondary {
       background: var(--rel-colors-white);
-      border: 1px solid var(--rel-colors-black);
+      border: 1px solid var(--rel-color-border-strong);
       color: var(--rel-colors-black);
     }
 
@@ -126,12 +142,69 @@ export class RelButton extends LitElement {
       height: 40px;
       padding: 0;
       border-radius: 50%;
+    }
+    .btn-icon.tone-default {
       background: var(--rel-colors-gray-light);
       color: var(--rel-colors-black);
+      border: none;
+    }
+    .btn-icon.tone-primary {
+      background: var(--rel-colors-green-primary);
+      color: #000000;
+      border: none;
+    }
+    .btn-icon.tone-secondary {
+      background: var(--rel-colors-white);
+      color: var(--rel-colors-black);
+      border: 1px solid var(--rel-color-border-strong);
+    }
+    .btn-icon.tone-success {
+      background: var(--rel-colors-green-tertiary);
+      color: #ffffff;
+      border: none;
+    }
+    .btn-icon.tone-critical {
+      background: var(--rel-error-surface-default);
+      color: #ffffff;
+      border: none;
     }
 
-    button:hover:not(:disabled) {
-      filter: brightness(0.92);
+    button.btn-primary.tone-default:hover:not(:disabled) {
+      background: var(--rel-color-brand-hover);
+    }
+
+    button.btn-primary.tone-critical:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+
+    button.btn-primary.tone-success:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+
+    /* Generic hover — excludes icon (handled per-tone below) */
+    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon) {
+      background: var(--rel-color-bg-hover);
+    }
+
+    button.btn-default:hover:not(:disabled) {
+      filter: brightness(0.85);
+    }
+
+    /* Icon hover — each tone matches its corresponding button variant */
+    button.btn-icon.tone-default:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+    button.btn-icon.tone-primary:hover:not(:disabled) {
+      background: var(--rel-color-brand-hover);
+    }
+    button.btn-icon.tone-secondary:hover:not(:disabled) {
+      background: var(--rel-color-bg-hover);
+    }
+    button.btn-icon.tone-success:hover:not(:disabled) {
+      filter: brightness(0.9);
+    }
+    button.btn-icon.tone-critical:hover:not(:disabled) {
+      filter: brightness(0.9);
     }
 
     button:active:not(:disabled) {
@@ -139,9 +212,37 @@ export class RelButton extends LitElement {
     }
 
     button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
     }
+
+    /* Dark mode overrides */
+    :host-context([data-theme="dark"]) button.btn-default.tone-default,
+    :host-context(.dark) button.btn-default.tone-default {
+      background: var(--rel-gray-text-primary);
+      color: #000000;
+    }
+
+    :host-context([data-theme="dark"]) button:focus-visible,
+    :host-context(.dark) button:focus-visible {
+      outline-color: var(--rel-color-text-primary);
+    }
+
+    :host-context([data-theme="dark"]) button.btn-secondary,
+    :host-context(.dark) button.btn-secondary,
+    :host-context([data-theme="dark"]) button.btn-icon.tone-secondary,
+    :host-context(.dark) button.btn-icon.tone-secondary {
+      background: var(--rel-color-bg-primary);
+      border-color: var(--rel-color-border-strong);
+      color: var(--rel-color-text-primary);
+    }
+
+    :host-context([data-theme="dark"]) button.btn-text,
+    :host-context(.dark) button.btn-text {
+      color: var(--rel-color-text-primary);
+    }
+
+    /* btn-link: blue in both modes — no dark override */
   `;
 
   private get classes() {
@@ -176,6 +277,7 @@ export class RelButton extends LitElement {
         ?disabled=${this.disabled}
         @click=${this.handleClick}
         aria-disabled=${this.disabled}
+        aria-label=${ifDefined(this.ariaLabel ?? undefined)}
       >
         <slot></slot>
       </button>

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 interface CalendarDay {
   date: Date;
@@ -69,16 +70,16 @@ export class RelCalendar extends LitElement {
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      color: var(--rel-colors-gray-primary);
+      color: var(--rel-color-text-primary);
       transition: background-color 0.15s ease;
     }
 
     .nav-button:hover {
-      background: var(--rel-surface-secondary);
+      background: var(--rel-color-bg-secondary);
     }
 
     .nav-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
     }
 
@@ -92,7 +93,7 @@ export class RelCalendar extends LitElement {
       text-align: center;
       font-size: var(--rel-fontSizes-xs);
       font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-gray-text-placeholder);
       padding: var(--rel-spacing-space-xs);
       text-transform: uppercase;
     }
@@ -116,23 +117,23 @@ export class RelCalendar extends LitElement {
     }
 
     .day-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: -2px;
       z-index: 1;
     }
 
     .day-button.today:not(.selected) {
-      border: 2px solid var(--rel-colors-blue-primary);
+      border: 2px solid var(--rel-color-brand);
     }
 
     .day-button.selected {
-      background: var(--rel-colors-green-primary);
-      color: var(--rel-colors-black);
+      background: var(--rel-color-brand);
+      color: #000000;
       font-weight: var(--rel-fontWeights-semibold);
     }
 
     .day-button.other-month {
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-gray-text-placeholder);
       opacity: 0.5;
     }
 
@@ -145,6 +146,12 @@ export class RelCalendar extends LitElement {
     .day-button:disabled:hover {
       background: transparent;
     }
+
+    :host-context([data-theme="dark"]) :host,
+    :host-context(.dark) :host {
+      background: var(--rel-color-bg-primary);
+      border-color: var(--rel-color-border-default);
+    }
   `;
 
   connectedCallback() {