// src/components/badge/emb-badge.ts
import { css, html, LitElement } from "lit";
var EmbBadge = class extends LitElement {
  constructor() {
    super(...arguments);
    this.tone = "neutral";
  }
  static {
    this.styles = css`
    :host {
      display: inline-block;
    }

    span {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 var(--space-2);
      border-radius: var(--radius-full);
      border: 1px solid var(--border);
      background: var(--bg-subtle);
      color: var(--fg);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-mono);
      text-transform: uppercase;
    }

    :host([tone="accent"]) span {
      border-color: var(--accent);
      background: var(--accent-muted);
      color: var(--accent);
    }

    :host([tone="success"]) span {
      border-color: color-mix(in srgb, var(--success) 45%, var(--border));
      background: color-mix(in srgb, var(--success) 14%, transparent);
      color: var(--success);
    }
  `;
  }
  static {
    this.properties = {
      tone: { reflect: true }
    };
  }
  render() {
    return html`
      <span part="label">
        <slot></slot>
      </span>
    `;
  }
};

// src/components/button/emb-button.ts
import { css as css2, html as html2, LitElement as LitElement2 } from "lit";
var EmbButton = class extends LitElement2 {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.type = "button";
    this.variant = "solid";
  }
  static {
    this.styles = css2`
    :host {
      display: inline-block;
      color: var(--fg);
    }

    button {
      font: inherit;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 36px;
      padding: 0 var(--space-4);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      cursor: pointer;
      transition:
        background var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
    }

    :host([variant="solid"]) button {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--accent-fg);
    }

    :host([variant="ghost"]) button {
      background: transparent;
    }

    button:hover:not(:disabled) {
      border-color: var(--border-strong);
      background: var(--bg-subtle);
    }

    :host([variant="solid"]) button:hover:not(:disabled) {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

    button:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }
  `;
  }
  static {
    this.properties = {
      disabled: { type: Boolean, reflect: true },
      type: { reflect: true },
      variant: { reflect: true }
    };
  }
  focus(options) {
    this.buttonElement?.focus(options);
  }
  click() {
    this.buttonElement?.click();
  }
  render() {
    return html2`
      <button class="emb-button__control" part="control" ?disabled=${this.disabled} type=${this.type}>
        <slot></slot>
      </button>
    `;
  }
  get buttonElement() {
    return this.renderRoot.querySelector("button");
  }
};

// src/components/card/emb-card.ts
import { css as css3, html as html3, LitElement as LitElement3 } from "lit";
var EmbCard = class extends LitElement3 {
  static {
    this.styles = css3`
    :host {
      display: block;
    }

    article {
      display: grid;
      gap: var(--space-3);
      padding: var(--space-4);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      color: var(--fg);
      box-shadow: var(--shadow-xs);
    }
  `;
  }
  render() {
    return html3`
      <article part="surface">
        <slot></slot>
      </article>
    `;
  }
};

// src/components/checkbox/emb-checkbox.ts
import { css as css4, html as html4 } from "lit";
import { live } from "lit/directives/live.js";

// src/components/shared/form-associated-element.ts
import { LitElement as LitElement4 } from "lit";
var FormAssociatedElement = class extends LitElement4 {
  static {
    this.formAssociated = true;
  }
  constructor() {
    super();
    if (typeof this.attachInternals === "function") {
      this.internals = this.attachInternals();
    }
  }
  setFormValue(value) {
    if (this.internals && typeof this.internals.setFormValue === "function") {
      this.internals.setFormValue(value);
    }
  }
  setValidityFrom(control) {
    if (this.internals && typeof this.internals.setValidity === "function") {
      this.internals.setValidity(control.validity, control.validationMessage, control);
    }
  }
};

