@reliability-design/web 1.0.2 → 1.0.3

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

@@ -4,9 +4,7 @@ import { customElement, property } from "lit/decorators.js";
 @customElement("rel-container")
 export class RelContainer extends LitElement {
   @property({ type: String }) padding: "sm" | "md" | "lg" = "md";
-
-  @property({ type: Boolean }) shadow: boolean = false;
-
+  @property({ type: Boolean }) shadow = false;
   @property({ type: String }) background: "light" | "white" | "none" = "white";
 
   static styles = css`
@@ -23,7 +21,6 @@ export class RelContainer extends LitElement {
       box-sizing: border-box;
     }
 
-    /* Background Variants */
     .bg-white {
       background-color: var(--rel-colors-white);
     }
@@ -36,7 +33,6 @@ export class RelContainer extends LitElement {
       background: transparent;
     }
 
-    /* Padding Variants */
     .padding-sm {
       padding: var(--rel-spacing-space-xs);
     }
@@ -49,7 +45,6 @@ export class RelContainer extends LitElement {
       padding: var(--rel-spacing-space-2xl);
     }
 
-    /* Shadow */
     .shadow {
       box-shadow: var(--rel-shadows-shadow-300);
     }

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

@@ -1,44 +1,44 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
+  import { LitElement, html, css } from "lit";
+  import { customElement, property } from "lit/decorators.js";
 
-@customElement("rel-divider")
-export class RelDivider extends LitElement {
-  @property({ type: String }) orientation: "horizontal" | "vertical" = "horizontal";
+  @customElement("rel-divider")
+  export class RelDivider extends LitElement {
+    @property({ type: String }) orientation: "horizontal" | "vertical" = "horizontal";
 
-  static styles = css`
-    :host {
-      display: block;
-    }
+    static styles = css`
+      :host {
+        display: block;
+      }
 
-    .rel-divider {
-      position: relative;
-      display: flex;
-      background: transparent;
-      font-family: var(--rel-fontFamilies-primary);
-      color: var(--rel-colors-gray-primary);
-    }
+      .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;
-    }
+      /* 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%;
-    }
-  `;
-
-  render() {
-    return html`
-      <div class="rel-divider ${this.orientation}" role="separator"></div>
+      /* 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%;
+      }
     `;
+
+    render() {
+      return html`
+        <div class="rel-divider ${this.orientation}" role="separator"></div>
+      `;
+    }
   }
-}

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

