@reliability-design/web 1.1.1 → 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,9 +1,15 @@
 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 {
@@ -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-color-bg-selected);
       color: var(--rel-color-text-primary);
-      border-color: var(--rel-colors-gray-heading);
+      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 });
+      }
+    } 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 });
       }
-      items.push({ type: "page", value: page });
-    });
+    } 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" });
 
@@ -254,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>`;
     }
@@ -267,6 +307,7 @@ export class RelPagination extends LitElement {
         return html`
           <a
             href="${href}"
+            class="prev-btn"
             aria-label="Go to previous page"
             aria-disabled="${disabled}"
             @click="${(e: Event) => {
@@ -286,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)}"
@@ -304,6 +346,7 @@ export class RelPagination extends LitElement {
         return html`
           <a
             href="${href}"
+            class="next-btn"
             aria-label="Go to next page"
             aria-disabled="${disabled}"
             @click="${(e: Event) => {
@@ -323,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)}"

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";
@@ -48,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 {
@@ -233,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) {
@@ -272,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));

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 export type ProgressMode =
   | "linear-determinate"
@@ -21,7 +22,7 @@ export class RelProgress extends LitElement {
   static styles = css`
     :host {
       display: block;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      font-family: var(--rel-fontFamilies-primary);
     }
 
     :host([mode*="circular"]) {
@@ -30,15 +31,15 @@ export class RelProgress extends LitElement {
 
     /* Linear */
     .linear-track {
-      background: var(--rel-colors-gray-border, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      background: var(--rel-color-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-0);
       height: 6px;
       overflow: hidden;
       width: 100%;
     }
 
     .linear-bar {
-      background: var(--rel-colors-black);
+      background: var(--rel-color-text-primary);
       height: 100%;
       transition: width 0.3s ease;
     }
@@ -75,15 +76,15 @@ export class RelProgress extends LitElement {
 
     .circular-bg {
       fill: none;
-      stroke: var(--rel-colors-gray-border);
+      stroke: var(--rel-color-border-default);
       stroke-width: 3;
     }
 
     .circular-progress {
       fill: none;
-      stroke: var(--rel-colors-black);
+      stroke: var(--rel-color-text-primary);
       stroke-width: 3;
-      stroke-linecap: round;
+      stroke-linecap: butt;
       transition: stroke-dashoffset 0.35s;
     }
 
@@ -93,8 +94,8 @@ export class RelProgress extends LitElement {
     }
 
     .spinner-path {
-      stroke: var(--rel-colors-black);
-      stroke-linecap: round;
+      stroke: var(--rel-color-text-primary);
+      stroke-linecap: butt;
       animation: dash 1.5s ease-in-out infinite;
     }