// src/components/button/emb-button.ts
import { css, html, LitElement } from "lit";
var EmbButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.disabled = false;
    this.type = "button";
    this.variant = "solid";
  }
  static {
    this.styles = css`
    :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 html`
      <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/checkbox/emb-checkbox.ts
import { css as css2, html as html2 } from "lit";
import { live } from "lit/directives/live.js";

// src/components/shared/form-associated-element.ts
import { LitElement as LitElement2 } from "lit";
var FormAssociatedElement = class extends LitElement2 {
  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 = css2`
    :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 html2`
      <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/input/emb-input.ts
import { css as css3, html as html3 } from "lit";
import { live as live2 } 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 = css3`
    :host {
      display: inline-block;
      width: min(100%, 320px);
      color: var(--fg);
    }

    input {
      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 html3`
      <input
        part="control"
        .value=${live2(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");
  }
};

export {
  EmbButton,
  EmbCheckbox,
  EmbInput
};
