@reliability-design/web 1.3.0 → 1.3.1

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

@@ -28,7 +28,7 @@ export class RelAlert extends LitElement {
 
     .rel-alert {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       gap: var(--rel-spacing-space-xs);
       padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
       border-radius: var(--rel-borders-radius-border-radius-200);
@@ -54,9 +54,15 @@ export class RelAlert extends LitElement {
       opacity: 0.9;
     }
 
+    .rel-icon {
+      margin-top: 2px;
+      flex-shrink: 0;
+    }
+
     .rel-icon svg {
       width: 16px;
       height: 16px;
+      display: block;
     }
 
     .rel-link {
@@ -69,6 +75,7 @@ export class RelAlert extends LitElement {
 
     .rel-close {
       margin-left: auto;
+      align-self: flex-start;
       background: none;
       border: none;
       cursor: pointer;

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

@@ -43,46 +43,63 @@ export class RelBadge extends LitElement {
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      box-sizing: border-box;
       font-family: var(--rel-fontFamilies-primary, sans-serif);
       font-weight: var(--rel-fontWeights-semibold, 600);
       background-color: var(--rel-badge-bg, var(--rel-error-surface-default));
       color: var(--rel-badge-color, #ffffff);
-      border-radius: 50%;
+      /* Large fixed radius (not 50%) — stays a perfect circle for 1-2 digits,
+         but becomes a pill instead of clipping when content like "999+"
+         is wider than the minimum circle. */
+      border-radius: 999px;
+      white-space: nowrap;
     }
 
-    /* NUMBER BADGES */
+    /* NUMBER BADGES — min-width (not width) lets multi-character content
+       like "999+" grow the badge into a pill instead of overflowing a fixed circle. */
     .badge-sm {
-      width: 20px;
+      min-width: 20px;
       height: 20px;
+      padding: 0 4px;
       font-size: var(--rel-fontSizes-xs, 12px);
     }
 
     .badge-md {
-      width: 28px;
+      min-width: 28px;
       height: 28px;
+      padding: 0 6px;
       font-size: var(--rel-fontSizes-sm, 14px);
     }
 
     .badge-lg {
-      width: 40px;
+      min-width: 40px;
       height: 40px;
+      padding: 0 8px;
       font-size: var(--rel-fontSizes-lg, 20px);
     }
 
-    /* DOT BADGES */
+    /* DOT BADGES — explicitly reset min-width/padding inherited from the
+       number-badge size rules above; otherwise min-width wins over this
+       smaller width and the dot gets stretched into a squashed pill. */
     .badge-dot.badge-sm {
       width: 8px;
       height: 8px;
+      min-width: 0;
+      padding: 0;
     }
 
     .badge-dot.badge-md {
       width: 10px;
       height: 10px;
+      min-width: 0;
+      padding: 0;
     }
 
     .badge-dot.badge-lg {
       width: 12px;
       height: 12px;
+      min-width: 0;
+      padding: 0;
     }
   `;
 

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

@@ -1,4 +1,5 @@
 import "../../styles/vars-v2.css";
+import "../rel-badge/rel-badge";
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -23,9 +24,33 @@ export class RelButton extends LitElement {
 
   @property({ type: String, attribute: "aria-label" }) ariaLabel: string | null = null;
 
+  /** Numeric/overflow text shown in a corner badge (e.g. "3", "999+"). Ignored when badgeDot is set. */
+  @property({ type: String }) badge = "";
+
+  /** Shows a small corner dot instead of a numbered badge — takes precedence over `badge`. */
+  @property({ type: Boolean, attribute: "badge-dot" }) badgeDot = false;
+
   static styles = css`
     :host {
       display: inline-flex;
+      position: relative;
+    }
+
+    .btn-badge {
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      pointer-events: none;
+    }
+
+    /* Icon buttons are a 40px circle (radius 20). An 8px dot's center needs to
+       land ON that circle's edge at the 45° corner point — which works out to
+       roughly 2px inward from each edge (R - R/√2 - dot-radius ≈ 1.9px), not
+       outside it like the numbered badge. Negative offsets here would float
+       the dot in the empty bounding-box corner outside the visible circle. */
+    .btn-badge[variant="dot"] {
+      top: 2px;
+      right: 2px;
     }
 
     button {
@@ -293,6 +318,8 @@ export class RelButton extends LitElement {
   }
 
   render() {
+    const showBadge = this.badgeDot || !!this.badge;
+
     return html`
       <button
         class="${this.classes}"
@@ -303,6 +330,14 @@ export class RelButton extends LitElement {
       >
         <slot></slot>
       </button>
+      ${showBadge
+        ? html`<rel-badge
+            class="btn-badge"
+            variant=${this.badgeDot ? "dot" : "number"}
+            number=${this.badge}
+            size="sm"
+          ></rel-badge>`
+        : null}
     `;
   }
 }

package/dist/components/rel-date-picker/rel-date-picker.ts

@@ -17,17 +17,43 @@ export class RelDatePicker extends LitElement {
   @property({ type: String }) label: string | null = null;
   @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: Boolean }) required = false;
+  @property({ type: Boolean, reflect: true }) readonly = false;
+
+  // Date bounds. minDate/maxDate are the standard names; min/max are kept as
+  // deprecated aliases (minDate/maxDate win when both are set).
+  @property({ type: String, attribute: "min-date" }) minDate: string | null = null;
+  @property({ type: String, attribute: "max-date" }) maxDate: string | null = null;
+  /** @deprecated use minDate */
   @property({ type: String }) min: string | null = null;
+  /** @deprecated use maxDate */
   @property({ type: String }) max: string | null = null;
+
   @property({ type: String, attribute: "week-start" }) weekStart: "sun" | "mon" = "sun";
   @property({ type: String }) locale = "en-US";
   @property({ type: Boolean, reflect: true }) open = false;
   @property({ type: Boolean, attribute: "close-on-select" }) closeOnSelect = true;
   @property({ type: Boolean }) clearable = false;
 
+  // ── Standardized input API (mirrors rel-textfield) ──
+  @property({ type: Boolean }) error = false;
+  @property({ type: String, attribute: "error-message" }) errorMessage?: string;
+  @property({ type: String, attribute: "helper-text" }) helperText?: string;
+  @property({ type: String }) name?: string;
+  @property({ type: String }) size: "small" | "medium" | "large" = "medium";
+  @property({ type: String, reflect: true }) variant: "outlined" = "outlined";
+  @property({ type: Boolean, reflect: true }) fullWidth = false;
+
   // Custom disabled predicate (not settable via attribute)
   public isDateDisabled?: (date: Date) => boolean;
 
+  // minDate/maxDate supersede the deprecated min/max aliases
+  private get minBound(): string | null {
+    return this.minDate ?? this.min;
+  }
+  private get maxBound(): string | null {
+    return this.maxDate ?? this.max;
+  }
+
   @state() private viewYear: number = new Date().getFullYear();
   @state() private viewMonth: number = new Date().getMonth();
   @state() private focusedDate: Date | null = null;
@@ -40,11 +66,17 @@ export class RelDatePicker extends LitElement {
 
   static styles = css`
     :host {
-      display: inline-block;
+      display: block;
       font-family: var(--rel-fontFamilies-primary);
       position: relative;
     }
 
+    /* Intrinsic width by default; set fullWidth to fill the parent. */
+    :host(:not([fullwidth])) {
+      display: inline-block;
+      width: auto;
+    }
+
     :host([disabled]) {
       opacity: 0.6;
       cursor: not-allowed;
@@ -54,6 +86,10 @@ export class RelDatePicker extends LitElement {
       pointer-events: none;
     }
 
+    :host([readonly]) .trigger-button {
+      cursor: default;
+    }
+
     .date-picker-wrapper {
       display: flex;
       flex-direction: column;
@@ -66,6 +102,21 @@ export class RelDatePicker extends LitElement {
       color: var(--rel-text-heading);
     }
 
+    .required-mark {
+      color: var(--rel-error-surface-default, #cc0000);
+      margin-left: 2px;
+    }
+
+    /* Support text (helperText / errorMessage) */
+    .date-picker-support {
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-color-text-placeholder);
+    }
+
+    .date-picker-support.error {
+      color: var(--rel-error-surface-default, #cc0000);
+    }
+
     .trigger-button {
       width: 100%;
       min-width: 200px;
@@ -100,6 +151,28 @@ export class RelDatePicker extends LitElement {
       background: var(--rel-surface-secondary);
     }
 
+    /* Error state */
+    .trigger-button.error,
+    .trigger-button.error:hover:not(:disabled) {
+      border-color: var(--rel-error-surface-default, #cc0000);
+    }
+
+    .trigger-button.error:focus-visible {
+      outline-color: var(--rel-error-surface-default, #cc0000);
+      border-color: var(--rel-error-surface-default, #cc0000);
+    }
+
+    /* Size variants (medium is the base .trigger-button style) */
+    .date-picker-wrapper.small .trigger-button {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      font-size: var(--rel-fontSizes-sm);
+    }
+
+    .date-picker-wrapper.large .trigger-button {
+      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-md);
+      font-size: var(--rel-fontSizes-lg);
+    }
+
     .trigger-content {
       flex: 1;
       color: var(--rel-text-primary);
@@ -428,13 +501,13 @@ export class RelDatePicker extends LitElement {
   private isDateDisabledInternal(date: Date): boolean {
     if (this.disabled) return true;
 
-    if (this.min) {
-      const minDate = this.parseISODate(this.min);
+    if (this.minBound) {
+      const minDate = this.parseISODate(this.minBound);
       if (minDate && date < minDate) return true;
     }
 
-    if (this.max) {
-      const maxDate = this.parseISODate(this.max);
+    if (this.maxBound) {
+      const maxDate = this.parseISODate(this.maxBound);
       if (maxDate && date > maxDate) return true;
     }
 
@@ -535,13 +608,13 @@ export class RelDatePicker extends LitElement {
     let startYear = currentYear - 100;
     let endYear = currentYear + 10;
 
-    if (this.min) {
-      const minDate = this.parseISODate(this.min);
+    if (this.minBound) {
+      const minDate = this.parseISODate(this.minBound);
       if (minDate) startYear = Math.max(startYear, minDate.getFullYear() - 5);
     }
 
-    if (this.max) {
-      const maxDate = this.parseISODate(this.max);
+    if (this.maxBound) {
+      const maxDate = this.parseISODate(this.maxBound);
       if (maxDate) endYear = Math.min(endYear, maxDate.getFullYear() + 5);
     }
 
@@ -553,7 +626,7 @@ export class RelDatePicker extends LitElement {
   }
 
   private toggleCalendarPopover() {
-    if (this.disabled) return;
+    if (this.disabled || this.readonly) return;
     this.open = !this.open;
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
@@ -597,7 +670,7 @@ export class RelDatePicker extends LitElement {
   }
 
   private selectDay(day: CalendarDay) {
-    if (day.isDisabled || this.disabled) return;
+    if (day.isDisabled || this.disabled || this.readonly) return;
 
     const newValue = this.formatISODate(day.date);
     this.value = newValue;
@@ -746,14 +819,34 @@ export class RelDatePicker extends LitElement {
     const months = this.getMonthsList();
     const years = this.getYearsList();
 
+    const isError = this.error;
+    const belowText = isError && this.errorMessage ? this.errorMessage : this.helperText;
+    const describedById = belowText ? "date-picker-desc" : undefined;
+    const wrapperClasses = [
+      "date-picker-wrapper",
+      this.size,
+      isError ? "error" : "",
+      this.readonly ? "readonly" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
     return html`
-      <div class="date-picker-wrapper">
+      <div class="${wrapperClasses}">
         ${this.label
-          ? html`<label class="label" id="date-picker-label">${this.label}</label>`
+          ? html`<label class="label" id="date-picker-label"
+              >${this.label}${this.required
+                ? html`<span class="required-mark" aria-hidden="true">*</span>`
+                : nothing}</label
+            >`
+          : nothing}
+
+        ${this.name
+          ? html`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />`
           : nothing}
 
         <button
-          class="trigger-button"
+          class="trigger-button ${isError ? "error" : ""}"
           type="button"
           ?disabled=${this.disabled}
           @click=${this.toggleCalendarPopover}
@@ -762,6 +855,9 @@ export class RelDatePicker extends LitElement {
           aria-haspopup="dialog"
           aria-expanded=${this.open}
           aria-required=${this.required}
+          aria-invalid=${isError}
+          aria-readonly=${this.readonly}
+          aria-describedby=${describedById ?? nothing}
           aria-labelledby=${this.label ? "date-picker-label" : nothing}
         >
           <span class="trigger-content ${this.value ? "" : "placeholder"}">
@@ -914,6 +1010,12 @@ export class RelDatePicker extends LitElement {
             )}
           </div>
         </div>
+
+        ${belowText
+          ? html`<div class="date-picker-support ${isError ? "error" : ""}" id=${describedById}>
+              ${belowText}
+            </div>`
+          : nothing}
       </div>
     `;
   }

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

@@ -6,6 +6,7 @@ import "../rel-badge/rel-badge";
 export interface TabItem {
   label: string;
   badge?: number;
+  badgeDot?: boolean;
   disabled?: boolean;
 }
 
@@ -14,6 +15,8 @@ export class RelTabItem extends LitElement {
   @property({ type: String }) label: string = "";
   @property({ type: String }) value: string = "";
   @property({ type: Number }) badge: number = 0;
+  /** Shows a small dot instead of a numbered badge — takes precedence over `badge`. */
+  @property({ type: Boolean, attribute: "badge-dot" }) badgeDot: boolean = false;
   @property({ type: Boolean }) disabled: boolean = false;
 
   render() {
@@ -106,11 +109,12 @@ export class RelTab extends LitElement {
       .filter((el): el is RelTabItem => el instanceof RelTabItem);
   }
 
-  private get _effectiveTabs(): Array<{ label: string; badge?: number; disabled?: boolean }> {
+  private get _effectiveTabs(): Array<{ label: string; badge?: number; badgeDot?: boolean; disabled?: boolean }> {
     if (this._tabItems.length > 0) {
       return this._tabItems.map((item) => ({
         label: item.label,
         badge: item.badge || 0,
+        badgeDot: item.badgeDot,
         disabled: item.disabled,
       }));
     }
@@ -173,9 +177,11 @@ export class RelTab extends LitElement {
               @keydown="${(e: KeyboardEvent) => this.onKeyDown(e, i)}"
             >
               <span class="tab-label">${tab.label}</span>
-              ${tab.badge
-                ? html`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>`
-                : ""}
+              ${tab.badgeDot
+                ? html`<rel-badge variant="dot" size="sm"></rel-badge>`
+                : tab.badge
+                  ? html`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>`
+                  : ""}
               <span class="tab-underline"></span>
             </div>
           `