le-kit 0.5.1 → 0.5.3

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

@@ -1 +1 @@
-{"file":"le-header.js","mappings":"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","names":["LeHeader","__stencil_proxyCustomElement"],"sources":["src/components/le-header/le-header.css?tag=le-header&encapsulation=shadow","src/components/le-header/le-header.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  /* Container styles */\n  /* Offset from the top of the page (e.g. if page has top padding or another fixed bar). */\n  --le-header-top-offset: 0;\n\n  --le-header-bg: var(--le-color-surface);\n  --le-header-max-width: var(--le-header-max-width, auto);\n  --le-header-margin: 0 auto;\n  --le-header-border: 1px solid var(--le-color-border);\n  --le-header-border-radius: 0px;\n  --le-header-shadow: var(--le-header-shadow, none);\n\n  /* Content styles */\n  --le-header-color: var(--le-color-text);\n  --le-header-content-max-width: 800px;\n  --le-header-padding-x: var(--le-space-md);\n  --le-header-padding-y: var(--le-space-sm);\n  --le-header-gap: var(--le-space-sm);\n\n  --le-header-transition: var(--le-transition-normal);\n  --le-header-z: 1000;\n}\n\n.header {\n  width: 100%;\n  max-width: var(--le-header-max-width);\n  margin: var(--le-header-margin);\n  background: var(--le-header-bg);\n  color: var(--le-header-color);\n  border-bottom: var(--le-header-border);\n  border-radius: var(--le-header-border-radius);\n  box-shadow: var(--le-header-shadow);\n}\n\n:host(.is-fixed) {\n  position: fixed;\n  top: var(--le-header-top-offset);\n  left: 0;\n  right: 0;\n  z-index: var(--le-header-z);\n}\n\n:host(.is-sticky) {\n  position: sticky;\n  top: var(--le-header-top-offset);\n  z-index: var(--le-header-z);\n}\n\n:host(.is-static) {\n  position: relative;\n}\n\n.inner {\n  max-width: var(--le-header-content-max-width);\n  margin: 0 auto;\n  padding: var(--le-header-padding-y) var(--le-header-padding-x);\n}\n\n.row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);\n  align-items: center;\n  gap: var(--le-header-gap);\n  transition:\n    height var(--le-header-transition),\n    padding var(--le-header-transition),\n    transform var(--le-header-transition);\n}\n\n:host(.is-shrunk) .row {\n  height: var(--le-header-height-condensed);\n}\n\n/* reveal behavior (sticky only) */\n:host(.is-sticky.is-hidden) {\n  transform: translateY(-150%);\n  transition: transform var(--le-header-transition);\n}\n\n:host(.is-sticky.is-revealed) {\n  transform: translateY(0);\n  transition: transform var(--le-header-transition);\n}\n\n.start,\n.title,\n.end {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.start {\n  justify-content: flex-start;\n}\n\n.end {\n  justify-content: flex-end;\n}\n\n.title {\n  justify-content: center;\n  text-align: center;\n}\n\n.title-slot ::slotted(*) {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.compact-title {\n  font: inherit;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n","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"],"version":3}
+{"file":"le-header.js","mappings":"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","names":["LeHeader","__stencil_proxyCustomElement"],"sources":["src/components/le-header/le-header.css?tag=le-header&encapsulation=shadow","src/components/le-header/le-header.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  /* Container styles */\n  /* Offset from the top of the page (e.g. if page has top padding or another fixed bar). */\n  --le-header-top-offset: 0;\n\n  --le-header-bg: var(--le-color-surface);\n  --le-header-max-width: var(--le-header-max-width, auto);\n  --le-header-margin: 0 auto;\n  --le-header-border: 1px solid var(--le-color-border);\n  --le-header-border-radius: 0px;\n  --le-header-shadow: var(--le-header-shadow, none);\n\n  /* Content styles */\n  --le-header-color: var(--le-color-text);\n  --le-header-content-max-width: 800px;\n  --le-header-padding-x: var(--le-space-md);\n  --le-header-padding-y: var(--le-space-sm);\n  --le-header-gap: var(--le-space-sm);\n\n  --le-header-transition: var(--le-transition-normal);\n  --le-header-z: 1000;\n}\n\n.header {\n  width: 100%;\n  max-width: var(--le-header-max-width);\n  margin: var(--le-header-margin);\n  background: var(--le-header-bg);\n  color: var(--le-header-color);\n  border-bottom: var(--le-header-border);\n  border-radius: var(--le-header-border-radius);\n  box-shadow: var(--le-header-shadow);\n}\n\n:host(.is-fixed) {\n  position: fixed;\n  top: var(--le-header-top-offset);\n  left: 0;\n  right: 0;\n  z-index: var(--le-header-z);\n}\n\n:host(.is-sticky) {\n  position: sticky;\n  top: var(--le-header-top-offset);\n  z-index: var(--le-header-z);\n}\n\n:host(.is-static) {\n  position: relative;\n}\n\n.inner {\n  max-width: var(--le-header-content-max-width);\n  margin: 0 auto;\n  padding: var(--le-header-padding-y) var(--le-header-padding-x);\n}\n\n.row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);\n  align-items: center;\n  gap: var(--le-header-gap);\n  transition:\n    height var(--le-header-transition),\n    padding var(--le-header-transition),\n    transform var(--le-header-transition);\n}\n\n:host(.is-shrunk) .row {\n  height: var(--le-header-height-condensed);\n}\n\n/* reveal behavior (sticky only) */\n:host(.is-sticky.is-hidden) {\n  transform: translateY(-150%);\n  transition: transform var(--le-header-transition);\n}\n\n:host(.is-sticky.is-revealed) {\n  transform: translateY(0);\n  transition: transform var(--le-header-transition);\n}\n\n.start,\n.title,\n.end {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.start {\n  justify-content: flex-start;\n}\n\n.end {\n  justify-content: flex-end;\n}\n\n.title {\n  justify-content: center;\n  text-align: center;\n}\n\n.title-slot ::slotted(*) {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.compact-title {\n  font: inherit;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n","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"],"version":3}

