@reliability-design/web 1.4.6 → 1.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reliability-design/web",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "fs-extra": "^11.0.0",
-    "tiny-glob": "^0.2.9"
+    "tiny-glob": "^0.2.9",
+    "tsup": "^8.0.0"
   }
 }

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

@@ -1,336 +0,0 @@
-import "@reliability-design/icons/rel-icon";
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-accordion")
-export class RelAccordion extends LitElement {
-  @property({ type: String }) title = "Accordion";
-  @property({ type: Boolean, reflect: true }) open = false;
-  @property({ type: String, reflect: true }) size: "md" | "sm" = "md";
-  @property({ type: String, reflect: true }) type: "default" | "action" = "default";
-
-  /** Figma "Style" axis — named appearance because `style` collides with the HTML style attribute. */
-  @property({ type: String, reflect: true }) appearance: "shadow" | "plain" = "shadow";
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      width: 100%;
-      font-family: var(--rel-fonts-font-family, sans-serif);
-    }
-
-    .accordion {
-      background: var(--rel-bg-neutral);
-      border-radius: var(--rel-border-radius-sm);
-      border: 1px solid var(--rel-border-subtle);
-      overflow: hidden;
-      box-shadow: var(--rel-shadows-shadow-100);
-    }
-
-    /* Figma Style=Shadow: elevation only, no visible border */
-    :host([appearance="shadow"]) .accordion {
-      border-color: transparent;
-      box-shadow: var(--rel-shadows-shadow-100);
-    }
-
-    /* Figma Style=Plain: flat — border, no elevation */
-    :host([appearance="plain"]) .accordion {
-      border-color: var(--rel-border-subtle);
-      box-shadow: none;
-    }
-
-    /* ── Header ───────────────────────────────────────────────── */
-
-    .header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      cursor: pointer;
-      user-select: none;
-      box-sizing: border-box;
-      /* matches .accordion's radius so the focus-visible outline isn't clipped square at the corners by the parent's overflow:hidden */
-      border-radius: 8px;
-    }
-
-    :host([size="md"]) .header {
-      padding: var(--rel-spacing-xs) var(--rel-spacing-xs) var(--rel-spacing-xs) var(--rel-spacing-md);
-      min-height: 56px;
-    }
-
-    :host([size="sm"]) .header {
-      padding: var(--rel-spacing-xs) var(--rel-spacing-xs) var(--rel-spacing-xs) var(--rel-spacing-sm);
-      min-height: 48px;
-    }
-
-    .header:hover {
-      background: var(--rel-bg-surface-elevated);
-    }
-
-    .header:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: -2px;
-    }
-
-    /* ── Title row ────────────────────────────────────────────── */
-
-    .title-row {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      flex: 1;
-    }
-
-    .title {
-      font-weight: var(--rel-headings-md-font-weight);
-      color: var(--rel-text-default);
-    }
-
-    :host([size="md"]) .title {
-
-      font-family: var(--rel-headings-md-font-family);
-
-      font-weight: var(--rel-headings-md-font-weight);
-
-      font-size: var(--rel-headings-md-font-size);
-
-      line-height: var(--rel-headings-md-line-height);
-
-      letter-spacing: var(--rel-headings-md-letter-spacing);
-
-    }
-
-    :host([size="sm"]) .title {
-
-      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);
-
-    }
-
-    /* ── Leading icon (action type) ───────────────────────────── */
-
-    .leading-icon {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      color: var(--rel-text-default);
-    }
-
-    .leading-icon ::slotted(svg) {
-      width: 24px;
-      height: 24px;
-    }
-
-    .leading-icon rel-icon,
-    .leading-icon ::slotted(rel-icon) {
-      --rel-icon-size: 24px;
-    }
-
-    :host([size="sm"]) .leading-icon ::slotted(svg) {
-      width: 20px;
-      height: 20px;
-    }
-
-    :host([size="sm"]) .leading-icon rel-icon,
-    :host([size="sm"]) .leading-icon ::slotted(rel-icon) {
-      --rel-icon-size: 20px;
-    }
-
-    /* ── Chevron ──────────────────────────────────────────────── */
-
-    .chevron {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-    }
-
-    :host([size="md"]) .chevron {
-      width: 40px;
-      height: 40px;
-    }
-
-    :host([size="sm"]) .chevron {
-      width: 32px;
-      height: 32px;
-    }
-
-    .chevron ::slotted(svg) {
-      width: 24px;
-      height: 24px;
-    }
-
-    .chevron rel-icon,
-    .chevron ::slotted(rel-icon) {
-      --rel-icon-size: 24px;
-      color: var(--rel-action-neutral-label-icons-ghost);
-    }
-
-    :host([size="sm"]) .chevron ::slotted(svg) {
-      width: 20px;
-      height: 20px;
-    }
-
-    :host([size="sm"]) .chevron rel-icon,
-    :host([size="sm"]) .chevron ::slotted(rel-icon) {
-      --rel-icon-size: 20px;
-    }
-
-    /* ── Icon rotation ────────────────────────────────────────── */
-    /* Only the shadow-DOM fallback wrappers rotate on open.
-       Slotted (light-DOM) icons are never targeted, so they stay static. */
-
-    .icon-rotate-on-open,
-    .chevron-rotate {
-      display: inline-flex;
-      align-items: center;
-      transition: transform 0.25s ease;
-    }
-
-    /* Leading fallback chevron: 90° (points right when open) */
-    :host([open]) .icon-rotate-on-open {
-      transform: rotate(90deg);
-    }
-
-    /* Trailing fallback chevron (type="default" only): 180° flip */
-    :host([open]) .chevron-rotate {
-      transform: rotate(180deg);
-    }
-
-    /* ── Body ─────────────────────────────────────────────────── */
-
-    .body {
-      overflow: hidden;
-      max-height: 0;
-      padding: 0 var(--rel-spacing-md);
-      color: var(--rel-text-body);
-      transition:
-        max-height 0.25s ease,
-        padding 0.2s 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);
-    }
-
-    :host([size="sm"]) .body {
-
-      font-family: var(--rel-body-sm-regular-font-family);
-
-      font-weight: var(--rel-body-sm-regular-font-weight);
-
-      font-size: var(--rel-body-sm-regular-font-size);
-
-      line-height: var(--rel-body-sm-regular-line-height);
-
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-
-    }
-
-    .body.open {
-      max-height: 1000px;
-      scroll-margin-top: var(--rel-spacing-xl);
-      padding: var(--rel-spacing-2xs) var(--rel-spacing-md) var(--rel-spacing-lg);
-    }
-
-    /* ── Dark mode ────────────────────────────────────────────── */
-
-    :host-context([data-theme="dark"]) .title,
-    [data-theme="dark"] .title {
-      color: var(--rel-text-default);
-    }
-
-    :host-context([data-theme="dark"]) .chevron rel-icon,
-    [data-theme="dark"] .chevron rel-icon,
-    :host-context([data-theme="dark"]) .chevron ::slotted(rel-icon),
-    [data-theme="dark"] .chevron ::slotted(rel-icon) {
-      color: var(--rel-text-default);
-    }
-
-    :host-context([data-theme="dark"]) .leading-icon,
-    [data-theme="dark"] .leading-icon {
-      color: var(--rel-text-default);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .icon-rotate-on-open,
-      .chevron-rotate,
-      .body {
-        transition: none;
-      }
-    }
-  `;
-
-  /** Stable id prefix wiring the header to its panel. */
-  private accordionId = `rel-accordion-${Math.random().toString(36).slice(2)}`;
-
-  private toggle() {
-    this.open = !this.open;
-    this.dispatchEvent(
-      new CustomEvent<boolean>("open-change", {
-        detail: this.open,
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  render() {
-    return html`
-      <div part="base" class="accordion">
-        <div
-          part="trigger" class="header"
-          id="${this.accordionId}-header"
-          role="button"
-          tabindex="0"
-          aria-expanded="${this.open}"
-          aria-controls="${this.accordionId}-body"
-          @click=${this.toggle}
-          @keydown=${(e: KeyboardEvent) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              this.toggle();
-            }
-          }}
-        >
-          <div part="label" class="title-row">
-            ${this.type === "action"
-              ? html`<span class="leading-icon">
-                  <slot name="icon">
-                    <span class="icon-rotate-on-open"><rel-icon name="chevron-right"></rel-icon></span>
-                  </slot>
-                </span>`
-              : ""}
-            <span class="title">${this.title}</span>
-          </div>
-          <div part="icon" class="chevron">
-            <slot name="trailing-icon">
-              ${this.type === "default"
-                ? html`<span class="chevron-rotate"><rel-icon name="chevron-down"></rel-icon></span>`
-                : html`<rel-icon name="arrow-expansion"></rel-icon>`}
-            </slot>
-          </div>
-        </div>
-        <div
-          part="content"
-          class="body ${this.open ? "open" : "closed"}"
-          id="${this.accordionId}-body"
-          role="region"
-          aria-labelledby="${this.accordionId}-header"
-          ?inert=${!this.open}
-        >
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}

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

