@reliability-design/web 1.0.6 → 1.2.0

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

@@ -24,8 +24,6 @@ export class RelOtp extends LitElement {
   @property({ type: String }) size: "sm" | "md" | "lg" = "md";
 
   @state() private cells: string[] = [];
-  @state() private focusedIndex: number = -1;
-
   @query(".hidden-input") private hiddenInput?: HTMLInputElement;
 
   private isUpdatingFromValue = false;
@@ -38,30 +36,30 @@ export class RelOtp extends LitElement {
 
     :host([disabled]) {
       opacity: 0.6;
-      pointer-events: none;
+      cursor: not-allowed;
     }
 
     .otp-root {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-2xs, 8px);
+      gap: var(--rel-spacing-space-2xs);
       position: relative;
     }
 
     .otp-group {
       display: flex;
-      gap: var(--rel-spacing-space-2xs, 8px);
+      gap: var(--rel-spacing-space-2xs);
     }
 
     .otp-separator {
       display: flex;
       align-items: center;
       justify-content: center;
-      color: var(--rel-colors-gray-divider);
+      color: var(--rel-gray-divider-default);
       font-size: var(--rel-fontSizes-lg);
       font-weight: var(--rel-fontWeights-semibold);
       user-select: none;
-      padding: 0 var(--rel-spacing-space-3xs, 4px);
+      padding: 0 var(--rel-spacing-space-3xs);
     }
 
     .otp-separator.hidden {
@@ -71,17 +69,17 @@ export class RelOtp extends LitElement {
     .otp-cell {
       width: 40px;
       height: 48px;
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-border-default);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
       border-radius: var(--rel-borders-radius-border-radius-200);
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
       font-family: var(--rel-fontFamilies-primary);
       font-size: var(--rel-fontSizes-lg);
       font-weight: var(--rel-fontWeights-medium);
       text-align: center;
-      color: var(--rel-text-primary);
+      color: var(--rel-color-text-primary);
       outline: none;
       transition: border-color 0.15s ease, box-shadow 0.15s ease;
-      caret-color: var(--rel-colors-gray-primary);
+      caret-color: var(--rel-color-text-primary);
     }
 
     /* Size variants */
@@ -98,27 +96,31 @@ export class RelOtp extends LitElement {
     }
 
     .otp-cell::placeholder {
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-color-text-placeholder);
       opacity: 0.6;
     }
 
     .otp-cell:hover:not(:disabled):not(:read-only) {
-      border-color: var(--rel-colors-gray-primary);
+      border-color: var(--rel-color-text-primary);
     }
 
     .otp-cell:focus-visible {
-      border-color: var(--rel-colors-gray-heading);
-      box-shadow: 0 0 0 2px var(--rel-border-default);
+      border-color: var(--rel-color-text-heading);
+      box-shadow: 0 0 0 2px var(--rel-color-border-default);
     }
 
     .otp-cell:disabled {
-      background: var(--rel-colors-gray-light);
-      color: var(--rel-colors-gray-disabled-text);
+      background: var(--rel-color-bg-secondary);
+      color: var(--rel-color-text-disabled);
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) .otp-cell {
       cursor: not-allowed;
     }
 
     .otp-cell:read-only {
-      background: var(--rel-colors-gray-surface);
+      background: var(--rel-color-bg-tertiary);
       cursor: default;
     }
 
@@ -146,6 +148,7 @@ export class RelOtp extends LitElement {
         transition: none;
       }
     }