package/dist/components/le-icon2.js

@@ -43,19 +43,18 @@ const LeIcon = /*@__PURE__*/ proxyCustomElement(class LeIcon extends HTMLElement
             this.__registerHost();
         }
         this.__attachShadow();
+        /**
+         * Name of the icon to display. Corresponds to a JSON file in the assets folder.
+         * For example, "search" will load the "search.json" file.
+         */
+        this.name = null;
+        /**
+         * Size of the icon in pixels. Default is 16.
+         */
+        this.size = 16;
+        this.iconData = null;
+        this.visible = false;
     }
-    get el() { return this; }
-    /**
-     * Name of the icon to display. Corresponds to a JSON file in the assets folder.
-     * For example, "search" will load the "search.json" file.
-     */
-    name = null;
-    /**
-     * Size of the icon in pixels. Default is 16.
-     */
-    size = 16;
-    iconData = null;
-    visible = false;
     async loadIconData() {
         const { name, visible } = this;
         if (!Build.isBrowser || !name || !visible) {
@@ -63,7 +62,6 @@ const LeIcon = /*@__PURE__*/ proxyCustomElement(class LeIcon extends HTMLElement
         }
         this.iconData = await fetchIcon({ name });
     }
-    intersectionObserver;
     connectedCallback() {
         this.waitUntilVisible(() => {
             this.visible = true;
@@ -115,14 +113,15 @@ const LeIcon = /*@__PURE__*/ proxyCustomElement(class LeIcon extends HTMLElement
         return svgElements;
     }
     render() {
-        return (h("svg", { key: '679c2641c722c5321ffc90a372d3f5fa5d748946', xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: this.size || 16, width: this.size || 16, viewBox: this.iconData?.viewBox || `0 0 ${this.size || 16} ${this.size || 16}` }, this.renderSVGContent(this.iconData?.children)));
+        return (h("svg", { key: '15ae743268ab99a174f669436778c2305f4d65df', xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: this.size || 16, width: this.size || 16, viewBox: this.iconData?.viewBox || `0 0 ${this.size || 16} ${this.size || 16}` }, this.renderSVGContent(this.iconData?.children)));
     }
     static get assetsDirs() { return ["assets/icons"]; }
+    get el() { return this; }
     static get watchers() { return {
         "name": ["loadIconData"]
     }; }
     static get style() { return leIconCss(); }
-}, [769, "le-icon", {
+}, [257, "le-icon", {
         "name": [1],
         "size": [2],
         "iconData": [32],

package/dist/components/le-icon2.js.map

@@ -1 +1 @@
-{"file":"le-icon2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/le-icon/le-icon.css?tag=le-icon&encapsulation=shadow","src/components/le-icon/le-icon.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  width: var(--le-icon-size, var(--le-size-4));\n  height: var(--le-icon-size, var(--le-size-4));\n\n  color: var(--le-icon-color, var(--le-color-text-primary));\n}\n\n:host svg {\n  display: block;\n  fill: currentColor;\n}\n","/**\n * Based on the script from Paul Andreson's article:\n * https://paulcpederson.com/articles/stencil-icons/\n */\nimport { Build, Component, Element, getAssetPath, h, Prop, State, Watch } from '@stencil/core';\nimport { getAssetBasePath } from '../../global/app';\n\nconst iconCache: Record<string, any> = {};\nconst requestCache: Record<string, Promise<any>> = {};\n\n/**\n * Get the URL for loading an icon.\n * Uses configurable assetBasePath if set, otherwise falls back to Stencil's getAssetPath.\n */\nfunction getIconUrl(name: string): string {\n  const basePath = getAssetBasePath();\n  if (basePath) {\n    // Use configured base path - normalize by removing trailing slash\n    const normalizedBase = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;\n    return `${normalizedBase}/icons/${name}.json`;\n  }\n  // Fall back to Stencil's getAssetPath for local development\n  return getAssetPath(`./assets/icons/${name}.json`);\n}\n\nasync function fetchIcon({ name }): Promise<string> {\n  if (iconCache[name]) {\n    return iconCache[name];\n  }\n  if (!requestCache[name]) {\n    const iconUrl = getIconUrl(name);\n    requestCache[name] = fetch(iconUrl)\n      .then(resp => resp.json())\n      .catch(() => {\n        console.error(`Icon \"${name}\" could not be loaded from: ${iconUrl}`);\n        return '';\n      });\n  }\n\n  const path = await requestCache[name];\n  iconCache[name] = path;\n\n  return path;\n}\n\n@Component({\n  tag: 'le-icon',\n  styleUrl: 'le-icon.css',\n  shadow: true,\n  assetsDirs: ['assets/icons'],\n})\nexport class LeIcon {\n  @Element() el: HTMLElement;\n\n  /**\n   * Name of the icon to display. Corresponds to a JSON file in the assets folder.\n   * For example, \"search\" will load the \"search.json\" file.\n   */\n  @Prop() name: string = null;\n\n  /**\n   * Size of the icon in pixels. Default is 16.\n   */\n  @Prop() size: number = 16;\n\n  @State() private iconData: any = null;\n\n  @State() private visible = false;\n\n  @Watch('name') private async loadIconData(): Promise<void> {\n    const { name, visible } = this;\n\n    if (!Build.isBrowser || !name || !visible) {\n      return;\n    }\n\n    this.iconData = await fetchIcon({ name });\n  }\n\n  private intersectionObserver: IntersectionObserver;\n\n  connectedCallback(): void {\n    this.waitUntilVisible(() => {\n      this.visible = true;\n      this.loadIconData();\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect();\n      this.intersectionObserver = null;\n    }\n  }\n\n  async componentWillLoad(): Promise<void> {\n    this.loadIconData();\n  }\n\n  private waitUntilVisible(callback: () => void): void {\n    if (\n      !Build.isBrowser ||\n      typeof window === 'undefined' ||\n      !(window as any).IntersectionObserver\n    ) {\n      callback();\n      return;\n    }\n\n    this.intersectionObserver = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            this.intersectionObserver.disconnect();\n            this.intersectionObserver = null;\n            callback();\n          }\n        });\n      },\n      { rootMargin: '50px' },\n    );\n\n    this.intersectionObserver.observe(this.el);\n  }\n\n  /**\n   * Renders the SVG content out of a JSON data in a format:\n   * { \"viewBox\": \"...\", children: [{ \"tag\": \"g\", \"\"children\": [ ... ], ...attrs }, ...] }\n   *\n   * @returns JSX.Element | null\n   */\n  private renderSVGContent(children?: any[]) {\n    if (!children || children.length === 0) {\n      return null;\n    }\n\n    const createElement = node => {\n      const { tag, children, ...attrs } = node;\n      return h(tag, attrs, children ? children.map(createElement) : null);\n    };\n\n    const svgElements = children.map(createElement);\n    return svgElements;\n  }\n\n  render() {\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        height={this.size || 16}\n        width={this.size || 16}\n        viewBox={this.iconData?.viewBox || `0 0 ${this.size || 16} ${this.size || 16}`}\n      >\n        {this.renderSVGContent(this.iconData?.children)}\n      </svg>\n    );\n  }\n}\n"],"version":3}
+{"file":"le-icon2.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,MAAM,CAAC,uNAAuN,CAAC;;ACOjP,MAAM,SAAS,GAAwB,EAAE;AACzC,MAAM,YAAY,GAAiC,EAAE;AAErD;;;AAGG;AACH,SAAS,UAAU,CAAC,IAAY,EAAA;AAC9B,IAAA,MAAM,QAAQ,GAAG,gBAAgB,EAAE;IACnC,IAAI,QAAQ,EAAE;;QAEZ,MAAM,cAAc,GAAG,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,QAAQ;AAChF,QAAA,OAAO,CAAG,EAAA,cAAc,CAAU,OAAA,EAAA,IAAI,OAAO;;;AAG/C,IAAA,OAAO,YAAY,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAA,KAAA,CAAO,CAAC;AACpD;AAEA,eAAe,SAAS,CAAC,EAAE,IAAI,EAAE,EAAA;AAC/B,IAAA,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE;AACnB,QAAA,OAAO,SAAS,CAAC,IAAI,CAAC;;AAExB,IAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;AACvB,QAAA,MAAM,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC;AAChC,QAAA,YAAY,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,OAAO;aAC/B,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE;aACxB,KAAK,CAAC,MAAK;YACV,OAAO,CAAC,KAAK,CAAC,CAAA,MAAA,EAAS,IAAI,CAA+B,4BAAA,EAAA,OAAO,CAAE,CAAA,CAAC;AACpE,YAAA,OAAO,EAAE;AACX,SAAC,CAAC;;AAGN,IAAA,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC;AACrC,IAAA,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI;AAEtB,IAAA,OAAO,IAAI;AACb;MAQa,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;AANnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AASE;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,IAAI;AAE3B;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AAER,QAAA,IAAQ,CAAA,QAAA,GAAQ,IAAI;AAEpB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AA2FjC;AAzFwB,IAAA,MAAM,YAAY,GAAA;AACvC,QAAA,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI;QAE9B,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE;YACzC;;QAGF,IAAI,CAAC,QAAQ,GAAG,MAAM,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC;;IAK3C,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,CAAC,MAAK;AACzB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;YACnB,IAAI,CAAC,YAAY,EAAE;AACrB,SAAC,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;AAC7B,YAAA,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE;AACtC,YAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;;;AAIpC,IAAA,MAAM,iBAAiB,GAAA;QACrB,IAAI,CAAC,YAAY,EAAE;;AAGb,IAAA,gBAAgB,CAAC,QAAoB,EAAA;QAC3C,IACE,CAAC,KAAK,CAAC,SAAS;YAChB,OAAO,MAAM,KAAK,WAAW;AAC7B,YAAA,CAAE,MAAc,CAAC,oBAAoB,EACrC;AACA,YAAA,QAAQ,EAAE;YACV;;QAGF,IAAI,CAAC,oBAAoB,GAAG,IAAI,oBAAoB,CAClD,OAAO,IAAG;AACR,YAAA,OAAO,CAAC,OAAO,CAAC,KAAK,IAAG;AACtB,gBAAA,IAAI,KAAK,CAAC,cAAc,EAAE;AACxB,oBAAA,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE;AACtC,oBAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI;AAChC,oBAAA,QAAQ,EAAE;;AAEd,aAAC,CAAC;AACJ,SAAC,EACD,EAAE,UAAU,EAAE,MAAM,EAAE,CACvB;QAED,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;;AAG5C;;;;;AAKG;AACK,IAAA,gBAAgB,CAAC,QAAgB,EAAA;QACvC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;AACtC,YAAA,OAAO,IAAI;;AAGb,QAAA,MAAM,aAAa,GAAG,IAAI,IAAG;YAC3B,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI;YACxC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC;AACrE,SAAC;QAED,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,CAAC,aAAa,CAAC;AAC/C,QAAA,OAAO,WAAW;;IAGpB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,EACvB,KAAK,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,IAAI,CAAA,IAAA,EAAO,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAE,CAAA,EAAA,EAE7E,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/le-icon/le-icon.css?tag=le-icon&encapsulation=shadow","src/components/le-icon/le-icon.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  width: var(--le-icon-size, var(--le-size-4));\n  height: var(--le-icon-size, var(--le-size-4));\n\n  color: var(--le-icon-color, var(--le-color-text-primary));\n}\n\n:host svg {\n  display: block;\n  fill: currentColor;\n}\n","/**\n * Based on the script from Paul Andreson's article:\n * https://paulcpederson.com/articles/stencil-icons/\n */\nimport { Build, Component, Element, getAssetPath, h, Prop, State, Watch } from '@stencil/core';\nimport { getAssetBasePath } from '../../global/app';\n\nconst iconCache: Record<string, any> = {};\nconst requestCache: Record<string, Promise<any>> = {};\n\n/**\n * Get the URL for loading an icon.\n * Uses configurable assetBasePath if set, otherwise falls back to Stencil's getAssetPath.\n */\nfunction getIconUrl(name: string): string {\n  const basePath = getAssetBasePath();\n  if (basePath) {\n    // Use configured base path - normalize by removing trailing slash\n    const normalizedBase = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;\n    return `${normalizedBase}/icons/${name}.json`;\n  }\n  // Fall back to Stencil's getAssetPath for local development\n  return getAssetPath(`./assets/icons/${name}.json`);\n}\n\nasync function fetchIcon({ name }): Promise<string> {\n  if (iconCache[name]) {\n    return iconCache[name];\n  }\n  if (!requestCache[name]) {\n    const iconUrl = getIconUrl(name);\n    requestCache[name] = fetch(iconUrl)\n      .then(resp => resp.json())\n      .catch(() => {\n        console.error(`Icon \"${name}\" could not be loaded from: ${iconUrl}`);\n        return '';\n      });\n  }\n\n  const path = await requestCache[name];\n  iconCache[name] = path;\n\n  return path;\n}\n\n@Component({\n  tag: 'le-icon',\n  styleUrl: 'le-icon.css',\n  shadow: true,\n  assetsDirs: ['assets/icons'],\n})\nexport class LeIcon {\n  @Element() el: HTMLElement;\n\n  /**\n   * Name of the icon to display. Corresponds to a JSON file in the assets folder.\n   * For example, \"search\" will load the \"search.json\" file.\n   */\n  @Prop() name: string = null;\n\n  /**\n   * Size of the icon in pixels. Default is 16.\n   */\n  @Prop() size: number = 16;\n\n  @State() private iconData: any = null;\n\n  @State() private visible = false;\n\n  @Watch('name') private async loadIconData(): Promise<void> {\n    const { name, visible } = this;\n\n    if (!Build.isBrowser || !name || !visible) {\n      return;\n    }\n\n    this.iconData = await fetchIcon({ name });\n  }\n\n  private intersectionObserver: IntersectionObserver;\n\n  connectedCallback(): void {\n    this.waitUntilVisible(() => {\n      this.visible = true;\n      this.loadIconData();\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect();\n      this.intersectionObserver = null;\n    }\n  }\n\n  async componentWillLoad(): Promise<void> {\n    this.loadIconData();\n  }\n\n  private waitUntilVisible(callback: () => void): void {\n    if (\n      !Build.isBrowser ||\n      typeof window === 'undefined' ||\n      !(window as any).IntersectionObserver\n    ) {\n      callback();\n      return;\n    }\n\n    this.intersectionObserver = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            this.intersectionObserver.disconnect();\n            this.intersectionObserver = null;\n            callback();\n          }\n        });\n      },\n      { rootMargin: '50px' },\n    );\n\n    this.intersectionObserver.observe(this.el);\n  }\n\n  /**\n   * Renders the SVG content out of a JSON data in a format:\n   * { \"viewBox\": \"...\", children: [{ \"tag\": \"g\", \"\"children\": [ ... ], ...attrs }, ...] }\n   *\n   * @returns JSX.Element | null\n   */\n  private renderSVGContent(children?: any[]) {\n    if (!children || children.length === 0) {\n      return null;\n    }\n\n    const createElement = node => {\n      const { tag, children, ...attrs } = node;\n      return h(tag, attrs, children ? children.map(createElement) : null);\n    };\n\n    const svgElements = children.map(createElement);\n    return svgElements;\n  }\n\n  render() {\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"currentColor\"\n        height={this.size || 16}\n        width={this.size || 16}\n        viewBox={this.iconData?.viewBox || `0 0 ${this.size || 16} ${this.size || 16}`}\n      >\n        {this.renderSVGContent(this.iconData?.children)}\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/le-multiselect.js

@@ -16,82 +16,152 @@ const LeMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class LeMultiselect ext
         this.leChange = createEvent(this, "leChange", 7);
         this.leOpen = createEvent(this, "leOpen", 7);
         this.leClose = createEvent(this, "leClose", 7);
+        /**
+         * The options to display in the dropdown.
+         */
+        this.options = [];
+        /**
+         * The currently selected values.
+         */
+        this.value = [];
+        /**
+         * Placeholder text when no options are selected.
+         */
+        this.placeholder = 'Select options...';
+        /**
+         * Whether the multiselect is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Whether selection is required.
+         */
+        this.required = false;
+        /**
+         * Whether the multiselect should take full width of its container.
+         */
+        this.fullWidth = false;
+        /**
+         * Size variant of the multiselect.
+         */
+        this.size = 'medium';
+        /**
+         * Labels for the "Select All" option.
+         */
+        this.selectAllLabel = 'Select All';
+        this.deselectAllLabel = 'Deselect All';
+        /**
+         * Whether to show a "Select All" option.
+         * Also accepts a string or array of strings to customize the label(s).
+         */
+        this.showSelectAll = false;
+        /**
+         * Whether the input is searchable.
+         */
+        this.searchable = false;
+        /**
+         * Text to show when no options match the search.
+         */
+        this.emptyText = 'No results found';
+        /**
+         * Whether the dropdown is currently open.
+         */
+        this.open = false;
+        this.selectedOptions = [];
+        this.searchQuery = '';
+        this.filterOption = (option, query) => {
+            if (!query)
+                return true;
+            // Always show "Select All" option
+            if (option.value === '__select_all__')
+                return true;
+            const searchLower = query.toLowerCase();
+            return (option.label.toLowerCase().includes(searchLower) ||
+                (option.description?.toLowerCase().includes(searchLower) ?? false));
+        };
+        this.handleOptionSelect = (e) => {
+            const { value } = e.detail;
+            const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);
+            if (enabledOptions.length === 0)
+                return;
+            // Handle "Select All" option
+            if (value === '__select_all__') {
+                if (this.selectedOptions.length === enabledOptions.length) {
+                    // Deselect all
+                    this.value = [];
+                }
+                else {
+                    // Select all (respect maxSelections)
+                    const selectableOptions = this.maxSelections
+                        ? enabledOptions.slice(0, this.maxSelections)
+                        : enabledOptions;
+                    this.value = selectableOptions.map(opt => opt.value ?? opt.label);
+                }
+                this.emitChange();
+                return;
+            }
+            const isSelected = this.value.includes(value);
+            if (isSelected) {
+                // Remove from selection
+                this.value = this.value.filter(v => v !== value);
+                this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);
+            }
+            else {
+                // Add to selection (if not at max)
+                if (this.maxSelections && this.value.length >= this.maxSelections) {
+                    return; // Don't add more
+                }
+                this.value = [...this.value, value];
+            }
+            this.emitChange();
+            // Clear search after szelection
+            this.searchQuery = '';
+        };
+        this.handleDropdownOpen = () => {
+            this.open = true;
+            this.leOpen.emit();
+            // Focus search input if searchable
+            if (this.searchable) {
+                setTimeout(() => {
+                    this.inputEl?.focus();
+                }, 50);
+            }
+        };
+        this.handleDropdownClose = () => {
+            this.open = false;
+            this.searchQuery = '';
+            this.leClose.emit();
+        };
+        this.handleTriggerClick = () => {
+            if (!this.disabled) {
+                this.dropdownEl?.toggle();
+            }
+        };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.dropdownEl?.show();
+            }
+        };
+        this.handleTagDismiss = (option, e) => {
+            e.stopPropagation();
+            const value = option.value ?? option.label;
+            this.value = this.value.filter(v => v !== value);
+            this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);
+            this.emitChange();
+        };
+        this.handleSearchInput = (e) => {
+            const target = e.target;
+            this.searchQuery = target.value;
+        };
+        this.handleClearAll = (e) => {
+            e.stopPropagation();
+            this.value = [];
+            this.selectedOptions = [];
+            this.emitChange();
+        };
     }