// src/components/checkbox/emb-checkbox.ts
var EmbCheckbox = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.checked = false;
    this.disabled = false;
    this.name = "";
    this.required = false;
    this.value = "on";
    this.defaultChecked = false;
    this.handleChange = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.checked = input.checked;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.checked = input.checked;
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css4`
    :host {
      display: inline-block;
      color: var(--fg);
    }

    label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font: inherit;
      cursor: pointer;
    }

    input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--accent);
    }

    :host([disabled]) label {
      cursor: not-allowed;
      opacity: 0.72;
    }

    input:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }
  `;
  }
  static {
    this.properties = {
      checked: { type: Boolean, reflect: true },
      disabled: { type: Boolean, reflect: true },
      name: { reflect: true },
      required: { type: Boolean, reflect: true },
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultChecked = this.hasAttribute("checked");
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.checked = this.defaultChecked;
    this.syncFormState();
  }
  render() {
    return html4`
      <label part="label">
        <input
          part="control"
          .checked=${live(this.checked)}
          ?disabled=${this.disabled}
          name=${this.name}
          ?required=${this.required}
          type="checkbox"
          value=${this.value}
          @input=${this.handleInput}
          @change=${this.handleChange}
        />
        <slot></slot>
      </label>
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled || !this.checked) {
      this.setFormValue(null);
    } else {
      this.setFormValue(this.value);
    }
    if (this.inputElement) {
      this.setValidityFrom(this.inputElement);
    }
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
};

// src/components/accordion/emb-accordion.ts
import { css as css5, html as html5, LitElement as LitElement5 } from "lit";
var EmbAccordion = class extends LitElement5 {
  constructor() {
    super(...arguments);
    this.open = false;
    this.handleToggle = (event) => {
      event.stopPropagation();
      const details = event.currentTarget;
      this.open = details.open;
      this.dispatchEvent(new Event("toggle", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css5`
    :host {
      display: block;
      color: var(--fg);
    }

    details {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      overflow: clip;
    }

    summary {
      list-style: none;
      cursor: pointer;
      padding: var(--space-4);
      font-weight: var(--weight-medium);
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary:focus-visible {
      outline: none;
      box-shadow: inset var(--ring-focus);
    }

    .content {
      padding: 0 var(--space-4) var(--space-4);
      color: var(--fg-muted);
    }
  `;
  }
  static {
    this.properties = {
      open: { type: Boolean, reflect: true }
    };
  }
  toggle(open) {
    this.open = open ?? !this.open;
  }
  render() {
    return html5`
      <details part="container" ?open=${this.open} @toggle=${this.handleToggle}>
        <summary part="summary">
          <slot name="summary"></slot>
        </summary>
        <div class="content" part="content">
          <slot></slot>
        </div>
      </details>
    `;
  }
};

// src/components/alert/emb-alert.ts
import { css as css6, html as html6, LitElement as LitElement6 } from "lit";
var EmbAlert = class extends LitElement6 {
  constructor() {
    super(...arguments);
    this.tone = "info";
  }
  static {
    this.styles = css6`
    :host {
      display: block;
    }

    div {
      display: grid;
      gap: var(--space-2);
      padding: var(--space-4);
      border: 1px solid var(--border);
      border-left-width: 3px;
      border-radius: var(--radius-lg);
      background: var(--surface);
      color: var(--fg);
    }

    :host([tone="info"]) div {
      border-left-color: var(--accent);
    }

    :host([tone="success"]) div {
      border-left-color: var(--success);
    }

    :host([tone="warning"]) div {
      border-left-color: var(--warning);
    }

    :host([tone="danger"]) div {
      border-left-color: var(--danger);
    }
  `;
  }
  static {
    this.properties = {
      tone: { reflect: true }
    };
  }
  render() {
    return html6`<div part="surface" role="alert"><slot></slot></div>`;
  }
};

// src/components/avatar/emb-avatar.ts
import { css as css7, html as html7, LitElement as LitElement7 } from "lit";
var EmbAvatar = class extends LitElement7 {
  constructor() {
    super(...arguments);
    this.alt = "";
    this.name = "";
    this.src = "";
  }
  static {
    this.styles = css7`
    :host {
      display: inline-block;
    }

    .surface {
      inline-size: 40px;
      block-size: 40px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--bg-subtle);
      color: var(--fg);
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      text-transform: uppercase;
    }

    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  `;
  }
  static {
    this.properties = {
      alt: { reflect: true },
      name: { reflect: true },
      src: { reflect: true }
    };
  }
  render() {
    const label = this.alt || this.name || "Avatar";
    if (this.src) {
      return html7`
        <span class="surface" part="surface">
          <img part="image" src=${this.src} alt=${label} />
        </span>
      `;
    }
    return html7`
      <span class="surface" part="surface" role="img" aria-label=${label}>
        <span part="fallback">${this.initials}</span>
      </span>
    `;
  }
  get initials() {
    const words = this.name.trim().split(/\s+/).filter(Boolean).slice(0, 2);
    if (words.length === 0) {
      return "?";
    }
    return words.map((word) => word.charAt(0)).join("").toUpperCase();
  }
};

// src/components/divider/emb-divider.ts
import { css as css8, html as html8, LitElement as LitElement8 } from "lit";
var EmbDivider = class extends LitElement8 {
  static {
    this.styles = css8`
    :host {
      display: block;
    }

    hr {
      margin: 0;
      border: 0;
      border-top: 1px solid var(--border);
    }
  `;
  }
  render() {
    return html8`<hr part="line" />`;
  }
};

// src/components/dialog/emb-dialog.ts
import { css as css9, html as html9, LitElement as LitElement9 } from "lit";
var EmbDialog = class extends LitElement9 {
  constructor() {
    super(...arguments);
    this.modal = true;
    this.open = false;
    this.handleCancel = (event) => {
      event.stopPropagation();
      this.open = false;
      this.dispatchEvent(new Event("cancel", { bubbles: true, composed: true }));
    };
    this.handleClose = (event) => {
      event.stopPropagation();
      this.open = false;
      this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css9`
    :host {
      display: contents;
    }

    dialog {
      min-width: min(90vw, 480px);
      padding: var(--space-5);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      color: var(--fg);
      box-shadow: var(--shadow-lg);
    }

    dialog::backdrop {
      background: rgb(15 14 12 / 45%);
      backdrop-filter: blur(2px);
    }

    .surface {
      display: grid;
      gap: var(--space-4);
    }
  `;
  }
  static {
    this.properties = {
      modal: { type: Boolean, reflect: true },
      open: { type: Boolean, reflect: true }
    };
  }
  focus(options) {
    this.dialogElement?.focus(options);
  }
  close(returnValue) {
    const dialog = this.dialogElement;
    if (!dialog) {
      return;
    }
    if (typeof dialog.close === "function") {
      dialog.close(returnValue);
    } else {
      dialog.removeAttribute("open");
    }
    this.open = false;
  }
  show() {
    this.modal = false;
    this.open = true;
  }
  showModal() {
    this.modal = true;
    this.open = true;
  }
  firstUpdated() {
    this.syncOpenState();
  }
  render() {
    return html9`
      <dialog part="dialog" @close=${this.handleClose} @cancel=${this.handleCancel}>
        <div class="surface">
          <slot></slot>
        </div>
      </dialog>
    `;
  }
  updated(changedProperties) {
    if (changedProperties.has("open") || changedProperties.has("modal")) {
      this.syncOpenState();
    }
  }
  syncOpenState() {
    const dialog = this.dialogElement;
    if (!dialog) {
      return;
    }
    if (this.open) {
      if (dialog.hasAttribute("open")) {
        return;
      }
      if (this.modal && typeof dialog.showModal === "function") {
        dialog.showModal();
      } else if (typeof dialog.show === "function") {
        dialog.show();
      } else {
        dialog.setAttribute("open", "");
      }
      return;
    }
    if (!dialog.hasAttribute("open")) {
      return;
    }
    if (typeof dialog.close === "function") {
      dialog.close();
    } else {
      dialog.removeAttribute("open");
    }
  }
  get dialogElement() {
    return this.renderRoot.querySelector("dialog");
  }
};

// src/components/drawer/emb-drawer.ts
import { css as css10, html as html10, LitElement as LitElement10, nothing } from "lit";
var EmbDrawer = class extends LitElement10 {
  constructor() {
    super(...arguments);
    this.open = false;
    this.side = "end";
    this.close = () => {
      this.open = false;
      this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css10`
    :host {
      display: contents;
    }

    .backdrop {
      position: fixed;
      inset: 0;
      background: rgb(15 14 12 / 45%);
      z-index: 30;
    }

    aside {
      position: fixed;
      inset-block: 0;
      inline-size: min(420px, 90vw);
      padding: var(--space-5);
      background: var(--surface);
      color: var(--fg);
      box-shadow: var(--shadow-lg);
      z-index: 31;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: var(--space-4);
    }

    :host([side="start"]) aside {
      inset-inline-start: 0;
      border-inline-end: 1px solid var(--border);
    }

    :host([side="end"]) aside {
      inset-inline-end: 0;
      border-inline-start: 1px solid var(--border);
    }

    button {
      font: inherit;
      justify-self: end;
      border: 0;
      background: transparent;
      color: var(--fg-muted);
      cursor: pointer;
      padding: 0;
    }
  `;
  }
  static {
    this.properties = {
      open: { type: Boolean, reflect: true },
      side: { reflect: true }
    };
  }
  render() {
    if (!this.open) {
      return nothing;
    }
    return html10`
      <div class="backdrop" part="backdrop" @click=${this.close}></div>
      <aside part="panel">
        <button type="button" part="close-button" aria-label="Close drawer" @click=${this.close}>x</button>
        <slot></slot>
      </aside>
    `;
  }
};

// src/components/dropdown-menu/emb-dropdown-menu.ts
import { css as css11, html as html11, LitElement as LitElement11 } from "lit";
var EmbDropdownMenu = class extends LitElement11 {
  constructor() {
    super(...arguments);
    this.open = false;
    this.handleToggle = (event) => {
      event.stopPropagation();
      const details = event.currentTarget;
      this.open = details.open;
      this.dispatchEvent(new Event("toggle", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css11`
    :host {
      display: inline-block;
      position: relative;
    }

    details {
      position: relative;
    }

    summary {
      list-style: none;
      cursor: pointer;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    .menu {
      position: absolute;
      inset-block-start: calc(100% + var(--space-2));
      inset-inline-start: 0;
      min-width: 200px;
      padding: var(--space-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: var(--shadow-md);
      z-index: 20;
    }

    .menu ::slotted(*) {
      display: block;
      width: 100%;
    }
  `;
  }
  static {
    this.properties = {
      open: { type: Boolean, reflect: true }
    };
  }
  render() {
    return html11`
      <details ?open=${this.open} @toggle=${this.handleToggle}>
        <summary part="trigger">
          <slot name="trigger"></slot>
        </summary>
        <div class="menu" part="menu" role="menu">
          <slot></slot>
        </div>
      </details>
    `;
  }
};

// src/components/breadcrumbs/emb-breadcrumbs.ts
import { css as css12, html as html12, LitElement as LitElement12 } from "lit";
var EmbBreadcrumbs = class extends LitElement12 {
  static {
    this.styles = css12`
    :host {
      display: block;
    }

    nav {
      color: var(--fg-muted);
    }

    ol {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ::slotted(li) {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
    }
  `;
  }
  render() {
    return html12`
      <nav part="nav" aria-label="Breadcrumb">
        <ol part="list">
          <slot></slot>
        </ol>
      </nav>
    `;
  }
};

// src/components/code-block/emb-code-block.ts
import { css as css13, html as html13, LitElement as LitElement13 } from "lit";
var EmbCodeBlock = class extends LitElement13 {
  constructor() {
    super(...arguments);
    this.code = "";
  }
  static {
    this.styles = css13`
    :host {
      display: block;
    }

    pre {
      margin: 0;
      padding: var(--space-4);
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface-inverse);
      color: var(--bg);
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: var(--leading-relaxed);
    }

    code {
      font: inherit;
      white-space: pre;
    }
  `;
  }
  static {
    this.properties = {
      code: { reflect: true }
    };
  }
  render() {
    return html13`
      <pre part="surface"><code part="code">${this.code}<slot></slot></code></pre>
    `;
  }
};

// src/components/combobox/emb-combobox.ts
import { css as css14, html as html14, nothing as nothing2 } from "lit";
import { live as live2 } from "lit/directives/live.js";
var EmbCombobox = class _EmbCombobox extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.autocomplete = "";
    this.disabled = false;
    this.name = "";
    this.open = false;
    this.placeholder = "";
    this.readonly = false;
    this.required = false;
    this.value = "";
    this.activeIndex = -1;
    this.defaultValue = "";
    this.listId = `emb-combobox-list-${_EmbCombobox.nextId++}`;
    this.optionNodes = [];
    this.handleChange = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.open = false;
      this.activeIndex = -1;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.open = this.filteredOptions.length > 0;
      this.activeIndex = this.getInitialActiveIndex();
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
    this.handleFocus = () => {
      if (this.filteredOptions.length === 0 || this.disabled) {
        return;
      }
      this.open = true;
      this.activeIndex = this.getInitialActiveIndex();
    };
    this.handleBlur = () => {
      queueMicrotask(() => {
        this.open = false;
        this.activeIndex = -1;
      });
    };
    this.handleKeyDown = (event) => {
      const options = this.filteredOptions;
      if (options.length === 0 || this.disabled) {
        return;
      }
      if (event.key === "ArrowDown") {
        event.preventDefault();
        this.open = true;
        this.activeIndex = this.activeIndex < options.length - 1 ? this.activeIndex + 1 : options.length - 1;
        return;
      }
      if (event.key === "ArrowUp") {
        event.preventDefault();
        this.open = true;
        this.activeIndex = this.activeIndex > 0 ? this.activeIndex - 1 : 0;
        return;
      }
      if (event.key === "Enter" && this.listboxVisible && this.activeIndex >= 0) {
        event.preventDefault();
        this.commitOption(this.activeIndex);
        return;
      }
      if (event.key === "Escape" && this.open) {
        event.preventDefault();
        this.open = false;
        this.activeIndex = -1;
      }
    };
    this.handleSlotChange = () => {
      this.refreshOptions();
    };
    this.handleOptionMouseDown = (event) => {
      event.preventDefault();
    };
  }
  static {
    this.styles = css14`
    :host {
      display: inline-block;
      width: var(--emb-field-inline-size, min(100%, 320px));
      max-width: 100%;
      min-width: 0;
      color: var(--fg);
    }

    .surface {
      position: relative;
    }

    input {
      box-sizing: border-box;
      width: 100%;
      min-height: 36px;
      font: inherit;
      padding: 0 var(--space-3);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
    }

    input::placeholder {
      color: var(--fg-subtle);
    }

    input:disabled {
      cursor: not-allowed;
      color: var(--fg-subtle);
      background: var(--bg-subtle);
    }

    input:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }

    slot {
      display: none;
    }

    .listbox {
      position: absolute;
      inset-block-start: calc(100% + var(--space-2));
      inset-inline: 0;
      z-index: 10;
      display: grid;
      gap: var(--space-1);
      max-block-size: 240px;
      overflow: auto;
      padding: var(--space-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: var(--shadow-md);
    }

    .option {
      width: 100%;
      padding: var(--space-2) var(--space-3);
      border: 0;
      border-radius: var(--radius-md);
      background: transparent;
      color: var(--fg);
      cursor: pointer;
      font: inherit;
      text-align: start;
    }

    .option:hover,
    .option[data-active="true"] {
      background: var(--bg-subtle);
    }

    .option[data-selected="true"] {
      color: var(--accent);
      font-weight: 600;
    }
  `;
  }
  static {
    this.properties = {
      activeIndex: { state: true },
      autocomplete: { reflect: true },
      disabled: { type: Boolean, reflect: true },
      name: { reflect: true },
      open: { state: true },
      placeholder: { reflect: true },
      readonly: { type: Boolean, reflect: true, attribute: "readonly" },
      required: { type: Boolean, reflect: true },
      value: { reflect: true }
    };
  }
  static {
    this.nextId = 0;
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultValue = this.getAttribute("value") ?? this.value;
    this.refreshOptions();
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.value = this.defaultValue;
    this.syncFormState();
  }
  render() {
    const filteredOptions = this.filteredOptions;
    return html14`
      <div class="surface">
        <slot @slotchange=${this.handleSlotChange}></slot>
        <input
          part="control"
          .value=${live2(this.value)}
          aria-activedescendant=${this.activeDescendantId ?? nothing2}
          aria-autocomplete="list"
          aria-controls=${this.listId}
          aria-expanded=${String(this.listboxVisible)}
          autocomplete=${this.autocomplete}
          ?disabled=${this.disabled}
          name=${this.name}
          placeholder=${this.placeholder}
          ?readonly=${this.readonly}
          ?required=${this.required}
          role="combobox"
          type="text"
          @blur=${this.handleBlur}
          @change=${this.handleChange}
          @focus=${this.handleFocus}
          @input=${this.handleInput}
          @keydown=${this.handleKeyDown}
        />
        ${this.listboxVisible ? html14`
              <div class="listbox" part="listbox" id=${this.listId} role="listbox">
                ${filteredOptions.map(
      (option, index) => html14`
                    <button
                      id=${this.getOptionId(index)}
                      class="option"
                      part=${index === this.activeIndex ? "option option-active" : "option"}
                      type="button"
                      role="option"
                      aria-selected=${String(option.value === this.value)}
                      data-active=${String(index === this.activeIndex)}
                      data-selected=${String(option.value === this.value)}
                      @mousedown=${this.handleOptionMouseDown}
                      @click=${() => this.commitOption(index)}
                    >
                      ${option.label}
                    </button>
                  `
    )}
              </div>
            ` : nothing2}
      </div>
    `;
  }
  updated() {
    this.syncFormState();
  }
  refreshOptions() {
    this.optionNodes = Array.from(this.children).filter((child) => child instanceof HTMLOptionElement).map((option) => ({
      label: option.label || option.textContent?.trim() || option.value,
      value: option.value
    }));
    this.activeIndex = this.getInitialActiveIndex();
    this.requestUpdate();
  }
  commitOption(index) {
    const option = this.filteredOptions[index];
    if (!option) {
      return;
    }
    this.value = option.value;
    this.open = false;
    this.activeIndex = -1;
    this.syncFormState();
    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
  }
  syncFormState() {
    if (this.disabled) {
      this.setFormValue(null);
      return;
    }
    this.setFormValue(this.value);
    if (this.inputElement) {
      this.setValidityFrom(this.inputElement);
    }
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
  get filteredOptions() {
    const query = this.value.trim().toLowerCase();
    if (query === "") {
      return this.optionNodes;
    }
    return this.optionNodes.filter(
      (option) => option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query)
    );
  }
  get listboxVisible() {
    return this.open && this.filteredOptions.length > 0;
  }
  get activeDescendantId() {
    if (!this.listboxVisible || this.activeIndex < 0) {
      return void 0;
    }
    return this.getOptionId(this.activeIndex);
  }
  getInitialActiveIndex() {
    const exactMatchIndex = this.filteredOptions.findIndex((option) => option.value === this.value);
    if (exactMatchIndex >= 0) {
      return exactMatchIndex;
    }
    return this.filteredOptions.length > 0 ? 0 : -1;
  }
  getOptionId(index) {
    return `${this.listId}-option-${index}`;
  }
};

// src/components/date-input/emb-date-input.ts
import { css as css15, html as html15 } from "lit";
import { live as live3 } from "lit/directives/live.js";
var EmbDateInput = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.max = "";
    this.min = "";
    this.name = "";
    this.readonly = false;
    this.required = false;
    this.value = "";
    this.defaultValue = "";
    this.handleChange = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css15`
    :host {
      display: inline-block;
      width: var(--emb-field-inline-size, min(100%, 320px));
      max-width: 100%;
      min-width: 0;
      color: var(--fg);
    }

    input {
      box-sizing: border-box;
      width: 100%;
      min-height: 36px;
      font: inherit;
      padding: 0 var(--space-3);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
    }

    input:disabled {
      cursor: not-allowed;
      color: var(--fg-subtle);
      background: var(--bg-subtle);
    }

    input:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }
  `;
  }
  static {
    this.properties = {
      disabled: { type: Boolean, reflect: true },
      max: { reflect: true },
      min: { reflect: true },
      name: { reflect: true },
      readonly: { type: Boolean, reflect: true, attribute: "readonly" },
      required: { type: Boolean, reflect: true },
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultValue = this.getAttribute("value") ?? this.value;
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.value = this.defaultValue;
    this.syncFormState();
  }
  render() {
    return html15`
      <input
        part="control"
        .value=${live3(this.value)}
        ?disabled=${this.disabled}
        max=${this.max}
        min=${this.min}
        name=${this.name}
        ?readonly=${this.readonly}
        ?required=${this.required}
        type="date"
        @input=${this.handleInput}
        @change=${this.handleChange}
      />
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled) {
      this.setFormValue(null);
      return;
    }
    this.setFormValue(this.value);
    if (this.inputElement) {
      this.setValidityFrom(this.inputElement);
    }
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
};

// src/components/empty-state/emb-empty-state.ts
import { css as css16, html as html16, LitElement as LitElement14 } from "lit";
var EmbEmptyState = class extends LitElement14 {
  static {
    this.styles = css16`
    :host {
      display: block;
    }

    section {
      display: grid;
      justify-items: start;
      gap: var(--space-3);
      padding: var(--space-6);
      border: 1px dashed var(--border);
      border-radius: var(--radius-lg);
      background: var(--bg-subtle);
      color: var(--fg);
    }

    .media {
      color: var(--accent);
    }

    .actions {
      display: flex;
      gap: var(--space-2);
      flex-wrap: wrap;
    }
  `;
  }
  render() {
    return html16`
      <section part="surface">
        <div class="media" part="media"><slot name="media"></slot></div>
        <div part="content"><slot></slot></div>
        <div class="actions" part="actions"><slot name="actions"></slot></div>
      </section>
    `;
  }
};

// src/components/fieldset/emb-fieldset.ts
import { css as css17, html as html17, LitElement as LitElement15, nothing as nothing3 } from "lit";
var EmbFieldset = class extends LitElement15 {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.legend = "";
  }
  static {
    this.styles = css17`
    :host {
      display: block;
      inline-size: var(--emb-fieldset-inline-size, min(100%, 29rem));
      max-inline-size: 100%;
      min-inline-size: 0;
    }

    fieldset {
      display: grid;
      gap: var(--space-4);
      inline-size: 100%;
      min-inline-size: 0;
      margin: 0;
      padding: var(--space-4);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      color: var(--fg);
      box-sizing: border-box;
    }

    legend {
      padding: 0 var(--space-2);
      color: var(--fg);
      font-weight: 600;
    }

    .content {
      display: grid;
      gap: var(--space-4);
      inline-size: 100%;
      min-inline-size: 0;
      --emb-field-inline-size: 100%;
    }

    ::slotted(*) {
      box-sizing: border-box;
      display: block;
      inline-size: 100% !important;
      min-inline-size: 0;
      max-inline-size: 100% !important;
    }
  `;
  }
  static {
    this.properties = {
      disabled: { type: Boolean, reflect: true },
      legend: { reflect: true }
    };
  }
  render() {
    return html17`
      <fieldset part="control" ?disabled=${this.disabled}>
        ${this.legend ? html17`<legend part="legend">${this.legend}</legend>` : nothing3}
        <slot name="legend"></slot>
        <div class="content" part="content">
          <slot></slot>
        </div>
      </fieldset>
    `;
  }
};