+
   `;
 
   connectedCallback() {
@@ -382,16 +385,10 @@ export class RelOtp extends LitElement {
 
   private handleFocus(e: FocusEvent) {
     const input = e.currentTarget as HTMLInputElement;
-    const index = parseInt(input.dataset.index || "0", 10);
-
-    this.focusedIndex = index;
-
-    // Select all text on focus for easy replacement
     input.select();
   }
 
   private handleBlur() {
-    this.focusedIndex = -1;
   }
 
   private focusCell(index: number) {
@@ -458,7 +455,7 @@ export class RelOtp extends LitElement {
                     data-index="${index}"
                     type="${this.mask ? "password" : "text"}"
                     inputmode="${this.getInputMode()}"
-                    autocomplete="${index === 0 ? this.autocomplete : "off"}"
+                    autocomplete="new-password"
                     pattern="${this.pattern || ""}"
                     placeholder="${this.placeholder}"
                     maxlength="1"

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

@@ -1,15 +1,21 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 type DensityType = "comfortable" | "compact";
 type VariantType = "default" | "icons";
-type PageItem = { type: "page"; value: number } | { type: "ellipsis" } | { type: "prev" } | { type: "next" };
+type PageItem =
+  | { type: "page"; value: number }
+  | { type: "ellipsis" }
+  | { type: "spacer" }
+  | { type: "prev" }
+  | { type: "next" };
 
 @customElement("rel-pagination")
 export class RelPagination extends LitElement {
   @property({ type: Number }) page?: number;
   @property({ type: Number }) defaultPage = 1;
-  @property({ type: Number }) totalPages!: number;
+  @property({ type: Number }) totalPages = 0;
   @property({ type: Number }) siblingCount = 1;
   @property({ type: Number }) boundaryCount = 1;
   @property({ type: Boolean, reflect: true }) disabled = false;
@@ -30,6 +36,7 @@ export class RelPagination extends LitElement {
       display: flex;
       align-items: center;
       gap: var(--rel-spacing-space-2xs);
+      min-width: max-content;
     }
 
     nav.compact {
@@ -41,35 +48,47 @@ export class RelPagination extends LitElement {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      min-width: 40px;
+      width: 40px;
       height: 40px;
-      padding: 0 var(--rel-spacing-space-sm);
+      padding: 0;
       font-family: var(--rel-fontFamilies-primary);
       font-size: var(--rel-fontSizes-sm);
       font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-heading);
-      background: var(--rel-colors-white);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+      color: var(--rel-color-text-heading);
+      background: var(--rel-color-bg-primary);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
       border-radius: var(--rel-borders-radius-border-radius-200);
       cursor: pointer;
-      transition: all 0.15s ease;
+      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
       text-decoration: none;
       outline: none;
       user-select: none;
     }
 
+    button.prev-btn, button.next-btn,
+    a.prev-btn, a.next-btn {
+      width: auto;
+      padding: 0 var(--rel-spacing-space-sm);
+    }
+
     nav.compact button,
     nav.compact a {
-      min-width: 32px;
+      width: 32px;
       height: 32px;
-      padding: 0 var(--rel-spacing-space-xs);
+      padding: 0;
       font-size: var(--rel-fontSizes-xs);
     }
 
+    nav.compact button.prev-btn, nav.compact button.next-btn,
+    nav.compact a.prev-btn, nav.compact a.next-btn {
+      width: auto;
+      padding: 0 var(--rel-spacing-space-xs);
+    }
+
     button:hover:not(:disabled),
     a:hover:not([aria-disabled="true"]) {
-      background: var(--rel-surface-secondary, #fafafa);
-      border-color: var(--rel-colors-gray-primary, #333);
+      background: var(--rel-color-bg-secondary);
+      border-color: var(--rel-color-text-primary);
     }
 
     button:focus-visible,
@@ -82,40 +101,50 @@ export class RelPagination extends LitElement {
     a[aria-disabled="true"] {
       opacity: 0.5;
       cursor: not-allowed;
-      pointer-events: none;
     }
 
     button[aria-current="page"],
     a[aria-current="page"] {
-      background: var(--rel-colors-gray-heading);
-      color: var(--rel-colors-white);
-      border-color: var(--rel-colors-gray-heading);
+      background: var(--rel-color-bg-selected);
+      color: var(--rel-color-text-primary);
+      border-color: var(--rel-color-text-heading);
       font-weight: var(--rel-fontWeights-semibold);
     }
 
     button[aria-current="page"]:hover,
     a[aria-current="page"]:hover {
-      background: var(--rel-colors-gray-primary);
-      border-color: var(--rel-colors-gray-primary);
+      background: var(--rel-color-bg-selected);
+      border-color: var(--rel-color-text-heading);
     }
 
     .ellipsis {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      min-width: 40px;
+      width: 40px;
       height: 40px;
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-color-text-placeholder);
       font-size: var(--rel-fontSizes-sm);
       user-select: none;
     }
 
     nav.compact .ellipsis {
-      min-width: 32px;
+      width: 32px;
       height: 32px;
       font-size: var(--rel-fontSizes-xs);
     }
 
+    .pagination-spacer {
+      display: inline-flex;
+      width: 40px;
+      height: 40px;
+    }
+
+    nav.compact .pagination-spacer {
+      width: 32px;
+      height: 32px;
+    }
+
     .icon {
       width: 16px;
       height: 16px;
@@ -127,6 +156,10 @@ export class RelPagination extends LitElement {
       height: 14px;
     }
 
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
     :host([disabled]) nav {
       opacity: 0.5;
       pointer-events: none;
@@ -135,6 +168,19 @@ export class RelPagination extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    // Manually parse numeric attributes in case they were set before upgrade
+    const totalPagesAttr = this.getAttribute('total-pages');
+    if (totalPagesAttr) {
+      this.totalPages = Number(totalPagesAttr);
+    }
+    const pageAttr = this.getAttribute('page');
+    if (pageAttr) {
+      this.page = Number(pageAttr);
+    }
+    const defaultPageAttr = this.getAttribute('default-page');
+    if (defaultPageAttr) {
+      this.defaultPage = Number(defaultPageAttr);
+    }
     this.currentPage = this.page ?? this.defaultPage;
   }
 
@@ -153,49 +199,39 @@ export class RelPagination extends LitElement {
     const items: PageItem[] = [];
     const current = this.activePage;
     const total = this.totalPages;
-    const sibling = this.siblingCount;
-    const boundary = this.boundaryCount;
+
+    if (total <= 0) return items;
 
     items.push({ type: "prev" });
 
-    // Calculate page ranges
-    const leftBoundary = Array.from({ length: Math.min(boundary, total) }, (_, i) => i + 1);
-    const rightBoundary = Array.from(
-      { length: Math.min(boundary, total) },
-      (_, i) => total - boundary + i + 1
-    ).filter((p) => p > 0);
-
-    const leftSiblings = Array.from(
-      { length: sibling },
-      (_, i) => current - sibling + i
-    ).filter((p) => p > boundary && p < current);
-
-    const rightSiblings = Array.from(
-      { length: sibling },
-      (_, i) => current + i + 1
-    ).filter((p) => p > current && p <= total - boundary);
-
-    // Combine all visible pages
-    const visiblePages = new Set([
-      ...leftBoundary,
-      ...leftSiblings,
-      current,
-      ...rightSiblings,
-      ...rightBoundary,
-    ]);
-
-    const sortedPages = Array.from(visiblePages).sort((a, b) => a - b);
-
-    // Build items with ellipsis
-    sortedPages.forEach((page, index) => {
-      if (index > 0) {
-        const prevPage = sortedPages[index - 1];
-        if (page - prevPage > 1) {
-          items.push({ type: "ellipsis" });
-        }
+    if (total <= 7) {
+      for (let i = 1; i <= total; i++) {
+        items.push({ type: "page", value: i });
       }
-      items.push({ type: "page", value: page });
-    });
+    } else if (current <= 4) {
+      // Near start: [1, 2, 3, 4, 5] [ellipsis] [last]
+      for (let i = 1; i <= 5; i++) {
+        items.push({ type: "page", value: i });
+      }
+      items.push({ type: "ellipsis" });
+      items.push({ type: "page", value: total });
+    } else if (current >= total - 3) {
+      // Near end: [1] [ellipsis] [last-4, last-3, last-2, last-1, last]
+      items.push({ type: "page", value: 1 });
+      items.push({ type: "ellipsis" });
+      for (let i = total - 4; i <= total; i++) {
+        items.push({ type: "page", value: i });
+      }
+    } else {
+      // Middle: [1] [ellipsis] [current-1, current, current+1] [ellipsis] [last]
+      items.push({ type: "page", value: 1 });
+      items.push({ type: "ellipsis" });
+      items.push({ type: "page", value: current - 1 });
+      items.push({ type: "page", value: current });
+      items.push({ type: "page", value: current + 1 });
+      items.push({ type: "ellipsis" });
+      items.push({ type: "page", value: total });
+    }
 
     items.push({ type: "next" });
 
@@ -222,6 +258,11 @@ export class RelPagination extends LitElement {
     );
   }
 
+  private getHref(page: number): string {
+    if (!this.hrefTemplate) return "#";
+    return this.hrefTemplate.replace(/\{page\}/, String(page));
+  }
+
   private handleKeyDown(event: KeyboardEvent, callback: () => void) {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
@@ -249,6 +290,10 @@ export class RelPagination extends LitElement {
     const current = this.activePage;
     const useLinks = !!this.hrefTemplate;
 
+    if (item.type === "spacer") {
+      return html`<span class="pagination-spacer"></span>`;
+    }
+
     if (item.type === "ellipsis") {
       return html`<span class="ellipsis">…</span>`;
     }
@@ -258,10 +303,11 @@ export class RelPagination extends LitElement {
       const targetPage = current - 1;
 
       if (useLinks) {
-        const href = disabled ? "#" : this.hrefTemplate.replace("{page}", String(targetPage));
+        const href = disabled ? "#" : this.getHref(targetPage);
         return html`
           <a
             href="${href}"