-    get el() { return this; }
-    /**
-     * The options to display in the dropdown.
-     */
-    options = [];
-    /**
-     * The currently selected values.
-     */
-    value = [];
-    /**
-     * Placeholder text when no options are selected.
-     */
-    placeholder = 'Select options...';
-    /**
-     * Whether the multiselect is disabled.
-     */
-    disabled = false;
-    /**
-     * Whether selection is required.
-     */
-    required = false;
-    /**
-     * Name attribute for form submission.
-     */
-    name;
-    /**
-     * Whether the multiselect should take full width of its container.
-     */
-    fullWidth = false;
-    /**
-     * Size variant of the multiselect.
-     */
-    size = 'medium';
-    /**
-     * Maximum number of selections allowed.
-     */
-    maxSelections;
-    /**
-     * Labels for the "Select All" option.
-     */
-    selectAllLabel = 'Select All';
-    deselectAllLabel = 'Deselect All';
-    /**
-     * Whether to show a "Select All" option.
-     * Also accepts a string or array of strings to customize the label(s).
-     */
-    showSelectAll = false;
-    /**
-     * Whether the input is searchable.
-     */
-    searchable = false;
-    /**
-     * Text to show when no options match the search.
-     */
-    emptyText = 'No results found';
-    /**
-     * Whether the dropdown is currently open.
-     */
-    open = false;
-    /**
-     * Emitted when the selected values change.
-     */
-    leChange;
-    /**
-     * Emitted when the dropdown opens.
-     */
-    leOpen;
-    /**
-     * Emitted when the dropdown closes.
-     */
-    leClose;
-    selectedOptions = [];
-    searchQuery = '';
-    dropdownEl;
-    inputEl;
     handleValueChange() {
         this.updateSelectedOptions();
     }