// src/components/file-input/emb-file-input.ts
import { css as css18, html as html18 } from "lit";
var EmbFileInput = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.accept = "";
    this.disabled = false;
    this.multiple = false;
    this.name = "";
    this.required = false;
    this.handleInput = (event) => {
      event.stopPropagation();
      this.syncFormState();
      this.requestUpdate();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
    this.handleChange = (event) => {
      event.stopPropagation();
      this.syncFormState();
      this.requestUpdate();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css18`
    :host {
      display: inline-grid;
      gap: var(--space-2);
      color: var(--fg);
    }

    input {
      box-sizing: border-box;
      width: 100%;
      font: inherit;
      color: var(--fg);
    }

    .files {
      color: var(--fg-muted);
      font-size: var(--text-sm);
    }
  `;
  }
  static {
    this.properties = {
      accept: { reflect: true },
      disabled: { type: Boolean, reflect: true },
      multiple: { type: Boolean, reflect: true },
      name: { reflect: true },
      required: { type: Boolean, reflect: true }
    };
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  get files() {
    return this.inputElement?.files ?? null;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    if (this.inputElement) {
      this.inputElement.value = "";
    }
    this.syncFormState();
  }
  render() {
    const fileNames = this.files ? Array.from(this.files).map((file) => file.name) : [];
    return html18`
      <input
        part="control"
        accept=${this.accept}
        ?disabled=${this.disabled}
        ?multiple=${this.multiple}
        name=${this.name}
        ?required=${this.required}
        type="file"
        @input=${this.handleInput}
        @change=${this.handleChange}
      />
      <div class="files" part="files">
        ${fileNames.length > 0 ? fileNames.join(", ") : "No files selected"}
      </div>
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled || !this.inputElement) {
      this.setFormValue(null);
      return;
    }
    const files = this.inputElement.files;
    if (!files || files.length === 0) {
      this.setFormValue(null);
      this.setValidityFrom(this.inputElement);
      return;
    }
    if (this.multiple) {
      const formData = new FormData();
      for (const file of Array.from(files)) {
        formData.append(this.name || "files", file);
      }
      this.setFormValue(formData);
    } else {
      this.setFormValue(files[0] ?? null);
    }
    this.setValidityFrom(this.inputElement);
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
};

// src/components/input/emb-input.ts
import { css as css19, html as html19 } from "lit";
import { live as live4 } from "lit/directives/live.js";
var EmbInput = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.autocomplete = "";
    this.disabled = false;
    this.name = "";
    this.placeholder = "";
    this.readonly = false;
    this.required = false;
    this.type = "text";
    this.value = "";
    this.defaultValue = "";
    this.handleChange = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css19`
    :host {
      display: inline-block;
      width: var(--emb-field-inline-size, min(100%, 320px));
      max-width: 100%;
      min-width: 0;
      color: var(--fg);
    }

    input {
      box-sizing: border-box;
      width: 100%;
      min-height: 36px;
      font: inherit;
      padding: 0 var(--space-3);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
    }

    input::placeholder {
      color: var(--fg-subtle);
    }

    input:disabled {
      cursor: not-allowed;
      color: var(--fg-subtle);
      background: var(--bg-subtle);
    }

    input:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }
  `;
  }
  static {
    this.properties = {
      autocomplete: { reflect: true },
      disabled: { type: Boolean, reflect: true },
      name: { reflect: true },
      placeholder: { reflect: true },
      readonly: { type: Boolean, reflect: true, attribute: "readonly" },
      required: { type: Boolean, reflect: true },
      type: { reflect: true },
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultValue = this.getAttribute("value") ?? this.value;
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.value = this.defaultValue;
    this.syncFormState();
  }
  render() {
    return html19`
      <input
        part="control"
        .value=${live4(this.value)}
        autocomplete=${this.autocomplete}
        ?disabled=${this.disabled}
        name=${this.name}
        placeholder=${this.placeholder}
        ?readonly=${this.readonly}
        ?required=${this.required}
        type=${this.type}
        @input=${this.handleInput}
        @change=${this.handleChange}
      />
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled) {
      this.setFormValue(null);
      return;
    }
    this.setFormValue(this.value);
    if (this.inputElement) {
      this.setValidityFrom(this.inputElement);
    }
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
};

