@reliability-design/web 1.4.5 → 1.4.7

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

@@ -1,204 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
-export type ToastType = "default" | "error";
-
-@customElement("rel-toast")
-export class RelToast extends LitElement {
-  @property({ type: String }) message: string = "";
-  @property({ type: String }) type: ToastType = "default";
-  @property({ type: String }) actionLabel?: string;
-  @property({ type: Number }) duration: number = 4000;
-  @property({ type: Boolean, reflect: true }) show = false;
-
-  @state() private visible: boolean = false;
-  private _dismissTimer: ReturnType<typeof setTimeout> | null = null;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      position: fixed;
-      bottom: 24px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      justify-content: center;
-      width: 100%;
-      pointer-events: none;
-      z-index: var(--rel-z-toast, 9000);
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    /* Toast container */
-    .toast {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      background-color: var(--rel-bg-neutral-inverse-1);
-      color: var(--rel-text-inverse);
-      border-radius: var(--rel-border-radius-sm);
-      padding: var(--rel-spacing-sm) var(--rel-spacing-md);
-      box-shadow: var(--rel-shadows-shadow-300);
-      pointer-events: all;
-      animation: fadeInUp 0.25s ease;
-      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);
-    }
-
-    .toast.error {
-      background-color: var(--rel-bg-danger);
-      color: var(--rel-text-static-light);
-    }
-
-    .toast.hidden {
-      display: none;
-    }
-
-    /* Message */
-    .toast-message {
-      flex: 1;
-    }
-
-    /* Action button */
-    .toast-action {
-      background: transparent;
-      border: none;
-      color: var(--rel-action-neutral-label-icons-fill-inverse);
-      font-family: var(--rel-action-md-font-family);
-      font-weight: var(--rel-action-md-font-weight);
-      font-size: var(--rel-action-md-font-size);
-      line-height: var(--rel-action-md-line-height);
-      letter-spacing: var(--rel-action-md-letter-spacing);
-      cursor: pointer;
-      transition: opacity 0.2s;
-    }
-
-    .toast-action:hover {
-      background: var(--rel-bg-neutral);
-      color: var(--rel-text-default);
-      opacity: 0.75;
-    }
-
-    .toast-action:focus-visible {
-      outline: 2px solid var(--rel-text-static-light);
-      outline-offset: 2px;
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    /* Close button */
-    .toast-close {
-      background: transparent;
-      color: var(--rel-action-neutral-label-icons-ghost);
-      border: none;
-      color: inherit;
-      font-size: 1rem;
-      cursor: pointer;
-      line-height: 1;
-      padding: var(--rel-spacing-2xs);
-      margin-left: var(--rel-spacing-2xs);
-    }
-
-    .toast-close:hover {
-      opacity: 0.75;
-    }
-
-    .toast-close:focus-visible {
-      outline: 2px solid var(--rel-text-static-light);
-      outline-offset: 2px;
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-
-    @media (prefers-reduced-motion: reduce) {
-      .toast {
-        animation: none;
-      }
-    }
-
-    /* Animations */
-    @keyframes fadeInUp {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-  `;
-
-  willUpdate(changed: Map<string, unknown>) {
-    if (!changed.has('show')) return;
-    if (this.show) {
-      this.visible = true;
-      if (this._dismissTimer) clearTimeout(this._dismissTimer);
-      if (this.duration > 0) {
-        this._dismissTimer = setTimeout(() => this.close(), this.duration);
-      }
-    } else {
-      this.visible = false;
-      if (this._dismissTimer) {
-        clearTimeout(this._dismissTimer);
-        this._dismissTimer = null;
-      }
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._dismissTimer) clearTimeout(this._dismissTimer);
-  }
-
-  open() {
-    this.show = true;
-  }
-
-  close() {
-    this.show = false;
-    this.visible = false;
-    if (this._dismissTimer) {
-      clearTimeout(this._dismissTimer);
-      this._dismissTimer = null;
-    }
-    this.dispatchEvent(
-      new CustomEvent("dismissed", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private handleActionClick(event: Event) {
-    event.stopPropagation();
-    this.dispatchEvent(
-      new CustomEvent("action", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this.close();
-  }
-
-  render() {
-    return html`
-      <div part="base" class="toast ${this.type} ${this.visible ? "" : "hidden"}" role="status" aria-live="polite">
-        <span part="label" class="toast-message">${this.message}</span>
-
-        ${this.actionLabel
-          ? html`<button
-              part="action" class="toast-action"
-              @click="${this.handleActionClick}"
-            >
-              ${this.actionLabel}
-            </button>`
-          : ""}
-
-        <button part="close-button" class="toast-close" @click="${this.close}" aria-label="Dismiss">✕</button>
-      </div>
-    `;
-  }
-}

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

@@ -1,190 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export type TooltipPosition = "above" | "below" | "left" | "right";
-export type TooltipType = "single-line" | "multi-line";
-
-@customElement("rel-tooltip")
-export class RelTooltip extends LitElement {
-  @property({ type: String }) text: string = "";
-  @property({ type: String }) position: TooltipPosition = "above";
-  @property({ type: Boolean, attribute: "show-tail" }) showTail: boolean =
-    false;
-
-  /** Figma "Type": single-line stays on one line; multi-line wraps at a max width. */
-  @property({ type: String, reflect: true }) type: TooltipType = "single-line";
-
-  // Stable id so aria-describedby can reference the bubble across renders.
-  private uniqueId = Math.random().toString(36).slice(2);
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-block;
-      position: relative;
-    }
-
-    /* Tooltip container */
-    .tooltip-bubble {
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-medium-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);
-      position: absolute;
-      background-color: var(--rel-bg-neutral-inverse-2);
-      color: var(--rel-text-inverse);
-      padding: var(--rel-spacing-xs, 8px)
-        var(--rel-spacing-sm, 12px);
-      border-radius: var(--rel-border-radius-sm, 8px);
-      white-space: nowrap;
-      z-index: 1000;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.2s ease;
-      overflow: visible;
-    }
-
-    /* Figma Type=Multi Line: wrap inside a bounded bubble */
-    :host([type="multi-line"]) .tooltip-bubble {
-      white-space: normal;
-      max-width: 220px;
-      width: max-content;
-    }
-
-    :host(:hover) .tooltip-bubble,
-    :host(:focus-within) .tooltip-bubble {
-      opacity: 1;
-    }
-
-    /* Escape-dismissed (APG): stays hidden until hover/focus leaves and
-       returns. Declared after the hover/focus rules so source order wins. */
-    :host([data-dismissed]) .tooltip-bubble {
-      opacity: 0;
-    }
-
-    /* Positioning */
-    .tooltip-bubble.above {
-      bottom: calc(100% + 6px);
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .tooltip-bubble.below {
-      top: calc(100% + 6px);
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    .tooltip-bubble.left {
-      right: calc(100% + 6px);
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    .tooltip-bubble.right {
-      left: calc(100% + 6px);
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    /* Tail/Arrow */
-    .tooltip-tail {
-      position: absolute;
-      width: 0;
-      height: 0;
-      display: block;
-    }
-
-    .tooltip-bubble.above .tooltip-tail,
-    .tooltip-bubble.below .tooltip-tail {
-      left: 50%;
-      transform: translateX(-50%);
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-    }
-
-    .tooltip-bubble.above .tooltip-tail {
-      bottom: -6px;
-      border-top: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-bottom: none;
-    }
-
-    .tooltip-bubble.below .tooltip-tail {
-      top: -6px;
-      border-bottom: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-top: none;
-    }
-
-    .tooltip-bubble.left .tooltip-tail,
-    .tooltip-bubble.right .tooltip-tail {
-      top: 50%;
-      transform: translateY(-50%);
-      border-top: 6px solid transparent;
-      border-bottom: 6px solid transparent;
-    }
-
-    .tooltip-bubble.left .tooltip-tail {
-      right: -6px;
-      border-left: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-right: none;
-    }
-
-    .tooltip-bubble.right .tooltip-tail {
-      left: -6px;
-      border-right: 6px solid var(--rel-bg-neutral-inverse-2);
-      border-left: none;
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("keydown", this.onKeydown);
-    this.addEventListener("mouseleave", this.clearDismissed);
-    this.addEventListener("focusout", this.clearDismissed);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("keydown", this.onKeydown);
-    this.removeEventListener("mouseleave", this.clearDismissed);
-    this.removeEventListener("focusout", this.clearDismissed);
-  }
-
-  /** APG: Escape dismisses the tooltip. Not swallowed — an enclosing dialog
-   *  may legitimately close on the same keystroke. */
-  private onKeydown = (e: KeyboardEvent) => {
-    if (e.key === "Escape") this.toggleAttribute("data-dismissed", true);
-  };
-
-  private clearDismissed = () => {
-    this.removeAttribute("data-dismissed");
-  };
-
-  firstUpdated() {
-    this.linkTrigger();
-  }
-
-  private linkTrigger() {
-    const slot = this.shadowRoot?.querySelector("slot");
-    if (!slot) return;
-    const trigger = slot.assignedElements()[0];
-    if (trigger) {
-      trigger.setAttribute("aria-describedby", `tooltip-${this.uniqueId}`);
-    }
-  }
-
-  render() {
-    return html`
-      <slot @slotchange="${this.linkTrigger}"></slot>
-      <div
-        part="panel" class="tooltip-bubble ${this.position}"
-        id="tooltip-${this.uniqueId}"
-        role="tooltip"
-      >
-        ${this.text}
-        ${this.showTail ? html`<span part="indicator" class="tooltip-tail"></span>` : ""}
-      </div>
-    `;
-  }
-}

package/dist/components/rel-topbar/rel-topbar-actions.ts

@@ -1,27 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-
-/**
- * @deprecated Part of the deprecated rel-topbar family. Use plain
- * `rel-button` elements inside the "Navbar" recipe at /docs/recipes/navbar.
- */
-@customElement("rel-topbar-actions")
-export class RelTopbarActions extends LitElement {
-  static styles = css`
-    .actions {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs, 8px);
-    }
-  `;
-
-  render() {
-    return html`<div class="actions"><slot></slot></div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-topbar-actions": RelTopbarActions;
-  }
-}

