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

// src/components/tag/tag.ts
import { css } from "lit";
import { html, literal } from "lit/static-html.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { property, query } from "lit/decorators.js";
import cx from "classix";
var SdTag = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.size = "lg";
    this.selected = false;
    this.toggleable = false;
    this.removable = false;
    this.disabled = false;
    this.href = "";
  }
  handleBlur() {
    this.emit("sd-blur");
  }
  handleFocus() {
    this.emit("sd-focus");
  }
  handleRemove() {
    this.emit("sd-remove");
  }
  isLink() {
    return this.href ? true : false;
  }
  /** Simulates a click on the tag. */
  click() {
    this.tag.click();
  }
  /** Sets focus on the tag. */
  focus(options) {
    this.tag.focus(options);
  }
  /** Removes focus from the tag. */
  blur() {
    this.tag.blur();
  }
  /** Visually hides the tag */
  async hide() {
    this.emit("sd-hide");
    this.style.opacity = "0";
    await new Promise((resolve) => setTimeout(resolve, this.token("--sd-duration-fast", 150)));
    this.hidden = true;
    this.emit("sd-after-hide");
  }
  render() {
    const isLink = this.isLink();
    const isRemovable = this.removable && !this.selected && !this.toggleable;
    const tag = isLink ? literal`a` : isRemovable ? literal`div` : literal`button`;
    return html`<${tag} part="base" type="${ifDefined(isLink ? void 0 : "button")}" href="${ifDefined(isLink ? this.href : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" aria-labelledby="content" aria-disabled="${this.disabled ? "true" : "false"}" aria-pressed="${ifDefined(this.toggleable ? this.selected : void 0)}" tabindex="${this.disabled || isRemovable ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" class="${cx(
      /* basic styles of the wrapper */
      "flex border box-border sd-6-22-0-tag-border-radius items-center leading-none whitespace-nowrap transition-colors duration-fast ease-in-out focus-visible:focus-outline",
      {
        /* sizes, fonts */
        lg: "h-8 sd-6-22-0-tag-font-weight sd-6-22-0-tag--size-lg-font-size gap-2",
        sm: "h-6 sd-6-22-0-tag-font-weight sd-6-22-0-tag--size-sm-font-size gap-1"
      }[this.size],
      {
        /* padding */
        lg: !isRemovable ? "px-4 py-2" : "pl-4 pr-3 py-2",
        sm: !isRemovable ? "px-3 py-[5px]" : "pl-3 pr-2 py-2"
      }[this.size],
      /* colors */
      !this.disabled ? !this.selected ? cx(
        "sd-6-22-0-tag--default-color-border sd-6-22-0-tag--default-color-text",
        !isRemovable ? "sd-6-22-0-tag--default-color-background hover:border-primary-500 hover:text-primary-500 hover:sd-6-22-0-tag--default--hover-color-background" : "sd-6-22-0-tag--default-color-background has-[button:hover]:border-primary-500 has-[button:hover]:text-primary-500"
      ) : "sd-6-22-0-tag--selected-border-width sd-6-22-0-tag--selected--default-color-background sd-6-22-0-tag--selected--default-color-border sd-6-22-0-tag--selected--default-color-text hover:sd-6-22-0-tag--selected--hover-color-background hover:sd-6-22-0-tag--selected--hover-color-border hover:sd-6-22-0-tag--selected--hover-color-text" : cx(
        !isLink && "cursor-not-allowed",
        this.selected && "bg-neutral-500 text-white",
        "sd-6-22-0-tag--disabled-color-border sd-6-22-0-tag--disabled-color-text"
      )
    )}"><slot name="icon-left" class="${cx("flex-shrink-0", this.size === "lg" ? "text-base" : "text-[0.75rem]")}"></slot><slot id="content" part="content"></slot>${isRemovable && !isLink ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}"><slot part="removable-indicator" name="removable-indicator" class="${cx(this.disabled && "sd-6-22-0-tag--disabled-color-text")}"><sd-6-22-0-icon library="_internal" name="close" label="${this.localize.term("remove")}"></sd-6-22-0-icon></slot></button>` : ""}</${tag}>`;
  }
};
SdTag.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{display:inline-block;transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms));--tw-duration:var(--sd-duration-fast, 150ms);transition-duration:var(--sd-duration-fast,150ms);--tw-ease:var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host([size=lg])::part(removable-indicator){font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)))}:host([size=sm])::part(removable-indicator){font-size:.75rem}.sd-6-22-0-tag--disabled-color-border{border-color:rgb(var(--sd-tag--disabled-color-border))}.sd-6-22-0-tag-font-weight{font-weight:var(--sd-tag-font-weight)}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}`
];
__decorateClass([
  query("a, button, div")
], SdTag.prototype, "tag", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdTag.prototype, "size", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdTag.prototype, "selected", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdTag.prototype, "toggleable", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdTag.prototype, "removable", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdTag.prototype, "disabled", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdTag.prototype, "href", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdTag.prototype, "target", 2);
__decorateClass([
  property({ reflect: true })
], SdTag.prototype, "download", 2);
SdTag = __decorateClass([
  customElement("sd-6-22-0-tag")
], SdTag);

export {
  SdTag
};
