@reliability-design/web 1.4.6 → 1.4.7

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

@@ -1,522 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { announce } from "../../utils/announce";
-
-@customElement("rel-pagination")
-export class RelPagination extends LitElement {
-  /** Layout type from Figma: extended (numbered pages), compact (prev/next + page text), count-text (range + nav) */
-  @property({ type: String, reflect: true })
-  type: "extended" | "compact" | "count-text" = "extended";
-
-  /** Controlled current page */
-  @property({ type: Number }) page?: number;
-  /** Uncontrolled starting page */
-  @property({ type: Number }) defaultPage = 1;
-  /** Total number of pages */
-  @property({ type: Number }) totalPages = 0;
-  /** Total items (used with perPage to auto-compute totalPages in count-text mode) */
-  @property({ type: Number }) totalItems = 0;
-  /** Items per page (count-text mode) */
-  @property({ type: Number }) perPage = 10;
-  /** Show "Viewing page X of Y" label below extended pagination */
-  @property({ type: Boolean }) showLabel = false;
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: String }) hrefTemplate = "";
-  @property({ type: String }) ariaLabel = "Pagination";
-
-  @state() private currentPage = 1;
-
-  static styles = css`
-    :host {
-      /* container-type: inline-size applies INLINE-SIZE CONTAINMENT — the width
-         must resolve without consulting the contents. Combined with a
-         shrink-to-fit box (inline-block) that is contradictory and the host
-         collapses to width:0, which made the whole component invisible.
-         A size container must be block-level (or have a definite width). */
-      container-type: inline-size;
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family, 'Poppins', sans-serif);
-    }
-
-    :host([type="count-text"]) {
-      display: block;
-      width: 100%;
-    }
-
-    :host([disabled]) {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    :host([disabled]) button {
-      pointer-events: none;
-    }
-
-    /* ── Root / Stack containers ──────────────────────────────── */
-
-    .pag-root {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--rel-spacing-md);
-    }
-
-    .pag-stack {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-sm);
-    }
-
-    .pag-count {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--rel-spacing-xl);
-      width: 100%;
-    }
-
-    /* count-text right-side nav: no gap (40+24+40 = 104px, matches Figma) */
-    .pag-count-nav {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    /* ── Page number list (tighter 4px gap) ──────────────────── */
-
-    .pag-numbers {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-2xs);
-    }
-
-    /* ── Prev / Next — circular buttons ──────────────────────── */
-
-    .pag-nav-btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      padding: 0;
-      border-radius: var(--rel-border-radius-full-rounded);
-      border: 1px solid var(--rel-border-default);
-      background: var(--rel-bg-neutral);
-      cursor: pointer;
-      color: var(--rel-action-neutral-label-icons-ghost);
-      box-sizing: border-box;
-      transition: background 0.15s ease;
-      flex-shrink: 0;
-    }
-
-    .pag-nav-btn:hover:not(:disabled) {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    .pag-nav-btn:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    .pag-nav-btn:disabled {
-      opacity: 0.35;
-      cursor: not-allowed;
-    }
-
-    .pag-nav-btn svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    /* ── Page number buttons — square with 8px radius ─────────── */
-
-    .pag-page-btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: auto;
-      min-width: 40px;
-      height: 40px;
-      padding: 0 var(--rel-spacing-xs);
-      border-radius: var(--rel-border-radius-sm);
-      border: 1px solid var(--rel-border-default);
-      background: var(--rel-bg-neutral);
-      cursor: pointer;
-      color: var(--rel-text-default);
-      box-sizing: border-box;
-      transition: background 0.15s ease, border-color 0.15s ease;
-      font-family: var(--rel-body-md-medium-font-family);
-      font-weight: var(--rel-body-md-medium-font-weight);
-      font-size: var(--rel-body-md-medium-font-size);
-      line-height: var(--rel-body-md-medium-line-height);
-      letter-spacing: var(--rel-body-md-medium-letter-spacing);
-    }
-
-    .pag-page-btn:hover {
-      background: var(--rel-bg-neutral-elevated-1);
-    }
-
-    .pag-page-btn:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-    }
-
-    /* Figma: current page is an inverse chip */
-    .pag-page-btn[aria-current="page"] {
-      background: var(--rel-bg-neutral-inverse-2);
-      border-color: var(--rel-bg-neutral-inverse-2);
-      color: var(--rel-text-inverse);
-    }
-
-    /* ── Ellipsis ─────────────────────────────────────────────── */
-
-    .pag-ellipsis {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 40px;
-      height: 40px;
-      color: var(--rel-text-default);
-      user-select: none;
-      font-family: var(--rel-body-md-medium-font-family);
-      font-weight: var(--rel-body-md-medium-font-weight);
-      font-size: var(--rel-body-md-medium-font-size);
-      line-height: var(--rel-body-md-medium-line-height);
-      letter-spacing: var(--rel-body-md-medium-letter-spacing);
-    }
-
-    /* ── Compact: "Page X of Y" ───────────────────────────────── */
-
-    .pag-page-text {
-      color: var(--rel-text-default);
-      white-space: nowrap;
-
-      font-family: var(--rel-body-md-medium-font-family);
-
-      font-weight: var(--rel-body-md-medium-font-weight);
-
-      font-size: var(--rel-body-md-medium-font-size);
-
-      line-height: var(--rel-body-md-medium-line-height);
-
-      letter-spacing: var(--rel-body-md-medium-letter-spacing);
-
-    }
-
-    /* ── Count-text: "1-5 of 50" ─────────────────────────────── */
-
-    .pag-count-text {
-      color: var(--rel-text-default);
-      white-space: nowrap;
-
-      font-family: var(--rel-body-md-medium-font-family);
-
-      font-weight: var(--rel-body-md-medium-font-weight);
-
-      font-size: var(--rel-body-md-medium-font-size);
-
-      line-height: var(--rel-body-md-medium-line-height);
-
-      letter-spacing: var(--rel-body-md-medium-letter-spacing);
-
-    }
-
-    /* ── Count-text: inline current page number ───────────────── */
-
-    .pag-current-num {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 24px;
-      height: 40px;
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-md-medium-font-family);
-      font-weight: var(--rel-body-md-medium-font-weight);
-      font-size: var(--rel-body-md-medium-font-size);
-      line-height: var(--rel-body-md-medium-line-height);
-      letter-spacing: var(--rel-body-md-medium-letter-spacing);
-    }
-
-    /* ── Extended sub-label ───────────────────────────────────── */
-
-    .pag-label {
-      color: var(--rel-text-caption);
-      text-align: center;
-
-      font-family: var(--rel-body-md-regular-font-family);
-
-      font-weight: var(--rel-body-md-regular-font-weight);
-
-      font-size: var(--rel-body-md-regular-font-size);
-
-      line-height: var(--rel-body-md-regular-line-height);
-
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-
-    }
-    /* ── Task 4: responsive behaviour (conventions §4) ───────────────── */
-    .auto-compact {
-      display: none;
-    }
-
-    .pag-numbers {
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-
-    @container (max-width: 768px) {
-      .pag-page-btn {
-        width: auto;
-        min-width: 36px;
-      }
-    }
-
-    /* 480–768px: shrink the number window to current ±1 plus first/last */
-    @container (min-width: 480px) and (max-width: 768px) {
-      .pag-page-btn:not(.near):not(.edge):not([aria-current="page"]),
-      .pag-ellipsis {
-        display: none;
-      }
-    }
-
-    /* <480px: swap to the compact layout automatically */
-    @container (max-width: 479px) {
-      .auto-extended {
-        display: none;
-      }
-
-      .auto-compact {
-        display: block;
-      }
-    }
-
-    /* Fallback for browsers without container queries */
-    @supports not (container-type: inline-size) {
-      @media (max-width: 768px) {
-        .pag-page-btn {
-          width: auto;
-          min-width: 36px;
-        }
-      }
-
-      @media (min-width: 480px) and (max-width: 768px) {
-        .pag-page-btn:not(.near):not(.edge):not([aria-current="page"]),
-        .pag-ellipsis {
-          display: none;
-        }
-      }
-
-      @media (max-width: 479px) {
-        .auto-extended {
-          display: none;
-        }
-
-        .auto-compact {
-          display: block;
-        }
-      }
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    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);
-    const totalItemsAttr = this.getAttribute("total-items");
-    if (totalItemsAttr) this.totalItems = Number(totalItemsAttr);
-    const perPageAttr = this.getAttribute("per-page");
-    if (perPageAttr) this.perPage = Number(perPageAttr);
-    this.currentPage = this.page ?? this.defaultPage;
-  }
-
-  updated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has("page") && this.page !== undefined) {
-      this.currentPage = this.page;
-    }
-  }
-
-  private get activePage(): number {
-    return this.page ?? this.currentPage;
-  }
-
-  private get computedTotalPages(): number {
-    if (this.totalPages > 0) return this.totalPages;
-    if (this.totalItems > 0 && this.perPage > 0) {
-      return Math.ceil(this.totalItems / this.perPage);
-    }
-    return 0;
-  }
-
-  private generatePageNumbers(): number[] {
-    const pages: number[] = [];
-    const current = this.activePage;
-    const total = this.computedTotalPages;
-    if (total <= 0) return pages;
-    if (total <= 7) {
-      for (let i = 1; i <= total; i++) pages.push(i);
-    } else if (current <= 4) {
-      for (let i = 1; i <= 5; i++) pages.push(i);
-      pages.push(-1);
-      pages.push(total);
-    } else if (current >= total - 3) {
-      pages.push(1);
-      pages.push(-1);
-      for (let i = total - 4; i <= total; i++) pages.push(i);
-    } else {
-      pages.push(1);
-      pages.push(-1);
-      pages.push(current - 1);
-      pages.push(current);
-      pages.push(current + 1);
-      pages.push(-1);
-      pages.push(total);
-    }
-    return pages;
-  }
-
-  /** Abbreviate large page numbers (368178 → "368k") so buttons stay compact.
-      Exact below 10,000; floored to k up to 1M; then M with one decimal. */
-  private formatPageLabel(n: number): string {
-    if (n < 10_000) return String(n);
-    if (n < 1_000_000) return `${Math.floor(n / 1000)}k`;
-    const m = Math.floor(n / 100_000) / 10;
-    return `${Number.isInteger(m) ? m.toFixed(0) : m}M`;
-  }
-
-  private handlePageChange(newPage: number) {
-    const total = this.computedTotalPages;
-    if (this.disabled || newPage < 1 || newPage > total || newPage === this.activePage) return;
-    if (this.page === undefined) this.currentPage = newPage;
-    announce(`Page ${newPage} of ${total}`);
-    const focused = this.shadowRoot?.activeElement as HTMLButtonElement | null;
-    if (focused?.classList.contains("pag-nav-btn")) {
-      this.updateComplete.then(() => {
-        if (focused.isConnected && focused.disabled) {
-          const sibling = focused.parentElement?.querySelector<HTMLButtonElement>(
-            ".pag-nav-btn:not(:disabled)"
-          );
-          sibling?.focus();
-        }
-      });
-    }
-    this.dispatchEvent(
-      new CustomEvent("rel-change", {
-        detail: { page: newPage },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private renderChevronLeft() {
-    return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>`;
-  }
-
-  private renderChevronRight() {
-    return html`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>`;
-  }
-
-  private renderNavBtn(dir: "prev" | "next") {
-    const current = this.activePage;
-    const total = this.computedTotalPages;
-    const isPrev = dir === "prev";
-    const isDisabled = isPrev ? current <= 1 : current >= total;
-    const targetPage = isPrev ? current - 1 : current + 1;
-
-    return html`
-      <button
-        type="button"
-        class="pag-nav-btn"
-        aria-label="${isPrev ? "Previous page" : "Next page"}"
-        ?disabled="${isDisabled}"
-        @click="${() => this.handlePageChange(targetPage)}"
-      >
-        ${isPrev ? this.renderChevronLeft() : this.renderChevronRight()}
-      </button>
-    `;
-  }
-
-  private renderExtended() {
-    const pages = this.generatePageNumbers();
-    const current = this.activePage;
-    const total = this.computedTotalPages;
-
-    return html`
-      <div part="base" class="pag-root" role="navigation" aria-label="${this.ariaLabel}">
-        <div class="pag-stack">
-          ${this.renderNavBtn("prev")}
-          <div class="pag-numbers">
-            ${pages.map((p) => {
-              if (p === -1) return html`<span class="pag-ellipsis">...</span>`;
-              /* Only far first/last buttons abbreviate. Anything in the
-                 visible window stays exact — abbreviating window pages like
-                 368174/368175 would render identical "368k" buttons. */
-              const isNear = Math.abs(p - current) <= 1;
-              const isEdge = p === 1 || p === total;
-              const label = isEdge && !isNear ? this.formatPageLabel(p) : String(p);
-              return html`<button
-                type="button"
-                class="pag-page-btn ${isNear ? "near" : ""} ${p === 1 || p === total ? "edge" : ""}"
-                aria-label="Page ${p}"
-                title="${label === String(p) ? nothing : `Page ${p}`}"
-                aria-current="${p === current ? "page" : "false"}"
-                @click="${() => this.handlePageChange(p)}"
-              >${label}</button>`;
-            })}
-          </div>
-          ${this.renderNavBtn("next")}
-        </div>
-        ${this.showLabel
-          ? html`<span class="pag-label">Viewing page ${current} of ${total}</span>`
-          : null}
-      </div>
-    `;
-  }
-
-  private renderCompact() {
-    const current = this.activePage;
-    const total = this.computedTotalPages;
-
-    return html`
-      <div class="pag-stack" role="navigation" aria-label="${this.ariaLabel}">
-        ${this.renderNavBtn("prev")}
-        <span class="pag-page-text">Page ${current} of ${total}</span>
-        ${this.renderNavBtn("next")}
-      </div>
-    `;
-  }
-
-  private renderCountText() {
-    const current = this.activePage;
-    const total = this.computedTotalPages;
-    const effectiveTotalItems = this.totalItems > 0 ? this.totalItems : total * this.perPage;
-    const start = (current - 1) * this.perPage + 1;
-    const end = Math.min(current * this.perPage, effectiveTotalItems);
-
-    return html`
-      <div part="label" class="pag-count" role="navigation" aria-label="${this.ariaLabel}">
-        <span class="pag-count-text">${start}–${end} of ${effectiveTotalItems}</span>
-        <div class="pag-count-nav">
-          ${this.renderNavBtn("prev")}
-          <span class="pag-current-num">${current}</span>
-          ${this.renderNavBtn("next")}
-        </div>
-      </div>
-    `;
-  }
-
-  render() {
-    if (this.type === "compact") return this.renderCompact();
-    if (this.type === "count-text") return this.renderCountText();
-    /* Task 4: extended auto-switches to the compact layout under 480px
-       (container query, media-query fallback) — same markup, CSS-toggled. */
-    return html`
-      <div class="auto-extended">${this.renderExtended()}</div>
-      <div class="auto-compact">${this.renderCompact()}</div>
-    `;
-  }
-}

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