// src/components/link/emb-link.ts
import { css as css20, html as html20, LitElement as LitElement16 } from "lit";
var EmbLink = class extends LitElement16 {
  constructor() {
    super(...arguments);
    this.download = "";
    this.href = "";
    this.rel = "";
    this.target = "";
  }
  static {
    this.styles = css20`
    :host {
      display: inline-block;
    }

    a {
      color: var(--accent);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.15em;
      transition: color var(--duration-base) var(--ease-out);
    }

    a:hover {
      color: var(--accent-hover);
    }

    a:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
      border-radius: var(--radius-sm);
    }
  `;
  }
  static {
    this.properties = {
      download: { reflect: true },
      href: { reflect: true },
      rel: { reflect: true },
      target: { reflect: true }
    };
  }
  click() {
    this.anchorElement?.click();
  }
  focus(options) {
    this.anchorElement?.focus(options);
  }
  render() {
    return html20`
      <a
        part="control"
        href=${this.href || "#"}
        target=${this.target || ""}
        rel=${this.resolvedRel}
        download=${this.download || ""}
      >
        <slot></slot>
      </a>
    `;
  }
  get anchorElement() {
    return this.renderRoot.querySelector("a");
  }
  get resolvedRel() {
    if (this.rel) {
      return this.rel;
    }
    return this.target === "_blank" ? "noreferrer noopener" : "";
  }
};