package/dist/components/rel-topbar/rel-topbar-brand.ts

@@ -1,54 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-/**
- * @deprecated Part of the deprecated rel-topbar family. Use a plain
- * `<a>`/logo markup inside the "Navbar" recipe at /docs/recipes/navbar.
- */
-@customElement("rel-topbar-brand")
-export class RelTopbarBrand extends LitElement {
-  @property({ type: String }) src: string = "";
-  @property({ type: String }) href: string = "/";
-  @property({ type: String }) label: string = "";
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-flex;
-      align-items: center;
-    }
-
-    a {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      text-decoration: none;
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-md-semibold-font-family);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-      font-size: var(--rel-body-md-semibold-font-size);
-      line-height: var(--rel-body-md-semibold-line-height);
-      letter-spacing: var(--rel-body-md-semibold-letter-spacing);
-    }
-
-    img {
-      display: block;
-    }
-  `;
-
-  render() {
-    return html`
-      <a href="${this.href}" aria-label="${this.label || "Home"}">
-        ${this.src
-          ? html`<img src="${this.src}" alt="${this.label}" />`
-          : html`<slot>${this.label}</slot>`}
-      </a>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-topbar-brand": RelTopbarBrand;
-  }
-}

package/dist/components/rel-topbar/rel-topbar-dropdown-item.ts

