@reliability-design/web 1.0.6 → 1.1.1

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

@@ -35,6 +35,7 @@ export class RelPopover extends LitElement {
 
   private triggerEl: HTMLElement | null = null;
   private returnFocusEl: HTMLElement | null = null;
+  private uniqueId = `popover-${Math.random().toString(36).slice(2)}`;
 
   /* =======================
    * STYLES
@@ -81,10 +82,8 @@ export class RelPopover extends LitElement {
   }
 
   firstUpdated() {
-    // Resolve trigger once from light DOM
-    this.triggerEl = this.querySelector(
-      '[slot="trigger"]',
-    ) as HTMLElement | null;
+    // triggerEl is resolved via onTriggerSlotChange; call aria in case slot
+    // content was already assigned before firstUpdated
     this.applyTriggerAria();
   }
 
@@ -134,18 +133,13 @@ export class RelPopover extends LitElement {
 
     const path = e.composedPath();
 
-    // Toggle ONLY if pointerdown originated from trigger
-    const triggerNode = path.find(
-      (n) => n instanceof HTMLElement && n.getAttribute?.("slot") === "trigger",
-    ) as HTMLElement | undefined;
-
-    if (!triggerNode) return;
+    // Toggle ONLY if pointerdown originated from the trigger element
+    if (!this.triggerEl || !path.includes(this.triggerEl)) return;
 
     // Prevent this interaction from becoming an "outside click"
     e.preventDefault();
     e.stopPropagation();
 
-    this.triggerEl = triggerNode;
     this.setOpen(!this.activeOpen);
   };
 
@@ -295,10 +289,18 @@ export class RelPopover extends LitElement {
    * ARIA
    * ======================= */
 
+  private onTriggerSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    const first = slot.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+    this.triggerEl = first ?? null;
+    this.applyTriggerAria();
+  }
+
   private applyTriggerAria() {
     if (!this.triggerEl) return;
     this.triggerEl.setAttribute("aria-haspopup", "dialog");
     this.triggerEl.setAttribute("aria-expanded", String(this.activeOpen));
+    this.triggerEl.setAttribute("aria-controls", this.uniqueId);
   }
 
   /* =======================
@@ -307,14 +309,15 @@ export class RelPopover extends LitElement {
 
   render() {
     return html`
-      <slot name="trigger"></slot>
+      <slot @slotchange=${this.onTriggerSlotChange}></slot>
 
       <div
+        id="${this.uniqueId}"
         class="content-wrapper"
         style="${this.contentStyle}"
         ?open="${this.activeOpen}"
       >
-        <slot></slot>
+        <slot name="content"></slot>
       </div>
     `;
   }

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

@@ -21,6 +21,13 @@ export class RelRadio extends LitElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @property({ type: String }) value = "";
+
+  checked = false;
+
+  private _onChange: (value: string) => void = () => {};
+  private _onTouched: () => void = () => {};
+
   static styles = css`
     :host {
       display: block;
@@ -105,13 +112,22 @@ export class RelRadio extends LitElement {
 
     this.selectedValue = value;
     this.dispatchEvent(
-      new CustomEvent("changed", {
+      new CustomEvent("rel-change", {
+        detail: {
+          checked: this.selectedValue === value,
+          value,
+        },
         bubbles: true,
         composed: true,
       })
     );
+    this._onChange(this.value);
   }
 
+  registerOnChange(fn: (value: string) => void): void { this._onChange = fn; }
+  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
+  writeValue(value: string): void { this.checked = value === this.value; }
+
   private renderOption(option: RadioOption) {
     const isChecked = this.selectedValue === option.value;
     const isDisabled = this.disabled || option.disabled;
@@ -133,6 +149,7 @@ export class RelRadio extends LitElement {
             .checked="${isChecked}"
             ?disabled="${isDisabled}"
             @change="${() => this.onChange(option.value)}"
+            @blur="${() => this._onTouched()}"
           />
           <span class="radio-custom"></span>
           <span class="radio-label">${option.label}</span>

package/dist/components/rel-resizable/rel-resizable-handle.ts

@@ -36,19 +36,15 @@ export class RelResizableHandle extends LitElement {
     }
 
     :host([orientation="horizontal"]) {
-      width: var(--rel-borders-width-stroke-100);
-      min-width: var(--rel-borders-width-stroke-100);
+      width: 8px;
+      min-width: 8px;
       cursor: col-resize;
-      padding: 0 var(--rel-spacing-space-xs);
-      margin: 0 calc(var(--rel-spacing-space-xs) * -1);
     }
 
     :host([orientation="vertical"]) {
-      height: var(--rel-borders-width-stroke-100);
-      min-height: var(--rel-borders-width-stroke-100);
+      height: 8px;
+      min-height: 8px;
       cursor: row-resize;
-      padding: var(--rel-spacing-space-xs) 0;
-      margin: calc(var(--rel-spacing-space-xs) * -1) 0;
     }
 
     :host(:hover),

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

@@ -176,6 +176,20 @@ export class RelSelect extends LitElement {
     .error-text {
       color: var(--rel-colors-red-secondary);
     }
+
+    /* Dark mode — flip select background, text, border, and chevron icon to white */
+    :host-context([data-theme="dark"]) select,
+    :host-context(.dark) select {
+      background-color: var(--rel-color-bg-secondary);
+      color: #ffffff;
+      border-color: var(--rel-color-border-default);
+      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='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    }
+
+    :host-context([data-theme="dark"]) .select-label,
+    :host-context(.dark) .select-label {
+      color: var(--rel-color-text-primary);
+    }
   `;
 
   private onChange(event: Event) {

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

@@ -166,7 +166,7 @@ export class RelSheetContent extends LitElement {
     }
 
     .sheet-container.open .overlay {
-      opacity: 1;
+      opacity: var(--rel-sheet-scrim-opacity, 1);
     }
 
     .overlay.hidden {
@@ -354,9 +354,10 @@ export class RelSheetContent extends LitElement {
     this.lockScroll();
 
     if (this.sheet?.modal) {
-      setTimeout(() => {
-        this.focusPanel();
-      }, 50);
+      this.updateComplete.then(() => {
+        const focusTarget = this.shadowRoot?.querySelector<HTMLElement>("[autofocus], .close-button, .panel");
+        focusTarget?.focus();
+      });
     }
 
     document.addEventListener("keydown", this.handleKeydown);
@@ -367,10 +368,10 @@ export class RelSheetContent extends LitElement {
     document.removeEventListener("keydown", this.handleKeydown);
 
     if (this.previousFocus && this.previousFocus.focus) {
-      setTimeout(() => {
+      this.updateComplete.then(() => {
         this.previousFocus?.focus();
         this.previousFocus = null;
-      }, 50);
+      });
     }
   }
 

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

@@ -1,5 +1,6 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import "@reliability-design/icons/rel-icon";
 
 export type SidebarVariant = "sidebar" | "floating" | "inset";
 export type SidebarSide = "left" | "right";
@@ -31,6 +32,11 @@ export class RelSidebarProvider extends LitElement {
 
   private mediaQuery: MediaQueryList | null = null;
   private isInitialized = false;
+  private _uid = Math.random().toString(36).slice(2);
+
+  private get _storageKey(): string {
+    return `rel-sidebar:${this.id || this._uid}`;
+  }
 
   static styles = css`
     :host {
@@ -154,7 +160,7 @@ export class RelSidebarProvider extends LitElement {
 
   private getPersistedState(): { open?: boolean; collapsed?: boolean } | null {
     try {
-      const stored = localStorage.getItem(this.persistKey);
+      const stored = localStorage.getItem(this._storageKey);
       if (stored) {
         return JSON.parse(stored);
       }
@@ -184,7 +190,7 @@ export class RelSidebarProvider extends LitElement {
       : { open: this.activeOpen, collapsed: this.activeCollapsed };
 
     try {
-      localStorage.setItem(this.persistKey, JSON.stringify(stateToPersist));
+      localStorage.setItem(this._storageKey, JSON.stringify(stateToPersist));
     } catch (e) {
       // Silently fail if localStorage is unavailable
     }
@@ -309,7 +315,8 @@ export class RelSidebar extends LitElement {
       left: 0;
       right: 0;
       bottom: 0;
-      background: var(--rel-overlay-scrim, rgba(0, 0, 0, 0.5));
+      /* TODO: replace scrim fallback with a proper dark-aware token in vars.css */
+      background: var(--rel-overlay-scrim, rgba(0, 0, 0, 0.6));
       z-index: 999;
       opacity: 0;
       pointer-events: none;
@@ -982,6 +989,7 @@ export class RelSidebarMenuButton extends LitElement {
   @property({ type: Boolean }) active = false;
   @property({ type: Boolean }) disabled = false;
   @property({ type: String }) tooltip = "";
+  @property({ type: String }) icon: string = "";
 
   @state() private isCollapsed = false;
 
@@ -1147,7 +1155,7 @@ export class RelSidebarMenuButton extends LitElement {
         part="button"
       >
         <span class="icon" part="icon">
-          <slot name="icon"></slot>
+          ${this.icon ? html`<rel-icon name="${this.icon}"></rel-icon>` : nothing}
         </span>
         <span class="label" part="label">
           <slot></slot>

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

@@ -26,6 +26,9 @@ export class RelSlider extends LitElement {
 
   @state() private ticks: number[] = [];
 
+  private _onChange: (value: number) => void = () => {};
+  private _onTouched: () => void = () => {};
+
   static styles = css`
     :host {
       --track-height: 5px;
@@ -112,6 +115,12 @@ export class RelSlider extends LitElement {
       border: none;
     }
 
+    .slider-input::slider-track {
+      background: transparent;
+      height: 100%;
+      border: none;
+    }
+
     /* Hide native thumb */
     .slider-input::-webkit-slider-thumb {
       -webkit-appearance: none;
@@ -131,6 +140,14 @@ export class RelSlider extends LitElement {
       cursor: pointer;
     }
 
+    .slider-input::slider-thumb {
+      width: 1px;
+      height: 1px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+    }
+
     .slider-input:focus-visible ~ .thumb-container .custom-thumb {
       box-shadow: 0 0 0 var(--thumb-stroke) var(--thumb-halo-color),
         var(--shadow), var(--halo);
@@ -330,14 +347,19 @@ export class RelSlider extends LitElement {
     this.value = next;
     this.updateActiveWidth();
     this.dispatchEvent(
-      new CustomEvent("valueChange", {
+      new CustomEvent("rel-change", {
         detail: { value: this.value },
         bubbles: true,
         composed: true,
       })
     );
+    this._onChange(this.value);
   }
 
+  registerOnChange(fn: (value: number) => void): void { this._onChange = fn; }
+  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
+  writeValue(value: number): void { this.value = value; }
+
   private updateActiveWidth() {
     const activeEl = this.shadowRoot?.querySelector(".track-active") as HTMLDivElement;
     if (activeEl) {
@@ -441,7 +463,8 @@ export class RelSlider extends LitElement {
           .step="${this.type === 'discrete' ? String(this.step) : '1'}"
           .value="${String(this.value)}"
           ?disabled="${this.disabled}"
-          @input="${this.onInput}" />
+          @input="${this.onInput}"
+          @blur="${() => this._onTouched()}" />
 
         ${this.renderThumbContainer()}
         ${this.renderTicks()}

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

@@ -19,10 +19,11 @@ export class RelSnackbar extends LitElement {
   @property({ type: Number }) duration: number = 4000;
 
   @property({ type: String }) type: SnackbarType = "default";
+  @property({ type: Boolean, reflect: true }) show = false;
 
-  @state() private visible: boolean = true;
+  @state() private visible: boolean = false;
 
-  private timeout: number | null = null;
+  private _dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
   static styles = css`
     :host {
@@ -56,17 +57,30 @@ export class RelSnackbar extends LitElement {
       display: none;
     }
 
-    /* Type variants */
+    /* Type variants — border accent using semantic DS tokens */
     .snackbar.type-success {
-      border-left-color: var(--rel-colors-green-secondary, #4ade80);
+      border-left-color: var(--rel-colors-green-600, #16a34a);
     }
 
     .snackbar.type-error {
-      border-left-color: var(--rel-colors-red-primary, #f87171);
+      border-left-color: var(--rel-colors-red-600, #dc2626);
     }
 
     .snackbar.type-warning {
-      border-left-color: var(--rel-colors-amber-primary, #fbbf24);
+      border-left-color: var(--rel-colors-amber-600, #d97706);
+    }
+
+    /* Icon color matches type accent */
+    .snackbar.type-success .snackbar-icon {
+      color: var(--rel-colors-green-400, #4ade80);
+    }
+
+    .snackbar.type-error .snackbar-icon {
+      color: var(--rel-colors-red-400, #f87171);
+    }
+
+    .snackbar.type-warning .snackbar-icon {
+      color: var(--rel-colors-amber-400, #fbbf24);
     }
 
     .snackbar-icon {
@@ -112,7 +126,7 @@ export class RelSnackbar extends LitElement {
     .snackbar-action {
       background: none;
       border: none;
-      color: var(--rel-colors-green-secondary);
+      color: var(--rel-colors-green-400, #4ade80);
       font-weight: var(--rel-fontWeights-semibold);
       font-size: var(--rel-fontSizes-sm);
       font-family: var(--rel-fontFamilies-primary);
@@ -164,6 +178,11 @@ export class RelSnackbar extends LitElement {
       border-radius: 2px;
     }
 
+    /* Prevent any inherited transform from firing on button click */
+    .snackbar button:active {
+      transform: none;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .snackbar {
         animation: none;
@@ -184,32 +203,42 @@ export class RelSnackbar extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.setAutoDismiss();
+  }
+
+  willUpdate(changed: Map<string, unknown>) {
+    if (!changed.has('show')) return;
+    if (this.show) {
+      this.visible = true;
+      this.setAutoDismiss();
+    } else {
+      this.visible = false;
+      this.clearDismissTimer();
+    }
   }
 
   updated(changed: Map<string, unknown>) {
-    if (changed.has("duration") || changed.has("longerAction")) {
+    if ((changed.has("duration") || changed.has("longerAction")) && this.show) {
       this.setAutoDismiss();
     }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.clearTimeout();
+    this.clearDismissTimer();
   }
 
   private setAutoDismiss() {
     if (this.duration > 0) {
-      this.clearTimeout();
+      this.clearDismissTimer();
       const delay = this.longerAction ? this.duration * 2 : this.duration;
-      this.timeout = window.setTimeout(() => this.dismiss(), delay);
+      this._dismissTimer = setTimeout(() => this.dismiss(), delay);
     }
   }
 
-  private clearTimeout() {
-    if (this.timeout !== null) {
-      window.clearTimeout(this.timeout);
-      this.timeout = null;
+  private clearDismissTimer() {
+    if (this._dismissTimer !== null) {
+      clearTimeout(this._dismissTimer);
+      this._dismissTimer = null;
     }
   }
 
@@ -224,6 +253,7 @@ export class RelSnackbar extends LitElement {
   }
 
   private dismiss() {
+    this.show = false;
     this.visible = false;
     this.dispatchEvent(
       new CustomEvent("close", {

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

@@ -126,8 +126,8 @@ export class RelStepper extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 22px;
-      height: 22px;
+      width: var(--rel-stepper-indicator-size, 22px);
+      height: var(--rel-stepper-indicator-size, 22px);
       border: 2px solid var(--rel-colors-gray-border);
       background: var(--rel-colors-white);
       border-radius: 50%;
@@ -237,15 +237,15 @@ export class RelStepper extends LitElement {
      * Step States
      ********************************************/
     .rel-step.done .indicator {
-      background: var(--rel-colors-black);
-      border-color: var(--rel-colors-black);
-      color: var(--rel-colors-white);
+      background: var(--rel-color-text-heading);
+      border-color: var(--rel-color-text-heading);
+      color: var(--rel-color-text-inverse);
     }
 
     .rel-step.progress .indicator {
-      border-color: var(--rel-colors-black);
-      color: var(--rel-colors-black);
-      background: var(--rel-colors-white);
+      border-color: var(--rel-color-text-heading);
+      background: var(--rel-color-bg-primary);
+      color: var(--rel-color-text-heading);
     }
 
     .rel-step.disabled .indicator {
@@ -255,20 +255,20 @@ export class RelStepper extends LitElement {
     }
 
     .rel-step.done .connector {
-      background: var(--rel-colors-black);
+      background: var(--rel-color-text-heading);
     }
 
     .rel-step.progress .connector {
-      background: var(--rel-colors-black);
+      background: var(--rel-color-text-heading);
     }
 
     .rel-step.done .step-label {
-      color: var(--rel-colors-black);
+      color: var(--rel-color-text-heading);
       font-weight: var(--rel-fontWeights-semibold);
     }
 
     .rel-step.progress .step-label {
-      color: var(--rel-colors-black);
+      color: var(--rel-color-text-heading);
       font-weight: var(--rel-fontWeights-semibold);
     }
 
@@ -276,41 +276,52 @@ export class RelStepper extends LitElement {
       color: var(--rel-text-disabled, #9e9e9e);
     }
 
+    /* Dark mode: ensure progress/done indicator and labels stay readable */
+    :host-context(:root[data-theme="dark"]) .rel-step.progress .step-label,
+    :host-context(.dark) .rel-step.progress .step-label {
+      color: var(--rel-color-text-primary);
+    }
+
+    :host-context(:root[data-theme="dark"]) .rel-step.progress .indicator,
+    :host-context(.dark) .rel-step.progress .indicator {
+      color: #ffffff;
+    }
+
     /********************************************
      * Size Property — controls connector length
      ********************************************/
     /* Horizontal */
     .rel-stepper.large.horizontal {
-      gap: 86px;
+      gap: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.small.horizontal {
-      gap: 60px;
+      gap: var(--rel-stepper-connector-length-md, 60px);
     }
 
     .rel-stepper.large.horizontal .connector {
-      width: 86px;
+      width: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.small.horizontal .connector {
-      width: 60px;
+      width: var(--rel-stepper-connector-length-md, 60px);
     }
 
     /* Vertical */
     .rel-stepper.large.vertical .connector {
-      height: 86px;
+      height: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.large.vertical {
-      gap: 86px;
+      gap: var(--rel-stepper-connector-length-lg, 86px);
     }
 
     .rel-stepper.small.vertical .connector {
-      height: 42px;
+      height: var(--rel-stepper-connector-length-sm, 42px);
     }
 
     .rel-stepper.small.vertical {
-      gap: 42px;
+      gap: var(--rel-stepper-connector-length-sm, 42px);
     }
   `;
 
@@ -338,7 +349,7 @@ export class RelStepper extends LitElement {
     if (step.status === "disabled") return;
 
     this.dispatchEvent(
-      new CustomEvent("step-change", {
+      new CustomEvent("rel-step-change", {
         detail: {
           index,
           step,

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

@@ -5,6 +5,10 @@ import { customElement, property, state } from "lit/decorators.js";
 export class RelSwitch extends LitElement {
   @property({ type: Boolean }) checked = false;
   @property({ type: Boolean }) disabled = false;
+  @property({ type: String }) value = "";
+
+  private _onChange: (value: boolean) => void = () => {};
+  private _onTouched: () => void = () => {};
 
   @state() private isFocused = false;
   @state() private isPressed = false;
@@ -23,8 +27,8 @@ export class RelSwitch extends LitElement {
     .switch-wrapper {
       position: relative;
       display: inline-block;
-      width: 42px;
-      height: 22px;
+      width: var(--rel-switch-track-width, 42px);
+      height: var(--rel-switch-track-height, 22px);
       cursor: pointer;
     }
 
@@ -60,8 +64,8 @@ export class RelSwitch extends LitElement {
       top: 50%;
       left: -2px;
       transform: translateY(-50%);
-      height: 18px;
-      width: 18px;
+      height: var(--rel-switch-thumb-size, 18px);
+      width: var(--rel-switch-thumb-size, 18px);
       background-color: var(--switch-knob-off);
       border-radius: 50%;
       transition: transform 0.25s ease, background-color 0.25s ease,
@@ -116,14 +120,22 @@ export class RelSwitch extends LitElement {
     this.checked = input.checked;
 
     this.dispatchEvent(
-      new CustomEvent<boolean>("changed", {
-        detail: this.checked,
+      new CustomEvent("rel-change", {
+        detail: {
+          checked: this.checked,
+          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; }
+
   private handleFocus() {
     this.isFocused = true;
   }
@@ -131,6 +143,7 @@ export class RelSwitch extends LitElement {
   private handleBlur() {
     this.isFocused = false;
     this.isPressed = false;
+    this._onTouched();
   }
 
   private handleMouseDown() {