// src/components/meter/emb-meter.ts
import { css as css21, html as html21, LitElement as LitElement17 } from "lit";
var EmbMeter = class extends LitElement17 {
  constructor() {
    super(...arguments);
    this.high = 100;
    this.low = 0;
    this.max = 100;
    this.min = 0;
    this.optimum = 100;
    this.value = 0;
  }
  static {
    this.styles = css21`
    :host {
      display: grid;
      gap: var(--space-2);
    }

    meter {
      inline-size: 100%;
      block-size: 12px;
    }

    .label {
      color: var(--fg-muted);
      font-size: var(--text-sm);
    }
  `;
  }
  static {
    this.properties = {
      high: { type: Number, reflect: true },
      low: { type: Number, reflect: true },
      max: { type: Number, reflect: true },
      min: { type: Number, reflect: true },
      optimum: { type: Number, reflect: true },
      value: { type: Number, reflect: true }
    };
  }
  render() {
    return html21`
      <span class="label" part="label"><slot></slot></span>
      <meter
        part="control"
        .high=${this.high}
        .low=${this.low}
        .max=${this.max}
        .min=${this.min}
        .optimum=${this.optimum}
        .value=${this.value}
      ></meter>
    `;
  }
};

// src/components/number-input/emb-number-input.ts
import { css as css22, html as html22 } from "lit";
import { live as live5 } from "lit/directives/live.js";
var EmbNumberInput = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.max = "";
    this.min = "";
    this.name = "";
    this.placeholder = "";
    this.readonly = false;
    this.required = false;
    this.step = "";
    this.value = "";
    this.defaultValue = "";
    this.handleChange = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css22`
    :host {
      display: inline-block;
      width: var(--emb-field-inline-size, min(100%, 320px));
      max-width: 100%;
      min-width: 0;
      color: var(--fg);
    }

    input {
      box-sizing: border-box;
      width: 100%;
      min-height: 36px;
      font: inherit;
      padding: 0 var(--space-3);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
    }

    input::placeholder {
      color: var(--fg-subtle);
    }

    input:disabled {
      cursor: not-allowed;
      color: var(--fg-subtle);
      background: var(--bg-subtle);
    }

    input:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }
  `;
  }
  static {
    this.properties = {
      disabled: { type: Boolean, reflect: true },
      max: { reflect: true },
      min: { reflect: true },
      name: { reflect: true },
      placeholder: { reflect: true },
      readonly: { type: Boolean, reflect: true, attribute: "readonly" },
      required: { type: Boolean, reflect: true },
      step: { reflect: true },
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultValue = this.getAttribute("value") ?? this.value;
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.value = this.defaultValue;
    this.syncFormState();
  }
  render() {
    return html22`
      <input
        part="control"
        .value=${live5(this.value)}
        ?disabled=${this.disabled}
        max=${this.max}
        min=${this.min}
        name=${this.name}
        placeholder=${this.placeholder}
        ?readonly=${this.readonly}
        ?required=${this.required}
        step=${this.step}
        type="number"
        @input=${this.handleInput}
        @change=${this.handleChange}
      />
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled) {
      this.setFormValue(null);
      return;
    }
    this.setFormValue(this.value);
    if (this.inputElement) {
      this.setValidityFrom(this.inputElement);
    }
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
};

// src/components/pagination/emb-pagination.ts
import { css as css23, html as html23, LitElement as LitElement18 } from "lit";
var EmbPagination = class extends LitElement18 {
  constructor() {
    super(...arguments);
    this.currentPage = 1;
    this.totalPages = 1;
  }
  static {
    this.styles = css23`
    :host {
      display: block;
    }

    nav {
      color: var(--fg);
    }

    ol {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-2);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    button {
      min-width: 2.25rem;
      min-height: 2.25rem;
      padding: 0 var(--space-3);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface);
      color: var(--fg);
      cursor: pointer;
      font: inherit;
    }

    button[aria-current="page"] {
      border-color: var(--accent);
      background: var(--accent);
      color: var(--accent-fg);
    }
  `;
  }
  static {
    this.properties = {
      currentPage: { type: Number, reflect: true, attribute: "current-page" },
      totalPages: { type: Number, reflect: true, attribute: "total-pages" }
    };
  }
  render() {
    return html23`
      <nav part="nav" aria-label="Pagination">
        <ol part="list">
          ${this.pages.map(
      (page) => html23`
              <li>
                <button
                  part="button"
                  type="button"
                  aria-current=${page === this.currentPage ? "page" : "false"}
                  @click=${() => this.selectPage(page)}
                >
                  ${page}
                </button>
              </li>
            `
    )}
        </ol>
      </nav>
    `;
  }
  get pages() {
    const total = Math.max(this.totalPages, 1);
    return Array.from({ length: total }, (_, index) => index + 1);
  }
  selectPage(page) {
    if (page === this.currentPage) {
      return;
    }
    this.currentPage = page;
    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
  }
};

// src/components/popover/emb-popover.ts
import { css as css24, html as html24, LitElement as LitElement19 } from "lit";
var EmbPopover = class extends LitElement19 {
  constructor() {
    super(...arguments);
    this.open = false;
    this.handleToggle = (event) => {
      event.stopPropagation();
      const details = event.currentTarget;
      this.open = details.open;
      this.dispatchEvent(new Event("toggle", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css24`
    :host {
      display: inline-block;
      position: relative;
    }

    details {
      position: relative;
    }

    summary {
      list-style: none;
      cursor: pointer;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    .panel {
      position: absolute;
      inset-block-start: calc(100% + var(--space-2));
      inset-inline-start: 0;
      min-width: 220px;
      padding: var(--space-4);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface);
      color: var(--fg);
      box-shadow: var(--shadow-md);
      z-index: 20;
    }
  `;
  }
  static {
    this.properties = {
      open: { type: Boolean, reflect: true }
    };
  }
  render() {
    return html24`
      <details ?open=${this.open} @toggle=${this.handleToggle}>
        <summary part="trigger">
          <slot name="trigger"></slot>
        </summary>
        <div class="panel" part="panel">
          <slot></slot>
        </div>
      </details>
    `;
  }
};

// src/components/progress/emb-progress.ts
import { css as css25, html as html25, LitElement as LitElement20 } from "lit";
var EmbProgress = class extends LitElement20 {
  constructor() {
    super(...arguments);
    this.max = 100;
    this.value = 0;
  }
  static {
    this.styles = css25`
    :host {
      display: grid;
      gap: var(--space-2);
    }

    progress {
      inline-size: 100%;
      block-size: 12px;
      overflow: hidden;
      border: 0;
      border-radius: var(--radius-full);
      background: var(--bg-subtle);
      color: var(--accent);
    }

    progress::-webkit-progress-bar {
      background: var(--bg-subtle);
      border-radius: var(--radius-full);
    }

    progress::-webkit-progress-value {
      background: currentColor;
      border-radius: var(--radius-full);
    }

    progress::-moz-progress-bar {
      background: currentColor;
      border-radius: var(--radius-full);
    }

    .label {
      color: var(--fg-muted);
      font-size: var(--text-sm);
    }
  `;
  }
  static {
    this.properties = {
      max: { type: Number, reflect: true },
      value: { type: Number, reflect: true }
    };
  }
  render() {
    return html25`
      <span class="label" part="label"><slot></slot></span>
      <progress part="control" .max=${this.normalizedMax} .value=${this.clampedValue}></progress>
    `;
  }
  get normalizedMax() {
    return this.max > 0 ? this.max : 100;
  }
  get clampedValue() {
    return Math.min(Math.max(this.value, 0), this.normalizedMax);
  }
};

// src/components/radio/emb-radio.ts
import { css as css26, html as html26 } from "lit";
import { live as live6 } from "lit/directives/live.js";
var EmbRadio = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.checked = false;
    this.disabled = false;
    this.name = "";
    this.required = false;
    this.value = "on";
    this.defaultChecked = false;
    this.handleChange = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.checked = input.checked;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.checked = input.checked;
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css26`
    :host {
      display: inline-block;
      color: var(--fg);
    }

    label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font: inherit;
      cursor: pointer;
    }

    input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--accent);
    }

    :host([disabled]) label {
      cursor: not-allowed;
      opacity: 0.72;
    }

    input:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }
  `;
  }
  static {
    this.properties = {
      checked: { type: Boolean, reflect: true },
      disabled: { type: Boolean, reflect: true },
      name: { reflect: true },
      required: { type: Boolean, reflect: true },
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultChecked = this.hasAttribute("checked");
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.checked = this.defaultChecked;
    this.syncFormState();
  }
  render() {
    return html26`
      <label part="label">
        <input
          part="control"
          .checked=${live6(this.checked)}
          ?disabled=${this.disabled}
          name=${this.name}
          ?required=${this.required}
          type="radio"
          value=${this.value}
          @input=${this.handleInput}
          @change=${this.handleChange}
        />
        <slot></slot>
      </label>
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled || !this.checked) {
      this.setFormValue(null);
    } else {
      this.setFormValue(this.value);
    }
    if (this.inputElement) {
      this.setValidityFrom(this.inputElement);
    }
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
};

