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

// src/components/teaser/teaser.ts
import { css, html } from "lit";
import { property, query, state } from "lit/decorators.js";
import cx from "classix";
var SdTeaser = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.variant = "white";
    this.breakpoint = 448;
    this.inset = false;
    this.reversedLayout = false;
    this.hasSlotController = new HasSlotController(this, "[default]", "media", "meta", "headline");
  }
  connectedCallback() {
    super.connectedCallback();
    if (this.breakpoint === 0) {
      this._orientation = "horizontal";
    } else if (this.breakpoint === 9999) {
      this._orientation = "vertical";
    } else if (window.ResizeObserver) {
      this.resizeObserver = new ResizeObserver(() => this.updateOrientation());
      this.resizeObserver.observe(this);
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  }
  updated(changedProperties) {
    super.updated(changedProperties);
    if (changedProperties.has("breakpoint")) {
      this.updateOrientation();
    }
  }
  updateOrientation() {
    this._orientation = this.offsetWidth >= this.breakpoint ? "horizontal" : "vertical";
  }
  render() {
    const inset = this.variant === "white border-neutral-400" || this.inset;
    const slots = {
      "teaser-has-default": this.hasSlotController.test("[default]"),
      "teaser-has-media": this.hasSlotController.test("media"),
      "teaser-has-meta": this.hasSlotController.test("meta"),
      "teaser-has-headline": this.hasSlotController.test("headline")
    };
    return html`<div class="${cx(
      "flex sd-teaser-border-radius",
      {
        white: "bg-white",
        "white border-neutral-400": "bg-white border sd-teaser--neutral-400-color-border",
        "neutral-100": "sd-teaser--neutral-100-color-background",
        primary: "bg-primary text-white",
        "primary-100": "sd-teaser--primary-100-color-background"
      }[this.variant],
      this._orientation === "vertical" && "flex-col",
      this._orientation === "horizontal" && "flex-row gap-8",
      this._orientation === "horizontal" && inset && "py-8 px-10"
    )}" part="base"><div style="${this._orientation === "horizontal" ? `width: var(--distribution-content, 100%); ${inset ? "width: var(--distribution-content, calc(100% - 2rem));" : ""}` : ""}" class="${cx(
      "flex flex-col text-left order-2",
      this._orientation === "horizontal" && `flex flex-col`,
      this._orientation === "vertical" && inset && "m-4"
    )}" part="content"><div class="flex flex-col-reverse"><div part="headline" class="${cx("text-lg font-bold m-0", this.variant === "primary" ? "text-white" : "text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="meta" class="${cx("gap-2 mb-4", !slots["teaser-has-meta"] && "hidden")}"><slot name="meta"></slot></div></div><div part="main" class="${cx(!slots["teaser-has-default"] && "hidden")}" role="group" aria-labelledby="headline"><slot></slot></div></div><div part="media" id="media" style="${this._orientation === "horizontal" ? `width: var(--distribution-media, 100%);` : ""}" class="${cx(
      "order-1",
      !inset && this._orientation === "vertical" && "mb-4",
      !slots["teaser-has-media"] && "hidden",
      this.variant === "white border-neutral-400" && this._orientation === "vertical" && "mx-[-1px] mt-[-1px]",
      this._orientation !== "vertical" && this.reversedLayout && "order-2"
    )}"><slot name="media"></slot></div></div>`;
  }
};
SdTeaser.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{display:block}::slotted(*){margin:calc(var(--sd-spacing-1) * 0)}::slotted([slot=headline]){margin:calc(var(--sd-spacing-1) * 0)!important;font-size:var(--sd-text-lg)!important;line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)))!important;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold)}@property --tw-font-weight{syntax:"*";inherits:false}`
];
__decorateClass([
  property({ type: String, reflect: true })
], SdTeaser.prototype, "variant", 2);
__decorateClass([
  property({ reflect: true, type: Number })
], SdTeaser.prototype, "breakpoint", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SdTeaser.prototype, "inset", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
], SdTeaser.prototype, "reversedLayout", 2);
__decorateClass([
  query('[part="base"]')
], SdTeaser.prototype, "teaser", 2);
__decorateClass([
  state()
], SdTeaser.prototype, "_orientation", 2);
SdTeaser = __decorateClass([
  customElement("sd-teaser")
], SdTeaser);

export {
  SdTeaser
};