@@ -1,2 +0,0 @@
-export * from "./rel-popover";
-export * from "./rel-popover-content";

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

@@ -1,81 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-popover-content")
-export class RelPopoverContent extends LitElement {
-  @property({ type: String, attribute: "aria-label" }) ariaLabel = "";
-
-  /** Figma Size axis (S/M/L): panel padding 12/16/20px. */
-  @property({ type: String, reflect: true }) size: "sm" | "md" | "lg" = "md";
-
-  static styles = css`
-    :host {
-      gap: var(--rel-spacing-md);
-      color: var(--rel-text-body);
-      display: block;
-      width: 100%;
-      max-width: 400px;
-    }
-
-    .popover-content {
-      background: var(--rel-bg-neutral);
-      border: var(--rel-stroke-sm) solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-sm);
-      box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-lg);
-      color: var(--rel-text-label);
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    /* Figma Size axis: S = 12px padding, M = 16px, L = 20px */
-    :host([size="sm"]) .popover-content {
-      padding: var(--rel-spacing-sm);
-    }
-
-    :host([size="md"]) .popover-content {
-      padding: var(--rel-spacing-md);
-    }
-
-    :host([size="lg"]) .popover-content {
-      padding: var(--rel-spacing-lg);
-    }
-
-    .popover-content ::slotted(h1),
-    .popover-content ::slotted(h2),
-    .popover-content ::slotted(h3),
-    .popover-content ::slotted(h4),
-    .popover-content ::slotted(h5),
-    .popover-content ::slotted(h6) {
-      margin: 0 0 var(--rel-spacing-xs);
-      font-family: var(--rel-headings-sm-font-family);
-      font-weight: var(--rel-headings-sm-font-weight);
-      font-size: var(--rel-headings-sm-font-size);
-      line-height: var(--rel-headings-sm-line-height);
-      letter-spacing: var(--rel-headings-sm-letter-spacing);
-      color: var(--rel-text-label);
-      margin-bottom: var(--rel-spacing-2xs);
-    }
-
-    .popover-content ::slotted(p) {
-      margin: 0 0 var(--rel-spacing-sm);
-      color: var(--rel-text-placeholder);
-      line-height: var(--rel-body-md-regular-line-height);
-    }
-
-    .popover-content ::slotted(p:last-child) {
-      margin-bottom: 0;
-    }
-  `;
-
-  render() {
-    return html`
-      <div class="popover-content" part="content" role="dialog" aria-label="${this.ariaLabel}">
-        <slot></slot>
-      </div>
-    `;
-  }
-}