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/step/step.ts
import { css, nothing } from "lit";
import { html, literal } from "lit/static-html.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { property } from "lit/decorators.js";
import cx from "classix";
var SdStep = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.hasSlotController = new HasSlotController(this, "label", "[default]");
    this.size = "lg";
    this.orientation = "horizontal";
    this.horizontalInline = false;
    this.waiting = false;
    this.disabled = false;
    this.current = false;
    this.noTail = false;
    this.notInteractive = false;
    this.label = "";
    this.description = "";
    this.index = 1;
    this.href = "";
  }
  connectedCallback() {
    super.connectedCallback();
  }
  isLink() {
    return this.href ? true : false;
  }
  handleBlur() {
    this.emit("sd-blur");
  }
  handleFocus() {
    this.emit("sd-focus");
  }
  handleCurrentChange() {
    if (this.current) {
      this.disabled = false;
      this.waiting = false;
    }
  }
  handleDisabledChange() {
    if (this.disabled) {
      this.current = false;
      this.waiting = false;
    }
  }
  handleWaitingChange() {
    if (this.waiting) {
      this.current = false;
      this.disabled = false;
    }
  }
  handleInteractivityChange() {
    if (this.notInteractive) {
      this.current = false;
      this.disabled = false;
      this.waiting = false;
    }
  }
  render() {
    if (this.size === "xs" && this.orientation !== "vertical") {
      console.warn('Size "xs" is only supported when orientation is "vertical". The element will not be rendered.');
      return nothing;
    }
    const isLink = this.isLink();
    const tag = this.notInteractive || this.waiting ? literal`div` : isLink ? literal`a` : literal`button`;
    const hasLabelSlot = this.hasSlotController.test("label");
    const hasLabel = this.label ? true : hasLabelSlot;
    const hasDefaultSlot = this.hasSlotController.test("[default]");
    const hasDescription = this.description ? true : hasDefaultSlot;
    const isHorizontalInline = this.horizontalInline && this.orientation === "horizontal";
    const circleAndTailContainerClasses = cx(
      "flex shrink-0 gap-2 group",
      this.noTail && !isHorizontalInline && "w-max",
      this.orientation === "horizontal" ? "flex-row" : "flex-col items-stretch",
      isHorizontalInline && "items-start",
      this.orientation === "horizontal" && !this.horizontalInline ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" || this.size === "xs" ? "mt-1" : "mt-3"
    );
    const circleButtonClasses = cx(
      "border sd-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
      this.disabled ? "focus-visible:outline-none cursor-not-allowed" : !this.notInteractive && !this.waiting ? "focus-visible:focus-outline hover:cursor-pointer" : "",
      this.notInteractive ? this.size === "lg" ? "not-interactive-lg" : this.size === "xs" ? "w-2" : "w-12" : this.size === "lg" ? "w-12" : this.size === "xs" ? "w-2" : "w-8",
      this.disabled && "border-neutral-500 text-neutral-500",
      this.waiting && "border-neutral-400 text-neutral-700",
      this.waiting && this.size === "xs" && "border-neutral-700",
      !this.disabled && !this.current && !this.notInteractive && !this.waiting && "border-primary hover:bg-primary-100 hover:border-primary-500",
      this.notInteractive && (this.size === "xs" ? "border-primary" : "border-neutral-400"),
      this.current && "bg-accent border-none text-white"
    );
    const listItemClasses = "flex-row items-stretch h-full w-full overflow-hidden";
    return html`<div role="listitem" part="base" class="${cx(
      "flex pt-1",
      this.orientation === "horizontal" ? "flex-col w-full" : this.size === "xs" ? `${listItemClasses} gap-2` : `${listItemClasses} gap-4`,
      !this.disabled && !this.current && !this.notInteractive && !this.waiting && "group"
    )}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"><div part="circle-and-tail-container" class="${circleAndTailContainerClasses}"><${tag} part="circle" href="${ifDefined(isLink ? this.href : void 0)}" aria-disabled="${ifDefined(this.disabled || this.waiting || void 0)}" aria-current="${this.current ? "step" : void 0}" aria-labelledby="${ifDefined(this.notInteractive || this.waiting || !hasLabel ? void 0 : "label")}" aria-describedby="${ifDefined(this.notInteractive || this.waiting || !hasDescription ? void 0 : "description")}" class="${circleButtonClasses}"><slot name="circle-content" class="${cx(
      "text-lg",
      !this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-primary hover:text-primary-500 hover:fill-primary-500",
      this.notInteractive && "sd-step-color-text"
    )}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting && this.size !== "xs" ? html`<sd-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-icon>` : this.size === "xs" ? "" : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
      "flex w-full",
      hasLabel && "gap-2",
      this.size === "sm" && !hasDescription ? "mt-1" : "mt-3"
    )}">${hasLabel && html`<div part="label" id="label" class="${cx(
      "font-bold whitespace-nowrap",
      this.disabled && "text-neutral-500",
      this.waiting && "text-neutral-700",
      !this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-black"
    )}"><slot name="label">${this.label}</slot></div>`} ${!this.noTail ? html`<div part="tail" class="${cx(
      "border-t flex-1 mr-2 mt-3",
      !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary group-hover:border-primary-500" : "border-neutral-500"
    )}"></div>` : ""}</div>${hasDescription ? html`<div part="description" id="description" class="${cx(
      "sd-paragraph sd-paragraph--size-sm wrap-break-word",
      hasDescription ? "flex-1" : "w-0 h-0 overflow-hidden",
      hasDescription && !this.noTail && "pr-4",
      (this.disabled || this.waiting) && "!text-neutral-700"
    )}">${this.description || html`<slot></slot>`}</div>` : ""}</div>` : this.noTail ? "" : html`<div part="tail" class="${cx(
      this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l grow shrink-0 basis-auto h-full w-[1px] mx-auto",
      !this.disabled && !this.current && !this.notInteractive && !this.waiting ? "border-primary group-hover:border-primary-500" : "border-neutral-500"
    )}"></div>`}</div>${!isHorizontalInline ? html`<div part="text-container" class="${cx(
      "wrap-break-word flex flex-col gap-2",
      this.size === "xs" ? "-mt-1 mb-4" : "mt-4",
      this.orientation === "horizontal" ? "text-center w-40" : "text-left",
      this.disabled && "text-neutral-500",
      this.waiting && "text-neutral-700",
      this.notInteractive ? this.size === "xs" ? "ml-0" : "ml-2" : "mr-4"
    )}"><div part="label" id="label" class="${cx(
      "font-bold",
      this.disabled && "text-neutral-500",
      this.waiting && "text-neutral-700",
      !this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-black"
    )}"><slot name="label">${this.label}</slot></div><div part="description" id="description" class="${cx(
      "sd-paragraph sd-paragraph--size-sm",
      (this.disabled || this.waiting) && "text-neutral-700"
    )}">${this.description || html`<slot></slot>`}</div></div>` : ""}</div>`;
  }
};
SdStep.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host(:not([current])) (:not([notInteractive])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-icon,slot[name=circle-content]::slotted(sd-icon){color:rgba(var(--sd-color-icon-fill-primary))}[part=circle]:hover slot[name=circle-content] sd-icon,[part=circle]:hover slot[name=circle-content]::slotted(sd-icon){color:rgba(var(--sd-color-icon-fill-primary-500))}:host([horizontal-inline]):has([part=description]){min-width:calc(var(--sd-spacing-1) * 0);flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
];
__decorateClass([
  property({ type: String, reflect: true })
], SdStep.prototype, "size", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdStep.prototype, "orientation", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "horizontal-inline" })
], SdStep.prototype, "horizontalInline", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdStep.prototype, "waiting", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdStep.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdStep.prototype, "current", 2);
__decorateClass([
  property({ reflect: true, type: Boolean, attribute: "no-tail" })
], SdStep.prototype, "noTail", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "not-interactive" })
], SdStep.prototype, "notInteractive", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdStep.prototype, "label", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdStep.prototype, "description", 2);
__decorateClass([
  property({ type: Number, reflect: true, attribute: "index" })
], SdStep.prototype, "index", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdStep.prototype, "href", 2);
__decorateClass([
  watch("current")
], SdStep.prototype, "handleCurrentChange", 1);
__decorateClass([
  watch("disabled")
], SdStep.prototype, "handleDisabledChange", 1);
__decorateClass([
  watch("waiting")
], SdStep.prototype, "handleWaitingChange", 1);
__decorateClass([
  watch("notInteractive")
], SdStep.prototype, "handleInteractivityChange", 1);
SdStep = __decorateClass([
  customElement("sd-step")
], SdStep);

export {
  SdStep
};
