@reliability-design/web 1.4.6 → 1.4.8

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

@@ -1,329 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import "@reliability-design/icons/rel-icon";
-import { announce } from "../../utils/announce";
-
-export type SnackbarLines = "single" | "double";
-export type SnackbarType = "default" | "success" | "error" | "warning";
-
-@customElement("rel-snackbar")
-export class RelSnackbar extends LitElement {
-  @property({ type: String }) message: string = "This is a snackbar message";
-
-  @property({ type: String }) action?: string;
-
-  @property({ type: Boolean }) longerAction: boolean = false;
-
-  @property({ type: Boolean }) iconClose: boolean = true;
-
-  @property({ type: String }) lines: SnackbarLines = "single";
-
-  @property({ type: Number }) duration: number = 4000;
-
-  @property({ type: String }) type: SnackbarType = "default";
-  @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);
-      display: block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    .snackbar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      min-width: 280px;
-      max-width: 500px;
-      margin: 0;
-      padding: var(--rel-spacing-sm) var(--rel-spacing-md) var(--rel-spacing-sm) var(--rel-spacing-xs);
-      border-radius: var(--rel-border-radius-sm);
-      background-color: var(--rel-bg-static-dark);
-      color: var(--rel-text-static-light);
-      font-family: var(--rel-fonts-font-family);
-      box-shadow: var(--rel-shadows-shadow-300);
-      animation: slide-up 0.3s ease-out;
-      border-left: 4px solid transparent;
-    }
-
-    .snackbar.two-line {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    .snackbar.hidden {
-      display: none;
-    }
-
-    /* Type variants — border accent using semantic DS tokens */
-    /* Status fills stay vivid on the always-dark snackbar surface */
-    .snackbar.type-success {
-      border-left-color: var(--rel-bg-success);
-    }
-
-    .snackbar.type-error {
-      border-left-color: var(--rel-bg-danger);
-    }
-
-    .snackbar.type-warning {
-      border-left-color: var(--rel-bg-warning);
-    }
-
-    /* Icon color matches type accent */
-    .snackbar.type-success .snackbar-icon {
-      color: var(--rel-bg-success);
-    }
-
-    .snackbar.type-error .snackbar-icon {
-      color: var(--rel-bg-danger);
-    }
-
-    .snackbar.type-warning .snackbar-icon {
-      color: var(--rel-bg-warning);
-    }
-
-    .snackbar-icon {
-      display: flex;
-      align-items: center;
-      margin-right: 10px;
-      flex-shrink: 0;
-    }
-
-    .snackbar-body {
-      display: flex;
-      align-items: center;
-      flex: 1;
-      min-width: 0;
-    }
-
-    .snackbar-message {
-      margin-right: var(--rel-spacing-sm);
-      flex: 1;
-
-      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);
-
-    }
-
-    .snackbar.two-line .snackbar-message {
-      margin-right: 0;
-      margin-bottom: 8px;
-      flex: none;
-    }
-
-    .snackbar-actions {
-      display: flex;
-      align-items: center;
-      gap: var(--rel-spacing-2xs);
-      flex-shrink: 0;
-      align-self: center;
-    }
-
-    .snackbar.two-line .snackbar-actions {
-      align-self: flex-end;
-    }
-
-    .snackbar-action {
-      background: none;
-      border: none;
-      color: var(--rel-text-static-light);
-      cursor: pointer;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      transition: opacity 0.2s ease;
-      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);
-    }
-
-    .snackbar-action:hover {
-      opacity: 0.8;
-    }
-
-    .snackbar-action:active {
-      opacity: 0.6;
-    }
-
-    .snackbar-action:focus-visible {
-      outline: 2px solid var(--rel-text-static-light);
-      outline-offset: 2px;
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    .snackbar-close {
-      background: none;
-      border: none;
-      color: var(--rel-action-neutral-label-icons-fill-inverse);
-      cursor: pointer;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: opacity 0.2s ease;
-    }
-
-    .snackbar-close:hover {
-      opacity: 0.8;
-    }
-
-    .snackbar-close:active {
-      opacity: 0.6;
-    }
-
-    .snackbar-close:focus-visible {
-      outline: 2px solid var(--rel-text-static-light);
-      outline-offset: 2px;
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    /* Prevent any inherited transform from firing on button click */
-    .snackbar button:active {
-      transform: none;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .snackbar {
-        animation: none;
-      }
-    }
-
-    @keyframes slide-up {
-      from {
-        transform: translateY(50px);
-        opacity: 0;
-      }
-      to {
-        transform: translateY(0);
-        opacity: 1;
-      }
-    }
-  `;
-
-  connectedCallback() {
-    super.connectedCallback();
-  }
-
-  willUpdate(changed: Map<string, unknown>) {
-    if (!changed.has('show')) return;
-    if (this.show) {
-      this.visible = true;
-      this.setAutoDismiss();
-    } else {
-      this.visible = false;
-      this.clearDismissTimer();
-    }
-  }
-
-  updated(changed: Map<string, unknown>) {
-    if ((changed.has("duration") || changed.has("longerAction")) && this.show) {
-      this.setAutoDismiss();
-    }
-    if ((changed.has("show") || changed.has("message")) && this.show) {
-      announce(this.message, this.type === "error" ? "assertive" : "polite");
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.clearDismissTimer();
-  }
-
-  private setAutoDismiss() {
-    if (this.duration > 0) {
-      this.clearDismissTimer();
-      const delay = this.longerAction ? this.duration * 2 : this.duration;
-      this._dismissTimer = setTimeout(() => this.dismiss(), delay);
-    }
-  }
-
-  private clearDismissTimer() {
-    if (this._dismissTimer !== null) {
-      clearTimeout(this._dismissTimer);
-      this._dismissTimer = null;
-    }
-  }
-
-  private onActionClick() {
-    this.dispatchEvent(
-      new CustomEvent("actionClick", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-    this.dismiss();
-  }
-
-  private dismiss() {
-    this.show = false;
-    this.visible = false;
-    this.dispatchEvent(
-      new CustomEvent("close", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private renderIcon() {
-    const iconMap: Record<string, string> = {
-      success: "check-circle",
-      error: "error",
-      warning: "warning",
-    };
-    const name = iconMap[this.type];
-    if (!name) return html``;
-    return html`<rel-icon name="${name}" size="lg" class="snackbar-icon"></rel-icon>`;
-  }
-
-  render() {
-    const snackbarClasses = [
-      "snackbar",
-      this.lines === "double" ? "two-line" : "",
-      !this.visible ? "hidden" : "",
-      this.type !== "default" ? `type-${this.type}` : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    return html`
-      <div class="${snackbarClasses}" role="${this.type === "error" ? "alert" : "status"}">
-        <div class="snackbar-body">
-          ${this.type !== "default" ? this.renderIcon() : ""}
-          <div part="label" class="snackbar-message">${this.message}</div>
-        </div>
-
-        <div class="snackbar-actions">
-          ${this.action
-            ? html`
-                <button part="action" class="snackbar-action" @click="${this.onActionClick}">
-                  ${this.action}
-                </button>
-              `
-            : ""}
-          ${this.iconClose
-            ? html`
-                <button part="close-button" class="snackbar-close" @click="${this.dismiss}" aria-label="Close">
-                  <rel-icon name="close" size="md"></rel-icon>
-                </button>
-              `
-            : ""}
-        </div>
-      </div>
-    `;
-  }
-}