// src/components/range/emb-range.ts
import { css as css27, html as html27 } from "lit";
import { live as live7 } from "lit/directives/live.js";
var EmbRange = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.max = 100;
    this.min = 0;
    this.name = "";
    this.required = false;
    this.step = 1;
    this.value = 0;
    this.defaultValue = 0;
    this.handleInput = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = Number(input.value);
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
    this.handleChange = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = Number(input.value);
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css27`
    :host {
      display: inline-block;
      width: var(--emb-field-inline-size, min(100%, 320px));
      max-width: 100%;
      min-width: 0;
      color: var(--fg);
    }

    input {
      box-sizing: border-box;
      width: 100%;
      accent-color: var(--accent);
    }
  `;
  }
  static {
    this.properties = {
      disabled: { type: Boolean, reflect: true },
      max: { type: Number, reflect: true },
      min: { type: Number, reflect: true },
      name: { reflect: true },
      required: { type: Boolean, reflect: true },
      step: { type: Number, reflect: true },
      value: { type: Number, reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultValue = Number(this.getAttribute("value") ?? this.value);
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.value = this.defaultValue;
    this.syncFormState();
  }
  render() {
    return html27`
      <input
        part="control"
        .value=${live7(String(this.value))}
        ?disabled=${this.disabled}
        max=${String(this.max)}
        min=${String(this.min)}
        name=${this.name}
        ?required=${this.required}
        step=${String(this.step)}
        type="range"
        @input=${this.handleInput}
        @change=${this.handleChange}
      />
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled) {
      this.setFormValue(null);
      return;
    }
    this.setFormValue(String(this.value));
    if (this.inputElement) {
      this.setValidityFrom(this.inputElement);
    }
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
};

// src/components/search/emb-search.ts
import { css as css28, html as html28 } from "lit";
import { live as live8 } from "lit/directives/live.js";
var EmbSearch = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.autocomplete = "";
    this.disabled = false;
    this.name = "";
    this.placeholder = "";
    this.readonly = false;
    this.required = false;
    this.value = "";
    this.defaultValue = "";
    this.handleChange = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css28`
    :host {
      display: inline-block;
      width: var(--emb-field-inline-size, min(100%, 320px));
      max-width: 100%;
      min-width: 0;
      color: var(--fg);
    }

    .surface {
      position: relative;
    }

    input {
      box-sizing: border-box;
      width: 100%;
      min-height: 36px;
      font: inherit;
      padding: 0 var(--space-3) 0 calc(var(--space-3) * 2 + 1rem);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
    }

    input::placeholder {
      color: var(--fg-subtle);
    }

    input:disabled {
      cursor: not-allowed;
      color: var(--fg-subtle);
      background: var(--bg-subtle);
    }

    input:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }

    .icon {
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: var(--space-3);
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--fg-subtle);
      pointer-events: none;
      transform: translateY(-50%);
    }
  `;
  }
  static {
    this.properties = {
      autocomplete: { reflect: true },
      disabled: { type: Boolean, reflect: true },
      name: { reflect: true },
      placeholder: { reflect: true },
      readonly: { type: Boolean, reflect: true, attribute: "readonly" },
      required: { type: Boolean, reflect: true },
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultValue = this.getAttribute("value") ?? this.value;
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.value = this.defaultValue;
    this.syncFormState();
  }
  render() {
    return html28`
      <div class="surface" part="surface">
        <svg class="icon" part="icon" viewBox="0 0 16 16" aria-hidden="true">
          <path
            d="M11.25 10.19 14 12.94 12.94 14l-2.75-2.75a5 5 0 1 1 1.06-1.06ZM6.5 10a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"
            fill="currentColor"
          ></path>
        </svg>
        <input
          part="control"
          .value=${live8(this.value)}
          autocomplete=${this.autocomplete}
          ?disabled=${this.disabled}
          name=${this.name}
          placeholder=${this.placeholder}
          ?readonly=${this.readonly}
          ?required=${this.required}
          type="search"
          @input=${this.handleInput}
          @change=${this.handleChange}
        />
      </div>
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled) {
      this.setFormValue(null);
      return;
    }
    this.setFormValue(this.value);
    if (this.inputElement) {
      this.setValidityFrom(this.inputElement);
    }
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
};

// src/components/skeleton/emb-skeleton.ts
import { css as css29, html as html29, LitElement as LitElement21 } from "lit";
var EmbSkeleton = class extends LitElement21 {
  constructor() {
    super(...arguments);
    this.variant = "line";
  }
  static {
    this.styles = css29`
    :host {
      display: block;
    }

    span {
      display: block;
      inline-size: var(--emb-skeleton-width, 100%);
      block-size: var(--emb-skeleton-height, 1rem);
      border-radius: var(--radius-md);
      background:
        linear-gradient(
          90deg,
          color-mix(in srgb, var(--border) 32%, transparent) 25%,
          color-mix(in srgb, var(--border-strong) 20%, transparent) 50%,
          color-mix(in srgb, var(--border) 32%, transparent) 75%
        );
      background-size: 200% 100%;
      animation: emb-skeleton-pulse 1.2s ease-in-out infinite;
    }

    :host([variant="line"]) span {
      block-size: var(--emb-skeleton-height, 1rem);
    }

    :host([variant="block"]) span {
      block-size: var(--emb-skeleton-height, 4rem);
    }

    :host([variant="circle"]) span {
      inline-size: var(--emb-skeleton-size, 2.5rem);
      block-size: var(--emb-skeleton-size, 2.5rem);
      border-radius: 50%;
    }

    @keyframes emb-skeleton-pulse {
      0% {
        background-position: 100% 0;
      }

      100% {
        background-position: -100% 0;
      }
    }
  `;
  }
  static {
    this.properties = {
      variant: { reflect: true }
    };
  }
  render() {
    return html29`<span part="surface" aria-hidden="true"></span>`;
  }
};

// src/components/select/emb-select.ts
import { css as css30, html as html30 } from "lit";
import { live as live9 } from "lit/directives/live.js";
var EmbSelect = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.name = "";
    this.required = false;
    this.value = "";
    this.defaultValue = "";
    this.optionNodes = [];
    this.handleChange = (event) => {
      event.stopPropagation();
      const select = event.currentTarget;
      this.value = select.value;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const select = event.currentTarget;
      this.value = select.value;
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
    this.handleSlotChange = () => {
      this.refreshOptions();
    };
  }
  static {
    this.styles = css30`
    :host {
      display: inline-block;
      width: var(--emb-field-inline-size, min(100%, 320px));
      max-width: 100%;
      min-width: 0;
      color: var(--fg);
    }

    select {
      box-sizing: border-box;
      width: 100%;
      min-height: 36px;
      font: inherit;
      padding: 0 var(--space-3);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
    }

    select:disabled {
      cursor: not-allowed;
      color: var(--fg-subtle);
      background: var(--bg-subtle);
    }

    select:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }

    slot {
      display: none;
    }
  `;
  }
  static {
    this.properties = {
      disabled: { type: Boolean, reflect: true },
      name: { reflect: true },
      required: { type: Boolean, reflect: true },
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultValue = this.getAttribute("value") ?? this.value;
    this.refreshOptions();
  }
  checkValidity() {
    return this.selectElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.selectElement?.focus(options);
  }
  reportValidity() {
    return this.selectElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.value = this.defaultValue;
    this.syncFormState();
  }
  render() {
    return html30`
      <slot @slotchange=${this.handleSlotChange}></slot>
      <select
        part="control"
        .value=${live9(this.value)}
        ?disabled=${this.disabled}
        name=${this.name}
        ?required=${this.required}
        @input=${this.handleInput}
        @change=${this.handleChange}
      >
        ${this.optionNodes.map(
      (node) => node.kind === "option" ? html30`<option value=${node.option.value} ?disabled=${node.option.disabled}>${node.option.label}</option>` : html30`
                <optgroup label=${node.group.label} ?disabled=${node.group.disabled}>
                  ${node.group.options.map(
        (option) => html30`<option value=${option.value} ?disabled=${option.disabled}>${option.label}</option>`
      )}
                </optgroup>
              `
    )}
      </select>
    `;
  }
  updated() {
    this.syncFormState();
  }
  refreshOptions() {
    const nodes = Array.from(this.children).map((child) => {
      if (child instanceof HTMLOptionElement) {
        return {
          kind: "option",
          option: {
            disabled: child.disabled,
            label: child.label || child.textContent?.trim() || "",
            value: child.value
          }
        };
      }
      if (child instanceof HTMLOptGroupElement) {
        return {
          kind: "optgroup",
          group: {
            disabled: child.disabled,
            label: child.label,
            options: Array.from(child.children).filter((option) => option instanceof HTMLOptionElement).map((option) => ({
              disabled: option.disabled,
              label: option.label || option.textContent?.trim() || "",
              value: option.value
            }))
          }
        };
      }
      return null;
    }).filter((node) => node !== null);
    this.optionNodes = nodes;
    if (!this.hasAttribute("value")) {
      const firstOptionNode = nodes.find(
        (node) => node.kind === "option"
      );
      const firstGroupNode = nodes.find(
        (node) => node.kind === "optgroup"
      );
      const selectedOption = firstOptionNode?.option ?? firstGroupNode?.group.options[0];
      if (selectedOption) {
        this.value = selectedOption.value;
      }
    }
    this.requestUpdate();
  }
  syncFormState() {
    if (this.disabled) {
      this.setFormValue(null);
      return;
    }
    this.setFormValue(this.value);
    if (this.selectElement) {
      this.setValidityFrom(this.selectElement);
    }
  }
  get selectElement() {
    return this.renderRoot.querySelector("select");
  }
};

