import {
  defaultValue
} from "./chunk.GI7VDIWX.js";
import {
  FormControlController
} from "./chunk.C3WIBDGG.js";
import {
  HasSlotController
} from "./chunk.IVMQWO2L.js";
import {
  watch
} from "./chunk.X2OQMWGY.js";
import {
  SolidElement,
  customElement
} from "./chunk.H53WQBDK.js";
import {
  __decorateClass
} from "./chunk.S3NI7NKU.js";

// src/components/switch/switch.ts
import { css, html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { live } from "lit/directives/live.js";
import { property, query, state } from "lit/decorators.js";
import cx from "classix";
var SdSwitch = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.hasSlotController = new HasSlotController(this, "tooltip");
    this.formControlController = new FormControlController(this, {
      value: (control) => control.checked ? control.value || "on" : void 0,
      defaultValue: (control) => control.defaultChecked,
      setValue: (control, checked) => control.checked = checked
    });
    this.showInvalidStyle = false;
    this.title = "";
    this.name = "";
    this.disabled = false;
    this.checked = false;
    this.defaultChecked = false;
    this.form = "";
    this.required = false;
  }
  /** Gets the validity state object */
  get validity() {
    return this.input.validity;
  }
  firstUpdated() {
    this.formControlController.updateValidity();
  }
  handleClick() {
    this.checked = !this.checked;
    this.emit("sd-change");
  }
  handleBlur() {
    this.emit("sd-blur");
  }
  handleInput() {
    this.emit("sd-input");
  }
  handleInvalid(event) {
    this.formControlController.setValidity(false);
    this.formControlController.emitInvalidEvent(event);
    this.invalidMessage.textContent = event.target.validationMessage;
  }
  handleFocus() {
    this.emit("sd-focus");
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
    this.formControlController.setValidity(this.disabled);
  }
  handleStateChange() {
    this.input.checked = this.checked;
    this.formControlController.updateValidity();
  }
  /** Simulates a click on the switch. */
  click() {
    this.input.click();
  }
  /** Sets focus on the switch. */
  focus(options) {
    this.input.focus(options);
  }
  /** Removes focus from the switch. */
  blur() {
    this.input.blur();
  }
  /** Checks for validity but does not show a validation message. Returns true when valid and false when invalid. */
  checkValidity() {
    return this.input.checkValidity();
  }
  /** Gets the associated form, if one exists. */
  getForm() {
    return this.formControlController.getForm();
  }
  /** Checks for validity and shows a validation message if the control is invalid. */
  reportValidity() {
    return this.input.reportValidity();
  }
  /**
   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
   * the custom validation message, call this method with an empty string.
   */
  setCustomValidity(message) {
    this.input.setCustomValidity(message);
    this.formControlController.updateValidity();
  }
  render() {
    return html`<div class="flex flex-row items-center gap-2"><label part="base" class="${cx(
      "group flex items-center text-base leading-normal text-black cursor-pointer",
      this.disabled && "hover:cursor-not-allowed"
    )}"><input id="input" class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" role="switch" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.checked ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="invalid-message" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"}" class="${cx(
      `relative flex flex-initial items-center justify-center sd-switch-border-width rounded-full h-4 w-8 transition-colors ease duration-100
            peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2
            peer-focus-visible:outline-primary outline-transparent transition-colors ease-in-out duration-medium hover:duration-fast`,
      this.disabled && this.checked ? "bg-neutral-500" : this.disabled ? "border-neutral-500" : this.showInvalidStyle ? this.checked ? "border-error bg-error hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : "border-error bg-white hover:border-error-400 hover:bg-white group-hover:border-error-400 group-hover:bg-white" : this.checked ? "border-accent hover:sd-switch--checked--hover-color-background bg-accent hover:border-accent-550 group-hover:border-accent-550 group-hover:sd-switch--checked--hover-color-background" : "sd-switch--unchecked-color-border bg-white hover:sd-switch--unchecked--hover-color-background group-hover:sd-switch--unchecked--hover-color-background"
    )}"><span id="thumb" part="thumb" class="${cx(
      "w-2.5 h-2.5 rounded-full transition[transform,colors] ease-in-out duration-medium",
      this.disabled && this.checked ? "translate-x-2" : this.disabled ? "-translate-x-2" : this.showInvalidStyle ? this.checked ? "translate-x-2" : "bg-error -translate-x-2 hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : this.checked ? "translate-x-2" : "-translate-x-2 sd-switch--unchecked__icon-color-background"
    )}"></span> </span><span part="label" id="label" class="${cx("select-none inline-block ml-2", this.disabled ? "text-neutral-500" : "sd-switch-color-text")}"><slot></slot></span></label> ${this.hasSlotController.test("tooltip") ? html`<slot name="tooltip"></slot>` : null}</div><div part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-icon>` : ""} ${this.formControlController.renderInvalidMessage("lg")}</div>`;
  }
};
/**
 * Inherits Tailwind classes and includes additional styling.
 */
SdSwitch.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){--tw-outline-style:none;outline-style:none}:host([required]) #label::after{content:' *'}:host([disabled][checked]) #control{border-color:rgba(var(--sd-color-background-neutral-500,rgba(var(--sd-color-neutral-500))))}:host([checked]) [part=thumb]{background-color:rgba(var(--sd-color-icon-fill-white,rgba(var(--sd-color-white))))}:host([disabled]:not([checked])) [part=thumb]{background-color:rgba(var(--sd-color-icon-fill-neutral-500,rgba(var(--sd-color-neutral-500))))}`
];
__decorateClass([
  query("input")
], SdSwitch.prototype, "input", 2);
__decorateClass([
  query("#invalid-message")
], SdSwitch.prototype, "invalidMessage", 2);
__decorateClass([
  state()
], SdSwitch.prototype, "showInvalidStyle", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdSwitch.prototype, "title", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdSwitch.prototype, "name", 2);
__decorateClass([
  property()
], SdSwitch.prototype, "value", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdSwitch.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdSwitch.prototype, "checked", 2);
__decorateClass([
  defaultValue("checked")
], SdSwitch.prototype, "defaultChecked", 2);
__decorateClass([
  property({ reflect: true })
], SdSwitch.prototype, "form", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdSwitch.prototype, "required", 2);
__decorateClass([
  watch("disabled", { waitUntilFirstUpdate: true })
], SdSwitch.prototype, "handleDisabledChange", 1);
__decorateClass([
  watch(["checked"], { waitUntilFirstUpdate: true })
], SdSwitch.prototype, "handleStateChange", 1);
SdSwitch = __decorateClass([
  customElement("sd-switch")
], SdSwitch);

export {
  SdSwitch
};
