@reliability-design/web 1.4.6 → 1.4.7

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

@@ -1,142 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-avatar")
-export class RelAvatar extends LitElement {
-  @property({ type: String, reflect: true })
-  size: "lg" | "md" | "sm" | "xs" = "md";
-
-  @property({ type: String, reflect: true })
-  type: "image" | "text" | "icon" = "image";
-
-  @property({ type: String, reflect: true })
-  variant: "fill" | "subtle" | "outline" = "fill";
-
-  @property({ type: String }) src = "";
-  @property({ type: String }) text = "";
-  @property({ type: String }) alt = "Avatar";
-  @property({ type: String }) bg: string = "";
-  @property({ type: String }) color: string = "";
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-flex;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    .avatar {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      overflow: hidden;
-      box-sizing: border-box;
-      border: var(--rel-stroke-sm, 1px) solid transparent;
-      /* every avatar size role is a *-semibold role, so the base weight binds
-         one of them rather than the underlying primitive (per conventions §1) */
-      font-weight: var(--rel-body-sm-semibold-font-weight);
-      user-select: none;
-      text-transform: uppercase;
-    }
-
-    /* ── Variants ─────────────────────────────────────────────── */
-
-    :host([variant="fill"]) .avatar {
-      background-color: var(--rel-avatar-bg-fill, var(--rel-bg-neutral-inverse-2));
-      color: var(--rel-avatar-color-fill, var(--rel-text-inverse));
-    }
-
-    :host([variant="subtle"]) .avatar {
-      background-color: var(--rel-avatar-bg-subtle, var(--rel-bg-neutral-elevated-1));
-      color: var(--rel-avatar-color-subtle, var(--rel-text-default));
-    }
-
-    :host([variant="outline"]) .avatar {
-      background-color: transparent;
-      border-color: var(--rel-avatar-border-outline, var(--rel-border-default));
-      color: var(--rel-avatar-color-outline, var(--rel-text-default));
-    }
-
-    /* ── Sizes ────────────────────────────────────────────────── */
-
-    .avatar-lg {
-      width: 40px;
-      height: 40px; /* 20px */
-      font-family: var(--rel-body-xl-semibold-font-family);
-      font-weight: var(--rel-body-xl-semibold-font-weight);
-      font-size: var(--rel-body-xl-semibold-font-size);
-      line-height: var(--rel-body-xl-semibold-line-height);
-      letter-spacing: var(--rel-body-xl-semibold-letter-spacing);
-    }
-
-    .avatar-md {
-      /* Figma: body-lg-semibold family+weight on body-lg-regular metrics */
-      font-weight: var(--rel-body-lg-semibold-font-weight);
-      width: 32px;
-      height: 32px; /* 16px */
-      font-family: var(--rel-body-lg-semibold-font-family);
-      font-size: var(--rel-body-lg-regular-font-size);
-      line-height: var(--rel-body-lg-regular-line-height);
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-    }
-
-    .avatar-sm {
-      width: 24px;
-      height: 24px; /* 12px */
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-semibold-font-weight);
-      font-size: var(--rel-body-sm-semibold-font-size);
-      line-height: var(--rel-body-sm-semibold-line-height);
-      letter-spacing: var(--rel-body-sm-semibold-letter-spacing);
-    }
-
-    .avatar-xs {
-      width: 20px;
-      height: 20px; /* 10px */
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
-    }
-
-    /* ── Image ────────────────────────────────────────────────── */
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      background: var(--rel-bg-neutral);
-    }
-
-    /* ── Icon slot ────────────────────────────────────────────── */
-
-    .icon-slot {
-      width: 100%;
-      height: 100%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      color: inherit;
-    }
-
-    .icon-slot ::slotted(svg) {
-      width: 50%;
-      height: 50%;
-    }
-
-  `;
-
-  render() {
-    return html`
-      <div part="base" class="avatar avatar-${this.size}" style=${[this.bg ? `background-color:${this.bg}` : "", this.color ? `color:${this.color}` : ""].filter(Boolean).join(";")}>
-        ${this.type === "image" && this.src
-          ? html`<img part="icon" src=${this.src} alt=${this.alt} />`
-          : this.type === "text"
-          ? html`<span part="label">${this.text}</span>`
-          : html`<span part="icon" class="icon-slot"><slot></slot></span>`}
-      </div>
-    `;
-  }
-}

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

@@ -1,175 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-badge")
-export class RelBadge extends LitElement {
-  @property({ type: String }) number = "";
-
-  @property({ type: String }) ariaLabel: string = "";
-
-  @property({ type: String }) suffix: string = "notifications";
-
-  @property({ type: String, reflect: true })
-  size: "sm" | "md" | "lg" | "xl" = "md";
-
-  @property({ type: String, reflect: true })
-  variant: "dot" | "number" = "number";
-
-  /**
-   * Direct CSS color override for the badge background. Accepts any valid
-   * CSS color value: hex, rgb(...), hsl(...), named color, or var(--token).
-   *
-   * Clear it (set to `''`) to fall back to the default token.
-   */
-  @property({ type: String, reflect: true })
-  color = "";
-
-  /**
-   * Direct CSS color override for the badge text/icon color. Accepts any
-   * valid CSS color value: hex, rgb(...), hsl(...), named color, or var(--token).
-   *
-   * Clear it (set to `''`) to fall back to the default (white).
-   */
-  @property({ type: String, reflect: true, attribute: "text-color" })
-  textColor = "";
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-flex;
-    }
-
-    .badge {
-      font-weight: var(--rel-body-sm-semibold-font-weight);
-      font-size: var(--rel-body-sm-semibold-font-size);
-      line-height: var(--rel-body-sm-semibold-line-height);
-      letter-spacing: var(--rel-body-sm-semibold-letter-spacing);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      font-family: var(--rel-fonts-font-family, sans-serif);
-      background-color: var(--rel-badge-bg, var(--rel-bg-danger));
-      color: var(--rel-badge-color, var(--rel-text-static-light));
-      /* 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 — min-width (not width) lets multi-character content
-       like "999+" grow the badge into a pill instead of overflowing a fixed circle. */
-    .badge-sm {
-      min-width: 20px;
-      height: 20px;
-      padding: 0 4px;
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
-    }
-
-    /* Size tiers follow Figma Badge S/M/L/XL (20/24/28/40px).
-       Figma binds a *-regular family with *-semibold metrics on S/M/L. */
-    .badge-md {
-      min-width: 24px;
-      height: 24px;
-      padding: 0 6px;
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-semibold-font-weight);
-      font-size: var(--rel-body-sm-semibold-font-size);
-      line-height: var(--rel-body-sm-semibold-line-height);
-      letter-spacing: var(--rel-body-sm-semibold-letter-spacing);
-    }
-
-    .badge-lg {
-      min-width: 28px;
-      height: 28px;
-      padding: 0 6px;
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-semibold-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);
-    }
-
-    .badge-xl {
-      min-width: 40px;
-      height: 40px;
-      padding: 0 8px;
-      font-family: var(--rel-body-xl-semibold-font-family);
-      font-weight: var(--rel-body-xl-semibold-font-weight);
-      font-size: var(--rel-body-xl-semibold-font-size);
-      line-height: var(--rel-body-xl-semibold-line-height);
-      letter-spacing: var(--rel-body-xl-semibold-letter-spacing);
-    }
-
-    /* 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;
-    }
-
-    .badge-dot.badge-xl {
-      width: 12px;
-      height: 12px;
-      min-width: 0;
-      padding: 0;
-    }
-  `;
-
-  private get classes() {
-    return ["badge", `badge-${this.size}`, `badge-${this.variant}`].join(" ");
-  }
-
-  private get computedAriaLabel() {
-    if (this.ariaLabel) return this.ariaLabel;
-    return this.number ? `${this.number} ${this.suffix}` : `New ${this.suffix}`;
-  }
-
-  override updated(changedProperties: Map<PropertyKey, unknown>): void {
-    if (changedProperties.has("color")) {
-      if (this.color) {
-        this.style.setProperty("--rel-badge-bg", this.color);
-      } else {
-        this.style.removeProperty("--rel-badge-bg");
-      }
-    }
-
-    if (changedProperties.has("textColor")) {
-      if (this.textColor) {
-        this.style.setProperty("--rel-badge-color", this.textColor);
-      } else {
-        this.style.removeProperty("--rel-badge-color");
-      }
-    }
-  }
-
-  render() {
-    return html`
-      <span part="base" class="${this.classes}" role="status" aria-label=${this.computedAriaLabel}>
-        ${this.variant === "number" ? this.number : null}
-      </span>
-    `;
-  }
-}

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