// src/components/spinner/emb-spinner.ts
import { css as css31, html as html31, LitElement as LitElement22 } from "lit";
var EmbSpinner = class extends LitElement22 {
  static {
    this.styles = css31`
    :host {
      display: inline-flex;
      color: var(--accent);
    }

    span {
      inline-size: 16px;
      block-size: 16px;
      border-radius: 50%;
      border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
      border-top-color: currentColor;
      animation: emb-spinner-rotate 0.7s linear infinite;
    }

    @keyframes emb-spinner-rotate {
      to {
        transform: rotate(360deg);
      }
    }
  `;
  }
  render() {
    return html31`<span part="indicator" aria-hidden="true"></span>`;
  }
};

// src/components/switch/emb-switch.ts
import { css as css32, html as html32 } from "lit";
import { live as live10 } from "lit/directives/live.js";
var EmbSwitch = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.checked = false;
    this.disabled = false;
    this.name = "";
    this.required = false;
    this.value = "on";
    this.defaultChecked = false;
    this.handleChange = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.checked = input.checked;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.checked = input.checked;
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css32`
    :host {
      display: inline-block;
      color: var(--fg);
    }

    label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      font: inherit;
      cursor: pointer;
    }

    .track {
      position: relative;
      display: inline-flex;
      align-items: center;
      width: 38px;
      height: 22px;
      border-radius: var(--radius-full);
      border: 1px solid var(--border);
      background: var(--bg-subtle);
      transition:
        background var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
    }

    .thumb {
      position: absolute;
      left: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--surface);
      box-shadow: var(--shadow-xs);
      transition:
        transform var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
    }

    input {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      opacity: 0;
      pointer-events: none;
    }

    :host([checked]) .track {
      background: var(--accent);
      border-color: var(--accent);
    }

    :host([checked]) .thumb {
      transform: translateX(16px);
      background: var(--accent-fg);
    }

    :host([disabled]) label {
      cursor: not-allowed;
      opacity: 0.72;
    }

    input:focus-visible + .track {
      box-shadow: var(--ring-focus);
    }
  `;
  }
  static {
    this.properties = {
      checked: { type: Boolean, reflect: true },
      disabled: { type: Boolean, reflect: true },
      name: { reflect: true },
      required: { type: Boolean, reflect: true },
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultChecked = this.hasAttribute("checked");
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.checked = this.defaultChecked;
    this.syncFormState();
  }
  render() {
    return html32`
      <label part="label">
        <input
          part="control"
          .checked=${live10(this.checked)}
          ?disabled=${this.disabled}
          name=${this.name}
          ?required=${this.required}
          type="checkbox"
          value=${this.value}
          role="switch"
          @input=${this.handleInput}
          @change=${this.handleChange}
        />
        <span class="track" aria-hidden="true"><span class="thumb"></span></span>
        <slot></slot>
      </label>
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled || !this.checked) {
      this.setFormValue(null);
    } else {
      this.setFormValue(this.value);
    }
    if (this.inputElement) {
      this.setValidityFrom(this.inputElement);
    }
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
};

// src/components/tabs/emb-tabs.ts
import { css as css33, html as html33, LitElement as LitElement23 } from "lit";
var EmbTabs = class extends LitElement23 {
  constructor() {
    super(...arguments);
    this.value = "";
    this.panels = [];
    this.panelIndex = 0;
    this.handleSlotChange = () => {
      this.refreshPanels();
    };
  }
  static {
    this.styles = css33`
    :host {
      display: grid;
      gap: var(--space-4);
      color: var(--fg);
    }

    [part="list"] {
      display: flex;
      gap: var(--space-2);
      border-bottom: 1px solid var(--border);
      padding-bottom: var(--space-2);
    }

    button {
      font: inherit;
      padding: var(--space-2) var(--space-3);
      border: 1px solid transparent;
      border-radius: var(--radius-md);
      background: transparent;
      color: var(--fg-muted);
      cursor: pointer;
      transition:
        color var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
    }

    button[aria-selected="true"] {
      color: var(--fg);
      background: var(--bg-subtle);
      border-color: var(--border);
    }

    button:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }

    .panels ::slotted(*) {
      display: block;
    }
  `;
  }
  static {
    this.properties = {
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.refreshPanels();
  }
  render() {
    return html33`
      <div part="list" role="tablist" aria-orientation="horizontal">
        ${this.panels.map(
      (panel) => html33`
            <button
              part="tab"
              id=${`${panel.id}-tab`}
              role="tab"
              type="button"
              aria-controls=${panel.id}
              aria-selected=${String(this.value === panel.value)}
              tabindex=${this.value === panel.value ? "0" : "-1"}
              @click=${() => this.select(panel.value)}
            >
              ${panel.label}
            </button>
          `
    )}
      </div>
      <div class="panels" part="panels">
        <slot @slotchange=${this.handleSlotChange}></slot>
      </div>
    `;
  }
  updated() {
    this.syncPanels();
  }
  refreshPanels() {
    const children = Array.from(this.children).filter((child) => child instanceof HTMLElement);
    this.panels = children.map((child, index) => {
      if (!child.id) {
        this.panelIndex += 1;
        child.id = `emb-tab-panel-${this.panelIndex}`;
      }
      return {
        id: child.id,
        label: child.dataset.label ?? `Tab ${index + 1}`,
        value: child.dataset.value ?? child.id
      };
    });
    if (!this.value && this.panels[0]) {
      this.value = this.panels[0].value;
    }
    if (this.value && !this.panels.some((panel) => panel.value === this.value) && this.panels[0]) {
      this.value = this.panels[0].value;
    }
    this.syncPanels();
    this.requestUpdate();
  }
  select(value) {
    this.value = value;
    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
  }
  syncPanels() {
    const children = Array.from(this.children).filter((child) => child instanceof HTMLElement);
    for (const child of children) {
      const panel = this.panels.find((entry) => entry.id === child.id);
      const selected = panel?.value === this.value;
      child.hidden = !selected;
      child.setAttribute("role", "tabpanel");
      child.setAttribute("tabindex", "0");
      if (panel) {
        child.setAttribute("aria-labelledby", `${panel.id}-tab`);
      }
    }
  }
};

// src/components/textarea/emb-textarea.ts
import { css as css34, html as html34 } from "lit";
import { live as live11 } from "lit/directives/live.js";
var EmbTextarea = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.name = "";
    this.placeholder = "";
    this.readonly = false;
    this.required = false;
    this.rows = 4;
    this.value = "";
    this.defaultValue = "";
    this.handleChange = (event) => {
      event.stopPropagation();
      const textarea = event.currentTarget;
      this.value = textarea.value;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const textarea = event.currentTarget;
      this.value = textarea.value;
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css34`
    :host {
      display: inline-block;
      width: var(--emb-field-inline-size, min(100%, 420px));
      max-width: 100%;
      min-width: 0;
      color: var(--fg);
    }

    textarea {
      box-sizing: border-box;
      width: 100%;
      min-height: 88px;
      font: inherit;
      line-height: var(--leading-normal);
      padding: var(--space-3);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      resize: vertical;
      transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
    }

    textarea::placeholder {
      color: var(--fg-subtle);
    }

    textarea:disabled {
      cursor: not-allowed;
      color: var(--fg-subtle);
      background: var(--bg-subtle);
    }

    textarea:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }
  `;
  }
  static {
    this.properties = {
      disabled: { type: Boolean, reflect: true },
      name: { reflect: true },
      placeholder: { reflect: true },
      readonly: { type: Boolean, reflect: true, attribute: "readonly" },
      required: { type: Boolean, reflect: true },
      rows: { type: Number, reflect: true },
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultValue = this.getAttribute("value") ?? this.value;
  }
  checkValidity() {
    return this.textareaElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.textareaElement?.focus(options);
  }
  reportValidity() {
    return this.textareaElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.value = this.defaultValue;
    this.syncFormState();
  }
  render() {
    return html34`
      <textarea
        part="control"
        .value=${live11(this.value)}
        ?disabled=${this.disabled}
        name=${this.name}
        placeholder=${this.placeholder}
        ?readonly=${this.readonly}
        ?required=${this.required}
        rows=${this.rows}
        @input=${this.handleInput}
        @change=${this.handleChange}
      ></textarea>
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled) {
      this.setFormValue(null);
      return;
    }
    this.setFormValue(this.value);
    if (this.textareaElement) {
      this.setValidityFrom(this.textareaElement);
    }
  }
  get textareaElement() {
    return this.renderRoot.querySelector("textarea");
  }
};