+            class="prev-btn"
             aria-label="Go to previous page"
             aria-disabled="${disabled}"
             @click="${(e: Event) => {
@@ -281,6 +327,7 @@ export class RelPagination extends LitElement {
       return html`
         <button
           type="button"
+          class="prev-btn"
           aria-label="Go to previous page"
           ?disabled="${disabled}"
           @click="${() => this.handlePageChange(targetPage)}"
@@ -295,10 +342,11 @@ export class RelPagination extends LitElement {
       const targetPage = current + 1;
 
       if (useLinks) {
-        const href = disabled ? "#" : this.hrefTemplate.replace("{page}", String(targetPage));
+        const href = disabled ? "#" : this.getHref(targetPage);
         return html`
           <a
             href="${href}"
+            class="next-btn"
             aria-label="Go to next page"
             aria-disabled="${disabled}"
             @click="${(e: Event) => {
@@ -318,6 +366,7 @@ export class RelPagination extends LitElement {
       return html`
         <button
           type="button"
+          class="next-btn"
           aria-label="Go to next page"
           ?disabled="${disabled}"
           @click="${() => this.handlePageChange(targetPage)}"
@@ -332,7 +381,7 @@ export class RelPagination extends LitElement {
     const isCurrent = pageNum === current;
 
     if (useLinks) {
-      const href = this.hrefTemplate.replace("{page}", String(pageNum));
+      const href = this.getHref(pageNum);
       return html`
         <a
           href="${href}"

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-popover-content")
 export class RelPopoverContent extends LitElement {
@@ -13,14 +14,14 @@ export class RelPopoverContent extends LitElement {
     }
 
     .popover-content {
-      background: var(--rel-colors-white);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-colors-gray-border);
+      background: var(--rel-color-bg-primary);
+      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
       border-radius: var(--rel-borders-radius-border-radius-200);
       box-shadow: var(--rel-shadows-shadow-300);
       padding: var(--rel-spacing-space-md);
       font-family: var(--rel-fontFamilies-primary);
       font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-colors-gray-heading);
+      color: var(--rel-color-text-heading);
     }
 
     .popover-content ::slotted(h1),
@@ -31,12 +32,12 @@ export class RelPopoverContent extends LitElement {
     .popover-content ::slotted(h6) {
       margin: 0 0 var(--rel-spacing-space-xs);
       font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-colors-gray-heading);
+      color: var(--rel-color-text-heading);
     }
 
     .popover-content ::slotted(p) {
       margin: 0 0 var(--rel-spacing-space-sm);
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-color-text-placeholder);
       line-height: var(--rel-lineHeights-md);
     }
 

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 type SideType = "top" | "right" | "bottom" | "left";
 type AlignType = "start" | "center" | "end";