@@ -1,305 +0,0 @@
-import { LitElement, html, css } from "lit";
-import "@reliability-design/icons/rel-icon";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-alert")
-export class RelAlert extends LitElement {
-  @property({ type: String })
-  type: "info" | "success" | "warning" | "error" | "neutral" = "neutral";
-
-  /** Visual treatment (Figma "Style"): solid | subtle | outline. "filled" is a deprecated alias of solid. */
-  @property({ type: String, reflect: true })
-  appearance: "solid" | "subtle" | "outline" | "filled" = "subtle";
-
-  @property({ type: String }) message1 = "";
-  @property({ type: String }) message2?: string;
-
-  // Explicit attribute names: Lit would otherwise lowercase these to `urltext`
-  // / `urlhref`, while the docs, the docs-app previews and consumers all use
-  // `url-text` / `url-href` — which silently did nothing.
-  @property({ type: String, attribute: "url-text" }) urlText?: string;
-  @property({ type: String, attribute: "url-href" }) urlHref?: string;
-
-  @property({ type: Boolean }) dismissible = true;
-  @property({ type: Boolean, reflect: true }) dismissed = false;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    :host([dismissed]) {
-      display: none;
-    }
-
-    .rel-alert {
-      display: flex;
-      align-items: flex-start;
-      gap: var(--rel-spacing-xs);
-      padding: var(--rel-spacing-sm) var(--rel-spacing-lg);
-      border-radius: var(--rel-border-radius-sm);
-      min-width: 360px;
-      box-sizing: border-box;
-    }
-
-    .rel-content {
-      padding-right: var(--rel-spacing-md);
-      display: flex;
-      flex-direction: column;
-      gap: var(--rel-spacing-3xs);
-    }
-
-    .rel-message1 {
-      /* Figma: body-lg-medium weight on body-lg-regular metrics */
-      font-weight: var(--rel-body-lg-medium-font-weight);
-      color: var(--rel-text-label);
-      margin: 0;
-      font-family: var(--rel-body-lg-regular-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);
-    }
-
-    .rel-message2 {
-      color: var(--rel-text-body);
-      margin: 0;
-      opacity: 0.9;
-      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);
-    }
-
-    .rel-icon {
-      margin-top: 2px;
-      flex-shrink: 0;
-    }
-
-    .rel-icon svg {
-      width: 16px;
-      height: 16px;
-      display: block;
-    }
-
-    .rel-link {
-      text-decoration: underline;
-      color: var(--rel-action-neutral-label-icons-link);
-      margin-top: 2px;
-
-      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);
-
-    }
-
-    .rel-close {
-      margin-left: auto;
-      align-self: flex-start;
-      background: none;
-      border: none;
-      cursor: pointer;
-      opacity: 0.6;
-      color: inherit;
-      font-size: 16px;
-      padding: var(--rel-spacing-2xs);
-      line-height: 1;
-      border-radius: var(--rel-border-radius-xs, 4px);
-    }
-
-    .rel-close:hover {
-      opacity: 1;
-    }
-
-    .rel-close:focus-visible {
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
-      opacity: 1;
-    }
-
-    /* COLORS — semantic status tokens carry both light and dark modes.
-       Base classes are the SUBTLE style (Figma Style=Subtle): tone light fill,
-       no border, tone-colored title. */
-    .rel-alert {
-      border: 1px solid transparent;
-    }
-
-    .alert-neutral {
-      background: var(--rel-bg-neutral);
-      color: var(--rel-text-default);
-    }
-
-    .alert-info {
-      background: var(--rel-bg-info-light);
-      color: var(--rel-text-default);
-    }
-
-    .alert-info .rel-message1 {
-      color: var(--rel-text-info);
-    }
-
-    .alert-success {
-      background: var(--rel-bg-success-light);
-      color: var(--rel-text-default);
-    }
-
-    .alert-success .rel-message1 {
-      color: var(--rel-text-success);
-    }
-
-    .alert-warning {
-      background: var(--rel-bg-warning-light);
-      color: var(--rel-text-default);
-    }
-
-    .alert-warning .rel-message1 {
-      color: var(--rel-text-warning);
-    }
-
-    .alert-error {
-      background: var(--rel-bg-danger-light);
-      color: var(--rel-text-default);
-    }
-
-    .alert-error .rel-message1 {
-      color: var(--rel-text-danger);
-    }
-
-    /* Solid style (Figma Style=Solid; "filled" is the deprecated alias) */
-    :host([appearance="filled"]) .alert-neutral,
-    :host([appearance="solid"]) .alert-neutral {
-      background: var(--rel-bg-neutral-inverse-2);
-      color: var(--rel-text-inverse);
-    }
-
-    :host([appearance="filled"]) .alert-error,
-    :host([appearance="solid"]) .alert-error {
-      background: var(--rel-bg-danger);
-      color: var(--rel-text-static-light);
-    }
-
-    :host([appearance="filled"]) .alert-success,
-    :host([appearance="solid"]) .alert-success {
-      background: var(--rel-bg-success);
-      color: var(--rel-text-static-light);
-    }
-
-    :host([appearance="filled"]) .alert-warning,
-    :host([appearance="solid"]) .alert-warning {
-      background: var(--rel-bg-warning);
-      color: var(--rel-text-static-dark);
-    }
-
-    :host([appearance="filled"]) .alert-info,
-    :host([appearance="solid"]) .alert-info {
-      background: var(--rel-bg-info);
-      color: var(--rel-text-static-light);
-    }
-
-    :host([appearance="filled"]) .rel-message1,
-    :host([appearance="filled"]) .rel-message2,
-    :host([appearance="filled"]) .rel-link,
-    :host([appearance="solid"]) .rel-message1,
-    :host([appearance="solid"]) .rel-message2,
-    :host([appearance="solid"]) .rel-link {
-      color: inherit;
-    }
-
-    :host([appearance="filled"]) .rel-icon rel-icon,
-    :host([appearance="solid"]) .rel-icon rel-icon {
-      --rel-icon-color: currentColor;
-    }
-
-    /* Outline style (Figma Style=Outline): no fill, tone border, tone title */
-    :host([appearance="outline"]) .rel-alert {
-      background: transparent;
-    }
-
-    :host([appearance="outline"]) .alert-neutral {
-      border-color: var(--rel-border-default);
-    }
-
-    :host([appearance="outline"]) .alert-info {
-      border-color: var(--rel-border-info);
-    }
-
-    :host([appearance="outline"]) .alert-success {
-      border-color: var(--rel-border-success);
-    }
-
-    :host([appearance="outline"]) .alert-warning {
-      border-color: var(--rel-border-warning);
-    }
-
-    :host([appearance="outline"]) .alert-error {
-      border-color: var(--rel-border-danger);
-    }
-
-    .alert-error .rel-close {
-      color: var(--rel-text-default);
-    }
-  `;
-
-  private dismissAlert() {
-    this.dismissed = true;
-
-    this.dispatchEvent(
-      new CustomEvent("dismiss", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  /* Task 2: status icons standardised on <rel-icon> (size tier L = 20px icon
-     alongside body-lg text). Colour comes from the semantic tone. */
-  private get iconTemplate() {
-    const name =
-      this.type === "success" ? "check-circle"
-      : this.type === "warning" ? "alert-circle"
-      : this.type === "error" ? "error"
-      : "info";
-    const tone =
-      this.type === "success" ? "success"
-      : this.type === "warning" ? "warning"
-      : this.type === "error" ? "danger"
-      : this.type === "info" ? "info"
-      : "default";
-    return html`<rel-icon name="${name}" size="md" tone="${tone}"></rel-icon>`;
-  }
-
-  render() {
-    return html`
-      <div part="base" class="rel-alert alert-${this.type}" role="alert" aria-atomic="true">
-        <div part="icon" class="rel-icon">${this.iconTemplate}</div>
-
-        <div part="content" class="rel-content">
-          <p part="label" class="rel-message1">${this.message1}</p>
-
-          ${this.message2
-            ? html`<p part="helper" class="rel-message2">${this.message2}</p>`
-            : null}
-          ${this.urlText && this.urlHref
-            ? html`<a part="action" class="rel-link" href=${this.urlHref}>
-                ${this.urlText}
-              </a>`
-            : null}
-        </div>
-
-        ${this.dismissible
-          ? html`<button part="close-button" class="rel-close" @click=${this.dismissAlert} aria-label="Dismiss">
-              ✕
-            </button>`
-          : null}
-      </div>
-    `;
-  }
-}