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

// src/components/checkbox/checkbox.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 SdCheckbox = class extends SolidElement {
  constructor() {
    super(...arguments);
    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.title = "";
    this.name = "";
    this.size = "lg";
    this.disabled = false;
    this.visuallyDisabled = false;
    this.checked = false;
    this.indeterminate = false;
    this.defaultChecked = false;
    this.form = "";
    this.required = false;
    this.showInvalidStyle = false;
  }
  /** Gets the validity state object */
  get validity() {
    return this.input.validity;
  }
  firstUpdated() {
    this.formControlController.updateValidity();
  }
  handleClick(event) {
    if (this.visuallyDisabled) {
      event.preventDefault();
      event.stopPropagation();
      return;
    }
    this.checked = !this.checked;
    this.indeterminate = false;
    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() {
    const isDisabled = this.disabled || this.visuallyDisabled;
    this.setAttribute("aria-disabled", isDisabled ? "true" : "false");
    this.formControlController.setValidity(isDisabled);
  }
  handleStateChange() {
    this.input.checked = this.checked;
    this.input.indeterminate = this.indeterminate;
    this.formControlController.updateValidity();
  }
  /** Simulates a click on the checkbox. */
  click() {
    this.input.click();
  }
  /** Sets focus on the checkbox. */
  focus(options) {
    this.input.focus(options);
  }
  /** Removes focus from the checkbox. */
  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() {
    this.formControlController.fakeUserInteraction();
    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() {
    const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
    return html`<div class="flex flex-col"><label part="base" class="${cx(
      "sd-6-22-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
      (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
      {
        /* sizes, fonts */
        sm: "text-sm",
        md: "text-base",
        lg: "text-base"
      }[this.size]
    )}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.indeterminate ? "mixed" : this.checked}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @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"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
      "relative flex flex-shrink-0 items-center justify-center border sd-6-22-0-checkbox-border-width rounded-sm h-4 w-4",
      "transition-colors ease-in-out duration-medium group-hover:duration-fast",
      "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary outline-transparent",
      {
        sm: "mt-[2px]",
        md: "mt-[3px]",
        lg: "mt-[3px]"
      }[this.size],
      {
        disabledIndeterminate: "border-neutral-500 bg-neutral-500",
        disabledChecked: "border-neutral-500 bg-neutral-500",
        disabled: "border-neutral-500",
        visuallyDisabled: "border-neutral-500",
        invalidIndeterminate: "border-error bg-error group-hover:bg-error-400 group-hover:border-error-400",
        invalid: "border-error group-hover:border-error-400 group-hover:bg-transparent",
        filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
        default: "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
      }[checkboxState]
    )}"><div part="checkbox" class="${cx(
      "absolute h-3 transition-[width] right-0 duration-medium",
      this.checked || this.indeterminate ? "w-0" : "w-3"
    )}"><div class="${cx(
      "w-full h-full transition-colors duration-medium ease-in-out group-hover:duration-fast",
      {
        disabledIndeterminate: "bg-neutral-500",
        disabledChecked: " bg-neutral-500",
        disabled: "",
        visuallyDisabled: "",
        invalidIndeterminate: " bg-error group-hover:bg-error-400",
        invalid: "",
        filled: "bg-accent group-hover:bg-accent-550",
        default: "hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
      }[checkboxState]
    )}"></div></div>${this.checked ? html`<sd-6-22-0-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-6-22-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-22-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-6-22-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
      "select-none inline-block ml-2",
      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-black"
    )}"><slot></slot></span></label><div id="invalid-icon-message" part="invalid-icon-message" class="${cx("flex items-center gap-2", this.showInvalidStyle && "mt-2")}">${this.showInvalidStyle ? html`<sd-6-22-0-icon id="invalid-icon" part="invalid-icon" library="_internal" name="risk"></sd-6-22-0-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div></div>`;
  }
};
/**
 * Inherits Tailwind classes and includes additional styling.
 */
SdCheckbox.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline-style:var(--tw-outline-style);outline-width:0}:host([required]) #label::after{content:' *'}[part=invalid-icon]{color:rgb(var(--sd-color-icon-fill-error))}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
];
__decorateClass([
  query('input[type="checkbox"]')
], SdCheckbox.prototype, "input", 2);
__decorateClass([
  query("#invalid-message")
], SdCheckbox.prototype, "invalidMessage", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdCheckbox.prototype, "title", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdCheckbox.prototype, "name", 2);
__decorateClass([
  property()
], SdCheckbox.prototype, "value", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdCheckbox.prototype, "size", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdCheckbox.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
], SdCheckbox.prototype, "visuallyDisabled", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdCheckbox.prototype, "checked", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdCheckbox.prototype, "indeterminate", 2);
__decorateClass([
  defaultValue("checked")
], SdCheckbox.prototype, "defaultChecked", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdCheckbox.prototype, "form", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdCheckbox.prototype, "required", 2);
__decorateClass([
  state()
], SdCheckbox.prototype, "showInvalidStyle", 2);
__decorateClass([
  watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
], SdCheckbox.prototype, "handleDisabledChange", 1);
__decorateClass([
  watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
], SdCheckbox.prototype, "handleStateChange", 1);
SdCheckbox = __decorateClass([
  customElement("sd-6-22-0-checkbox")
], SdCheckbox);

export {
  SdCheckbox
};