@@ -164,105 +234,12 @@ const LeMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class LeMultiselect ext
         const valueArray = Array.isArray(this.value) ? this.value : [];
         this.selectedOptions = this.parsedOptions.filter(opt => valueArray.includes(opt.value ?? opt.label));
     }
-    filterOption = (option, query) => {
-        if (!query)
-            return true;
-        // Always show "Select All" option
-        if (option.value === '__select_all__')
-            return true;
-        const searchLower = query.toLowerCase();
-        return (option.label.toLowerCase().includes(searchLower) ||
-            (option.description?.toLowerCase().includes(searchLower) ?? false));
-    };
-    handleOptionSelect = (e) => {
-        const { value } = e.detail;
-        const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);
-        if (enabledOptions.length === 0)
-            return;
-        // Handle "Select All" option
-        if (value === '__select_all__') {
-            if (this.selectedOptions.length === enabledOptions.length) {
-                // Deselect all
-                this.value = [];
-            }
-            else {
-                // Select all (respect maxSelections)
-                const selectableOptions = this.maxSelections
-                    ? enabledOptions.slice(0, this.maxSelections)
-                    : enabledOptions;
-                this.value = selectableOptions.map(opt => opt.value ?? opt.label);
-            }
-            this.emitChange();
-            return;
-        }
-        const isSelected = this.value.includes(value);
-        if (isSelected) {
-            // Remove from selection
-            this.value = this.value.filter(v => v !== value);
-            this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);
-        }
-        else {
-            // Add to selection (if not at max)
-            if (this.maxSelections && this.value.length >= this.maxSelections) {
-                return; // Don't add more
-            }
-            this.value = [...this.value, value];
-        }
-        this.emitChange();
-        // Clear search after szelection
-        this.searchQuery = '';
-    };
     emitChange() {
         this.leChange.emit({
             values: this.value,
             options: this.selectedOptions,
         });
     }