// src/components/time-input/emb-time-input.ts
import { css as css35, html as html35 } from "lit";
import { live as live12 } from "lit/directives/live.js";
var EmbTimeInput = class extends FormAssociatedElement {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.max = "";
    this.min = "";
    this.name = "";
    this.readonly = false;
    this.required = false;
    this.step = "";
    this.value = "";
    this.defaultValue = "";
    this.handleChange = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.syncFormState();
      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
    };
    this.handleInput = (event) => {
      event.stopPropagation();
      const input = event.currentTarget;
      this.value = input.value;
      this.syncFormState();
      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css35`
    :host {
      display: inline-block;
      width: var(--emb-field-inline-size, min(100%, 320px));
      max-width: 100%;
      min-width: 0;
      color: var(--fg);
    }

    input {
      box-sizing: border-box;
      width: 100%;
      min-height: 36px;
      font: inherit;
      padding: 0 var(--space-3);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--fg);
      transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
    }

    input:disabled {
      cursor: not-allowed;
      color: var(--fg-subtle);
      background: var(--bg-subtle);
    }

    input:focus-visible {
      outline: none;
      box-shadow: var(--ring-focus);
    }
  `;
  }
  static {
    this.properties = {
      disabled: { type: Boolean, reflect: true },
      max: { reflect: true },
      min: { reflect: true },
      name: { reflect: true },
      readonly: { type: Boolean, reflect: true, attribute: "readonly" },
      required: { type: Boolean, reflect: true },
      step: { reflect: true },
      value: { reflect: true }
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.defaultValue = this.getAttribute("value") ?? this.value;
  }
  checkValidity() {
    return this.inputElement?.checkValidity() ?? true;
  }
  focus(options) {
    this.inputElement?.focus(options);
  }
  reportValidity() {
    return this.inputElement?.reportValidity() ?? true;
  }
  formDisabledCallback(disabled) {
    this.disabled = disabled;
  }
  formResetCallback() {
    this.value = this.defaultValue;
    this.syncFormState();
  }
  render() {
    return html35`
      <input
        part="control"
        .value=${live12(this.value)}
        ?disabled=${this.disabled}
        max=${this.max}
        min=${this.min}
        name=${this.name}
        ?readonly=${this.readonly}
        ?required=${this.required}
        step=${this.step}
        type="time"
        @input=${this.handleInput}
        @change=${this.handleChange}
      />
    `;
  }
  updated() {
    this.syncFormState();
  }
  syncFormState() {
    if (this.disabled) {
      this.setFormValue(null);
      return;
    }
    this.setFormValue(this.value);
    if (this.inputElement) {
      this.setValidityFrom(this.inputElement);
    }
  }
  get inputElement() {
    return this.renderRoot.querySelector("input");
  }
};

// src/components/toast/emb-toast.ts
import { css as css36, html as html36, LitElement as LitElement24, nothing as nothing4 } from "lit";
var EmbToast = class extends LitElement24 {
  constructor() {
    super(...arguments);
    this.dismissible = false;
    this.open = true;
    this.tone = "neutral";
    this.close = () => {
      this.open = false;
      this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
    };
  }
  static {
    this.styles = css36`
    :host {
      display: inline-block;
    }

    div {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: start;
      gap: var(--space-3);
      min-width: 280px;
      padding: var(--space-4);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      background: var(--surface-raised, var(--surface));
      color: var(--fg);
      box-shadow: var(--shadow-md);
    }

    :host([tone="success"]) div {
      border-color: color-mix(in srgb, var(--success) 40%, var(--border));
    }

    :host([tone="warning"]) div {
      border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    }

    :host([tone="danger"]) div {
      border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
    }

    button {
      font: inherit;
      border: 0;
      background: transparent;
      color: var(--fg-muted);
      cursor: pointer;
      padding: 0;
    }
  `;
  }
  static {
    this.properties = {
      dismissible: { type: Boolean, reflect: true },
      open: { type: Boolean, reflect: true },
      tone: { reflect: true }
    };
  }
  render() {
    if (!this.open) {
      return nothing4;
    }
    return html36`
      <div part="surface" role="status" aria-live="polite">
        <slot></slot>
        ${this.dismissible ? html36`<button part="close-button" type="button" aria-label="Dismiss toast" @click=${this.close}>x</button>` : nothing4}
      </div>
    `;
  }
};

// src/components/tooltip/emb-tooltip.ts
import { css as css37, html as html37, LitElement as LitElement25, nothing as nothing5 } from "lit";
var EmbTooltip = class extends LitElement25 {
  constructor() {
    super(...arguments);
    this.open = false;
    this.text = "";
    this.show = () => {
      this.open = true;
    };
    this.hide = () => {
      this.open = false;
    };
  }
  static {
    this.styles = css37`
    :host {
      display: inline-block;
      position: relative;
    }

    .trigger {
      display: inline-flex;
    }

    .bubble {
      position: absolute;
      inset-block-end: calc(100% + var(--space-2));
      inset-inline-start: 50%;
      transform: translateX(-50%);
      min-width: max-content;
      max-width: 240px;
      padding: var(--space-2) var(--space-3);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      background: var(--surface-inverse);
      color: var(--bg);
      font-size: var(--text-xs);
      box-shadow: var(--shadow-sm);
      white-space: nowrap;
      z-index: 10;
    }
  `;
  }
  static {
    this.properties = {
      open: { type: Boolean, reflect: true },
      text: { reflect: true }
    };
  }
  render() {
    return html37`
      <span
        class="trigger"
        tabindex="0"
        @mouseenter=${this.show}
        @mouseleave=${this.hide}
        @focusin=${this.show}
        @focusout=${this.hide}
      >
        <slot></slot>
      </span>
      ${this.open ? html37`<span class="bubble" part="tooltip" role="tooltip">${this.text}</span>` : nothing5}
    `;
  }
};

export {
  EmbBadge,
  EmbButton,
  EmbCard,
  EmbCheckbox,
  EmbAccordion,
  EmbAlert,
  EmbAvatar,
  EmbDivider,
  EmbDialog,
  EmbDrawer,
  EmbDropdownMenu,
  EmbBreadcrumbs,
  EmbCodeBlock,
  EmbCombobox,
  EmbDateInput,
  EmbEmptyState,
  EmbFieldset,
  EmbFileInput,
  EmbInput,
  EmbLink,
  EmbMeter,
  EmbNumberInput,
  EmbPagination,
  EmbPopover,
  EmbProgress,
  EmbRadio,
  EmbRange,
  EmbSearch,
  EmbSkeleton,
  EmbSelect,
  EmbSpinner,
  EmbSwitch,
  EmbTabs,
  EmbTextarea,
  EmbTimeInput,
  EmbToast,
  EmbTooltip
};
