le-kit 0.1.15 → 0.1.16

package/dist/collection/components/le-header/le-header.css

@@ -0,0 +1,120 @@
+:host {
+  display: block;
+  width: 100%;
+
+  /* Container styles */
+  /* Offset from the top of the page (e.g. if page has top padding or another fixed bar). */
+  --le-header-top-offset: 0;
+
+  --le-header-bg: var(--le-color-surface);
+  --le-header-max-width: var(--le-header-max-width, auto);
+  --le-header-margin: 0 auto;
+  --le-header-border: 1px solid var(--le-color-border);
+  --le-header-border-radius: 0px;
+  --le-header-shadow: var(--le-header-shadow, none);
+
+  /* Content styles */
+  --le-header-color: var(--le-color-text);
+  --le-header-content-max-width: 800px;
+  --le-header-padding-x: var(--le-space-md);
+  --le-header-padding-y: var(--le-space-sm);
+  --le-header-gap: var(--le-space-sm);
+
+  --le-header-transition: var(--le-transition-normal);
+  --le-header-z: 1000;
+}
+
+.header {
+  width: 100%;
+  max-width: var(--le-header-max-width);
+  margin: var(--le-header-margin);
+  background: var(--le-header-bg);
+  color: var(--le-header-color);
+  border-bottom: var(--le-header-border);
+  border-radius: var(--le-header-border-radius);
+  box-shadow: var(--le-header-shadow);
+}
+
+:host(.is-fixed) {
+  position: fixed;
+  top: var(--le-header-top-offset);
+  left: 0;
+  right: 0;
+  z-index: var(--le-header-z);
+}
+
+:host(.is-sticky) {
+  position: sticky;
+  top: var(--le-header-top-offset);
+  z-index: var(--le-header-z);
+}
+
+:host(.is-static) {
+  position: relative;
+}
+
+.inner {
+  max-width: var(--le-header-content-max-width);
+  margin: 0 auto;
+  padding: var(--le-header-padding-y) var(--le-header-padding-x);
+}
+
+.row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--le-header-gap);
+  transition:
+    height var(--le-header-transition),
+    padding var(--le-header-transition),
+    transform var(--le-header-transition);
+}
+
+:host(.is-shrunk) .row {
+  height: var(--le-header-height-condensed);
+}
+
+/* reveal behavior (sticky only) */
+:host(.is-sticky.is-hidden) {
+  transform: translateY(-150%);
+  transition: transform var(--le-header-transition);
+}
+
+:host(.is-sticky.is-revealed) {
+  transform: translateY(0);
+  transition: transform var(--le-header-transition);
+}
+
+.start,
+.title,
+.end {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.start {
+  justify-content: flex-start;
+}
+
+.end {
+  justify-content: flex-end;
+}
+
+.title {
+  justify-content: center;
+  text-align: center;
+}
+
+.title-slot ::slotted(*) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.compact-title {
+  font: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/collection/components/le-header/le-header.js

@@ -0,0 +1,508 @@
+import { h, Host, } from "@stencil/core";
+import { classnames } from "../../utils/utils";
+/**
+ * A functional page header with scroll-aware behaviors.
+ *
+ * Features:
+ * - Static (default), sticky, or fixed positioning
+ * - Optional shrink-on-scroll behavior via `shrink-offset`
+ * - Optional reveal-on-scroll-up via `reveal-on-scroll` (sticky only)
+ *
+ * Slots:
+ * - `start`: left side (logo/back button)
+ * - `title`: centered/primary title content
+ * - `end`: right side actions
+ * - default: extra content row (e.g., tabs/search) rendered below main row
+ *
+ * @slot start - Start area content
+ * @slot title - Title content
+ * @slot end - End area content
+ * @slot - Optional secondary row content
+ *
+ * @cssprop --le-header-bg - Background (color/gradient)
+ * @cssprop --le-header-color - Text color
+ * @cssprop --le-header-border - Border (e.g. 1px solid ...)
+ * @cssprop --le-header-shadow - Shadow/elevation
+ * @cssprop --le-header-max-width - Inner content max width
+ * @cssprop --le-header-padding-x - Horizontal padding
+ * @cssprop --le-header-padding-y - Vertical padding
+ * @cssprop --le-header-gap - Gap between zones
+ * @cssprop --le-header-height - Base height (main row)
+ * @cssprop --le-header-height-condensed - Condensed height when shrunk
+ * @cssprop --le-header-transition - Transition timing
+ * @cssprop --le-header-z - Z-index (fixed mode)
+ *
+ * @csspart header - The header container
+ * @csspart inner - Inner max-width container
+ * @csspart row - Main row
+ * @csspart start - Start zone
+ * @csspart title - Title zone
+ * @csspart end - End zone
+ * @csspart secondary - Secondary row
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export class LeHeader {
+    el;
+    /** Force static positioning (default). Ignored if `sticky` or `fixed` are true. */
+    isStatic = false;
+    /** Sticky positioning (in-flow). Ignored if `fixed` is true. */
+    sticky = false;
+    /** Fixed positioning (out-of-flow). Takes precedence over `sticky`/`static`. */
+    fixed = false;
+    /**
+     * Sticky-only reveal behavior (hide on scroll down, show on scroll up).
+     * - missing/false: disabled
+     * - true/empty attribute: enabled with default threshold (16)
+     * - number (as string): enabled and used as threshold
+     */
+    revealOnScroll;
+    /**
+     * Shrink trigger.
+     * - missing/0: disabled
+     * - number (px): shrink when scrollY >= that value (but never before header height)
+     * - css var name (e.g. --foo): shrink when scrollY >= resolved var value
+     * - selector (e.g. .page-title): shrink when that element scrolls out of view above the viewport
+     */
+    shrinkOffset;
+    /**
+     * If true, expand the header when hovered
+     */
+    expandOnHover = false;
+    /** Emits whenever scroll-driven state changes. */
+    leHeaderState;
+    /** Emits when the header shrinks/expands (only on change). */
+    leHeaderShrinkChange;
+    /** Emits when the header hides/shows (only on change). */
+    leHeaderVisibilityChange;
+    revealed = true;
+    shrunk = false;
+    placeholderHeight = null;
+    hoverActive = false;
+    disconnectModeObserver;
+    rafId = null;
+    measureRafId = null;
+    lastY = 0;
+    lastEmittedDirection = 'down';
+    headerEl;
+    shrinkSelectorEl;
+    setShrunk(next, y) {
+        if (next === this.shrunk)
+            return;
+        this.shrunk = next;
+        this.leHeaderShrinkChange.emit({ shrunk: this.shrunk, y });
+    }
+    componentDidLoad() {
+        if (typeof window === 'undefined')
+            return;
+        this.lastY = window.scrollY || 0;
+        this.scheduleMeasure(true);
+        this.scheduleUpdate(true);
+    }
+    disconnectedCallback() {
+        this.disconnectModeObserver?.();
+        if (this.rafId != null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        if (this.measureRafId != null) {
+            cancelAnimationFrame(this.measureRafId);
+            this.measureRafId = null;
+        }
+    }
+    onBehaviorPropsChange() {
+        this.scheduleUpdate(true);
+        this.scheduleMeasure(true);
+    }
+    onWindowScroll() {
+        this.scheduleUpdate();
+    }
+    onWindowResize() {
+        this.scheduleMeasure(true);
+        this.scheduleUpdate(true);
+    }
+    getPosition() {
+        if (this.fixed)
+            return 'fixed';
+        if (this.sticky)
+            return 'sticky';
+        return 'static';
+    }
+    parseRevealThreshold() {
+        // Only applies in sticky mode.
+        if (!this.sticky || this.fixed)
+            return null;
+        if (this.revealOnScroll == null)
+            return null;
+        const raw = String(this.revealOnScroll).trim();
+        if (raw === '' || raw === 'true')
+            return 16;
+        if (raw === 'false')
+            return null;
+        const n = Number(raw);
+        return Number.isFinite(n) ? Math.max(0, n) : 16;
+    }
+    resolveShrinkStartPx() {
+        const raw = (this.shrinkOffset ?? '').trim();
+        if (!raw || raw === '0')
+            return null;
+        // Numeric
+        const numeric = Number(raw);
+        if (Number.isFinite(numeric))
+            return Math.max(0, numeric);
+        // CSS variable name
+        if (raw.startsWith('--')) {
+            const value = getComputedStyle(document.documentElement).getPropertyValue(raw).trim();
+            const v = Number(value.replace('px', '').trim());
+            return Number.isFinite(v) ? Math.max(0, v) : null;
+        }
+        // Selector
+        try {
+            const el = document.querySelector(raw);
+            this.shrinkSelectorEl = el;
+            return null;
+        }
+        catch {
+            this.shrinkSelectorEl = null;
+            return null;
+        }
+    }
+    scheduleUpdate(force = false) {
+        if (this.rafId != null) {
+            if (!force)
+                return;
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            this.updateFromScroll();
+        });
+    }
+    scheduleMeasure(force = false) {
+        if (this.measureRafId != null && !force)
+            return;
+        this.measureRafId = requestAnimationFrame(() => {
+            this.measureRafId = null;
+            this.measurePlaceholderHeight();
+        });
+    }
+    measurePlaceholderHeight() {
+        // Measure the rendered header height once (and on resize/mode change).
+        // This intentionally ignores scroll/shrink behavior; it should reserve the full header height.
+        if (!this.headerEl)
+            return;
+        const next = Math.ceil(this.headerEl.getBoundingClientRect().height);
+        if (!Number.isFinite(next) || next <= 0)
+            return;
+        if (next !== this.placeholderHeight) {
+            this.placeholderHeight = next;
+            // Publish to global root so placeholders anywhere can read it.
+            if (typeof document !== 'undefined') {
+                document.documentElement.style.setProperty('--le-header-height', `${next}px`);
+            }
+        }
+    }
+    updateFromScroll() {
+        const y = typeof window !== 'undefined' ? window.scrollY || 0 : 0;
+        const delta = y - this.lastY;
+        const direction = delta < 0 ? 'up' : 'down';
+        // Shrink behavior
+        let computedShrunk = false;
+        const headerHeight = Math.max(0, this.placeholderHeight ?? 0);
+        const shrinkStartPx = typeof window !== 'undefined' ? this.resolveShrinkStartPx() : null;
+        if (this.shrinkSelectorEl) {
+            const rect = this.shrinkSelectorEl.getBoundingClientRect();
+            computedShrunk = rect.bottom <= 0;
+        }
+        else if (shrinkStartPx != null) {
+            const effectiveStart = Math.max(shrinkStartPx, headerHeight);
+            computedShrunk = y >= effectiveStart;
+        }
+        // Hover override: when enabled and hovered, force expanded.
+        const nextShrunk = this.expandOnHover && this.hoverActive ? false : computedShrunk;
+        this.setShrunk(nextShrunk, y);
+        // Reveal-on-scroll (sticky-only)
+        const revealThreshold = this.parseRevealThreshold();
+        if (revealThreshold != null) {
+            // Always show the header near the top of the page.
+            const topLock = Math.max(0, this.placeholderHeight ?? 0);
+            if (y <= topLock) {
+                if (!this.revealed) {
+                    this.revealed = true;
+                    this.leHeaderVisibilityChange.emit({ visible: true, y });
+                }
+            }
+            else if (Math.abs(delta) >= revealThreshold) {
+                const nextRevealed = direction === 'up' || y <= 0;
+                if (nextRevealed !== this.revealed) {
+                    this.revealed = nextRevealed;
+                    this.leHeaderVisibilityChange.emit({ visible: this.revealed, y });
+                }
+                this.lastEmittedDirection = direction;
+            }
+        }
+        else {
+            if (!this.revealed) {
+                this.revealed = true;
+                this.leHeaderVisibilityChange.emit({ visible: true, y });
+            }
+        }
+        this.lastY = y;
+        this.leHeaderState.emit({
+            y,
+            direction: this.lastEmittedDirection,
+            revealed: this.revealed,
+            shrunk: this.shrunk,
+        });
+    }
+    render() {
+        const position = this.getPosition();
+        const hostClass = classnames('le-header', {
+            'header-is-shrunk': this.shrunk,
+            'is-fixed': position === 'fixed',
+            'is-sticky': position === 'sticky',
+            'is-static': position === 'static',
+            'is-revealed': this.revealed,
+            'is-hidden': !this.revealed,
+            'is-shrunk': this.shrunk,
+        });
+        return (h(Host, { key: '3fc823975a0ebcae3cb799bf94e35a289813cd35', class: hostClass, onMouseEnter: () => {
+                if (!this.expandOnHover)
+                    return;
+                this.hoverActive = true;
+                this.scheduleUpdate(true);
+            }, onMouseLeave: () => {
+                if (!this.expandOnHover)
+                    return;
+                this.hoverActive = false;
+                this.scheduleUpdate(true);
+            } }, h("le-component", { key: 'bb8e3c5717112e427fd86a6af4231b33147769e7', component: "le-header" }, h("header", { key: 'da96d6a1eb91a85ea8050870895fcd13bdb28391', class: "header", part: "header", role: "banner", ref: el => (this.headerEl = el) }, h("div", { key: '04386a3d535189012655ee352822812349d386d7', class: "inner", part: "inner" }, h("div", { key: '4b1fc43ca08e981f3dc810a23c14e6ed3200a1de', class: "row", part: "row" }, h("div", { key: '8fad255865a0d2e2662f3ad1030d48f8586ae8c7', class: "start", part: "start" }, h("le-slot", { key: '702eeebfe3133dae44e5268848ce5cac81f3b306', name: "start", label: "Start", description: "Logo / back button / nav", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: 'bdd3478abbdcd46143ce8a79d096baab84d12588', name: "start" }))), h("div", { key: 'e5b7d3d42e28d80b2df89a3ab365a29b39544f14', class: "title", part: "title" }, h("le-slot", { key: 'b5a68c8baaf05769ea838ca0482fa1db52b03b3a', name: "title", label: "Title", description: "Header title", type: "text", tag: "span" }, h("span", { key: '91763f968886e052a637959253863e583da51b76', class: "title-slot", part: "title" }, h("slot", { key: '060be7c91cca50c26db56cd15ad5d38962c8003f', name: "title" })))), h("div", { key: '938222741cbe15e531ff355185c4f599a3d26147', class: "end", part: "end" }, h("le-slot", { key: '8e1c91426dc87f1bdcb98d33b7da4cc6988781cf', name: "end", label: "End", description: "Actions", "allowed-components": "le-button,le-text,le-tag,le-box,le-stack" }, h("slot", { key: '67e4bda7e7c754dda5a7d9505a9b451f2487f47b', name: "end" })))), h("div", { key: '84dfedd30ec9bd49b668b2e1676ce3712b9d2faf', class: "secondary", part: "secondary" }, h("le-slot", { key: '95c56a8e3dbaaf284b03d72f1d9ec01d24c148d2', name: "", label: "Secondary", description: "Secondary row content", "allowed-components": "le-tabs,le-tab-bar,le-select,le-combobox,le-text,le-stack,le-box" }, h("slot", { key: '240df8fc23a9bc4e7aa294c52b229c7abf7c427d' }))))))));
+    }
+    static get is() { return "le-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isStatic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force static positioning (default). Ignored if `sticky` or `fixed` are true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "static",
+                "defaultValue": "false"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sticky positioning (in-flow). Ignored if `fixed` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sticky",
+                "defaultValue": "false"
+            },
+            "fixed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fixed positioning (out-of-flow). Takes precedence over `sticky`/`static`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "fixed",
+                "defaultValue": "false"
+            },
+            "revealOnScroll": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sticky-only reveal behavior (hide on scroll down, show on scroll up).\n- missing/false: disabled\n- true/empty attribute: enabled with default threshold (16)\n- number (as string): enabled and used as threshold"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "reveal-on-scroll"
+            },
+            "shrinkOffset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shrink trigger.\n- missing/0: disabled\n- number (px): shrink when scrollY >= that value (but never before header height)\n- css var name (e.g. --foo): shrink when scrollY >= resolved var value\n- selector (e.g. .page-title): shrink when that element scrolls out of view above the viewport"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shrink-offset"
+            },
+            "expandOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, expand the header when hovered"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expand-on-hover",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "revealed": {},
+            "shrunk": {},
+            "placeholderHeight": {},
+            "hoverActive": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leHeaderState",
+                "name": "leHeaderState",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits whenever scroll-driven state changes."
+                },
+                "complexType": {
+                    "original": "{\n    y: number;\n    direction: 'up' | 'down';\n    revealed: boolean;\n    shrunk: boolean;\n  }",
+                    "resolved": "{ y: number; direction: \"up\" | \"down\"; revealed: boolean; shrunk: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "leHeaderShrinkChange",
+                "name": "leHeaderShrinkChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the header shrinks/expands (only on change)."
+                },
+                "complexType": {
+                    "original": "{ shrunk: boolean; y: number }",
+                    "resolved": "{ shrunk: boolean; y: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "leHeaderVisibilityChange",
+                "name": "leHeaderVisibilityChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the header hides/shows (only on change)."
+                },
+                "complexType": {
+                    "original": "{ visible: boolean; y: number }",
+                    "resolved": "{ visible: boolean; y: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "revealOnScroll",
+                "methodName": "onBehaviorPropsChange"
+            }, {
+                "propName": "shrinkOffset",
+                "methodName": "onBehaviorPropsChange"
+            }, {
+                "propName": "fixed",
+                "methodName": "onBehaviorPropsChange"
+            }, {
+                "propName": "sticky",
+                "methodName": "onBehaviorPropsChange"
+            }, {
+                "propName": "isStatic",
+                "methodName": "onBehaviorPropsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "scroll",
+                "method": "onWindowScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=le-header.js.map

package/dist/collection/components/le-header/le-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-header.js","sourceRoot":"","sources":["../../../src/components/le-header/le-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAMH,MAAM,OAAO,QAAQ;IACR,EAAE,CAAc;IAE3B,mFAAmF;IACrC,QAAQ,GAAY,KAAK,CAAC;IAExE,gEAAgE;IACvC,MAAM,GAAY,KAAK,CAAC;IAEjD,gFAAgF;IACvD,KAAK,GAAY,KAAK,CAAC;IAEhD;;;;;OAKG;IACqD,cAAc,CAAU;IAEhF;;;;;;OAMG;IACkD,YAAY,CAAU;IAE3E;;OAEG;IACoD,aAAa,GAAY,KAAK,CAAC;IAEtF,kDAAkD;IACzC,aAAa,CAKnB;IAEH,8DAA8D;IAE9D,oBAAoB,CAA+C;IAEnE,0DAA0D;IAE1D,wBAAwB,CAAgD;IAEvD,QAAQ,GAAY,IAAI,CAAC;IACzB,MAAM,GAAY,KAAK,CAAC;IACxB,iBAAiB,GAAkB,IAAI,CAAC;IACxC,WAAW,GAAY,KAAK,CAAC;IAEtC,sBAAsB,CAAc;IACpC,KAAK,GAAkB,IAAI,CAAC;IAC5B,YAAY,GAAkB,IAAI,CAAC;IACnC,KAAK,GAAW,CAAC,CAAC;IAClB,oBAAoB,GAAkB,MAAM,CAAC;IAC7C,QAAQ,CAAe;IACvB,gBAAgB,CAAkB;IAElC,SAAS,CAAC,IAAa,EAAE,CAAS;QACxC,IAAI,IAAI,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO;QACjC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IAC7D,CAAC;IAED,gBAAgB;QACd,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,OAAO;QAC1C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,IAAI,CAAC,CAAC;QACjC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,sBAAsB,EAAE,EAAE,CAAC;QAChC,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;YACvB,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC;QAED,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,EAAE,CAAC;YAC9B,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACxC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC;IAOS,qBAAqB;QAC7B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAGS,cAAc;QACtB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGS,cAAc;QACtB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAC/B,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,QAAQ,CAAC;QACjC,OAAO,QAAQ,CAAC;IAClB,CAAC;IAEO,oBAAoB;QAC1B,+BAA+B;QAC/B,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QAC5C,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI;YAAE,OAAO,IAAI,CAAC;QAC7C,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,IAAI,EAAE,CAAC;QAC/C,IAAI,GAAG,KAAK,EAAE,IAAI,GAAG,KAAK,MAAM;YAAE,OAAO,EAAE,CAAC;QAC5C,IAAI,GAAG,KAAK,OAAO;YAAE,OAAO,IAAI,CAAC;QACjC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACtB,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAClD,CAAC;IAEO,oBAAoB;QAC1B,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;QAC7C,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,GAAG;YAAE,OAAO,IAAI,CAAC;QAErC,UAAU;QACV,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QAC5B,IAAI,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;QAE1D,oBAAoB;QACpB,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACzB,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;YACtF,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;YACjD,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACpD,CAAC;QAED,WAAW;QACX,IAAI,CAAC;YACH,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YACvC,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;YAC3B,OAAO,IAAI,CAAC;QACd,CAAC;QAAC,MAAM,CAAC;YACP,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC7B,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,QAAiB,KAAK;QAC3C,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK;gBAAE,OAAO;YACnB,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,eAAe,CAAC,QAAiB,KAAK;QAC5C,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO;QAChD,IAAI,CAAC,YAAY,GAAG,qBAAqB,CAAC,GAAG,EAAE;YAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAClC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,wBAAwB;QAC9B,uEAAuE;QACvE,+FAA+F;QAC/F,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE3B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAC;QACrE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC;YAAE,OAAO;QAEhD,IAAI,IAAI,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACpC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAC9B,+DAA+D;YAC/D,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;gBACpC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,IAAI,IAAI,CAAC,CAAC;YAChF,CAAC;QACH,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,MAAM,CAAC,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAClE,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAE7B,MAAM,SAAS,GAAkB,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;QAE3D,kBAAkB;QAClB,IAAI,cAAc,GAAG,KAAK,CAAC;QAC3B,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,IAAI,CAAC,CAAC,CAAC;QAC9D,MAAM,aAAa,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAEzF,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,MAAM,IAAI,GAAI,IAAI,CAAC,gBAAgC,CAAC,qBAAqB,EAAE,CAAC;YAC5E,cAAc,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC;QACpC,CAAC;aAAM,IAAI,aAAa,IAAI,IAAI,EAAE,CAAC;YACjC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;YAC7D,cAAc,GAAG,CAAC,IAAI,cAAc,CAAC;QACvC,CAAC;QAED,4DAA4D;QAC5D,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC;QACnF,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;QAE9B,iCAAiC;QACjC,MAAM,eAAe,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QACpD,IAAI,eAAe,IAAI,IAAI,EAAE,CAAC;YAC5B,mDAAmD;YACnD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,IAAI,CAAC,CAAC,CAAC;YACzD,IAAI,CAAC,IAAI,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACrB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;gBAC3D,CAAC;YACH,CAAC;iBAAM,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,eAAe,EAAE,CAAC;gBAC9C,MAAM,YAAY,GAAG,SAAS,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;gBAClD,IAAI,YAAY,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACnC,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;oBAC7B,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;gBACpE,CAAC;gBACD,IAAI,CAAC,oBAAoB,GAAG,SAAS,CAAC;YACxC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAEf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;YACtB,CAAC;YACD,SAAS,EAAE,IAAI,CAAC,oBAAoB;YACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEpC,MAAM,SAAS,GAAG,UAAU,CAAC,WAAW,EAAE;YACxC,kBAAkB,EAAE,IAAI,CAAC,MAAM;YAC/B,UAAU,EAAE,QAAQ,KAAK,OAAO;YAChC,WAAW,EAAE,QAAQ,KAAK,QAAQ;YAClC,WAAW,EAAE,QAAQ,KAAK,QAAQ;YAClC,aAAa,EAAE,IAAI,CAAC,QAAQ;YAC5B,WAAW,EAAE,CAAC,IAAI,CAAC,QAAQ;YAC3B,WAAW,EAAE,IAAI,CAAC,MAAM;SACzB,CAAC,CAAC;QAEH,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,SAAS,EAChB,YAAY,EAAE,GAAG,EAAE;gBACjB,IAAI,CAAC,IAAI,CAAC,aAAa;oBAAE,OAAO;gBAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC,EACD,YAAY,EAAE,GAAG,EAAE;gBACjB,IAAI,CAAC,IAAI,CAAC,aAAa;oBAAE,OAAO;gBAChC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBACzB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC;YAED,qEAAc,SAAS,EAAC,WAAW;gBACjC,+DACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC;oBAE9C,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;wBAC7B,4DAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK;4BACzB,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gCAC7B,gEACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,WAAW,EAAC,0BAA0B,wBACnB,0CAA0C;oCAE7D,6DAAM,IAAI,EAAC,OAAO,GAAQ,CAClB,CACN;4BAEN,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gCAC7B,gEACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,WAAW,EAAC,cAAc,EAC1B,IAAI,EAAC,MAAM,EACX,GAAG,EAAC,MAAM;oCAEV,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO;wCACnC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACC,CACN;4BAEN,4DAAK,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK;gCACzB,gEACE,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,EACX,WAAW,EAAC,SAAS,wBACF,0CAA0C;oCAE7D,6DAAM,IAAI,EAAC,KAAK,GAAQ,CAChB,CACN,CACF;wBAEN,4DAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW;4BACrC,gEACE,IAAI,EAAC,EAAE,EACP,KAAK,EAAC,WAAW,EACjB,WAAW,EAAC,uBAAuB,wBAChB,kEAAkE;gCAErF,8DAAa,CACL,CACN,CACF,CACC,CACI,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\nexport type LeHeaderPosition = 'static' | 'sticky' | 'fixed';\n\n/**\n * A functional page header with scroll-aware behaviors.\n *\n * Features:\n * - Static (default), sticky, or fixed positioning\n * - Optional shrink-on-scroll behavior via `shrink-offset`\n * - Optional reveal-on-scroll-up via `reveal-on-scroll` (sticky only)\n *\n * Slots:\n * - `start`: left side (logo/back button)\n * - `title`: centered/primary title content\n * - `end`: right side actions\n * - default: extra content row (e.g., tabs/search) rendered below main row\n *\n * @slot start - Start area content\n * @slot title - Title content\n * @slot end - End area content\n * @slot - Optional secondary row content\n *\n * @cssprop --le-header-bg - Background (color/gradient)\n * @cssprop --le-header-color - Text color\n * @cssprop --le-header-border - Border (e.g. 1px solid ...)\n * @cssprop --le-header-shadow - Shadow/elevation\n * @cssprop --le-header-max-width - Inner content max width\n * @cssprop --le-header-padding-x - Horizontal padding\n * @cssprop --le-header-padding-y - Vertical padding\n * @cssprop --le-header-gap - Gap between zones\n * @cssprop --le-header-height - Base height (main row)\n * @cssprop --le-header-height-condensed - Condensed height when shrunk\n * @cssprop --le-header-transition - Transition timing\n * @cssprop --le-header-z - Z-index (fixed mode)\n *\n * @csspart header - The header container\n * @csspart inner - Inner max-width container\n * @csspart row - Main row\n * @csspart start - Start zone\n * @csspart title - Title zone\n * @csspart end - End zone\n * @csspart secondary - Secondary row\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-header',\n  styleUrl: 'le-header.css',\n  shadow: true,\n})\nexport class LeHeader {\n  @Element() el: HTMLElement;\n\n  /** Force static positioning (default). Ignored if `sticky` or `fixed` are true. */\n  @Prop({ attribute: 'static', reflect: true }) isStatic: boolean = false;\n\n  /** Sticky positioning (in-flow). Ignored if `fixed` is true. */\n  @Prop({ reflect: true }) sticky: boolean = false;\n\n  /** Fixed positioning (out-of-flow). Takes precedence over `sticky`/`static`. */\n  @Prop({ reflect: true }) fixed: boolean = false;\n\n  /**\n   * Sticky-only reveal behavior (hide on scroll down, show on scroll up).\n   * - missing/false: disabled\n   * - true/empty attribute: enabled with default threshold (16)\n   * - number (as string): enabled and used as threshold\n   */\n  @Prop({ attribute: 'reveal-on-scroll', reflect: true }) revealOnScroll?: string;\n\n  /**\n   * Shrink trigger.\n   * - missing/0: disabled\n   * - number (px): shrink when scrollY >= that value (but never before header height)\n   * - css var name (e.g. --foo): shrink when scrollY >= resolved var value\n   * - selector (e.g. .page-title): shrink when that element scrolls out of view above the viewport\n   */\n  @Prop({ attribute: 'shrink-offset', reflect: true }) shrinkOffset?: string;\n\n  /**\n   * If true, expand the header when hovered\n   */\n  @Prop({ attribute: 'expand-on-hover', reflect: true }) expandOnHover: boolean = false;\n\n  /** Emits whenever scroll-driven state changes. */\n  @Event() leHeaderState: EventEmitter<{\n    y: number;\n    direction: 'up' | 'down';\n    revealed: boolean;\n    shrunk: boolean;\n  }>;\n\n  /** Emits when the header shrinks/expands (only on change). */\n  @Event({ bubbles: true, composed: true })\n  leHeaderShrinkChange: EventEmitter<{ shrunk: boolean; y: number }>;\n\n  /** Emits when the header hides/shows (only on change). */\n  @Event({ bubbles: true, composed: true })\n  leHeaderVisibilityChange: EventEmitter<{ visible: boolean; y: number }>;\n\n  @State() private revealed: boolean = true;\n  @State() private shrunk: boolean = false;\n  @State() private placeholderHeight: number | null = null;\n  @State() private hoverActive: boolean = false;\n\n  private disconnectModeObserver?: () => void;\n  private rafId: number | null = null;\n  private measureRafId: number | null = null;\n  private lastY: number = 0;\n  private lastEmittedDirection: 'up' | 'down' = 'down';\n  private headerEl?: HTMLElement;\n  private shrinkSelectorEl?: Element | null;\n\n  private setShrunk(next: boolean, y: number) {\n    if (next === this.shrunk) return;\n    this.shrunk = next;\n    this.leHeaderShrinkChange.emit({ shrunk: this.shrunk, y });\n  }\n\n  componentDidLoad() {\n    if (typeof window === 'undefined') return;\n    this.lastY = window.scrollY || 0;\n    this.scheduleMeasure(true);\n    this.scheduleUpdate(true);\n  }\n\n  disconnectedCallback() {\n    this.disconnectModeObserver?.();\n    if (this.rafId != null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n\n    if (this.measureRafId != null) {\n      cancelAnimationFrame(this.measureRafId);\n      this.measureRafId = null;\n    }\n  }\n\n  @Watch('revealOnScroll')\n  @Watch('shrinkOffset')\n  @Watch('fixed')\n  @Watch('sticky')\n  @Watch('isStatic')\n  protected onBehaviorPropsChange() {\n    this.scheduleUpdate(true);\n    this.scheduleMeasure(true);\n  }\n\n  @Listen('scroll', { target: 'window', passive: true })\n  protected onWindowScroll() {\n    this.scheduleUpdate();\n  }\n\n  @Listen('resize', { target: 'window', passive: true })\n  protected onWindowResize() {\n    this.scheduleMeasure(true);\n    this.scheduleUpdate(true);\n  }\n\n  private getPosition(): LeHeaderPosition {\n    if (this.fixed) return 'fixed';\n    if (this.sticky) return 'sticky';\n    return 'static';\n  }\n\n  private parseRevealThreshold(): number | null {\n    // Only applies in sticky mode.\n    if (!this.sticky || this.fixed) return null;\n    if (this.revealOnScroll == null) return null;\n    const raw = String(this.revealOnScroll).trim();\n    if (raw === '' || raw === 'true') return 16;\n    if (raw === 'false') return null;\n    const n = Number(raw);\n    return Number.isFinite(n) ? Math.max(0, n) : 16;\n  }\n\n  private resolveShrinkStartPx(): number | null {\n    const raw = (this.shrinkOffset ?? '').trim();\n    if (!raw || raw === '0') return null;\n\n    // Numeric\n    const numeric = Number(raw);\n    if (Number.isFinite(numeric)) return Math.max(0, numeric);\n\n    // CSS variable name\n    if (raw.startsWith('--')) {\n      const value = getComputedStyle(document.documentElement).getPropertyValue(raw).trim();\n      const v = Number(value.replace('px', '').trim());\n      return Number.isFinite(v) ? Math.max(0, v) : null;\n    }\n\n    // Selector\n    try {\n      const el = document.querySelector(raw);\n      this.shrinkSelectorEl = el;\n      return null;\n    } catch {\n      this.shrinkSelectorEl = null;\n      return null;\n    }\n  }\n\n  private scheduleUpdate(force: boolean = false) {\n    if (this.rafId != null) {\n      if (!force) return;\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n    this.rafId = requestAnimationFrame(() => {\n      this.rafId = null;\n      this.updateFromScroll();\n    });\n  }\n\n  private scheduleMeasure(force: boolean = false) {\n    if (this.measureRafId != null && !force) return;\n    this.measureRafId = requestAnimationFrame(() => {\n      this.measureRafId = null;\n      this.measurePlaceholderHeight();\n    });\n  }\n\n  private measurePlaceholderHeight() {\n    // Measure the rendered header height once (and on resize/mode change).\n    // This intentionally ignores scroll/shrink behavior; it should reserve the full header height.\n    if (!this.headerEl) return;\n\n    const next = Math.ceil(this.headerEl.getBoundingClientRect().height);\n    if (!Number.isFinite(next) || next <= 0) return;\n\n    if (next !== this.placeholderHeight) {\n      this.placeholderHeight = next;\n      // Publish to global root so placeholders anywhere can read it.\n      if (typeof document !== 'undefined') {\n        document.documentElement.style.setProperty('--le-header-height', `${next}px`);\n      }\n    }\n  }\n\n  private updateFromScroll() {\n    const y = typeof window !== 'undefined' ? window.scrollY || 0 : 0;\n    const delta = y - this.lastY;\n\n    const direction: 'up' | 'down' = delta < 0 ? 'up' : 'down';\n\n    // Shrink behavior\n    let computedShrunk = false;\n    const headerHeight = Math.max(0, this.placeholderHeight ?? 0);\n    const shrinkStartPx = typeof window !== 'undefined' ? this.resolveShrinkStartPx() : null;\n\n    if (this.shrinkSelectorEl) {\n      const rect = (this.shrinkSelectorEl as HTMLElement).getBoundingClientRect();\n      computedShrunk = rect.bottom <= 0;\n    } else if (shrinkStartPx != null) {\n      const effectiveStart = Math.max(shrinkStartPx, headerHeight);\n      computedShrunk = y >= effectiveStart;\n    }\n\n    // Hover override: when enabled and hovered, force expanded.\n    const nextShrunk = this.expandOnHover && this.hoverActive ? false : computedShrunk;\n    this.setShrunk(nextShrunk, y);\n\n    // Reveal-on-scroll (sticky-only)\n    const revealThreshold = this.parseRevealThreshold();\n    if (revealThreshold != null) {\n      // Always show the header near the top of the page.\n      const topLock = Math.max(0, this.placeholderHeight ?? 0);\n      if (y <= topLock) {\n        if (!this.revealed) {\n          this.revealed = true;\n          this.leHeaderVisibilityChange.emit({ visible: true, y });\n        }\n      } else if (Math.abs(delta) >= revealThreshold) {\n        const nextRevealed = direction === 'up' || y <= 0;\n        if (nextRevealed !== this.revealed) {\n          this.revealed = nextRevealed;\n          this.leHeaderVisibilityChange.emit({ visible: this.revealed, y });\n        }\n        this.lastEmittedDirection = direction;\n      }\n    } else {\n      if (!this.revealed) {\n        this.revealed = true;\n        this.leHeaderVisibilityChange.emit({ visible: true, y });\n      }\n    }\n\n    this.lastY = y;\n\n    this.leHeaderState.emit({\n      y,\n      direction: this.lastEmittedDirection,\n      revealed: this.revealed,\n      shrunk: this.shrunk,\n    });\n  }\n\n  render() {\n    const position = this.getPosition();\n\n    const hostClass = classnames('le-header', {\n      'header-is-shrunk': this.shrunk,\n      'is-fixed': position === 'fixed',\n      'is-sticky': position === 'sticky',\n      'is-static': position === 'static',\n      'is-revealed': this.revealed,\n      'is-hidden': !this.revealed,\n      'is-shrunk': this.shrunk,\n    });\n\n    return (\n      <Host\n        class={hostClass}\n        onMouseEnter={() => {\n          if (!this.expandOnHover) return;\n          this.hoverActive = true;\n          this.scheduleUpdate(true);\n        }}\n        onMouseLeave={() => {\n          if (!this.expandOnHover) return;\n          this.hoverActive = false;\n          this.scheduleUpdate(true);\n        }}\n      >\n        <le-component component=\"le-header\">\n          <header\n            class=\"header\"\n            part=\"header\"\n            role=\"banner\"\n            ref={el => (this.headerEl = el as HTMLElement)}\n          >\n            <div class=\"inner\" part=\"inner\">\n              <div class=\"row\" part=\"row\">\n                <div class=\"start\" part=\"start\">\n                  <le-slot\n                    name=\"start\"\n                    label=\"Start\"\n                    description=\"Logo / back button / nav\"\n                    allowed-components=\"le-button,le-text,le-tag,le-box,le-stack\"\n                  >\n                    <slot name=\"start\"></slot>\n                  </le-slot>\n                </div>\n\n                <div class=\"title\" part=\"title\">\n                  <le-slot\n                    name=\"title\"\n                    label=\"Title\"\n                    description=\"Header title\"\n                    type=\"text\"\n                    tag=\"span\"\n                  >\n                    <span class=\"title-slot\" part=\"title\">\n                      <slot name=\"title\"></slot>\n                    </span>\n                  </le-slot>\n                </div>\n\n                <div class=\"end\" part=\"end\">\n                  <le-slot\n                    name=\"end\"\n                    label=\"End\"\n                    description=\"Actions\"\n                    allowed-components=\"le-button,le-text,le-tag,le-box,le-stack\"\n                  >\n                    <slot name=\"end\"></slot>\n                  </le-slot>\n                </div>\n              </div>\n\n              <div class=\"secondary\" part=\"secondary\">\n                <le-slot\n                  name=\"\"\n                  label=\"Secondary\"\n                  description=\"Secondary row content\"\n                  allowed-components=\"le-tabs,le-tab-bar,le-select,le-combobox,le-text,le-stack,le-box\"\n                >\n                  <slot></slot>\n                </le-slot>\n              </div>\n            </div>\n          </header>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}