-    handleDropdownOpen = () => {
-        this.open = true;
-        this.leOpen.emit();
-        // Focus search input if searchable
-        if (this.searchable) {
-            setTimeout(() => {
-                this.inputEl?.focus();
-            }, 50);
-        }
-    };
-    handleDropdownClose = () => {
-        this.open = false;
-        this.searchQuery = '';
-        this.leClose.emit();
-    };
-    handleTriggerClick = () => {
-        if (!this.disabled) {
-            this.dropdownEl?.toggle();
-        }
-    };
-    handleTriggerKeyDown = (e) => {
-        if (this.disabled)
-            return;
-        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
-            e.preventDefault();
-            this.dropdownEl?.show();
-        }
-    };
-    handleTagDismiss = (option, e) => {
-        e.stopPropagation();
-        const value = option.value ?? option.label;
-        this.value = this.value.filter(v => v !== value);
-        this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);
-        this.emitChange();
-    };
-    handleSearchInput = (e) => {
-        const target = e.target;
-        this.searchQuery = target.value;
-    };
-    handleClearAll = (e) => {
-        e.stopPropagation();
-        this.value = [];
-        this.selectedOptions = [];
-        this.emitChange();
-    };
     /**
      * Opens the dropdown.
      */
@@ -292,21 +269,22 @@ const LeMultiselect$1 = /*@__PURE__*/ proxyCustomElement(class LeMultiselect ext
     render() {
         const hasSelections = this.selectedOptions.length > 0;
         const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
-        return (h("le-component", { key: 'e6183adb112775737e6a7f47b0be614a76a1c110', component: "le-multiselect" }, h("le-dropdown-base", { key: 'ee8ba9e02608a5c26d8a8b0a659e89e5631f3f6a', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: '4c87bf167dd876476dae3b0259cda2f28e3787a5', slot: "trigger", class: {
+        return (h("le-component", { key: 'b22fd0273666745ad4dcfaf5692102d4cbc1946c', component: "le-multiselect" }, h("le-dropdown-base", { key: 'e81736ecb7e4b50fe9d8ea19460271a705baeb80', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: 'cd3e45b676ee7b90c82ae0b2c18684d89bb3f3f8', slot: "trigger", class: {
                 'multiselect-trigger': true,
                 'has-selections': hasSelections,
                 'is-open': this.open,
                 'is-disabled': this.disabled,
-            }, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), h("div", { key: 'be629671c75d408127edb480df54c6649e28ca2a', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: '67f4c2152e4b2f8f52b8b98093fbb238571f6105', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: '5894bfb10a310a29f21c865323b2175cde05173e', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '50f7445b3627bf110a899dbba2b5f7244d706a49', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '58ef10834f74ce5b21b675b47a4c2a96df4bd173', class: "multiselect-arrow" }, h("svg", { key: '74a20681e12aff0295c219c8ff8f953908aa9a94', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '8e48c5333f7f3035e4c4f80f7c3507e5d3d4caaa', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: '906f9596d6a0da2840d534570d38ea008d7cdb4b', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'ccd7f1b2594be3440adb16ef5c001beaa5547396', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
-            this.value.map(val => (h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (h("span", { key: 'c329c06d0e00a1516c9d3323ad4a83b81a205f13', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
+            }, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), h("div", { key: 'dfcb6b8397aec56be4588421b7545ae6caae31b2', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: '3ddd374aa458784d7d19f52966ee4f4fa5ca93f1', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: '1687f1af7277b8489c6de841891439d5f4c77483', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '864debd4e5ce7f93338bea67f24c1c43e63a4dc3', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '6d2fa2b5aaa3970068d40e4ec4db7c7809dc85cd', class: "multiselect-arrow" }, h("svg", { key: '2fb670f75e9d9ba726c320cfeb6b8d31dd3a6ac4', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '70429d2d874f30a2a55ac57bf4d758663c048893', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: '1224afb258731403d9c95888b8b3b8fc0f0c1b03', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'b8d592186887238ea1acbf5db8d8f9c9cca0656f', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
+            this.value.map(val => (h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (h("span", { key: 'c47d74d5f40c30881e6b8bb35dafe80be85ee41a', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
     }
+    get el() { return this; }
     static get watchers() { return {
         "value": ["handleValueChange"],
         "options": ["handleOptionsChange"],
         "showSelectAll": ["handleShowSelectAllChange"]
     }; }
     static get style() { return leMultiselectCss(); }
-}, [769, "le-multiselect", {
+}, [257, "le-multiselect", {
         "options": [1],
         "value": [1040],
         "placeholder": [1],