@sankhyatronics/sankhya-cms 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/custom-elements.json +594 -579
  2. package/dist/{chunk-5KHI36M5.js → chunk-X2ALYIVT.js} +25 -1
  3. package/dist/chunk-X2ALYIVT.js.map +1 -0
  4. package/dist/header/index.d.ts +6 -0
  5. package/dist/header/index.js +1 -1
  6. package/dist/index.js +19 -19
  7. package/package.json +1 -1
  8. package/dist/chunk-5KHI36M5.js.map +0 -1
package/dist/{chunk-5KHI36M5.js → chunk-X2ALYIVT.js} RENAMED
@@ -57,6 +57,7 @@ var Header = class extends LitElement {
57
57
  this.compact = false;
58
58
  this.languageMenuOpen = false;
59
59
  this.hasUtility = false;
60
+ this.hasBrandExtra = false;
60
61
  /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's
61
62
  * own `inline` setting is left alone. */
62
63
  this.inlinedDropdowns = /* @__PURE__ */ new Set();
@@ -76,6 +77,10 @@ var Header = class extends LitElement {
76
77
  this.inlinedDropdowns.clear();
77
78
  }
78
79
  };
80
+ this.onBrandExtraSlotChange = (event) => {
81
+ this.hasBrandExtra = event.target.assignedElements({ flatten: true }).length > 0;
82
+ this.evaluateFit();
83
+ };
79
84
  this.onUtilitySlotChange = (event) => {
80
85
  this.hasUtility = event.target.assignedElements({ flatten: true }).length > 0;
81
86
  this.evaluateFit();
@@ -219,6 +224,7 @@ var Header = class extends LitElement {
219
224
  render() {
220
225
  return html`
221
226
  ${this.renderBrand()}
227
+ <div class="brand-extra ${this.hasBrandExtra ? "" : "empty"}" part="brand-extra"><slot name="brand-extra" @slotchange=${this.onBrandExtraSlotChange}></slot></div>
222
228
 
223
229
  <div class="mobile-panel" part="mobile-panel" @click=${() => this.mobileOpen = false}>
224
230
  <div class="menu-row" part="menu-row"><slot name="menu" @slotchange=${this.onMenuSlotChange}></slot></div>
@@ -366,6 +372,21 @@ Header.styles = css`
366
372
  white-space: nowrap;
367
373
  }
368
374
 
375
+ /* Optional slot="brand-extra" (e.g. an edition badge) right after the brand. Outside the
376
+ mobile panel, so it stays beside the logo at every width; no box at all when empty. */
377
+ .brand-extra {
378
+ display: flex;
379
+ align-items: center;
380
+ gap: var(--st-space-8);
381
+ flex: none;
382
+ margin-left: var(--st-space-10);
383
+ white-space: nowrap;
384
+ }
385
+
386
+ .brand-extra.empty {
387
+ display: none;
388
+ }
389
+
369
390
  /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's
370
391
  own flex children. Mobile (see below) turns this into the actual overlay box. */
371
392
  .mobile-panel {
@@ -658,6 +679,9 @@ __decorateClass([
658
679
  __decorateClass([
659
680
  state()
660
681
  ], Header.prototype, "hasUtility", 2);
682
+ __decorateClass([
683
+ state()
684
+ ], Header.prototype, "hasBrandExtra", 2);
661
685
  Header = __decorateClass([
662
686
  customElement("st-header")
663
687
  ], Header);
@@ -665,4 +689,4 @@ Header = __decorateClass([
665
689
  export {
666
690
  Header
667
691
  };
668
- //# sourceMappingURL=chunk-5KHI36M5.js.map
692
+ //# sourceMappingURL=chunk-X2ALYIVT.js.map
package/dist/chunk-X2ALYIVT.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { chevronIcon, closeIcon, menuIcon } from '../shared/icons';\r\nimport { BREAKPOINT_TABLET, buttonResetStyles, controlBaseStyles, dropdownPanelStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { LanguageChangedEventDetail } from './HeaderEvents';\r\n\r\n/**\r\n * The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\r\n * for primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\r\n * middle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\r\n * from `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\r\n * package's Lit conventions and this workspace's actual needs — that source component takes an\r\n * `imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\r\n * `title` is the primary brand prop here and `brand-image-url` is optional, mirroring\r\n * `st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\r\n * deliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\r\n * props — pick whichever fits a given app's header).\r\n *\r\n * Layout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\r\n * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\r\n * source) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\r\n * toggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\r\n * `inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\r\n * (`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\r\n * `BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\r\n * root can only ever assign a given light-DOM child to the *first* slot of a given name.\r\n *\r\n * An optional `slot=\"brand-extra\"` sits right after the brand (e.g. an edition badge such as\r\n * \"🇮🇳 India Edition\"); unlike `menu`/`utility` it stays in the bar at every width.\r\n *\r\n * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\r\n * `language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\r\n * rebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\r\n * as a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\r\n * This component has no translation logic itself; the consuming app owns what a language `code`\r\n * means and which content it re-renders in response.\r\n */\r\n@customElement('st-header')\r\nexport class Header extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: flex;\r\n align-items: center;\r\n /* The containing block of an st-dropdown[mega] panel, which spans the bar. */\r\n position: relative;\r\n /* Spacing between brand, menu and utility controls is the rows' own margins (SankhyaUI's\r\n layout), not a flex gap. */\r\n gap: 0;\r\n /* !important on the box-model properties only: a shadow host's own :host rule always loses\r\n * to ANY rule the consuming page has for the same property on that element, regardless of\r\n * specificity (see st-footer's own padding/border-top for the same fix). Without\r\n * box-sizing: border-box pinned here, a page that also sets its own padding on this host\r\n * (e.g. a p-2 utility class) adds that padding on TOP of the fixed 64px height instead of\r\n * being absorbed inside it — which is exactly what happens in Template Hub, the one app that\r\n * doesn't load Tailwind Preflight (Preflight's own box-sizing: border-box reset is what\r\n * silently keeps every other app's header at the intended 64px). */\r\n box-sizing: border-box !important;\r\n padding: 0 2rem !important;\r\n height: 64px !important;\r\n background: var(--st-color-surface);\r\n border-bottom: 1px solid var(--st-color-border) !important;\r\n ${rootFontFamilyStyles}\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n :host([sticky]) {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n color: var(--st-color-on-solid);\r\n border-bottom-color: transparent;\r\n }\r\n\r\n :host([sticky]),\r\n :host([transparent]),\r\n :host([hide-on-scroll]) {\r\n transition:\r\n background-color 0.3s ease,\r\n color 0.3s ease,\r\n box-shadow 0.3s ease,\r\n border-color 0.3s ease,\r\n transform 0.3s ease;\r\n }\r\n\r\n /* Once the page has scrolled, a sticky/fixed header lifts off the content. */\r\n :host([scrolled][sticky]),\r\n :host([scrolled][transparent]),\r\n :host([scrolled][hide-on-scroll]) {\r\n box-shadow: 0 4px 16px var(--st-shadow-color-md);\r\n border-bottom-color: transparent !important;\r\n }\r\n\r\n /* transparent: fixed over the top of the page (e.g. a dark hero), see-through until scrolled. */\r\n :host([transparent]) {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) {\r\n background: transparent;\r\n border-bottom-color: transparent !important;\r\n color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n /* Read by st-menu-item / st-dropdown triggers in the bar (their panels reset them). */\r\n --st-nav-color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n --st-nav-hover-bg: color-mix(in oklch, currentColor 14%, transparent);\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .utility-row {\r\n border-left-color: color-mix(in oklch, currentColor 35%, transparent);\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger {\r\n color: inherit;\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger:hover,\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .toggle:hover {\r\n background: color-mix(in oklch, currentColor 14%, transparent);\r\n }\r\n\r\n /* hide-on-scroll: slides away while scrolling down, back as soon as the user scrolls up. */\r\n :host([hide-on-scroll]:not([sticky]):not([transparent])) {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([scroll-hidden]:not([mobile-open])) {\r\n transform: translateY(-100%);\r\n box-shadow: none;\r\n }\r\n\r\n .brand {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-10);\r\n flex: none;\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .brand-mark {\r\n width: var(--st-size-28);\r\n height: var(--st-size-28);\r\n border-radius: var(--st-radius-sm);\r\n flex: none;\r\n object-fit: contain;\r\n }\r\n\r\n .brand-title {\r\n font-size: var(--st-text-xl);\r\n font-weight: var(--st-font-weight-bold);\r\n letter-spacing: var(--st-tracking-tight);\r\n white-space: nowrap;\r\n }\r\n\r\n /* Optional slot=\"brand-extra\" (e.g. an edition badge) right after the brand. Outside the\r\n mobile panel, so it stays beside the logo at every width; no box at all when empty. */\r\n .brand-extra {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-8);\r\n flex: none;\r\n margin-left: var(--st-space-10);\r\n white-space: nowrap;\r\n }\r\n\r\n .brand-extra.empty {\r\n display: none;\r\n }\r\n\r\n /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's\r\n own flex children. Mobile (see below) turns this into the actual overlay box. */\r\n .mobile-panel {\r\n display: contents;\r\n }\r\n\r\n /* Desktop layout from SankhyaUI's Header: the menu starts 4rem after the brand and takes the\r\n free width; the utility controls sit after a vertical divider. Between 901px and 1200px the\r\n gaps tighten so the menu still fits down to the 900px hamburger breakpoint. */\r\n .menu-row {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n gap: 1.5rem;\r\n min-width: 0;\r\n margin-left: 4rem;\r\n }\r\n\r\n .utility-row {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-left: 1.5rem;\r\n padding-left: 1.5rem;\r\n border-left: 1px solid var(--st-color-border);\r\n }\r\n\r\n :host([inverted]) .utility-row {\r\n border-left-color: currentColor;\r\n }\r\n\r\n .utility-row.empty {\r\n display: none;\r\n }\r\n\r\n @media (max-width: 1200px) {\r\n :host {\r\n padding: 0 1rem !important;\r\n }\r\n\r\n .menu-row {\r\n margin-left: 0.5rem;\r\n }\r\n\r\n .utility-row {\r\n margin-left: 0.5rem;\r\n padding-left: 0.5rem;\r\n }\r\n }\r\n\r\n @keyframes st-header-fade-in {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .toggle {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n flex: none;\r\n position: relative;\r\n z-index: 1002;\r\n width: var(--st-size-32);\r\n height: var(--st-size-32);\r\n margin-left: auto;\r\n padding: 0.5rem;\r\n border: 0;\r\n border-radius: var(--st-radius-sm);\r\n background: transparent;\r\n color: inherit;\r\n cursor: pointer;\r\n }\r\n\r\n .toggle:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n .lang-menu {\r\n position: relative;\r\n flex: none;\r\n }\r\n\r\n .lang-trigger {\r\n ${buttonResetStyles}\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-4);\r\n height: var(--st-size-32);\r\n padding: 0 var(--st-space-8);\r\n border-radius: var(--st-radius-sm);\r\n font-size: var(--st-text-base);\r\n font-weight: var(--st-font-weight-semibold);\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n .lang-trigger:hover {\r\n background: var(--st-color-hover);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n .lang-dropdown {\r\n ${dropdownPanelStyles}\r\n min-width: 140px;\r\n }\r\n\r\n .lang-option {\r\n ${buttonResetStyles}\r\n display: block;\r\n width: 100%;\r\n padding: var(--st-space-10) var(--st-space-14);\r\n font-size: var(--st-text-base);\r\n font-weight: var(--st-font-weight-semibold);\r\n text-align: left;\r\n color: inherit;\r\n }\r\n\r\n .lang-option:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n .lang-option.active {\r\n color: var(--st-color-accent-text);\r\n }\r\n\r\n /* Hamburger layout from SankhyaUI's Header: a full-screen layer under the toggle, menu above\r\n the utility controls, the menu's dropdowns opening in the flow (see syncInlineDropdowns). */\r\n @media (max-width: ${BREAKPOINT_TABLET}px) {\r\n :host {\r\n padding: 0 1rem !important;\r\n }\r\n\r\n .mobile-panel {\r\n display: none;\r\n }\r\n\r\n .toggle {\r\n display: inline-flex;\r\n }\r\n\r\n :host([mobile-open]) .mobile-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n position: fixed;\r\n inset: 0;\r\n background: var(--st-color-surface);\r\n padding: 5rem 1.5rem 2rem;\r\n overflow-y: auto;\r\n z-index: 1001;\r\n animation: st-header-fade-in 0.3s ease;\r\n }\r\n\r\n :host([mobile-open]) .menu-row,\r\n :host([mobile-open]) .utility-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 1.5rem;\r\n margin-left: 0;\r\n }\r\n\r\n :host([mobile-open]) .utility-row {\r\n padding: 1.5rem 0 0;\r\n border-left: 0;\r\n border-top: 1px solid var(--st-color-border);\r\n }\r\n\r\n /* Apps usually slot one flex-row wrapper per slot; stack its items as the source does. */\r\n :host([mobile-open]) ::slotted([slot='menu']),\r\n :host([mobile-open]) ::slotted([slot='utility']) {\r\n flex-direction: column !important;\r\n align-items: stretch !important;\r\n margin: 0 !important;\r\n }\r\n }\r\n\r\n /* The same collapsed layout, switched on by script when the menu no longer fits the bar at\r\n desktop width (see evaluateFit) — without it the menu spills over the utility controls. */\r\n :host([compact]) .mobile-panel {\r\n display: none;\r\n }\r\n\r\n :host([compact]) .toggle {\r\n display: inline-flex;\r\n }\r\n\r\n :host([compact][mobile-open]) .mobile-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n position: fixed;\r\n inset: 0;\r\n background: var(--st-color-surface);\r\n padding: 5rem 1.5rem 2rem;\r\n overflow-y: auto;\r\n z-index: 1001;\r\n animation: st-header-fade-in 0.3s ease;\r\n }\r\n\r\n :host([compact][mobile-open]) .menu-row,\r\n :host([compact][mobile-open]) .utility-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 1.5rem;\r\n margin-left: 0;\r\n }\r\n\r\n :host([compact][mobile-open]) .utility-row {\r\n padding: 1.5rem 0 0;\r\n border-left: 0;\r\n border-top: 1px solid var(--st-color-border);\r\n }\r\n\r\n :host([compact][mobile-open]) ::slotted([slot='menu']),\r\n :host([compact][mobile-open]) ::slotted([slot='utility']) {\r\n flex-direction: column !important;\r\n align-items: stretch !important;\r\n margin: 0 !important;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n :host,\r\n .mobile-panel {\r\n animation: none !important;\r\n transition: none !important;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n /** Optional logo image URL, shown before `title`. Omitted entirely when empty — none of this suite's apps has one today. Matches the source component's `imageSrc` (renamed here to pair with `title`/`logoHref`, since this component's only image use is the brand mark). */\r\n @property({ type: String, attribute: 'brand-image-url' })\r\n brandImageUrl = '';\r\n\r\n /** `alt` text for the brand image — matches the source component's `altText` (default `'Logo'`). */\r\n @property({ type: String, attribute: 'alt-text' })\r\n altText = 'Logo';\r\n\r\n /** Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise. */\r\n @property({ type: String })\r\n logoHref = '';\r\n\r\n /** `target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set. */\r\n @property({ type: String, attribute: 'logo-target' })\r\n logoTarget = '_self';\r\n\r\n /** Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`. */\r\n @property({ type: String, attribute: 'logo-class-name' })\r\n logoClassName = '';\r\n\r\n /** Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\r\n * source component's `inverted` (from its shared `BaseProps`). */\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n sticky = false;\r\n\r\n /**\r\n * Fixes the header over the top of the page and makes it see-through, with light text\r\n * (`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\r\n * header laid over a dark hero. It then takes its normal background and a shadow. The page\r\n * content starts under it, so the first section should leave room for the 64px bar.\r\n */\r\n @property({ type: Boolean, reflect: true })\r\n transparent = false;\r\n\r\n /** Slides the header out of view while the page scrolls down and back in when it scrolls up. */\r\n @property({ type: Boolean, reflect: true, attribute: 'hide-on-scroll' })\r\n hideOnScroll = false;\r\n\r\n /** Scroll distance in px after which the header counts as `scrolled`. */\r\n @property({ type: Number, attribute: 'scroll-threshold' })\r\n scrollThreshold = 8;\r\n\r\n /** True once the page has scrolled past `scroll-threshold`; reflected so pages can style `st-header[scrolled]`. Set by the header, never from outside. */\r\n @property({ type: Boolean, reflect: true })\r\n scrolled = false;\r\n\r\n /** True while `hide-on-scroll` has slid the header away. Set by the header, never from outside. */\r\n @property({ type: Boolean, reflect: true, attribute: 'scroll-hidden' })\r\n scrollHidden = false;\r\n\r\n private lastScrollY = 0;\r\n private scrollFrame = 0;\r\n\r\n private onScroll = (): void => {\r\n if (this.scrollFrame) return;\r\n this.scrollFrame = requestAnimationFrame(() => {\r\n this.scrollFrame = 0;\r\n const y = Math.max(0, window.scrollY);\r\n this.scrolled = y > this.scrollThreshold;\r\n if (this.hideOnScroll) {\r\n const delta = y - this.lastScrollY;\r\n // Ignore tiny jitters; never hide while still at the top of the page or with the menu open.\r\n if (Math.abs(delta) > 4) this.scrollHidden = delta > 0 && y > this.offsetHeight && !this.mobileOpen;\r\n } else {\r\n this.scrollHidden = false;\r\n }\r\n this.lastScrollY = y;\r\n });\r\n };\r\n\r\n /**\r\n * Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\r\n * when empty or when only one language is offered (same convention as `st-app-header`'s\r\n * `languages`, which this reuses verbatim). This component has no translation logic itself —\r\n * selecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\r\n * what `code` actually means and which content it re-renders.\r\n */\r\n @property({ attribute: false })\r\n languages: { code: string; label: string }[] = [];\r\n\r\n @property({ type: String, attribute: 'current-language-code' })\r\n currentLanguageCode = '';\r\n\r\n @property({ type: String, attribute: 'language-menu-label' })\r\n languageMenuLabel = 'Language';\r\n\r\n /** Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\n * the `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\n * outside. */\r\n @property({ type: Boolean, reflect: true, attribute: 'mobile-open' })\r\n mobileOpen = false;\r\n\r\n /** True while the menu doesn't fit the bar at the current width: the header then shows the same\r\n * hamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside. */\r\n @property({ type: Boolean, reflect: true })\r\n compact = false;\r\n\r\n @state() private languageMenuOpen = false;\r\n\r\n /** Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden. */\r\n @state() private hasUtility = false;\r\n\r\n /** Whether `slot=\"brand-extra\"` has content — an empty one takes no room beside the brand. */\r\n @state() private hasBrandExtra = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */\r\n private narrowQuery?: MediaQueryList;\r\n\r\n /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's\r\n * own `inline` setting is left alone. */\r\n private inlinedDropdowns = new Set<HTMLElement & { inline: boolean; open: boolean }>();\r\n\r\n /** While the hamburger layout is on, the dropdowns in the header open in the flow of the\r\n * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */\r\n private syncInlineDropdowns = (): void => {\r\n const collapsed = this.compact || !!this.narrowQuery?.matches;\r\n const dropdowns = Array.from(this.querySelectorAll('st-dropdown')) as (HTMLElement & { inline: boolean; open: boolean })[];\r\n if (collapsed) {\r\n for (const dropdown of dropdowns) {\r\n if (dropdown.inline) continue;\r\n dropdown.inline = true;\r\n this.inlinedDropdowns.add(dropdown);\r\n }\r\n } else {\r\n for (const dropdown of this.inlinedDropdowns) dropdown.inline = false;\r\n this.inlinedDropdowns.clear();\r\n }\r\n };\r\n\r\n private onBrandExtraSlotChange = (event: Event): void => {\r\n this.hasBrandExtra = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\r\n this.evaluateFit();\r\n };\r\n\r\n private onUtilitySlotChange = (event: Event): void => {\r\n this.hasUtility = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\r\n this.evaluateFit();\r\n };\r\n\r\n private onMenuSlotChange = (): void => {\r\n this.evaluateFit();\r\n this.syncInlineDropdowns();\r\n };\r\n\r\n protected updated(changed: Map<string, unknown>): void {\r\n if (changed.has('compact')) this.syncInlineDropdowns();\r\n // A mega dropdown's drill-down panel would otherwise still cover the menu next time it opens.\r\n if (changed.has('mobileOpen') && !this.mobileOpen) {\r\n for (const dropdown of this.inlinedDropdowns) dropdown.open = false;\r\n }\r\n }\r\n\r\n /** The bar width at which the menu last overflowed — the bar only expands again once it is\r\n * clearly wider than this, so it can't flip back and forth right at the threshold. */\r\n private collapsedAtWidth = 0;\r\n\r\n /** Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\r\n * once there is room. The collapsed layout hides the menu, so the room it needs can't be\r\n * measured then; the width remembered when it collapsed stands in for it. */\r\n private evaluateFit = (): void => {\r\n const width = this.clientWidth;\r\n if (this.compact) {\r\n if (width > this.collapsedAtWidth + 24) {\r\n this.compact = false;\r\n this.mobileOpen = false;\r\n void this.updateComplete.then(this.evaluateFit);\r\n }\r\n return;\r\n }\r\n if (this.menuOverflows()) {\r\n this.collapsedAtWidth = width;\r\n this.compact = true;\r\n }\r\n };\r\n\r\n /** Whether the visible menu items reach past the right edge of the menu row. Measured from the\r\n * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\r\n * a closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\r\n * report overflow at any width. */\r\n private menuOverflows(): boolean {\r\n const row = this.renderRoot.querySelector<HTMLElement>('.menu-row');\r\n const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\r\n if (!row || !slot) return false;\r\n const limit = row.getBoundingClientRect().right + 1;\r\n let right = 0;\r\n for (const el of slot.assignedElements({ flatten: true })) {\r\n for (const box of [el, ...Array.from(el.children)]) {\r\n const rect = box.getBoundingClientRect();\r\n if (rect.width > 0) right = Math.max(right, rect.right);\r\n }\r\n }\r\n return right > limit;\r\n }\r\n\r\n protected firstUpdated(): void {\r\n this.resizeObserver = new ResizeObserver(this.evaluateFit);\r\n this.resizeObserver.observe(this);\r\n this.evaluateFit();\r\n this.syncInlineDropdowns();\r\n }\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n window.addEventListener('keydown', this.closeOnEscape);\r\n window.addEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n window.addEventListener('scroll', this.onScroll, { passive: true });\r\n this.onScroll();\r\n this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);\r\n this.narrowQuery.addEventListener('change', this.syncInlineDropdowns);\r\n // Menus often render their dropdowns after the header (e.g. once the user's role loads),\r\n // deeper than a slotchange reports.\r\n this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);\r\n this.lightDomObserver.observe(this, { childList: true, subtree: true });\r\n }\r\n\r\n private lightDomObserver?: MutationObserver;\r\n\r\n disconnectedCallback(): void {\r\n this.lightDomObserver?.disconnect();\r\n this.narrowQuery?.removeEventListener('change', this.syncInlineDropdowns);\r\n this.resizeObserver?.disconnect();\r\n window.removeEventListener('keydown', this.closeOnEscape);\r\n window.removeEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n window.removeEventListener('scroll', this.onScroll);\r\n if (this.scrollFrame) cancelAnimationFrame(this.scrollFrame);\r\n this.scrollFrame = 0;\r\n super.disconnectedCallback();\r\n }\r\n\r\n private closeOnEscape = (event: KeyboardEvent): void => {\r\n if (this.mobileOpen && event.key === 'Escape') this.mobileOpen = false;\r\n if (this.languageMenuOpen && event.key === 'Escape') this.languageMenuOpen = false;\r\n };\r\n\r\n private closeLanguageMenuOnOutsideClick = (event: Event): void => {\r\n if (this.languageMenuOpen && !event.composedPath().includes(this)) this.languageMenuOpen = false;\r\n };\r\n\r\n private renderLanguageMenu() {\r\n if (this.languages.length < 2) return nothing;\r\n const current = this.languages.find((lang) => lang.code === this.currentLanguageCode);\r\n return html`\r\n <div class=\"lang-menu\" part=\"language-menu\">\r\n <button\r\n part=\"language-menu-trigger\"\r\n type=\"button\"\r\n class=\"lang-trigger\"\r\n aria-label=${this.languageMenuLabel}\r\n aria-expanded=${this.languageMenuOpen}\r\n @click=${(event: Event) => {\r\n event.stopPropagation();\r\n this.languageMenuOpen = !this.languageMenuOpen;\r\n }}\r\n >\r\n <span part=\"language-menu-current\">${current?.label ?? this.languageMenuLabel}</span>\r\n ${chevronIcon('down', 10)}\r\n </button>\r\n ${this.languageMenuOpen\r\n ? html`\r\n <div part=\"language-dropdown\" class=\"lang-dropdown\">\r\n ${this.languages.map(\r\n (lang) => html`\r\n <button\r\n part=\"language-option\"\r\n type=\"button\"\r\n class=\"lang-option ${lang.code === this.currentLanguageCode ? 'active' : ''}\"\r\n aria-current=${lang.code === this.currentLanguageCode}\r\n @click=${() => this.onLanguageSelect(lang.code)}\r\n >\r\n ${lang.label}\r\n </button>\r\n `\r\n )}\r\n </div>\r\n `\r\n : nothing}\r\n </div>\r\n `;\r\n }\r\n\r\n private onLanguageSelect(code: string): void {\r\n this.languageMenuOpen = false;\r\n if (code === this.currentLanguageCode) return;\r\n this.dispatchEvent(new CustomEvent<LanguageChangedEventDetail>('language-change', { detail: { code }, bubbles: true, composed: true }));\r\n }\r\n\r\n private renderBrand() {\r\n const content = html`\r\n ${this.brandImageUrl ? html`<img part=\"brand-mark\" class=\"brand-mark\" src=${this.brandImageUrl} alt=${this.altText} /> ` : nothing}\r\n <span part=\"brand-title\" class=\"brand-title\">${this.title}</span>\r\n `;\r\n return this.logoHref\r\n ? html`<a part=\"brand\" class=\"brand ${this.logoClassName}\" href=${this.logoHref} target=${this.logoTarget}>${content}</a>`\r\n : html`<div part=\"brand\" class=\"brand ${this.logoClassName}\">${content}</div>`;\r\n }\r\n\r\n render() {\r\n return html`\r\n ${this.renderBrand()}\r\n <div class=\"brand-extra ${this.hasBrandExtra ? '' : 'empty'}\" part=\"brand-extra\"><slot name=\"brand-extra\" @slotchange=${this.onBrandExtraSlotChange}></slot></div>\r\n\r\n <div class=\"mobile-panel\" part=\"mobile-panel\" @click=${() => (this.mobileOpen = false)}>\r\n <div class=\"menu-row\" part=\"menu-row\"><slot name=\"menu\" @slotchange=${this.onMenuSlotChange}></slot></div>\r\n <div class=\"utility-row ${this.hasUtility || this.languages.length >= 2 ? '' : 'empty'}\" part=\"utility-row\">\r\n ${this.renderLanguageMenu()}<slot name=\"utility\" @slotchange=${this.onUtilitySlotChange}></slot>\r\n </div>\r\n </div>\r\n\r\n <button\r\n part=\"toggle\"\r\n type=\"button\"\r\n class=\"toggle\"\r\n aria-label=${this.mobileOpen ? 'Close menu' : 'Open menu'}\r\n aria-expanded=${this.mobileOpen}\r\n @click=${() => (this.mobileOpen = !this.mobileOpen)}\r\n >\r\n ${this.mobileOpen ? closeIcon() : menuIcon()}\r\n </button>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
package/dist/header/index.d.ts CHANGED
@@ -22,6 +22,9 @@ import { LitElement } from 'lit';
22
22
  * `BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow
23
23
  * root can only ever assign a given light-DOM child to the *first* slot of a given name.
24
24
  *
25
+ * An optional `slot="brand-extra"` sits right after the brand (e.g. an edition badge such as
26
+ * "🇮🇳 India Edition"); unlike `menu`/`utility` it stays in the bar at every width.
27
+ *
25
28
  * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires
26
29
  * `language-change`) — ported from `st-app-header`'s own implementation verbatim rather than
27
30
  * rebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`
@@ -87,6 +90,8 @@ declare class Header extends LitElement {
87
90
  private languageMenuOpen;
88
91
  /** Whether `slot="utility"` has content — an empty utility row (and its divider) is hidden. */
89
92
  private hasUtility;
93
+ /** Whether `slot="brand-extra"` has content — an empty one takes no room beside the brand. */
94
+ private hasBrandExtra;
90
95
  private resizeObserver?;
91
96
  /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */
92
97
  private narrowQuery?;
@@ -96,6 +101,7 @@ declare class Header extends LitElement {
96
101
  /** While the hamburger layout is on, the dropdowns in the header open in the flow of the
97
102
  * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */
98
103
  private syncInlineDropdowns;
104
+ private onBrandExtraSlotChange;
99
105
  private onUtilitySlotChange;
100
106
  private onMenuSlotChange;
101
107
  protected updated(changed: Map<string, unknown>): void;
package/dist/header/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Header
3
- } from "../chunk-5KHI36M5.js";
3
+ } from "../chunk-X2ALYIVT.js";
4
4
  import "../chunk-PB7ZPPLP.js";
5
5
  import "../chunk-RHAOQ6K4.js";
6
6
  import "../chunk-EUXUH3YW.js";
package/dist/index.js CHANGED
@@ -1,15 +1,18 @@
1
+ import {
2
+ Stats
3
+ } from "./chunk-6H262SG6.js";
4
+ import {
5
+ ItemsAccordion
6
+ } from "./chunk-EMVHNAID.js";
1
7
  import {
2
8
  Testimonials
3
9
  } from "./chunk-ZRXYWH6C.js";
4
10
  import {
5
- Stats
6
- } from "./chunk-6H262SG6.js";
11
+ MenuGridItem
12
+ } from "./chunk-4HKSA5UT.js";
7
13
  import {
8
14
  MenuItem
9
15
  } from "./chunk-DQHMJZ6X.js";
10
- import {
11
- MenuGrid
12
- } from "./chunk-VYON56QO.js";
13
16
  import {
14
17
  PromoBanner
15
18
  } from "./chunk-HGJT24UG.js";
@@ -28,39 +31,36 @@ import {
28
31
  } from "./chunk-CDC4P77V.js";
29
32
  import {
30
33
  Header
31
- } from "./chunk-5KHI36M5.js";
32
- import {
33
- IconButton
34
- } from "./chunk-XXPBFHWR.js";
34
+ } from "./chunk-X2ALYIVT.js";
35
35
  import {
36
36
  Hero
37
37
  } from "./chunk-K4ZICRZL.js";
38
38
  import {
39
- ItemsAccordion
40
- } from "./chunk-EMVHNAID.js";
39
+ IconButton
40
+ } from "./chunk-XXPBFHWR.js";
41
41
  import {
42
42
  MegaMenu,
43
43
  MegaMenuColumn,
44
44
  MegaMenuFeature
45
45
  } from "./chunk-HGTC3LCW.js";
46
46
  import {
47
- MenuGridItem
48
- } from "./chunk-4HKSA5UT.js";
49
- import {
50
- BentoGrid
51
- } from "./chunk-2JGWWXEI.js";
47
+ MenuGrid
48
+ } from "./chunk-VYON56QO.js";
52
49
  import {
53
50
  Card
54
51
  } from "./chunk-7PSYCTEN.js";
52
+ import {
53
+ BentoGrid
54
+ } from "./chunk-2JGWWXEI.js";
55
55
  import {
56
56
  Carousel
57
57
  } from "./chunk-HPIQSECE.js";
58
- import {
59
- ContentBlock
60
- } from "./chunk-UVNBZD7R.js";
61
58
  import {
62
59
  CookieConsent
63
60
  } from "./chunk-MW43OS47.js";
61
+ import {
62
+ ContentBlock
63
+ } from "./chunk-UVNBZD7R.js";
64
64
  import {
65
65
  Dropdown
66
66
  } from "./chunk-IQPW3CYZ.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sankhyatronics/sankhya-cms",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/sankhyatronics/SankhyaCMS.git",
package/dist/chunk-5KHI36M5.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { chevronIcon, closeIcon, menuIcon } from '../shared/icons';\r\nimport { BREAKPOINT_TABLET, buttonResetStyles, controlBaseStyles, dropdownPanelStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { LanguageChangedEventDetail } from './HeaderEvents';\r\n\r\n/**\r\n * The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\r\n * for primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\r\n * middle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\r\n * from `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\r\n * package's Lit conventions and this workspace's actual needs — that source component takes an\r\n * `imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\r\n * `title` is the primary brand prop here and `brand-image-url` is optional, mirroring\r\n * `st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\r\n * deliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\r\n * props — pick whichever fits a given app's header).\r\n *\r\n * Layout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\r\n * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\r\n * source) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\r\n * toggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\r\n * `inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\r\n * (`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\r\n * `BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\r\n * root can only ever assign a given light-DOM child to the *first* slot of a given name.\r\n *\r\n * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\r\n * `language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\r\n * rebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\r\n * as a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\r\n * This component has no translation logic itself; the consuming app owns what a language `code`\r\n * means and which content it re-renders in response.\r\n */\r\n@customElement('st-header')\r\nexport class Header extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: flex;\r\n align-items: center;\r\n /* The containing block of an st-dropdown[mega] panel, which spans the bar. */\r\n position: relative;\r\n /* Spacing between brand, menu and utility controls is the rows' own margins (SankhyaUI's\r\n layout), not a flex gap. */\r\n gap: 0;\r\n /* !important on the box-model properties only: a shadow host's own :host rule always loses\r\n * to ANY rule the consuming page has for the same property on that element, regardless of\r\n * specificity (see st-footer's own padding/border-top for the same fix). Without\r\n * box-sizing: border-box pinned here, a page that also sets its own padding on this host\r\n * (e.g. a p-2 utility class) adds that padding on TOP of the fixed 64px height instead of\r\n * being absorbed inside it — which is exactly what happens in Template Hub, the one app that\r\n * doesn't load Tailwind Preflight (Preflight's own box-sizing: border-box reset is what\r\n * silently keeps every other app's header at the intended 64px). */\r\n box-sizing: border-box !important;\r\n padding: 0 2rem !important;\r\n height: 64px !important;\r\n background: var(--st-color-surface);\r\n border-bottom: 1px solid var(--st-color-border) !important;\r\n ${rootFontFamilyStyles}\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n :host([sticky]) {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n color: var(--st-color-on-solid);\r\n border-bottom-color: transparent;\r\n }\r\n\r\n :host([sticky]),\r\n :host([transparent]),\r\n :host([hide-on-scroll]) {\r\n transition:\r\n background-color 0.3s ease,\r\n color 0.3s ease,\r\n box-shadow 0.3s ease,\r\n border-color 0.3s ease,\r\n transform 0.3s ease;\r\n }\r\n\r\n /* Once the page has scrolled, a sticky/fixed header lifts off the content. */\r\n :host([scrolled][sticky]),\r\n :host([scrolled][transparent]),\r\n :host([scrolled][hide-on-scroll]) {\r\n box-shadow: 0 4px 16px var(--st-shadow-color-md);\r\n border-bottom-color: transparent !important;\r\n }\r\n\r\n /* transparent: fixed over the top of the page (e.g. a dark hero), see-through until scrolled. */\r\n :host([transparent]) {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) {\r\n background: transparent;\r\n border-bottom-color: transparent !important;\r\n color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n /* Read by st-menu-item / st-dropdown triggers in the bar (their panels reset them). */\r\n --st-nav-color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n --st-nav-hover-bg: color-mix(in oklch, currentColor 14%, transparent);\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .utility-row {\r\n border-left-color: color-mix(in oklch, currentColor 35%, transparent);\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger {\r\n color: inherit;\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger:hover,\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .toggle:hover {\r\n background: color-mix(in oklch, currentColor 14%, transparent);\r\n }\r\n\r\n /* hide-on-scroll: slides away while scrolling down, back as soon as the user scrolls up. */\r\n :host([hide-on-scroll]:not([sticky]):not([transparent])) {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([scroll-hidden]:not([mobile-open])) {\r\n transform: translateY(-100%);\r\n box-shadow: none;\r\n }\r\n\r\n .brand {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-10);\r\n flex: none;\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .brand-mark {\r\n width: var(--st-size-28);\r\n height: var(--st-size-28);\r\n border-radius: var(--st-radius-sm);\r\n flex: none;\r\n object-fit: contain;\r\n }\r\n\r\n .brand-title {\r\n font-size: var(--st-text-xl);\r\n font-weight: var(--st-font-weight-bold);\r\n letter-spacing: var(--st-tracking-tight);\r\n white-space: nowrap;\r\n }\r\n\r\n /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's\r\n own flex children. Mobile (see below) turns this into the actual overlay box. */\r\n .mobile-panel {\r\n display: contents;\r\n }\r\n\r\n /* Desktop layout from SankhyaUI's Header: the menu starts 4rem after the brand and takes the\r\n free width; the utility controls sit after a vertical divider. Between 901px and 1200px the\r\n gaps tighten so the menu still fits down to the 900px hamburger breakpoint. */\r\n .menu-row {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n gap: 1.5rem;\r\n min-width: 0;\r\n margin-left: 4rem;\r\n }\r\n\r\n .utility-row {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-left: 1.5rem;\r\n padding-left: 1.5rem;\r\n border-left: 1px solid var(--st-color-border);\r\n }\r\n\r\n :host([inverted]) .utility-row {\r\n border-left-color: currentColor;\r\n }\r\n\r\n .utility-row.empty {\r\n display: none;\r\n }\r\n\r\n @media (max-width: 1200px) {\r\n :host {\r\n padding: 0 1rem !important;\r\n }\r\n\r\n .menu-row {\r\n margin-left: 0.5rem;\r\n }\r\n\r\n .utility-row {\r\n margin-left: 0.5rem;\r\n padding-left: 0.5rem;\r\n }\r\n }\r\n\r\n @keyframes st-header-fade-in {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .toggle {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n flex: none;\r\n position: relative;\r\n z-index: 1002;\r\n width: var(--st-size-32);\r\n height: var(--st-size-32);\r\n margin-left: auto;\r\n padding: 0.5rem;\r\n border: 0;\r\n border-radius: var(--st-radius-sm);\r\n background: transparent;\r\n color: inherit;\r\n cursor: pointer;\r\n }\r\n\r\n .toggle:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n .lang-menu {\r\n position: relative;\r\n flex: none;\r\n }\r\n\r\n .lang-trigger {\r\n ${buttonResetStyles}\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-4);\r\n height: var(--st-size-32);\r\n padding: 0 var(--st-space-8);\r\n border-radius: var(--st-radius-sm);\r\n font-size: var(--st-text-base);\r\n font-weight: var(--st-font-weight-semibold);\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n .lang-trigger:hover {\r\n background: var(--st-color-hover);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n .lang-dropdown {\r\n ${dropdownPanelStyles}\r\n min-width: 140px;\r\n }\r\n\r\n .lang-option {\r\n ${buttonResetStyles}\r\n display: block;\r\n width: 100%;\r\n padding: var(--st-space-10) var(--st-space-14);\r\n font-size: var(--st-text-base);\r\n font-weight: var(--st-font-weight-semibold);\r\n text-align: left;\r\n color: inherit;\r\n }\r\n\r\n .lang-option:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n .lang-option.active {\r\n color: var(--st-color-accent-text);\r\n }\r\n\r\n /* Hamburger layout from SankhyaUI's Header: a full-screen layer under the toggle, menu above\r\n the utility controls, the menu's dropdowns opening in the flow (see syncInlineDropdowns). */\r\n @media (max-width: ${BREAKPOINT_TABLET}px) {\r\n :host {\r\n padding: 0 1rem !important;\r\n }\r\n\r\n .mobile-panel {\r\n display: none;\r\n }\r\n\r\n .toggle {\r\n display: inline-flex;\r\n }\r\n\r\n :host([mobile-open]) .mobile-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n position: fixed;\r\n inset: 0;\r\n background: var(--st-color-surface);\r\n padding: 5rem 1.5rem 2rem;\r\n overflow-y: auto;\r\n z-index: 1001;\r\n animation: st-header-fade-in 0.3s ease;\r\n }\r\n\r\n :host([mobile-open]) .menu-row,\r\n :host([mobile-open]) .utility-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 1.5rem;\r\n margin-left: 0;\r\n }\r\n\r\n :host([mobile-open]) .utility-row {\r\n padding: 1.5rem 0 0;\r\n border-left: 0;\r\n border-top: 1px solid var(--st-color-border);\r\n }\r\n\r\n /* Apps usually slot one flex-row wrapper per slot; stack its items as the source does. */\r\n :host([mobile-open]) ::slotted([slot='menu']),\r\n :host([mobile-open]) ::slotted([slot='utility']) {\r\n flex-direction: column !important;\r\n align-items: stretch !important;\r\n margin: 0 !important;\r\n }\r\n }\r\n\r\n /* The same collapsed layout, switched on by script when the menu no longer fits the bar at\r\n desktop width (see evaluateFit) — without it the menu spills over the utility controls. */\r\n :host([compact]) .mobile-panel {\r\n display: none;\r\n }\r\n\r\n :host([compact]) .toggle {\r\n display: inline-flex;\r\n }\r\n\r\n :host([compact][mobile-open]) .mobile-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n position: fixed;\r\n inset: 0;\r\n background: var(--st-color-surface);\r\n padding: 5rem 1.5rem 2rem;\r\n overflow-y: auto;\r\n z-index: 1001;\r\n animation: st-header-fade-in 0.3s ease;\r\n }\r\n\r\n :host([compact][mobile-open]) .menu-row,\r\n :host([compact][mobile-open]) .utility-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 1.5rem;\r\n margin-left: 0;\r\n }\r\n\r\n :host([compact][mobile-open]) .utility-row {\r\n padding: 1.5rem 0 0;\r\n border-left: 0;\r\n border-top: 1px solid var(--st-color-border);\r\n }\r\n\r\n :host([compact][mobile-open]) ::slotted([slot='menu']),\r\n :host([compact][mobile-open]) ::slotted([slot='utility']) {\r\n flex-direction: column !important;\r\n align-items: stretch !important;\r\n margin: 0 !important;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n :host,\r\n .mobile-panel {\r\n animation: none !important;\r\n transition: none !important;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n /** Optional logo image URL, shown before `title`. Omitted entirely when empty — none of this suite's apps has one today. Matches the source component's `imageSrc` (renamed here to pair with `title`/`logoHref`, since this component's only image use is the brand mark). */\r\n @property({ type: String, attribute: 'brand-image-url' })\r\n brandImageUrl = '';\r\n\r\n /** `alt` text for the brand image — matches the source component's `altText` (default `'Logo'`). */\r\n @property({ type: String, attribute: 'alt-text' })\r\n altText = 'Logo';\r\n\r\n /** Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise. */\r\n @property({ type: String })\r\n logoHref = '';\r\n\r\n /** `target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set. */\r\n @property({ type: String, attribute: 'logo-target' })\r\n logoTarget = '_self';\r\n\r\n /** Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`. */\r\n @property({ type: String, attribute: 'logo-class-name' })\r\n logoClassName = '';\r\n\r\n /** Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\r\n * source component's `inverted` (from its shared `BaseProps`). */\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n sticky = false;\r\n\r\n /**\r\n * Fixes the header over the top of the page and makes it see-through, with light text\r\n * (`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\r\n * header laid over a dark hero. It then takes its normal background and a shadow. The page\r\n * content starts under it, so the first section should leave room for the 64px bar.\r\n */\r\n @property({ type: Boolean, reflect: true })\r\n transparent = false;\r\n\r\n /** Slides the header out of view while the page scrolls down and back in when it scrolls up. */\r\n @property({ type: Boolean, reflect: true, attribute: 'hide-on-scroll' })\r\n hideOnScroll = false;\r\n\r\n /** Scroll distance in px after which the header counts as `scrolled`. */\r\n @property({ type: Number, attribute: 'scroll-threshold' })\r\n scrollThreshold = 8;\r\n\r\n /** True once the page has scrolled past `scroll-threshold`; reflected so pages can style `st-header[scrolled]`. Set by the header, never from outside. */\r\n @property({ type: Boolean, reflect: true })\r\n scrolled = false;\r\n\r\n /** True while `hide-on-scroll` has slid the header away. Set by the header, never from outside. */\r\n @property({ type: Boolean, reflect: true, attribute: 'scroll-hidden' })\r\n scrollHidden = false;\r\n\r\n private lastScrollY = 0;\r\n private scrollFrame = 0;\r\n\r\n private onScroll = (): void => {\r\n if (this.scrollFrame) return;\r\n this.scrollFrame = requestAnimationFrame(() => {\r\n this.scrollFrame = 0;\r\n const y = Math.max(0, window.scrollY);\r\n this.scrolled = y > this.scrollThreshold;\r\n if (this.hideOnScroll) {\r\n const delta = y - this.lastScrollY;\r\n // Ignore tiny jitters; never hide while still at the top of the page or with the menu open.\r\n if (Math.abs(delta) > 4) this.scrollHidden = delta > 0 && y > this.offsetHeight && !this.mobileOpen;\r\n } else {\r\n this.scrollHidden = false;\r\n }\r\n this.lastScrollY = y;\r\n });\r\n };\r\n\r\n /**\r\n * Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\r\n * when empty or when only one language is offered (same convention as `st-app-header`'s\r\n * `languages`, which this reuses verbatim). This component has no translation logic itself —\r\n * selecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\r\n * what `code` actually means and which content it re-renders.\r\n */\r\n @property({ attribute: false })\r\n languages: { code: string; label: string }[] = [];\r\n\r\n @property({ type: String, attribute: 'current-language-code' })\r\n currentLanguageCode = '';\r\n\r\n @property({ type: String, attribute: 'language-menu-label' })\r\n languageMenuLabel = 'Language';\r\n\r\n /** Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\n * the `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\n * outside. */\r\n @property({ type: Boolean, reflect: true, attribute: 'mobile-open' })\r\n mobileOpen = false;\r\n\r\n /** True while the menu doesn't fit the bar at the current width: the header then shows the same\r\n * hamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside. */\r\n @property({ type: Boolean, reflect: true })\r\n compact = false;\r\n\r\n @state() private languageMenuOpen = false;\r\n\r\n /** Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden. */\r\n @state() private hasUtility = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */\r\n private narrowQuery?: MediaQueryList;\r\n\r\n /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's\r\n * own `inline` setting is left alone. */\r\n private inlinedDropdowns = new Set<HTMLElement & { inline: boolean; open: boolean }>();\r\n\r\n /** While the hamburger layout is on, the dropdowns in the header open in the flow of the\r\n * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */\r\n private syncInlineDropdowns = (): void => {\r\n const collapsed = this.compact || !!this.narrowQuery?.matches;\r\n const dropdowns = Array.from(this.querySelectorAll('st-dropdown')) as (HTMLElement & { inline: boolean; open: boolean })[];\r\n if (collapsed) {\r\n for (const dropdown of dropdowns) {\r\n if (dropdown.inline) continue;\r\n dropdown.inline = true;\r\n this.inlinedDropdowns.add(dropdown);\r\n }\r\n } else {\r\n for (const dropdown of this.inlinedDropdowns) dropdown.inline = false;\r\n this.inlinedDropdowns.clear();\r\n }\r\n };\r\n\r\n private onUtilitySlotChange = (event: Event): void => {\r\n this.hasUtility = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\r\n this.evaluateFit();\r\n };\r\n\r\n private onMenuSlotChange = (): void => {\r\n this.evaluateFit();\r\n this.syncInlineDropdowns();\r\n };\r\n\r\n protected updated(changed: Map<string, unknown>): void {\r\n if (changed.has('compact')) this.syncInlineDropdowns();\r\n // A mega dropdown's drill-down panel would otherwise still cover the menu next time it opens.\r\n if (changed.has('mobileOpen') && !this.mobileOpen) {\r\n for (const dropdown of this.inlinedDropdowns) dropdown.open = false;\r\n }\r\n }\r\n\r\n /** The bar width at which the menu last overflowed — the bar only expands again once it is\r\n * clearly wider than this, so it can't flip back and forth right at the threshold. */\r\n private collapsedAtWidth = 0;\r\n\r\n /** Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\r\n * once there is room. The collapsed layout hides the menu, so the room it needs can't be\r\n * measured then; the width remembered when it collapsed stands in for it. */\r\n private evaluateFit = (): void => {\r\n const width = this.clientWidth;\r\n if (this.compact) {\r\n if (width > this.collapsedAtWidth + 24) {\r\n this.compact = false;\r\n this.mobileOpen = false;\r\n void this.updateComplete.then(this.evaluateFit);\r\n }\r\n return;\r\n }\r\n if (this.menuOverflows()) {\r\n this.collapsedAtWidth = width;\r\n this.compact = true;\r\n }\r\n };\r\n\r\n /** Whether the visible menu items reach past the right edge of the menu row. Measured from the\r\n * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\r\n * a closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\r\n * report overflow at any width. */\r\n private menuOverflows(): boolean {\r\n const row = this.renderRoot.querySelector<HTMLElement>('.menu-row');\r\n const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\r\n if (!row || !slot) return false;\r\n const limit = row.getBoundingClientRect().right + 1;\r\n let right = 0;\r\n for (const el of slot.assignedElements({ flatten: true })) {\r\n for (const box of [el, ...Array.from(el.children)]) {\r\n const rect = box.getBoundingClientRect();\r\n if (rect.width > 0) right = Math.max(right, rect.right);\r\n }\r\n }\r\n return right > limit;\r\n }\r\n\r\n protected firstUpdated(): void {\r\n this.resizeObserver = new ResizeObserver(this.evaluateFit);\r\n this.resizeObserver.observe(this);\r\n this.evaluateFit();\r\n this.syncInlineDropdowns();\r\n }\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n window.addEventListener('keydown', this.closeOnEscape);\r\n window.addEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n window.addEventListener('scroll', this.onScroll, { passive: true });\r\n this.onScroll();\r\n this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);\r\n this.narrowQuery.addEventListener('change', this.syncInlineDropdowns);\r\n // Menus often render their dropdowns after the header (e.g. once the user's role loads),\r\n // deeper than a slotchange reports.\r\n this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);\r\n this.lightDomObserver.observe(this, { childList: true, subtree: true });\r\n }\r\n\r\n private lightDomObserver?: MutationObserver;\r\n\r\n disconnectedCallback(): void {\r\n this.lightDomObserver?.disconnect();\r\n this.narrowQuery?.removeEventListener('change', this.syncInlineDropdowns);\r\n this.resizeObserver?.disconnect();\r\n window.removeEventListener('keydown', this.closeOnEscape);\r\n window.removeEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n window.removeEventListener('scroll', this.onScroll);\r\n if (this.scrollFrame) cancelAnimationFrame(this.scrollFrame);\r\n this.scrollFrame = 0;\r\n super.disconnectedCallback();\r\n }\r\n\r\n private closeOnEscape = (event: KeyboardEvent): void => {\r\n if (this.mobileOpen && event.key === 'Escape') this.mobileOpen = false;\r\n if (this.languageMenuOpen && event.key === 'Escape') this.languageMenuOpen = false;\r\n };\r\n\r\n private closeLanguageMenuOnOutsideClick = (event: Event): void => {\r\n if (this.languageMenuOpen && !event.composedPath().includes(this)) this.languageMenuOpen = false;\r\n };\r\n\r\n private renderLanguageMenu() {\r\n if (this.languages.length < 2) return nothing;\r\n const current = this.languages.find((lang) => lang.code === this.currentLanguageCode);\r\n return html`\r\n <div class=\"lang-menu\" part=\"language-menu\">\r\n <button\r\n part=\"language-menu-trigger\"\r\n type=\"button\"\r\n class=\"lang-trigger\"\r\n aria-label=${this.languageMenuLabel}\r\n aria-expanded=${this.languageMenuOpen}\r\n @click=${(event: Event) => {\r\n event.stopPropagation();\r\n this.languageMenuOpen = !this.languageMenuOpen;\r\n }}\r\n >\r\n <span part=\"language-menu-current\">${current?.label ?? this.languageMenuLabel}</span>\r\n ${chevronIcon('down', 10)}\r\n </button>\r\n ${this.languageMenuOpen\r\n ? html`\r\n <div part=\"language-dropdown\" class=\"lang-dropdown\">\r\n ${this.languages.map(\r\n (lang) => html`\r\n <button\r\n part=\"language-option\"\r\n type=\"button\"\r\n class=\"lang-option ${lang.code === this.currentLanguageCode ? 'active' : ''}\"\r\n aria-current=${lang.code === this.currentLanguageCode}\r\n @click=${() => this.onLanguageSelect(lang.code)}\r\n >\r\n ${lang.label}\r\n </button>\r\n `\r\n )}\r\n </div>\r\n `\r\n : nothing}\r\n </div>\r\n `;\r\n }\r\n\r\n private onLanguageSelect(code: string): void {\r\n this.languageMenuOpen = false;\r\n if (code === this.currentLanguageCode) return;\r\n this.dispatchEvent(new CustomEvent<LanguageChangedEventDetail>('language-change', { detail: { code }, bubbles: true, composed: true }));\r\n }\r\n\r\n private renderBrand() {\r\n const content = html`\r\n ${this.brandImageUrl ? html`<img part=\"brand-mark\" class=\"brand-mark\" src=${this.brandImageUrl} alt=${this.altText} /> ` : nothing}\r\n <span part=\"brand-title\" class=\"brand-title\">${this.title}</span>\r\n `;\r\n return this.logoHref\r\n ? html`<a part=\"brand\" class=\"brand ${this.logoClassName}\" href=${this.logoHref} target=${this.logoTarget}>${content}</a>`\r\n : html`<div part=\"brand\" class=\"brand ${this.logoClassName}\">${content}</div>`;\r\n }\r\n\r\n render() {\r\n return html`\r\n ${this.renderBrand()}\r\n\r\n <div class=\"mobile-panel\" part=\"mobile-panel\" @click=${() => (this.mobileOpen = false)}>\r\n <div class=\"menu-row\" part=\"menu-row\"><slot name=\"menu\" @slotchange=${this.onMenuSlotChange}></slot></div>\r\n <div class=\"utility-row ${this.hasUtility || this.languages.length >= 2 ? '' : 'empty'}\" part=\"utility-row\">\r\n ${this.renderLanguageMenu()}<slot name=\"utility\" @slotchange=${this.onUtilitySlotChange}></slot>\r\n </div>\r\n </div>\r\n\r\n <button\r\n part=\"toggle\"\r\n type=\"button\"\r\n class=\"toggle\"\r\n aria-label=${this.mobileOpen ? 'Close menu' : 'Open menu'}\r\n aria-expanded=${this.mobileOpen}\r\n @click=${() => (this.mobileOpen = !this.mobileOpen)}\r\n >\r\n ${this.mobileOpen ? closeIcon() : menuIcon()}\r\n </button>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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iB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAuBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA8LpB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBjB,mBAAmB;A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","names":[]}