@@ -35,6 +36,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
@@ -47,8 +49,12 @@ export class RelPopover extends LitElement {
     }
 
     :host([disabled]) {
-      pointer-events: none;
       opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) * {
+      pointer-events: none;
     }
 
     .content-wrapper {
@@ -81,10 +87,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 +138,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);
   };
 
@@ -239,7 +238,8 @@ export class RelPopover extends LitElement {
   }
 
   private restoreFocus() {
-    this.triggerEl?.focus();
+    (this.returnFocusEl ?? this.triggerEl)?.focus();
+    this.returnFocusEl = null;
   }
 
   private trapFocusLoop(e: KeyboardEvent) {
@@ -278,12 +278,25 @@ export class RelPopover extends LitElement {
     const t = this.triggerEl.getBoundingClientRect();
     const c = this.contentWrapper.getBoundingClientRect();
 
-    let top = t.bottom + this.sideOffset;
-    let left = t.left + t.width / 2 - c.width / 2;
+    let top = 0;
+    let left = 0;
 
-    if (this.side === "top") top = t.top - c.height - this.sideOffset;
-    if (this.side === "left") left = t.left - c.width - this.sideOffset;
-    if (this.side === "right") left = t.right + this.sideOffset;
+    if (this.side === "top") {
+      top = t.top - c.height - this.sideOffset;
+      left = t.left + t.width / 2 - c.width / 2;
+    }
+    if (this.side === "bottom") {
+      top = t.bottom + this.sideOffset;
+      left = t.left + t.width / 2 - c.width / 2;
+    }
+    if (this.side === "left") {
+      top = t.top + t.height / 2 - c.height / 2;
+      left = t.left - c.width - this.sideOffset;
+    }
+    if (this.side === "right") {
+      top = t.top + t.height / 2 - c.height / 2;
+      left = t.right + this.sideOffset;
+    }
 
     top = Math.max(8, Math.min(top, window.innerHeight - c.height - 8));
     left = Math.max(8, Math.min(left, window.innerWidth - c.width - 8));
@@ -295,10 +308,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 +328,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>
     `;
   }