@@ -3,11 +3,12 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("rel-layout")
 export class RelLayout extends LitElement {
-  @property({ type: String }) gap: string = "1rem";
+  @property({ type: String }) gap = "1rem";
 
-  @property({ type: Number }) columns: number = 4;
+  @property({ type: Number }) columns = 4;
 
-  @property({ type: Boolean }) responsive: boolean = true;
+  // 🔥 IMPORTANT: reflect so CSS selectors work
+  @property({ type: Boolean, reflect: true }) responsive = true;
 
   static styles = css`
     :host {
@@ -21,11 +22,7 @@ export class RelLayout extends LitElement {
       font-family: var(--rel-fontFamilies-primary);
     }
 
-    /* Responsive breakpoints - only applied when responsive is true */
-    :host([responsive]) .layout-grid {
-      /* Default: use columns property */
-    }
-
+    /* Responsive breakpoints — only when attribute exists */
     @media (max-width: 1024px) {
       :host([responsive]) .layout-grid {
         grid-template-columns: repeat(3, 1fr) !important;
@@ -46,13 +43,14 @@ export class RelLayout extends LitElement {
   `;
 
   render() {
-    const gridStyle = `
-      gap: ${this.gap};
-      grid-template-columns: repeat(${this.columns}, 1fr);
-    `;
-
     return html`
-      <div class="layout-grid" style="${gridStyle}">
+      <div
+        class="layout-grid"
+        style="
+          gap: ${this.gap};
+          grid-template-columns: repeat(${this.columns}, 1fr);
+        "
+      >
         <slot></slot>
       </div>
     `;

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

@@ -9,9 +9,11 @@ export type ProgressMode =
 
 @customElement("rel-progress")
 export class RelProgress extends LitElement {
-  @property({ type: String }) mode: ProgressMode = "linear-determinate";
+  @property({ type: String, reflect: true })
+  mode: ProgressMode = "linear-determinate";
 
-  @property({ type: Number }) value: number = 0;
+  @property({ type: Number })
+  value = 0;
 
   private radius = 15.9155;
   private circumference = 2 * Math.PI * this.radius;
@@ -26,7 +28,7 @@ export class RelProgress extends LitElement {
       display: inline-block;
     }
 
-    /* Linear Progress */
+    /* Linear */
     .linear-track {
       background: var(--rel-colors-gray-border);
       border-radius: var(--rel-borders-radius-border-radius-200);
@@ -58,7 +60,7 @@ export class RelProgress extends LitElement {
       }
     }
 
-    /* Circular Progress */
+    /* Circular */
     .circular {
       display: inline-block;
       width: 48px;
@@ -83,11 +85,9 @@ export class RelProgress extends LitElement {
       stroke-width: 3;
       stroke-linecap: round;
       transition: stroke-dashoffset 0.35s;
-      transform: rotate(0deg);
-      transform-origin: center;
     }
 
-    /* Circular Indeterminate Spinner */
+    /* Spinner */
     .spinner {
       animation: rotate 2s linear infinite;
     }
@@ -120,10 +120,14 @@ export class RelProgress extends LitElement {
     }
   `;
 
+  private get safeValue() {
+    return Math.min(100, Math.max(0, this.value));
+  }
+
   private renderLinearDeterminate() {
     return html`
       <div class="linear-track">
-        <div class="linear-bar" style="width: ${this.value}%"></div>
+        <div class="linear-bar" style="width: ${this.safeValue}%"></div>
       </div>
     `;
   }
@@ -137,19 +141,21 @@ export class RelProgress extends LitElement {
   }
 
   private renderCircularDeterminate() {
-    const offset = this.circumference - (this.value / 100) * this.circumference;
+    const offset =
+      this.circumference - (this.safeValue / 100) * this.circumference;
 
     return html`
       <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-bg" cx="18" cy="18" r="${this.radius}" />
           <circle
             class="circular-progress"
             cx="18"
             cy="18"
-            r="15.9155"
+            r="${this.radius}"
             stroke-dasharray="${this.circumference}"
-            stroke-dashoffset="${offset}" />
+            stroke-dashoffset="${offset}"
+          />
         </svg>
       </div>
     `;
@@ -159,7 +165,14 @@ export class RelProgress extends LitElement {
     return html`
       <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" />
+          <circle
+            class="spinner-path"
+            cx="25"
+            cy="25"
+            r="20"
+            fill="none"
+            stroke-width="4"
+          />
         </svg>
       </div>
     `;
@@ -167,8 +180,6 @@ export class RelProgress extends LitElement {
 
   render() {
     switch (this.mode) {
-      case "linear-determinate":
-        return this.renderLinearDeterminate();
       case "linear-indeterminate":
         return this.renderLinearIndeterminate();
       case "circular-determinate":

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

@@ -13,9 +13,13 @@ export interface RadioOption {
 export class RelRadio extends LitElement {
   @property({ type: Array }) options: RadioOption[] = [];
 
-  @property({ type: String }) name: string = "radio-group";
+  @property({ type: String }) name = "radio-group";
 
-  @property({ type: String }) selectedValue: string | null = null;
+  @property({ type: String, reflect: true })
+  selectedValue: string | null = null;
+
+  @property({ type: Boolean })
+  disabled = false;
 
   static styles = css`
     :host {
@@ -32,10 +36,13 @@ export class RelRadio extends LitElement {
     .rel-radio-option {
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
       gap: var(--rel-spacing-space-3xs);
       cursor: pointer;
-      position: relative;
+    }
+
+    .rel-radio-option.disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
     }
 
     .radio-main {
@@ -44,7 +51,7 @@ export class RelRadio extends LitElement {
       gap: var(--rel-spacing-space-2xs);
     }
 
-    .rel-radio-option input {
+    input {
       position: absolute;
       opacity: 0;
       pointer-events: none;
@@ -55,98 +62,55 @@ export class RelRadio extends LitElement {
       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 {
+    input:checked + .radio-custom::after {
       content: "";
       position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 10px;
-      height: 10px;
-      background-color: var(--rel-colors-black);
+      inset: 4px;
+      background: 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);
+    .error .radio-custom {
+      border-color: var(--rel-colors-red-secondary);
+    }
+
+    .error input:checked + .radio-custom::after {
+      background: var(--rel-colors-red-secondary);
     }
   `;
 
   private onChange(value: string) {
+    if (this.disabled) return;
+
     this.selectedValue = value;
     this.dispatchEvent(
       new CustomEvent("changed", {
-        detail: { value },
         bubbles: true,
         composed: true,
       })
     );
   }
 
-  private isChecked(value: string): boolean {
-    return this.selectedValue === value;
-  }
-
   private renderOption(option: RadioOption) {
-    const isChecked = this.isChecked(option.value);
+    const isChecked = this.selectedValue === option.value;
+    const isDisabled = this.disabled || option.disabled;
+
     const classes = [
       "rel-radio-option",
-      option.disabled ? "disabled" : "",
+      isDisabled ? "disabled" : "",
       option.error ? "error" : "",
     ]
       .filter(Boolean)
@@ -158,20 +122,16 @@ export class RelRadio extends LitElement {
           <input
             type="radio"
             name="${this.name}"
-            .value="${option.value}"
             .checked="${isChecked}"
-            ?disabled="${option.disabled}"
-            @change="${() => !option.disabled && this.onChange(option.value)}" />
+            ?disabled="${isDisabled}"
+            @change="${() => this.onChange(option.value)}"
+          />
           <span class="radio-custom"></span>
           <span class="radio-label">${option.label}</span>
         </div>
 
         ${option.supportingText
-          ? html`
-              <div class="radio-supporting ${option.error ? "error-text" : ""}">
-                ${option.supportingText}
-              </div>
-            `
+          ? html`<div class="radio-supporting">${option.supportingText}</div>`
           : ""}
       </label>
     `;
@@ -180,7 +140,7 @@ export class RelRadio extends LitElement {
   render() {
     return html`
       <div class="rel-radio-group">
-        ${this.options.map((option) => this.renderOption(option))}
+        ${this.options.map((o) => this.renderOption(o))}
       </div>
     `;
   }

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

@@ -137,6 +137,12 @@ export class RelSnackbar extends LitElement {
     this.setAutoDismiss();
   }
 
+  updated(changed: Map<string, unknown>) {
+    if (changed.has("duration") || changed.has("longerAction")) {
+      this.setAutoDismiss();
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.clearTimeout();

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

@@ -226,7 +226,10 @@ export class RelStepper extends LitElement {
       display: none;
     }
 
-    .rel-stepper.vertical.text-right .rel-step:last-child .indicator-wrapper .connector {
+    .rel-stepper.vertical.text-right
+      .rel-step:last-child
+      .indicator-wrapper
+      .connector {
       display: none;
     }
 
@@ -331,6 +334,21 @@ export class RelStepper extends LitElement {
     return classes.join(" ");
   }
 
+  private onStepClick(step: Step, index: number) {
+    if (step.status === "disabled") return;
+
+    this.dispatchEvent(
+      new CustomEvent("step-change", {
+        detail: {
+          index,
+          step,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   private renderIndicator(step: Step, index: number) {
     if (step.status === "done") {
       return html`
@@ -369,7 +387,10 @@ export class RelStepper extends LitElement {
       <div class="${stepperClasses}">
         ${this.steps.map(
           (step, idx) => html`
-            <div class="${this.getStepClasses(step)}">
+            <div
+              class="${this.getStepClasses(step)}"
+              @click="${() => this.onStepClick(step, idx)}"
+            >
               ${isVertical && isTextRight
                 ? html`
                     <!-- Indicator with connector below -->

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

@@ -102,12 +102,14 @@ export class RelSwitch extends LitElement {
     }
   `;
 
-  private toggle() {
+  private toggle(ev: Event) {
     if (this.disabled) return;
-    this.checked = !this.checked;
-    this.requestUpdate();
+
+    const input = ev.target as HTMLInputElement;
+    this.checked = input.checked;
+
     this.dispatchEvent(
-      new CustomEvent("changed", {
+      new CustomEvent<boolean>("changed", {
         detail: this.checked,
         bubbles: true,
         composed: true,
@@ -148,7 +150,7 @@ export class RelSwitch extends LitElement {
           type="checkbox"
           ?disabled=${this.disabled}
           .checked=${this.checked}
-          @change=${this.toggle}
+          @change=${(e: Event) => this.toggle(e)}
           @focus=${this.handleFocus}
           @blur=${this.handleBlur}
           @mousedown=${this.handleMouseDown}

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

@@ -10,7 +10,7 @@ export interface TabItem {
 @customElement("rel-tab")
 export class RelTab extends LitElement {
   @property({ type: Array }) tabs: TabItem[] = [];
-  @property({ type: Number }) activeIndex: number = 0;
+  @property({ type: Number, reflect: true }) activeIndex = 0;
 
   static styles = css`
     :host {
@@ -98,8 +98,8 @@ export class RelTab extends LitElement {
     if (this.tabs[index]?.disabled) return;
     this.activeIndex = index;
     this.dispatchEvent(
-      new CustomEvent("tab-change", {
-        detail: { index },
+      new CustomEvent<number>("tab-change", {
+        detail: index,
         bubbles: true,
         composed: true,
       })
@@ -116,15 +116,17 @@ export class RelTab extends LitElement {
 
   render() {
     return html`
-      <div class="tabs-wrapper">
+      <div class="tabs-wrapper" role="tablist">
         ${this.tabs.map(
           (tab, i) => html`
             <div
-              class="tab ${i === this.activeIndex ? "active" : ""} ${tab.disabled
-                ? "disabled"
-                : ""}"
+              class="tab ${i === this.activeIndex
+                ? "active"
+                : ""} ${tab.disabled ? "disabled" : ""}"
               role="tab"
-              tabindex="${tab.disabled ? -1 : 0}"
+              aria-selected="${i === this.activeIndex}"
+              aria-disabled="${tab.disabled ?? false}"
+              tabindex="${tab.disabled ? -1 : i === this.activeIndex ? 0 : -1}"
               @click="${() => this.selectTab(i)}"
               @keydown="${(e: KeyboardEvent) => this.onKeyDown(e, i)}"
             >

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

@@ -154,8 +154,8 @@ export class RelTextfield extends LitElement {
     const input = e.target as HTMLInputElement;
     this.value = input.value;
     this.dispatchEvent(
-      new CustomEvent("input-change", {
-        detail: { value: this.value },
+      new CustomEvent<string>("input-change", {
+        detail: this.value,
         bubbles: true,
         composed: true,
       })

package/dist/index.d.mts

@@ -20,9 +20,9 @@ declare class RelAlert extends LitElement {
     dismissible: boolean;
     dismissed: boolean;
     static styles: lit.CSSResult;
-    private get iconSvg();
     private dismissAlert;
-    render(): lit_html.TemplateResult<1> | null;
+    private get iconSvg();
+    render(): lit_html.TemplateResult<1>;
 }
 
 declare class RelAvatar extends LitElement {
@@ -62,6 +62,7 @@ declare class RelButton extends LitElement {
     disabled: boolean;
     static styles: lit.CSSResult;
     private get classes();
+    private handleClick;
     render(): lit_html.TemplateResult<1>;
 }
 
@@ -99,12 +100,12 @@ declare class RelChip extends LitElement {
     avatar?: string;
     removable: boolean;
     outline: boolean;
-    private removed;
+    /** IMPORTANT: reflected so CSS + Angular can see it */
+    removed: boolean;
     static styles: lit.CSSResult;
     private get classes();
     private handleRemove;
-    private handleKeyDown;
-    render(): lit_html.TemplateResult<1> | null;
+    render(): lit_html.TemplateResult<1>;
     private renderIcon;
 }
 
@@ -165,6 +166,7 @@ declare class RelProgress extends LitElement {
     private radius;
     private circumference;
     static styles: lit.CSSResult;
+    private get safeValue();
     private renderLinearDeterminate;
     private renderLinearIndeterminate;
     private renderCircularDeterminate;
@@ -183,9 +185,9 @@ declare class RelRadio extends LitElement {
     options: RadioOption[];
     name: string;
     selectedValue: string | null;
+    disabled: boolean;
     static styles: lit.CSSResult;
     private onChange;
-    private isChecked;
     private renderOption;
     render(): lit_html.TemplateResult<1>;
 }
@@ -266,6 +268,7 @@ declare class RelSnackbar extends LitElement {
     private timeout;
     static styles: lit.CSSResult;
     connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
     disconnectedCallback(): void;
     private setAutoDismiss;
     private clearTimeout;
@@ -292,6 +295,7 @@ declare class RelStepper extends LitElement {
     private isProgress;
     private isDisabled;
     private getStepClasses;
+    private onStepClick;
     private renderIndicator;
     render(): lit_html.TemplateResult<1>;
 }
@@ -369,4 +373,4 @@ declare class RelTooltip extends LitElement {
     render(): lit_html.TemplateResult<1>;
 }
 
-export { type MenuItem, type MenuType, type Orientation, type ProgressMode, type RadioOption, 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, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectSize, type SelectState, type SliderType, type SnackbarLines, type Step, type StepStatus, type StepperSize, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type ToastType, type TooltipPosition, type TrackStyle };
+export { type BreadcrumbItem, type MenuItem, type MenuType, type Orientation, type ProgressMode, type RadioOption, 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, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectSize, type SelectState, type SliderType, type SnackbarLines, type Step, type StepStatus, type StepperSize, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type ToastType, type TooltipPosition, type TrackStyle };