@@ -1,106 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export interface BreadcrumbItem {
-  label: string;
-  url?: string;
-}
-
-@customElement("rel-breadcrumbs")
-export class RelBreadcrumbs extends LitElement {
-  @property({ type: Array })
-  items: BreadcrumbItem[] = [];
-
-  static styles = css`
-    :host {
-      display: block;
-      color: var(--rel-text-default);
-      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);
-    }
-
-    nav {
-      width: 100%;
-    }
-
-    ol {
-      display: flex;
-      flex-wrap: wrap;
-      padding: 0;
-      margin: 0;
-      list-style: none;
-    }
-
-    li {
-      gap: var(--rel-spacing-xs);
-      display: flex;
-      align-items: center;
-    }
-
-    a {
-      text-decoration: none;
-      font-weight: var(--rel-body-md-regular-font-weight);
-      color: var(--rel-text-body);
-    }
-
-    a:hover {
-      text-decoration: underline;
-      color: var(--rel-text-default);
-    }
-
-    a:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: 2px;
-      border-radius: 2px;
-    }
-
-    .current {
-      font-weight: var(--rel-body-md-semibold-font-weight);
-      color: var(--rel-text-default);
-      cursor: default;
-    }
-
-    svg {
-      stroke: currentColor;
-      width: 16px;
-      height: 16px;
-      margin: 0 10px;
-    }
-  `;
-
-  render() {
-    return html`
-      <nav part="base" aria-label="Breadcrumb">
-        <ol>
-          ${this.items.map((item, index) => {
-            const isLast = index === this.items.length - 1;
-
-            return html`
-              <li>
-                ${item.url && !isLast
-                  ? html`<a href=${item.url}>${item.label}</a>`
-                  : html`<span part="label" class="current" aria-current="page">${item.label}</span>`}
-                ${!isLast
-                  ? html`
-                      <svg viewBox="0 0 24 24" aria-hidden="true">
-                        <polyline
-                          points="9 18 15 12 9 6"
-                          fill="none"
-                          stroke-width="2"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        />
-                      </svg>
-                    `
-                  : null}
-              </li>
-            `;
-          })}
-        </ol>
-      </nav>
-    `;
-  }
-}