@reliability-design/web 1.2.0 → 1.3.1

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-drawer/rel-drawer.ts

@@ -282,7 +282,10 @@ export class RelDrawer extends LitElement {
 
     if (this.modal) {
       this.updateComplete.then(() => {
-        const focusTarget = this.shadowRoot?.querySelector<HTMLElement>("[autofocus], .close-button, .panel");
+        const focusTarget =
+          this.querySelector<HTMLElement>("[autofocus]") ??
+          this.querySelector<HTMLElement>(".close-button") ??
+          this.querySelector<HTMLElement>(".panel");
         focusTarget?.focus();
       });
     }
@@ -387,7 +390,7 @@ export class RelDrawer extends LitElement {
 
       const firstFocusable = focusable[0];
       const lastFocusable = focusable[focusable.length - 1];
-      const activeElement = this.shadowRoot?.activeElement || document.activeElement;
+      const activeElement = document.activeElement;
 
       if (e.shiftKey) {
         if (activeElement === firstFocusable) {

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

@@ -44,6 +44,7 @@ export class RelMenubar extends LitElement {
       font-family: var(--rel-fontFamilies-primary);
       font-size: var(--rel-fontSizes-sm);
       height: 40px;
+      width: fit-content;
     }
 
     .menubar-trigger {