@@ -1,69 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-/**
- * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu`'s
- * item slots or `rel-popover` content in the "Navbar" recipe at /docs/recipes/navbar.
- */
-@customElement("rel-topbar-dropdown-item")
-export class RelTopbarDropdownItem extends LitElement {
-  @property({ type: String }) label: string = "";
-  @property({ type: String }) href: string = "#";
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  static styles = css`
-    .dropdown-item {
-      display: block;
-      padding: var(--rel-spacing-xs, 8px) var(--rel-spacing-md, 16px);
-      color: var(--rel-text-default);
-      text-decoration: none;
-      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);
-    }
-
-    .dropdown-item:hover {
-      background: var(--rel-action-overlay-hover);
-      border-radius: 0;
-    }
-
-    :host([active]) .dropdown-item {
-      color: var(--rel-topbar-item-active-color, var(--rel-text-success));
-      font-weight: var(--rel-fonts-weight-body-semibold, 600);
-    }
-
-  `;
-
-  private _handleClick(e: MouseEvent) {
-    if (this.hasAttribute("disabled")) {
-      e.preventDefault();
-      return;
-    }
-    e.preventDefault();
-    this.dispatchEvent(new CustomEvent("rel-select", {
-      detail: { value: this.href, label: this.label },
-      bubbles: true,
-      composed: true,
-    }));
-    this.dispatchEvent(new CustomEvent("rel-nav-select", {
-      detail: { value: this.href, label: this.label },
-      bubbles: true,
-      composed: true,
-    }));
-    this.active = true;
-    const siblings = this.parentElement?.querySelectorAll("rel-topbar-dropdown-item");
-    siblings?.forEach(s => { if (s !== this) (s as any).active = false; });
-  }
-
-  render() {
-    return html`<a href="${this.href}" class="dropdown-item" @click=${this._handleClick}>${this.label}</a>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-topbar-dropdown-item": RelTopbarDropdownItem;
-  }
-}

package/dist/components/rel-topbar/rel-topbar-dropdown.ts

@@ -1,31 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-
-/**
- * @deprecated Part of the deprecated rel-topbar family. Use `rel-menu` or
- * `rel-popover` for nav dropdowns in the "Navbar" recipe at /docs/recipes/navbar.
- */
-@customElement("rel-topbar-dropdown")
-export class RelTopbarDropdown extends LitElement {
-  static styles = css`
-    .dropdown {
-      display: flex;
-      flex-direction: column;
-      min-width: 160px;
-      background: var(--rel-bg-surface);
-      border-radius: var(--rel-border-radius-sm);
-      box-shadow: var(--rel-shadows-shadow-200);
-      padding: var(--rel-spacing-2xs) 0;
-    }
-  `;
-
-  render() {
-    return html`<div class="dropdown"><slot></slot></div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-topbar-dropdown": RelTopbarDropdown;
-  }
-}