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

// src/components/radio/radio.ts
import { css, html } from "lit";
import { property, state } from "lit/decorators.js";
import cx from "classix";
var SdRadio = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.checked = false;
    this.hasFocus = false;
    this.size = "lg";
    this.disabled = false;
    this.visuallyDisabled = false;
    this.invalid = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.handleBlur = this.handleBlur.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.handleFocus = this.handleFocus.bind(this);
    this.setInitialAttributes();
    this.addEventListeners();
  }
  disconnectedCallback() {
    this.removeEventListeners();
  }
  addEventListeners() {
    this.addEventListener("blur", this.handleBlur);
    this.addEventListener("click", this.handleClick);
    this.addEventListener("focus", this.handleFocus);
  }
  removeEventListeners() {
    this.removeEventListener("blur", this.handleBlur);
    this.removeEventListener("click", this.handleClick);
    this.removeEventListener("focus", this.handleFocus);
  }
  handleBlur() {
    this.hasFocus = false;
    this.emit("sd-blur");
  }
  handleClick() {
    if (!this.disabled && !this.visuallyDisabled) {
      this.checked = true;
    }
  }
  handleFocus() {
    this.hasFocus = true;
    this.emit("sd-focus");
  }
  setInitialAttributes() {
    this.setAttribute("role", "radio");
    this.setAttribute("tabindex", "-1");
    this.setAttribute("aria-disabled", this.disabled || this.visuallyDisabled ? "true" : "false");
  }
  handleCheckedChange() {
    this.setAttribute("aria-checked", this.checked ? "true" : "false");
    this.setAttribute("tabindex", this.checked ? "0" : "-1");
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  render() {
    return html`<span part="base" class="${cx(
      "sd-radio group flex items-center text-base leading-normal text-black cursor-pointer",
      (this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
      {
        /* sizes, fonts */
        sm: "small-size text-sm",
        md: "text-base",
        lg: "text-base"
      }[this.size]
    )}"><span part="${`${this.checked ? "control--checked" : "control--unchecked"}`}" class="${cx(
      "flex-initial shrink-0 relative inline-flex items-center justify-center border sd-radio-border-width rounded-full bg-white h-4 w-4 duration-fast ease-in-out",
      this.disabled || this.visuallyDisabled ? "border-neutral-500" : this.invalid ? cx(
        "border-error hover:border-error-400 group-hover:border-error-400",
        this.checked ? "sd-radio--checked--invalid--default-color-background" : "sd-radio--default--invalid-color-background"
      ) : this.checked ? "sd-radio--checked--default-color-background hover:sd-radio--checked--hover-color-background group-hover:sd-radio--checked--hover-color-background border-accent hover:border-accent-550 group-hover:border-accent-550" : "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200"
    )}"><span part="checked" class="${cx(
      "rounded-full inline-flex text-white sd-radio__checked-height sd-radio__checked-width transition-[transform, colors] duration-medium ease-in-out",
      this.checked ? "scale-100" : "scale-0",
      this.disabled ? "sd-radio--checked--disabled__icon-color-background" : this.visuallyDisabled ? "bg-white" : this.invalid ? "sd-radio--checked--invalid--default__icon-color-background hover:sd-radio--checked--invalid--hover__icon-color-background group-hover:sd-radio--checked--invalid--hover__icon-color-background" : this.checked ? "sd-radio--checked--default__icon-color-background hover:sd-radio--checked--hover__icon-color-background group-hover:sd-radio--checked--hover__icon-color-background" : "bg-neutral-800"
    )}"></span></span><slot part="label" class="${cx(
      "ml-2 select-none inline-block",
      this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-black"
    )}"></slot></span>`;
  }
};
/**
 * Inherits Tailwind classes and includes additional styling.
 */
SdRadio.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){--tw-outline-style:none;outline-style:none}[part=control--checked],[part=control--unchecked]{outline-color:transparent}:host(:focus-visible) [part=control--checked],:host(:focus-visible) [part=control--unchecked]{outline-width:1px;outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--sd-color-border-primary,var(--sd-color-primary)))}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
];
__decorateClass([
  state()
], SdRadio.prototype, "checked", 2);
__decorateClass([
  state()
], SdRadio.prototype, "hasFocus", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdRadio.prototype, "size", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdRadio.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
], SdRadio.prototype, "visuallyDisabled", 2);
__decorateClass([
  property()
], SdRadio.prototype, "value", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdRadio.prototype, "invalid", 2);
__decorateClass([
  watch("checked")
], SdRadio.prototype, "handleCheckedChange", 1);
__decorateClass([
  watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
], SdRadio.prototype, "handleDisabledChange", 1);
SdRadio = __decorateClass([
  customElement("sd-radio")
], SdRadio);

export {
  SdRadio
};
