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

// src/components/tab/tab.ts
import { css, html } from "lit";
import { property, query } from "lit/decorators.js";
import cx from "classix";
var id = 0;
var SdTab = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.attrId = ++id;
    this.componentId = `sd-6-22-0-tab-${this.attrId}`;
    this.hasSlotController = new HasSlotController(this, "left");
    this.localize = new LocalizeController(this);
    this.variant = "default";
    this.active = false;
    this.disabled = false;
    this.visuallyDisabled = false;
    this.panel = "";
  }
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute("role", "tab");
  }
  handleActiveChange() {
    this.setAttribute("aria-selected", this.active ? "true" : "false");
  }
  handleDisabledChange() {
    const isDisabled = this.disabled || this.visuallyDisabled;
    this.setAttribute("aria-disabled", isDisabled ? "true" : "false");
  }
  /** Sets focus to the tab. */
  focus(options) {
    this.tab.focus(options);
  }
  /** Removes focus from the tab. */
  blur() {
    this.tab.blur();
  }
  render() {
    this.id = this.id.length > 0 ? this.id : this.componentId;
    const slots = {
      left: this.hasSlotController.test("left")
    };
    return html`<div part="base" class="${cx(
      "inline-flex justify-center min-w-max items-center h-12 px-3 leading-none select-none cursor-pointer group relative choice-control-font-weight",
      "outline-hidden focus-visible:focus-outline outline-2 !-outline-offset-2 transition-all duration-fast ease-in-out",
      this.variant === "container" ? "tab-container-border bg-white rounded-[4px_4px_0_0]" : "navigable-border-radius",
      this.variant === "container" && this.active && "tab--active-container-border bg-white",
      this.disabled || this.visuallyDisabled ? "!cursor-not-allowed" : "hover:sd-6-22-0-tab--hover-color-background",
      this.active && "z-20 sd-6-22-0-tab--active-color-text"
    )}" tabindex="${!this.active || this.disabled ? "-1" : "0"}"><div class="${cx("flex h-full items-center justify-center whitespace-nowrap")}"><slot name="left" class="${cx(
      slots.left && "block pr-2",
      this.disabled || this.visuallyDisabled ? "sd-6-22-0-tab--disabled-color-text" : this.active ? "sd-6-22-0-tab--active-color-text" : "sd-6-22-0-tab-color-text"
    )}"></slot><slot class="${cx(
      this.disabled || this.visuallyDisabled ? "sd-6-22-0-tab--disabled-color-text" : this.active ? "sd-6-22-0-tab--active-color-text" : "sd-6-22-0-tab-color-text"
    )}"></slot>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx(
      "absolute bottom-0 h-1 bg-accent w-3/4 bottom-0 group-hover:w-[calc(100%-2px)] navigable__current-indicator-height navigable__current-indicator-border-radius"
    )}"></div>` : ""}<div part="hover-bottom-border" class="${cx(
      !this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-6-22-0-tab-color-border"
    )}"></div></div></div>`;
  }
};
SdTab.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{box-sizing:border-box;display:inline-block}:host(:hover)::part(hover-bottom-border){border-bottom-color:rgba(var(--sd-color-border-neutral-400))}.tab-container-border::after{position:absolute;height:100%;width:100%;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-content:'';content:var(--tw-content)}.tab--active-container-border::after{position:absolute;height:100%;width:100%;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--sd-color-border-neutral-400));transition-property:border;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-medium, 300ms);transition-duration:var(--sd-duration-medium,300ms);--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));--tw-content:'';content:var(--tw-content);border-bottom:none;border-radius:4px 4px 0 0}[part=active-tab-indicator]{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-0);--tw-duration:var(--sd-duration-fast, 150ms);transition-duration:var(--sd-duration-fast,150ms);transition:width var(--sd-duration-fast) ease-in-out,opacity var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out var(--sd-duration-fast)}:host([active]) [part=active-tab-indicator]{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y);opacity:var(--sd-opacity-100);transition:width var(--sd-duration-fast) ease-in-out,transform var(--sd-duration-fast) ease-in-out}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}`
];
__decorateClass([
  query("[part=base]")
], SdTab.prototype, "tab", 2);
__decorateClass([
  query("[part=active-tab-indicator]")
], SdTab.prototype, "currentIndicator", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdTab.prototype, "variant", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdTab.prototype, "active", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdTab.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "visually-disabled" })
], SdTab.prototype, "visuallyDisabled", 2);
__decorateClass([
  property({ type: String, reflect: true })
], SdTab.prototype, "panel", 2);
__decorateClass([
  watch("active")
], SdTab.prototype, "handleActiveChange", 1);
__decorateClass([
  watch(["disabled", "visually-disabled"])
], SdTab.prototype, "handleDisabledChange", 1);
SdTab = __decorateClass([
  customElement("sd-6-22-0-tab")
], SdTab);

export {
  SdTab
};
