@reliability-design/web 1.0.6 → 1.1.1

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

@@ -36,6 +36,10 @@ export class RelAccordion extends LitElement {
       background: var(--rel-surface-surface, #f5f5f5);
     }
 
+    :host([open]) .header:hover {
+      background: transparent;
+    }
+
     .header:focus-visible {
       outline: 2px solid var(--rel-border-info, #0091ea);
       outline-offset: -2px;

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

@@ -89,31 +89,101 @@ export class RelAlert extends LitElement {
       opacity: 1;
     }
 
-    /* COLORS */
+    /* COLORS — light mode (pinned Figma hex) */
+    .alert-neutral {
+      background: #ffffff;
+      color: #000000;
+    }
+
     .alert-info {
-      background: var(--rel-background-info);
-      color: var(--rel-text-info);
+      background: #E1F2FF;
+      color: #000000;
+      --rel-icon-info: #0059F4;
     }
 
     .alert-success {
-      background: var(--rel-background-success);
-      color: var(--rel-text-success);
+      background: #E2FEEE;
+      color: #000000;
+      --rel-icon-success: #00A86B;
     }
 
     .alert-warning {
-      background: var(--rel-background-warning);
-      color: var(--rel-text-warning);
+      background: #F6EFD7;
+      color: #000000;
+      --rel-icon-warning: #F2915C;
     }
 
     .alert-error {
-      background: var(--rel-background-error);
-      color: var(--rel-text-error);
+      background: #FFDEDE;
+      color: #9C1E33;
+      --rel-icon-error: #9C1E33;
     }
 
-    .alert-neutral {
-      background: var(--rel-colors-white);
-      color: var(--rel-text-primary);
-      border: 1px solid var(--rel-border-default);
+    .alert-error .rel-close {
+      color: #000000;
+    }
+
+    /* COLORS — dark mode (pinned Figma hex) */
+    :host-context([data-theme="dark"]) .rel-alert,
+    :host-context(.dark) .rel-alert {
+      background: #2B2B2B;
+      color: #ffffff;
+      border: none;
+    }
+
+    :host-context([data-theme="dark"]) .rel-close,
+    :host-context(.dark) .rel-close {
+      color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .alert-neutral,
+    :host-context(.dark) .alert-neutral {
+      border: 1px solid #ffffff;
+      --rel-colors-black: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .alert-info,
+    :host-context(.dark) .alert-info {
+      border: 1px solid #0059F4;
+      --rel-icon-info: #0059F4;
+    }
+
+    :host-context([data-theme="dark"]) .alert-info .rel-message2,
+    :host-context(.dark) .alert-info .rel-message2 {
+      color: #0059F4;
+    }
+
+    :host-context([data-theme="dark"]) .alert-warning,
+    :host-context(.dark) .alert-warning {
+      border: 1px solid #F2915C;
+      --rel-icon-warning: #F2915C;
+    }
+
+    :host-context([data-theme="dark"]) .alert-warning .rel-message2,
+    :host-context(.dark) .alert-warning .rel-message2 {
+      color: #F2915C;
+    }
+
+    :host-context([data-theme="dark"]) .alert-success,
+    :host-context(.dark) .alert-success {
+      border: 1px solid #00A86B;
+      --rel-icon-success: #00A86B;
+    }
+
+    :host-context([data-theme="dark"]) .alert-success .rel-message2,
+    :host-context(.dark) .alert-success .rel-message2 {
+      color: #00A86B;
+    }
+
+    :host-context([data-theme="dark"]) .alert-error,
+    :host-context(.dark) .alert-error {
+      border: 1px solid #9C1E33;
+      --rel-icon-error: #9C1E33;
+    }
+
+    :host-context([data-theme="dark"]) .alert-error .rel-message2,
+    :host-context(.dark) .alert-error .rel-message2 {
+      color: #9C1E33;
     }
   `;
 

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

@@ -26,8 +26,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: #9E9E9E;
+      color: #ffffff;
       font-weight: var(--rel-fontWeights-bold);
 
       user-select: none;
@@ -71,6 +71,7 @@ export class RelAvatar extends LitElement {
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      color: #ffffff;
     }
 
     .icon-slot ::slotted(svg) {

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

@@ -5,6 +5,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";
 
@@ -23,7 +27,7 @@ export class RelBadge extends LitElement {
       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);
+      color: #ffffff;
       border-radius: 50%;
     }
 
@@ -69,7 +73,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-button/rel-button.ts

@@ -1,5 +1,6 @@
 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 {
@@ -19,6 +20,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 +73,24 @@ 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: 1px solid var(--rel-color-border-default) !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;
+      border-color: var(--rel-color-border-default) !important;
     }
 
     /* Variants & tones (unchanged) */
@@ -84,7 +100,7 @@ export class RelButton extends LitElement {
     }
     .btn-default.tone-critical {
       background: var(--rel-colors-red-primary);
-      color: var(--rel-colors-white);
+      color: #ffffff;
     }
     .btn-default.tone-success {
       background: var(--rel-colors-green-success);
@@ -93,11 +109,11 @@ export class RelButton extends LitElement {
 
     .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);
+      color: #ffffff;
     }
     .btn-primary.tone-success {
       background: var(--rel-colors-green-success);
@@ -106,7 +122,7 @@ export class RelButton extends LitElement {
 
     .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);
     }
 
@@ -130,8 +146,24 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-black);
     }
 
-    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);
+    }
+
+    button:hover:not(:disabled):not(.btn-primary):not(.btn-default) {
+      background: var(--rel-color-bg-hover);
+    }
+
+    button.btn-default:hover:not(:disabled) {
+      filter: brightness(0.85);
     }
 
     button:active:not(:disabled) {
@@ -142,6 +174,29 @@ export class RelButton extends LitElement {
       outline: 2px solid var(--rel-colors-blue-primary);
       outline-offset: 2px;
     }
+
+    /* Dark mode overrides */
+    :host-context([data-theme="dark"]) button:focus-visible,
+    :host-context(.dark) button:focus-visible {
+      outline-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) button.btn-secondary,
+    :host-context(.dark) button.btn-secondary {
+      background: #000000;
+      border-color: #ffffff;
+      color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) button.btn-text,
+    :host-context(.dark) button.btn-text {
+      color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) button.btn-link,
+    :host-context(.dark) button.btn-link {
+      color: #ffffff;
+    }
   `;
 
   private get classes() {
@@ -176,6 +231,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

@@ -122,12 +122,12 @@ export class RelCalendar extends LitElement {
     }
 
     .day-button.today:not(.selected) {
-      border: 2px solid var(--rel-colors-blue-primary);
+      border: 2px solid var(--rel-color-border-focus);
     }
 
     .day-button.selected {
-      background: var(--rel-colors-green-primary);
-      color: var(--rel-colors-black);
+      background: var(--rel-color-brand);
+      color: var(--rel-color-text-inverse);
       font-weight: var(--rel-fontWeights-semibold);
     }
 

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

@@ -11,8 +11,7 @@ export class RelCarousel extends LitElement {
   @property({ type: Boolean, attribute: "show-buttons" }) showButtons = true;
   @property({ type: Boolean, attribute: "show-dots" }) showDots = true;
   @property({ type: String }) orientation: "horizontal" | "vertical" = "horizontal";
-  @property({ type: String }) align: "start" | "center" | "end" = "center";
-  @property({ type: Number, attribute: "slides-per-view" }) slidesPerView = 1;
+  @property({ type: String }) label: string = "Carousel";
   @property({ type: Number }) gap?: number;
   @property({ type: Boolean, reflect: true }) disabled = false;
 
@@ -74,11 +73,11 @@ export class RelCarousel extends LitElement {
       top: 50%;
       transform: translateY(-50%);
       z-index: 10;
-      width: 40px;
-      height: 40px;
+      width: var(--rel-carousel-nav-size, 40px);
+      height: var(--rel-carousel-nav-size, 40px);
       border-radius: 50%;
-      border: 1px solid var(--rel-border-default);
-      background: var(--rel-colors-white);
+      border: 1px solid var(--rel-color-border-default);
+      background: var(--rel-color-bg-primary);
       color: var(--rel-colors-gray-primary);
       cursor: pointer;
       display: flex;
@@ -124,8 +123,8 @@ export class RelCarousel extends LitElement {
     }
 
     .dot {
-      width: 8px;
-      height: 8px;
+      width: var(--rel-carousel-dot-size, 8px);
+      height: var(--rel-carousel-dot-size, 8px);
       border-radius: 50%;
       border: none;
       background: var(--rel-colors-gray-border);
@@ -139,8 +138,8 @@ export class RelCarousel extends LitElement {
     }
 
     .dot.active {
-      background: var(--rel-colors-green-primary);
-      width: 24px;
+      background: var(--rel-color-brand);
+      width: var(--rel-carousel-dot-size-active, 24px);
       border-radius: 4px;
     }
 
@@ -392,7 +391,7 @@ export class RelCarousel extends LitElement {
         part="viewport"
         role="region"
         aria-roledescription="carousel"
-        aria-label="Carousel"
+        aria-label=${this.label}
         @keydown=${this.handleKeyDown}
         @mouseenter=${this.handleMouseEnter}
         @mouseleave=${this.handleMouseLeave}

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

@@ -10,6 +10,17 @@ export class RelCheckbox extends LitElement {
   @property({ type: String }) supportingtext = "";
   @property({ type: String }) state: CheckboxState = "default";
   @property({ type: String }) status: CheckboxStatus = "unchecked";
+  @property({ type: String }) value = "";
+
+  get checked(): boolean {
+    return this.status === "checked";
+  }
+  set checked(val: boolean) {
+    this.status = val ? "checked" : "unchecked";
+  }
+
+  private _onChange: (value: boolean) => void = () => {};
+  private _onTouched: () => void = () => {};
 
   static styles = css`
     :host {
@@ -84,11 +95,25 @@ export class RelCheckbox extends LitElement {
       border-color: var(--rel-colors-red-primary);
     }
 
+    /* Pin checkmark/dash to white on red background — correct in both themes */
+    .error.checked svg,
+    .error.indeterminate svg {
+      fill: #ffffff;
+    }
+
     .disabled {
       opacity: 0.55;
       cursor: not-allowed;
     }
 
+    :host([state="disabled"]) {
+      cursor: not-allowed;
+    }
+
+    :host([state="disabled"]) * {
+      pointer-events: none;
+    }
+
     .label {
       font-size: var(--rel-fontSizes-md, 14px);
       font-weight: var(--rel-fontWeights-medium, 500);
@@ -110,17 +135,22 @@ export class RelCheckbox extends LitElement {
     else this.status = "unchecked";
 
     this.dispatchEvent(
-      new CustomEvent("change", {
+      new CustomEvent("rel-change", {
         detail: {
           checked: this.status === "checked",
-          indeterminate: this.status === "indeterminate",
+          value: this.value,
         },
         bubbles: true,
         composed: true,
       })
     );
+    this._onChange(this.checked);
   }
 
+  registerOnChange(fn: (value: boolean) => void): void { this._onChange = fn; }
+  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
+  writeValue(checked: boolean): void { this.checked = checked; }
+
   render() {
     return html`
       <div class="wrapper ${this.state} ${this.status}">
@@ -128,6 +158,7 @@ export class RelCheckbox extends LitElement {
           <input
             type="checkbox"
             @click=${this.toggle}
+            @blur=${() => this._onTouched()}
             ?disabled=${this.state === "disabled"}
           />
 

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

@@ -56,32 +56,57 @@ export class RelChip extends LitElement {
     /* TONES */
     .chip-default {
       background: var(--rel-colors-gray-border);
-      color: var(--rel-colors-black);
+      color: #000000;
     }
 
     .chip-blue {
       background: var(--rel-colors-blue-tertiary);
-      color: var(--rel-colors-white);
+      color: #ffffff;
     }
 
     .chip-yellow {
       background: var(--rel-colors-yellow-pending);
-      color: var(--rel-colors-black);
+      color: #000000;
     }
 
     .chip-red {
       background: var(--rel-colors-red-secondary);
-      color: var(--rel-colors-white);
+      color: #ffffff;
     }
 
     .chip-green {
       background: var(--rel-colors-green-success);
-      color: var(--rel-colors-white);
+      color: #ffffff;
     }
 
     /* OUTLINE */
     .chip-outline {
       background: transparent;
+      border-color: var(--rel-color-border-default);
+    }
+
+    .chip-blue.chip-outline {
+      color: #000000;
+      background: transparent;
+      border-color: #0059F4;
+    }
+
+    .chip-red.chip-outline {
+      color: #9C1E33;
+      background: transparent;
+      border-color: #9C1E33;
+    }
+
+    .chip-green.chip-outline {
+      color: #00A86B;
+      background: transparent;
+      border-color: #00A86B;
+    }
+
+    .chip-yellow.chip-outline {
+      color: #92400E;
+      background: transparent;
+      border-color: #F2915C;
     }
 
     .chip-avatar {
@@ -91,6 +116,20 @@ export class RelChip extends LitElement {
       object-fit: cover;
     }
 
+    .chip-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+    }
+
+    .chip-icon * {
+      width: 100%;
+      height: 100%;
+    }
+
     .chip-icon ::slotted(svg),
     .chip-icon svg {
       width: 16px;
@@ -119,6 +158,25 @@ export class RelChip extends LitElement {
       outline-offset: 1px;
       border-radius: 2px;
     }
+
+    /* Dark mode overrides */
+    :host-context([data-theme="dark"]) .chip-default,
+    :host-context(.dark) .chip-default {
+      color: #ffffff;
+      background: var(--rel-color-bg-secondary);
+    }
+
+    :host-context([data-theme="dark"]) .chip-default.chip-outline,
+    :host-context(.dark) .chip-default.chip-outline {
+      color: #ffffff;
+      border-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .chip-outline,
+    :host-context(.dark) .chip-outline {
+      color: #ffffff;
+      border-color: currentColor;
+    }
   `;
 
   private get classes() {

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

@@ -36,6 +36,15 @@
       }
     `;
 
+    connectedCallback() {
+      super.connectedCallback();
+      this.setAttribute("role", "separator");
+    }
+
+    updated() {
+      this.setAttribute("aria-orientation", this.orientation ?? "horizontal");
+    }
+
     render() {
       return html`
         <div class="rel-divider ${this.orientation}" role="separator"></div>

package/dist/components/rel-drawer/rel-drawer-footer.ts

@@ -0,0 +1,29 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("rel-drawer-footer")
+export class RelDrawerFooter extends LitElement {
+  static styles = css`
+    .drawer-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--rel-spacing-space-xs);
+      padding-top: var(--rel-spacing-space-md);
+      border-top: 1px solid var(--rel-color-border-divider);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="drawer-footer">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-drawer-footer": RelDrawerFooter;
+  }
+}