@latty-ds/web 0.2.0

package/dist/components/alert/index.js

@@ -0,0 +1,746 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/components/alert/alert.ts
+import { html as html3 } from "lit";
+
+// src/base/themeable-element.ts
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+var ThemeableElement = class extends LitElement {
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("theme")) {
+      this._syncThemeAttribute();
+    }
+  }
+  _syncThemeAttribute() {
+    if (this.theme === "dark" || this.theme === "light") {
+      this.setAttribute("data-theme", this.theme);
+    } else {
+      this.removeAttribute("data-theme");
+    }
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], ThemeableElement.prototype, "theme", 2);
+
+// src/components/alert/alert.ts
+import { customElement as customElement3, property as property4 } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/components/alert/alert.styles.ts
+import { css } from "lit";
+var alertStyles = css`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+    opacity: 1;
+    transform: translateY(0);
+    transition:
+      opacity 200ms ease,
+      transform 200ms ease;
+
+    /* Default variant tokens — public props override first, then variant defaults */
+    --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-neutral-subtle));
+    --_bg-solid: var(--lt-alert-bg, var(--lt-bg-inverse));
+    --_border: var(--lt-alert-border-color, var(--lt-border-strong));
+    --_color: var(--lt-alert-color, var(--lt-text-default));
+    --_color-solid: var(--lt-alert-color, var(--lt-text-inverse));
+  }
+
+  :host([dismissed]) {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  /* ── Per-variant tokens ──────────────────────────────────── */
+
+  :host([variant='success']) {
+    --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-success-subtle));
+    --_bg-solid: var(--lt-alert-bg, var(--lt-bg-success));
+    --_border: var(--lt-alert-border-color, var(--lt-border-success-strong));
+    --_color: var(--lt-alert-color, var(--lt-text-success));
+    --_color-solid: var(--lt-alert-color, var(--lt-text-on-success));
+  }
+
+  :host([variant='warning']) {
+    --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-warning-subtle));
+    --_bg-solid: var(--lt-alert-bg, var(--lt-bg-warning));
+    --_border: var(--lt-alert-border-color, var(--lt-border-warning-strong));
+    --_color: var(--lt-alert-color, var(--lt-text-warning));
+    --_color-solid: var(--lt-alert-color, var(--lt-text-on-warning));
+  }
+
+  :host([variant='error']) {
+    --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-error-subtle));
+    --_bg-solid: var(--lt-alert-bg, var(--lt-bg-error));
+    --_border: var(--lt-alert-border-color, var(--lt-border-error-strong));
+    --_color: var(--lt-alert-color, var(--lt-text-error));
+    --_color-solid: var(--lt-alert-color, var(--lt-text-on-error));
+  }
+
+  :host([variant='info']) {
+    --_bg-subtle: var(--lt-alert-bg, var(--lt-bg-info-subtle));
+    --_bg-solid: var(--lt-alert-bg, var(--lt-bg-info));
+    --_border: var(--lt-alert-border-color, var(--lt-border-info-strong));
+    --_color: var(--lt-alert-color, var(--lt-text-info));
+    --_color-solid: var(--lt-alert-color, var(--lt-text-on-info));
+  }
+
+  /* ── Layout ──────────────────────────────────────────────── */
+
+  .inner {
+    align-items: flex-start;
+    border-radius: var(--lt-border-radius);
+    display: flex;
+    gap: var(--lt-spacing-3);
+    padding: var(--lt-spacing-3) var(--lt-spacing-4);
+  }
+
+  /* ── Appearances ─────────────────────────────────────────── */
+
+  /* filled (default) — subtle tinted bg + full border */
+  :host([appearance='filled']) .inner,
+  :host(:not([appearance])) .inner {
+    background: var(--_bg-subtle);
+    border: 1px solid var(--_border);
+    color: var(--_color);
+  }
+
+  /* outlined — white bg + colored border */
+  :host([appearance='outlined']) .inner {
+    background: var(--lt-bg-default);
+    border: 1px solid var(--_border);
+    color: var(--_color);
+  }
+
+  /* solid — solid color bg, no border */
+  :host([appearance='solid']) .inner {
+    background: var(--_bg-solid);
+    border: none;
+    color: var(--_color-solid);
+  }
+
+  /* ── Icon ────────────────────────────────────────────────── */
+
+  .icon {
+    flex-shrink: 0;
+    font-size: 1.125rem;
+    margin-top: 1px;
+  }
+
+  /* ── Body ────────────────────────────────────────────────── */
+
+  .body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .title {
+    margin: 0 0 var(--lt-spacing-1);
+  }
+
+  .content {
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  .title + .content {
+    opacity: 0.8;
+  }
+
+  /* ── Close button ────────────────────────────────────────── */
+
+  .close {
+    flex-shrink: 0;
+    margin-top: 1px;
+    opacity: 0.7;
+  }
+
+  .close:hover {
+    opacity: 1;
+  }
+
+  :host([uppercase]) .title::part(base) {
+    font-variant-caps: small-caps;
+    letter-spacing: 0.05rem;
+    text-transform: lowercase;
+  }
+`;
+
+// src/utils/dispatch.ts
+var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
+
+// src/utils/color.ts
+var resolveColorValue = (value) => value.startsWith("--") ? `var(${value})` : value;
+
+// src/components/icon-button/icon-button.ts
+import { html, nothing } from "lit";
+import { customElement, property as property2 } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+// src/components/icon-button/icon-button.styles.ts
+import { css as css2 } from "lit";
+var iconButtonStyles = css2`
+  :host {
+    display: inline-flex;
+
+    /* Internal state props — set per variant/appearance below */
+    --_color: var(--lt-text-subtle);
+    --_bg: transparent;
+    --_border-color: transparent;
+    --_hover-bg: var(--lt-bg-subtle);
+    --_hover-color: var(--lt-text-default);
+    --_active-bg: var(--lt-bg-subtle);
+  }
+
+  [part='base'] {
+    align-items: center;
+    background: var(--lt-icon-button-bg, var(--_bg));
+    border-radius: var(--lt-border-radius);
+    border: 1px solid var(--lt-icon-button-border-color, var(--_border-color));
+    box-sizing: border-box;
+    color: var(--lt-icon-button-color, var(--_color));
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    padding: 0;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease,
+      transform 50ms ease;
+    user-select: none;
+  }
+
+  [part='base']:hover:not([disabled]) {
+    background: var(--lt-icon-button-hover-bg, var(--_hover-bg));
+    color: var(--lt-icon-button-hover-color, var(--lt-icon-button-color, var(--_hover-color)));
+  }
+
+  [part='base']:active {
+    transform: translateY(1px);
+  }
+
+  [part='base']:active:not([disabled]) {
+    background: var(--lt-icon-button-hover-bg, var(--_active-bg));
+  }
+
+  [part='base']:focus-visible {
+    outline: 3px solid var(--lt-border-focus);
+    outline-offset: 2px;
+  }
+
+  [part='base'][disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+    transform: none;
+  }
+
+  a[part='base'] {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  /* sizes */
+  :host([size='sm']) [part='base'] {
+    height: 28px;
+    width: 28px;
+  }
+
+  :host([size='md']) [part='base'] {
+    height: 36px;
+    width: 36px;
+  }
+
+  :host([size='lg']) [part='base'] {
+    height: 44px;
+    width: 44px;
+  }
+
+  /* ── ghost ────────────────────────────────────────────────── */
+  :host([appearance='ghost'][variant='primary']) {
+    --_color: var(--lt-text-primary);
+    --_hover-bg: var(--lt-bg-primary-subtle);
+    --_hover-color: var(--lt-text-primary);
+    --_active-bg: var(--lt-bg-primary-subtle);
+  }
+  :host([appearance='ghost'][variant='secondary']) {
+    --_color: var(--lt-text-secondary);
+    --_hover-bg: var(--lt-bg-secondary-subtle);
+    --_hover-color: var(--lt-text-secondary);
+    --_active-bg: var(--lt-bg-secondary-subtle);
+  }
+  :host([appearance='ghost'][variant='success']) {
+    --_color: var(--lt-text-success);
+    --_hover-bg: var(--lt-bg-success-subtle);
+    --_hover-color: var(--lt-text-success);
+    --_active-bg: var(--lt-bg-success-subtle);
+  }
+  :host([appearance='ghost'][variant='warning']) {
+    --_color: var(--lt-text-warning);
+    --_hover-bg: var(--lt-bg-warning-subtle);
+    --_hover-color: var(--lt-text-warning);
+    --_active-bg: var(--lt-bg-warning-subtle);
+  }
+  :host([appearance='ghost'][variant='error']) {
+    --_color: var(--lt-text-error);
+    --_hover-bg: var(--lt-bg-error-subtle);
+    --_hover-color: var(--lt-text-error);
+    --_active-bg: var(--lt-bg-error-subtle);
+  }
+  :host([appearance='ghost'][variant='info']) {
+    --_color: var(--lt-text-info);
+    --_hover-bg: var(--lt-bg-info-subtle);
+    --_hover-color: var(--lt-text-info);
+    --_active-bg: var(--lt-bg-info-subtle);
+  }
+
+  /* ── filled ───────────────────────────────────────────────── */
+  :host([appearance='filled'][variant='primary']) {
+    --_bg: var(--lt-interactive-primary-bg);
+    --_color: var(--lt-text-on-primary);
+    --_hover-bg: var(--lt-interactive-primary-bg-hover);
+    --_hover-color: var(--lt-text-on-primary);
+    --_active-bg: var(--lt-interactive-primary-bg-active);
+  }
+  :host([appearance='filled'][variant='secondary']) {
+    --_bg: var(--lt-interactive-secondary-bg);
+    --_color: var(--lt-text-on-secondary);
+    --_hover-bg: var(--lt-interactive-secondary-bg-hover);
+    --_hover-color: var(--lt-text-on-secondary);
+    --_active-bg: var(--lt-interactive-secondary-bg-active);
+  }
+  :host([appearance='filled'][variant='neutral']) {
+    --_bg: var(--lt-color-neutral-500);
+    --_color: var(--lt-color-neutral-50);
+    --_hover-bg: var(--lt-color-neutral-700);
+    --_hover-color: var(--lt-color-neutral-50);
+    --_active-bg: var(--lt-color-neutral-800);
+  }
+  :host([appearance='filled'][variant='success']) {
+    --_bg: var(--lt-interactive-success-bg);
+    --_color: var(--lt-text-on-success);
+    --_hover-bg: var(--lt-interactive-success-bg-hover);
+    --_hover-color: var(--lt-text-on-success);
+    --_active-bg: var(--lt-interactive-success-bg-active);
+  }
+  :host([appearance='filled'][variant='warning']) {
+    --_bg: var(--lt-interactive-warning-bg);
+    --_color: var(--lt-text-on-warning);
+    --_hover-bg: var(--lt-interactive-warning-bg-hover);
+    --_hover-color: var(--lt-text-on-warning);
+    --_active-bg: var(--lt-interactive-warning-bg-active);
+  }
+  :host([appearance='filled'][variant='error']) {
+    --_bg: var(--lt-interactive-error-bg);
+    --_color: var(--lt-text-on-error);
+    --_hover-bg: var(--lt-interactive-error-bg-hover);
+    --_hover-color: var(--lt-text-on-error);
+    --_active-bg: var(--lt-interactive-error-bg-active);
+  }
+  :host([appearance='filled'][variant='info']) {
+    --_bg: var(--lt-interactive-info-bg);
+    --_color: var(--lt-text-on-info);
+    --_hover-bg: var(--lt-interactive-info-bg-hover);
+    --_hover-color: var(--lt-text-on-info);
+    --_active-bg: var(--lt-interactive-info-bg-active);
+  }
+
+  /* ── outlined ─────────────────────────────────────────────── */
+  :host([appearance='outlined'][variant='primary']) {
+    --_color: var(--lt-text-primary);
+    --_border-color: var(--lt-border-primary-strong);
+    --_hover-bg: var(--lt-bg-primary-subtle);
+    --_hover-color: var(--lt-text-primary);
+    --_active-bg: var(--lt-bg-primary-subtle);
+  }
+  :host([appearance='outlined'][variant='secondary']) {
+    --_color: var(--lt-text-secondary);
+    --_border-color: var(--lt-border-secondary-strong);
+    --_hover-bg: var(--lt-bg-secondary-subtle);
+    --_hover-color: var(--lt-text-secondary);
+    --_active-bg: var(--lt-bg-secondary-subtle);
+  }
+  :host([appearance='outlined'][variant='neutral']) {
+    --_color: var(--lt-text-neutral);
+    --_border-color: var(--lt-border-strong);
+    --_hover-bg: var(--lt-bg-subtle);
+    --_hover-color: var(--lt-text-default);
+    --_active-bg: var(--lt-bg-subtle);
+  }
+  :host([appearance='outlined'][variant='success']) {
+    --_color: var(--lt-text-success);
+    --_border-color: var(--lt-border-success-strong);
+    --_hover-bg: var(--lt-bg-success-subtle);
+    --_hover-color: var(--lt-text-success);
+    --_active-bg: var(--lt-bg-success-subtle);
+  }
+  :host([appearance='outlined'][variant='warning']) {
+    --_color: var(--lt-text-warning);
+    --_border-color: var(--lt-border-warning-strong);
+    --_hover-bg: var(--lt-bg-warning-subtle);
+    --_hover-color: var(--lt-text-warning);
+    --_active-bg: var(--lt-bg-warning-subtle);
+  }
+  :host([appearance='outlined'][variant='error']) {
+    --_color: var(--lt-text-error);
+    --_border-color: var(--lt-border-error-strong);
+    --_hover-bg: var(--lt-bg-error-subtle);
+    --_hover-color: var(--lt-text-error);
+    --_active-bg: var(--lt-bg-error-subtle);
+  }
+  :host([appearance='outlined'][variant='info']) {
+    --_color: var(--lt-text-info);
+    --_border-color: var(--lt-border-info-strong);
+    --_hover-bg: var(--lt-bg-info-subtle);
+    --_hover-color: var(--lt-text-info);
+    --_active-bg: var(--lt-bg-info-subtle);
+  }
+
+  /* round shape */
+  :host([round]) [part='base'] {
+    border-radius: 50%;
+  }
+`;
+
+// src/components/icon-button/icon-button.ts
+import "@latty-ds/icons";
+var IconButton = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.icon = "";
+    this.label = "";
+    this.variant = "neutral";
+    this.appearance = "ghost";
+    this.size = "md";
+    this.disabled = false;
+    this.href = "";
+    this.target = "";
+    this.rel = "";
+    this.round = false;
+  }
+  _inner() {
+    return this.icon ? html`<lt-icon name=${this.icon}></lt-icon>` : html`<slot></slot>`;
+  }
+  render() {
+    const label = this.label || void 0;
+    if (this.href) {
+      const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
+      return html`
+        <a
+          part="base"
+          href=${this.href}
+          target=${ifDefined(this.target || void 0)}
+          rel=${ifDefined(rel)}
+          aria-label=${ifDefined(label)}
+          aria-disabled=${this.disabled ? "true" : nothing}
+          tabindex=${this.disabled ? "-1" : nothing}
+        >
+          ${this._inner()}
+        </a>
+      `;
+    }
+    return html`
+      <button part="base" ?disabled=${this.disabled} aria-label=${ifDefined(label)}>${this._inner()}</button>
+    `;
+  }
+};
+IconButton.styles = iconButtonStyles;
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "icon", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "label", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "variant", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "appearance", 2);
+__decorateClass([
+  property2({ reflect: true })
+], IconButton.prototype, "size", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], IconButton.prototype, "disabled", 2);
+__decorateClass([
+  property2()
+], IconButton.prototype, "href", 2);
+__decorateClass([
+  property2()
+], IconButton.prototype, "target", 2);
+__decorateClass([
+  property2()
+], IconButton.prototype, "rel", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], IconButton.prototype, "round", 2);
+IconButton = __decorateClass([
+  customElement("lt-icon-button")
+], IconButton);
+
+// src/components/text/text.ts
+import { customElement as customElement2, property as property3 } from "lit/decorators.js";
+import { html as html2, unsafeStatic } from "lit/static-html.js";
+
+// src/components/text/text.styles.ts
+import { css as css3 } from "lit";
+var textStyles = css3`
+  :host {
+    display: block;
+    color: inherit;
+  }
+
+  /* Inline variants sit in text flow */
+  :host([variant='caption']),
+  :host([variant='overline']),
+  :host([variant='label']) {
+    display: inline;
+  }
+
+  [part='base'] {
+    margin: 0;
+    color: inherit;
+    font-family: var(--lt-typography-fontfamily);
+  }
+
+  /* ── Display ─────────────────────────────────────────────────────────── */
+
+  :host([variant='display-2xl']) [part='base'] {
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='display-xl']) [part='base'] {
+    font-size: clamp(2rem, 5vw, 3.75rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='display-lg']) [part='base'] {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.15;
+    letter-spacing: -0.01em;
+  }
+
+  /* ── Headings ─────────────────────────────────────────────────────────── */
+
+  :host([variant='h1']) [part='base'] {
+    font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='h2']) [part='base'] {
+    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+
+  :host([variant='h3']) [part='base'] {
+    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.3;
+  }
+
+  :host([variant='h4']) [part='base'] {
+    font-size: 1.25rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.35;
+  }
+
+  :host([variant='h5']) [part='base'] {
+    font-size: 1.125rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+
+  :host([variant='h6']) [part='base'] {
+    font-size: 1rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+
+  /* ── Body ─────────────────────────────────────────────────────────────── */
+
+  :host([variant='lead']) [part='base'] {
+    font-size: 1.25rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  :host([variant='body']) [part='base'],
+  :host(:not([variant])) [part='base'] {
+    font-size: 1rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  :host([variant='body-sm']) [part='base'] {
+    font-size: 0.875rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  /* ── Inline ───────────────────────────────────────────────────────────── */
+
+  :host([variant='caption']) [part='base'] {
+    font-size: 0.75rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.5;
+  }
+
+  :host([variant='overline']) [part='base'] {
+    font-size: 0.6875rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.2;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  :host([variant='label']) [part='base'] {
+    font-size: 0.875rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+`;
+
+// src/components/text/text.ts
+var VARIANT_TAG = {
+  "display-2xl": "p",
+  "display-xl": "p",
+  "display-lg": "p",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  lead: "p",
+  body: "p",
+  "body-sm": "p",
+  caption: "span",
+  overline: "span",
+  label: "span"
+};
+var Text = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "body";
+    this.as = "";
+  }
+  render() {
+    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    return html2`<${tag} part="base"><slot></slot></${tag}>`;
+  }
+};
+Text.styles = textStyles;
+__decorateClass([
+  property3({ reflect: true })
+], Text.prototype, "variant", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Text.prototype, "as", 2);
+Text = __decorateClass([
+  customElement2("lt-text")
+], Text);
+
+// src/components/alert/alert.ts
+var Alert = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "default";
+    this.appearance = "filled";
+    this.title = "";
+    this.icon = "";
+    this.closable = false;
+    this.background = "";
+    this.uppercase = false;
+  }
+  _handleClose() {
+    const cancelled = !dispatch(this, "close", void 0, { cancelable: true });
+    if (cancelled) return;
+    this.setAttribute("dismissed", "");
+    setTimeout(() => this.remove(), 200);
+  }
+  get _resolvedIcon() {
+    if (this.icon === "none") return "";
+    if (this.icon) return this.icon;
+    if (this.variant === "default") return "";
+    return Alert._iconMap[this.variant] ?? "";
+  }
+  render() {
+    const iconName = this._resolvedIcon;
+    const bgStyle = styleMap(this.background ? { background: resolveColorValue(this.background) } : {});
+    return html3`
+      <div class="inner" part="base" role="alert" style=${bgStyle}>
+        ${iconName ? html3`<lt-icon class="icon" name=${iconName} part="icon"></lt-icon>` : ""}
+        <div class="body">
+          ${this.title ? html3`<lt-text variant="h6" as="p" class="title" part="title">${this.title}</lt-text>` : ""}
+          <div class="content" part="content"><slot></slot></div>
+        </div>
+        ${this.closable ? html3`<lt-icon-button
+              class="close"
+              part="close"
+              icon="xmark"
+              label="Dismiss"
+              size="sm"
+              @click=${this._handleClose}
+            ></lt-icon-button>` : ""}
+      </div>
+    `;
+  }
+};
+Alert.styles = alertStyles;
+Alert._iconMap = {
+  default: "info-circle",
+  success: "check-circle",
+  warning: "warning-triangle",
+  error: "xmark-circle",
+  info: "info-circle"
+};
+__decorateClass([
+  property4({ reflect: true })
+], Alert.prototype, "variant", 2);
+__decorateClass([
+  property4({ reflect: true })
+], Alert.prototype, "appearance", 2);
+__decorateClass([
+  property4({ reflect: true })
+], Alert.prototype, "title", 2);
+__decorateClass([
+  property4({ reflect: true })
+], Alert.prototype, "icon", 2);
+__decorateClass([
+  property4({ type: Boolean, reflect: true })
+], Alert.prototype, "closable", 2);
+__decorateClass([
+  property4({ reflect: true })
+], Alert.prototype, "background", 2);
+__decorateClass([
+  property4({ type: Boolean, reflect: true })
+], Alert.prototype, "uppercase", 2);
+Alert = __decorateClass([
+  customElement3("lt-alert")
+], Alert);
+export {
+  Alert
+};