@latty-ds/web 0.2.0

package/dist/components/dialog/index.js

@@ -0,0 +1,920 @@
+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/dialog/dialog.ts
+import { html as html4 } 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/dialog/dialog.ts
+import { customElement as customElement4, property as property5, query } from "lit/decorators.js";
+
+// src/components/dialog/dialog.styles.ts
+import { css } from "lit";
+var dialogStyles = css`
+  :host {
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  /* Backdrop */
+  .backdrop {
+    align-items: center;
+    background: rgba(0, 0, 0, var(--lt-dialog-overlay-opacity, 0.5));
+    display: flex;
+    height: 100vh;
+    justify-content: center;
+    left: 0;
+    opacity: 0;
+    padding: var(--lt-spacing-4);
+    position: fixed;
+    top: 0;
+    transition: opacity 200ms ease;
+    width: 100vw;
+    z-index: 1000;
+  }
+
+  :host([open]) .backdrop {
+    opacity: 1;
+  }
+
+  :host(:not([open])) .backdrop {
+    pointer-events: none;
+  }
+
+  /* lt-surface host — flex item inside .backdrop, sized per size variant */
+  lt-surface {
+    width: 100%;
+  }
+
+  :host([size='sm']) lt-surface {
+    max-width: 400px;
+  }
+  :host([size='md']) lt-surface {
+    max-width: 600px;
+  }
+  :host([size='lg']) lt-surface {
+    max-width: 800px;
+  }
+  :host([size='xl']) lt-surface {
+    max-width: 1000px;
+  }
+
+  :host([size='fullscreen']) .backdrop {
+    padding: 0;
+  }
+
+  :host([size='fullscreen']) lt-surface {
+    height: 100vh;
+    max-height: 100vh;
+    max-width: 100vw;
+  }
+
+  /* lt-surface inner div — layout and animation */
+  lt-surface::part(surface) {
+    display: flex;
+    flex-direction: column;
+    max-height: calc(100vh - var(--lt-spacing-8));
+    opacity: 0;
+    position: relative;
+    transform: translateY(16px);
+    transition:
+      opacity 220ms ease,
+      transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1);
+  }
+
+  :host([open]) lt-surface::part(surface) {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  :host([size='fullscreen']) lt-surface::part(surface) {
+    border-radius: 0;
+    max-height: 100vh;
+  }
+
+  /* Header */
+  .header {
+    align-items: center;
+    border-bottom: 1px solid var(--lt-border-default);
+    display: flex;
+    gap: var(--lt-spacing-4);
+    padding: var(--lt-spacing-5);
+    position: relative;
+  }
+
+  .header-content {
+    flex: 1;
+  }
+
+  .title {
+    color: var(--lt-text-default);
+  }
+
+  .close-button {
+    flex-shrink: 0;
+  }
+
+  /* Body */
+  .body {
+    color: var(--lt-color-neutral-700);
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--lt-spacing-5);
+  }
+
+  /* Footer */
+  .footer {
+    border-top: 1px solid var(--lt-border-default);
+    display: flex;
+    gap: var(--lt-spacing-3);
+    justify-content: flex-end;
+    padding: var(--lt-spacing-5);
+  }
+
+  :host([uppercase]) .title::part(base) {
+    font-variant-caps: small-caps;
+    letter-spacing: 0.05rem;
+    text-transform: lowercase;
+  }
+`;
+
+// src/components/shared/backdrop.styles.ts
+import { css as css2 } from "lit";
+var backdropFeatureStyles = css2`
+  :host([backdrop-blur]) .backdrop,
+  :host([backdrop-blur]) [part='overlay'] {
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+  }
+`;
+
+// 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 css3 } from "lit";
+var iconButtonStyles = css3`
+  :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/surface/surface.ts
+import { html as html2 } from "lit";
+import { customElement as customElement2, property as property3 } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+// src/components/surface/surface.styles.ts
+import { css as css4 } from "lit";
+var surfaceStyles = css4`
+  :host {
+    display: block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .surface {
+    background: var(--lt-surface-bg, var(--lt-bg-subtle));
+    border-radius: var(--lt-border-radius);
+    box-sizing: border-box;
+    transition:
+      box-shadow 120ms ease,
+      border-color 120ms ease;
+  }
+
+  /* Elevation variants */
+  :host([elevation='0']) .surface {
+    box-shadow: var(--lt-elevation-0);
+  }
+  :host([elevation='1']) .surface {
+    box-shadow: var(--lt-elevation-1);
+  }
+  :host([elevation='2']) .surface {
+    box-shadow: var(--lt-elevation-2);
+  }
+  :host([elevation='3']) .surface {
+    box-shadow: var(--lt-elevation-3);
+  }
+  :host([elevation='4']) .surface {
+    box-shadow: var(--lt-elevation-4);
+  }
+  :host([elevation='5']) .surface {
+    box-shadow: var(--lt-elevation-5);
+  }
+
+  /* Visual appearances */
+  :host([appearance='filled']) .surface {
+    border: none;
+  }
+
+  :host([appearance='outlined']) .surface {
+    background: var(--lt-surface-bg, transparent);
+    border: 1px solid var(--lt-border-default);
+  }
+
+  :host([appearance='outlined']:hover) .surface {
+    border-color: var(--lt-border-strong);
+  }
+`;
+
+// src/utils/color.ts
+var resolveColorValue = (value) => value.startsWith("--") ? `var(${value})` : value;
+
+// src/components/surface/surface.ts
+var Surface = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.elevation = "1";
+    this.appearance = "filled";
+    this.background = "";
+  }
+  render() {
+    const style = this.background ? { "--_surface-bg": resolveColorValue(this.background) } : {};
+    return html2`
+      <div class="surface" part="surface" style=${styleMap(style)}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+Surface.styles = surfaceStyles;
+__decorateClass([
+  property3({ reflect: true })
+], Surface.prototype, "elevation", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Surface.prototype, "appearance", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Surface.prototype, "background", 2);
+Surface = __decorateClass([
+  customElement2("lt-surface")
+], Surface);
+
+// src/components/text/text.ts
+import { customElement as customElement3, property as property4 } from "lit/decorators.js";
+import { html as html3, unsafeStatic } from "lit/static-html.js";
+
+// src/components/text/text.styles.ts
+import { css as css5 } from "lit";
+var textStyles = css5`
+  :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 html3`<${tag} part="base"><slot></slot></${tag}>`;
+  }
+};
+Text.styles = textStyles;
+__decorateClass([
+  property4({ reflect: true })
+], Text.prototype, "variant", 2);
+__decorateClass([
+  property4({ reflect: true })
+], Text.prototype, "as", 2);
+Text = __decorateClass([
+  customElement3("lt-text")
+], Text);
+
+// src/components/dialog/dialog.ts
+var Dialog = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.open = false;
+    this.title = "";
+    this.noCloseButton = false;
+    this.closeOnBackdropClick = true;
+    this.closeOnEscape = true;
+    this.uppercase = false;
+    this.backdropBlur = false;
+    this.handleKeydown = (event) => {
+      if (this.open && this.closeOnEscape && event.key === "Escape") {
+        event.preventDefault();
+        this.hide();
+      }
+    };
+  }
+  /**
+   * Opens the dialog.
+   */
+  show() {
+    this.open = true;
+  }
+  /**
+   * Closes the dialog.
+   */
+  hide() {
+    this.open = false;
+  }
+  /**
+   * Toggles the dialog open/closed state.
+   */
+  toggle() {
+    this.open = !this.open;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.handleKeydown);
+    this.restoreFocus();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("open")) {
+      if (this.open) {
+        this.handleOpen();
+      } else {
+        this.handleClose();
+      }
+    }
+  }
+  handleOpen() {
+    this.previouslyFocusedElement = document.activeElement;
+    document.body.style.overflow = "hidden";
+    this.updateComplete.then(() => {
+      this.dialogElement?.focus();
+    });
+    this.dispatchEvent(
+      new CustomEvent("dialog-open", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleClose() {
+    document.body.style.overflow = "";
+    this.restoreFocus();
+    this.dispatchEvent(
+      new CustomEvent("dialog-close", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  restoreFocus() {
+    if (this.previouslyFocusedElement) {
+      this.previouslyFocusedElement.focus();
+      this.previouslyFocusedElement = void 0;
+    }
+  }
+  handleBackdropClick(event) {
+    if (this.closeOnBackdropClick && event.target === event.currentTarget) {
+      this.hide();
+    }
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  render() {
+    return html4`
+      <div class="backdrop" ?inert=${!this.open} @click=${this.handleBackdropClick} part="backdrop">
+        <lt-surface
+          elevation="4"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="dialog-title"
+          tabindex="-1"
+          part="dialog"
+        >
+          <div class="header" part="header">
+            <div class="header-content">
+              <slot name="header">
+                ${this.title ? html4`<lt-text variant="h4" as="h2" id="dialog-title" class="title">${this.title}</lt-text>` : ""}
+              </slot>
+            </div>
+            ${!this.noCloseButton ? html4`
+                  <lt-icon-button
+                    class="close-button"
+                    part="close-button"
+                    icon="xmark"
+                    label="Close dialog"
+                    size="sm"
+                    @click=${this.handleCloseClick}
+                  ></lt-icon-button>
+                ` : ""}
+          </div>
+
+          <div class="body" part="body">
+            <slot></slot>
+          </div>
+
+          ${this.hasSlot("footer") ? html4`
+                <div class="footer" part="footer">
+                  <slot name="footer"></slot>
+                </div>
+              ` : ""}
+        </lt-surface>
+      </div>
+    `;
+  }
+  hasSlot(name) {
+    return !!this.querySelector(`[slot="${name}"]`);
+  }
+};
+Dialog.styles = [dialogStyles, backdropFeatureStyles];
+__decorateClass([
+  property5({ reflect: true })
+], Dialog.prototype, "size", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], Dialog.prototype, "open", 2);
+__decorateClass([
+  property5()
+], Dialog.prototype, "title", 2);
+__decorateClass([
+  property5({ type: Boolean, attribute: "no-close-button" })
+], Dialog.prototype, "noCloseButton", 2);
+__decorateClass([
+  property5({ type: Boolean, attribute: "close-on-backdrop-click" })
+], Dialog.prototype, "closeOnBackdropClick", 2);
+__decorateClass([
+  property5({ type: Boolean, attribute: "close-on-escape" })
+], Dialog.prototype, "closeOnEscape", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true })
+], Dialog.prototype, "uppercase", 2);
+__decorateClass([
+  property5({ type: Boolean, reflect: true, attribute: "backdrop-blur" })
+], Dialog.prototype, "backdropBlur", 2);
+__decorateClass([
+  query("lt-surface")
+], Dialog.prototype, "dialogElement", 2);
+Dialog = __decorateClass([
+  customElement4("lt-dialog")
+], Dialog);
+export {
+  Dialog
+};