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

// src/components/header/header.ts
import { css, html } from "lit";
import { property, query } from "lit/decorators.js";
var SdHeader = class extends SolidElement {
  constructor() {
    super(...arguments);
    this.fixed = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.updateCalculatedHeight = this.updateCalculatedHeight.bind(this);
    this.addResizeObserver = this.addResizeObserver.bind(this);
    window.addEventListener("resize", this.updateCalculatedHeight);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener("resize", this.updateCalculatedHeight);
  }
  firstUpdated() {
    this.updateCalculatedHeight();
    this.addResizeObserver();
  }
  updated(changedProperties) {
    super.updated(changedProperties);
    if (changedProperties.has("fixed")) {
      this.updateCalculatedHeight();
    }
  }
  addResizeObserver() {
    this.resizeObserver = new ResizeObserver(this.updateCalculatedHeight);
    if (!this.header) {
      return;
    }
    this.resizeObserver.observe(this.header);
  }
  updateCalculatedHeight() {
    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
    const windowHeightInRem = window.innerHeight / rem;
    if (this.header && this.fixed && windowHeightInRem >= 32) {
      document.documentElement.style.setProperty("--sd-header-calculated-height", `${this.header.clientHeight}px`);
    } else {
      document.documentElement.style.removeProperty("--sd-header-calculated-height");
    }
  }
  render() {
    return html`<header class="w-full sd-6-22-0-header-color-background sd-6-22-0-header-padding-bottom relative" role="banner"><div part="main" class="relative mx-auto my-0 box-border"><slot></slot></div></header>`;
  }
};
SdHeader.styles = [
  ...SolidElement.styles,
  css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
:host{position:relative;z-index:var(--sd-z-index-header,600);display:block}@media (min-height:32rem){:host([fixed]){padding-bottom:var(--sd-header-calculated-height)!important}:host([fixed]) header{position:fixed;top:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);width:100%}:host([fixed]) header::after{position:absolute;top:100%;right:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);height:var(--sd-header__shadow-height,var(--sd-spacing-1));--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops));--tw-gradient-from:color-mix(in oklab, var(--color-black, #000) 40%, transparent);--tw-gradient-to:color-mix(in oklab, var(--color-black, #000) var(--sd-opacity-0), transparent);--tw-gradient-stops:var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));--tw-content:'';content:var(--tw-content)}}[part=main]{width:var(--sd-header-inner-width);max-width:var(--sd-header-inner-max-width);padding:var(--sd-header-padding,12px 16px)}header::before{position:absolute;bottom:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);display:block;width:100%;--tw-content:'';content:var(--tw-content);background-color:rgb(var(--sd-header__underline-color-background));height:var(--sd-header__underline-height,var(--sd-spacing-2))}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
];
__decorateClass([
  property({ reflect: true, type: Boolean })
], SdHeader.prototype, "fixed", 2);
__decorateClass([
  query("header")
], SdHeader.prototype, "header", 2);
__decorateClass([
  debounce(100)
], SdHeader.prototype, "updateCalculatedHeight", 1);
SdHeader = __decorateClass([
  customElement("sd-6-22-0-header")
], SdHeader);

export {
  SdHeader
};
