@sankhyatronics/sankhya-cms 0.1.16 → 0.2.0

package/dist/chunk-XUGEXERO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chevronIcon, closeIcon, menuIcon } from '../shared/icons';\nimport { BREAKPOINT_TABLET, buttonResetStyles, controlBaseStyles, dropdownPanelStyles, rootFontFamilyStyles } from '../shared/styles';\nimport type { LanguageChangedEventDetail } from './HeaderEvents';\n\n/**\n * The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\n * for primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\n * middle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. `title` is\n * the primary brand prop; `brand-image-url` is optional. For a fixed nav-links/user-menu header,\n * use `st-app-header` instead.\n *\n * Layout: the menu starts 4rem after the brand, the utility\n * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px) `menu`/`utility`\n * collapse behind a hamburger toggle into a full-screen layer under the\n * toggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\n * `inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\n * (`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\n * `BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\n * root can only ever assign a given light-DOM child to the *first* slot of a given name.\n *\n * An optional `slot=\"brand-extra\"` sits right after the brand (e.g. an edition badge such as\n * \"🇮🇳 India Edition\"); unlike `menu`/`utility` it stays in the bar at every width.\n *\n * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\n * `language-change`). Hidden entirely when `languages` has fewer than two entries.\n * This component has no translation logic itself; the consuming app owns what a language `code`\n * means and which content it re-renders in response.\n *\n * @slot menu - Primary navigation.\n * @slot utility - Account, app-switcher and theme controls, after the divider.\n * @slot brand-extra - Shown right after the brand at every width (e.g. an edition badge).\n * @slot menu-icon - Replaces the hamburger on the narrow-screen toggle (the built-in glyph when empty).\n * @slot close-icon - Replaces the close (X) on the toggle while the menu is open (the built-in glyph when empty).\n * @cssprop --st-header-toggle-icon-size - Width and height of a slotted toggle icon (default 20px, the built-in glyph's size).\n */\n@customElement('st-header')\nexport class Header extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: flex;\n      align-items: center;\n      /* The containing block of an st-dropdown[mega] panel, which spans the bar. */\n      position: relative;\n      /* Spacing between brand, menu and utility controls is the rows' own margins, not a\n         flex gap. */\n      gap: 0;\n      /* !important on the box-model properties only: a shadow host's own :host rule always loses\n       * to ANY rule the consuming page has for the same property on that element, regardless of\n       * specificity (see st-footer's own padding/border-top for the same fix). Without\n       * box-sizing: border-box pinned here, a page that also sets its own padding on this host\n       * (e.g. a p-2 utility class) adds that padding on TOP of the fixed 64px height instead of\n       * being absorbed inside it — which is exactly what happens in Template Hub, the one app that\n       * doesn't load Tailwind Preflight (Preflight's own box-sizing: border-box reset is what\n       * silently keeps every other app's header at the intended 64px). */\n      box-sizing: border-box !important;\n      padding: 0 2rem !important;\n      height: 64px !important;\n      background: var(--st-color-surface);\n      border-bottom: 1px solid var(--st-color-border) !important;\n      ${rootFontFamilyStyles}\n      color: var(--st-color-text-strong);\n    }\n\n    :host([sticky]) {\n      position: sticky;\n      top: 0;\n      z-index: 100;\n    }\n\n    /* Toggle icons: a host's slotted icon, else the built-in glyph; only the current state's shows. */\n    .toggle slot {\n      display: contents;\n    }\n\n    .toggle slot[hidden] {\n      display: none;\n    }\n\n    .toggle ::slotted(*) {\n      flex: none;\n      width: var(--st-header-toggle-icon-size, 20px);\n      height: var(--st-header-toggle-icon-size, 20px);\n    }\n\n    :host([inverted]) {\n      background: var(--st-color-text-strong);\n      color: var(--st-color-on-solid);\n      border-bottom-color: transparent;\n    }\n\n    :host([sticky]),\n    :host([transparent]),\n    :host([hide-on-scroll]) {\n      transition:\n        background-color 0.3s ease,\n        color 0.3s ease,\n        box-shadow 0.3s ease,\n        border-color 0.3s ease,\n        transform 0.3s ease;\n    }\n\n    /* Once the page has scrolled, a sticky/fixed header lifts off the content. */\n    :host([scrolled][sticky]),\n    :host([scrolled][transparent]),\n    :host([scrolled][hide-on-scroll]) {\n      box-shadow: 0 4px 16px var(--st-shadow-color-md);\n      border-bottom-color: transparent !important;\n    }\n\n    /* transparent: fixed over the top of the page (e.g. a dark hero), see-through until scrolled. */\n    :host([transparent]) {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      z-index: 100;\n    }\n\n    :host([transparent]:not([scrolled]):not([mobile-open])) {\n      background: transparent;\n      border-bottom-color: transparent !important;\n      color: var(--st-header-transparent-color, var(--st-color-on-solid));\n      /* Read by st-menu-item / st-dropdown triggers in the bar (their panels reset them). */\n      --st-nav-color: var(--st-header-transparent-color, var(--st-color-on-solid));\n      --st-nav-hover-bg: color-mix(in oklch, currentColor 14%, transparent);\n    }\n\n    :host([transparent]:not([scrolled]):not([mobile-open])) .utility-row {\n      border-left-color: color-mix(in oklch, currentColor 35%, transparent);\n    }\n\n    :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger {\n      color: inherit;\n    }\n\n    :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger:hover,\n    :host([transparent]:not([scrolled]):not([mobile-open])) .toggle:hover {\n      background: color-mix(in oklch, currentColor 14%, transparent);\n    }\n\n    /* hide-on-scroll: slides away while scrolling down, back as soon as the user scrolls up. */\n    :host([hide-on-scroll]:not([sticky]):not([transparent])) {\n      position: sticky;\n      top: 0;\n      z-index: 100;\n    }\n\n    :host([scroll-hidden]:not([mobile-open])) {\n      transform: translateY(-100%);\n      box-shadow: none;\n    }\n\n    .brand {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-10);\n      flex: none;\n      text-decoration: none;\n      color: inherit;\n    }\n\n    .brand-mark {\n      width: var(--st-size-28);\n      height: var(--st-size-28);\n      border-radius: var(--st-radius-sm);\n      flex: none;\n      object-fit: contain;\n    }\n\n    .brand-title {\n      font-size: var(--st-text-xl);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: var(--st-tracking-tight);\n      white-space: nowrap;\n    }\n\n    /* Optional slot=\"brand-extra\" (e.g. an edition badge) right after the brand. Outside the\n       mobile panel, so it stays beside the logo at every width; no box at all when empty. */\n    .brand-extra {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-8);\n      flex: none;\n      margin-left: var(--st-space-10);\n      white-space: nowrap;\n    }\n\n    .brand-extra.empty {\n      display: none;\n    }\n\n    /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's\n       own flex children. Mobile (see below) turns this into the actual overlay box. */\n    .mobile-panel {\n      display: contents;\n    }\n\n    /* Desktop layout: the menu starts 4rem after the brand and takes the\n       free width; the utility controls sit after a vertical divider. Between 901px and 1200px the\n       gaps tighten so the menu still fits down to the 900px hamburger breakpoint. */\n    .menu-row {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      gap: 1.5rem;\n      min-width: 0;\n      margin-left: 4rem;\n    }\n\n    .utility-row {\n      flex: none;\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      margin-left: 1.5rem;\n      padding-left: 1.5rem;\n      border-left: 1px solid var(--st-color-border);\n    }\n\n    :host([inverted]) .utility-row {\n      border-left-color: currentColor;\n    }\n\n    .utility-row.empty {\n      display: none;\n    }\n\n    @media (max-width: 1200px) {\n      :host {\n        padding: 0 1rem !important;\n      }\n\n      .menu-row {\n        margin-left: 0.5rem;\n      }\n\n      .utility-row {\n        margin-left: 0.5rem;\n        padding-left: 0.5rem;\n      }\n    }\n\n    @keyframes st-header-fade-in {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    .toggle {\n      display: none;\n      align-items: center;\n      justify-content: center;\n      flex: none;\n      position: relative;\n      z-index: 1002;\n      width: var(--st-size-32);\n      height: var(--st-size-32);\n      margin-left: auto;\n      padding: 0.5rem;\n      border: 0;\n      border-radius: var(--st-radius-sm);\n      background: transparent;\n      color: inherit;\n      cursor: pointer;\n    }\n\n    .toggle:hover {\n      background: var(--st-color-hover);\n    }\n\n    .lang-menu {\n      position: relative;\n      flex: none;\n    }\n\n    .lang-trigger {\n      ${buttonResetStyles}\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-4);\n      height: var(--st-size-32);\n      padding: 0 var(--st-space-8);\n      border-radius: var(--st-radius-sm);\n      font-size: var(--st-text-base);\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-muted);\n    }\n\n    .lang-trigger:hover {\n      background: var(--st-color-hover);\n      color: var(--st-color-text-strong);\n    }\n\n    .lang-dropdown {\n      ${dropdownPanelStyles}\n      min-width: 140px;\n    }\n\n    .lang-option {\n      ${buttonResetStyles}\n      display: block;\n      width: 100%;\n      padding: var(--st-space-10) var(--st-space-14);\n      font-size: var(--st-text-base);\n      font-weight: var(--st-font-weight-semibold);\n      text-align: left;\n      color: inherit;\n    }\n\n    .lang-option:hover {\n      background: var(--st-color-hover);\n    }\n\n    .lang-option.active {\n      color: var(--st-color-accent-text);\n    }\n\n    /* Hamburger layout: a full-screen layer under the toggle, menu above\n       the utility controls, the menu's dropdowns opening in the flow (see syncInlineDropdowns). */\n    @media (max-width: ${BREAKPOINT_TABLET}px) {\n      :host {\n        padding: 0 1rem !important;\n      }\n\n      .mobile-panel {\n        display: none;\n      }\n\n      .toggle {\n        display: inline-flex;\n      }\n\n      :host([mobile-open]) .mobile-panel {\n        display: flex;\n        flex-direction: column;\n        gap: 2rem;\n        position: fixed;\n        inset: 0;\n        background: var(--st-color-surface);\n        padding: 5rem 1.5rem 2rem;\n        overflow-y: auto;\n        z-index: 1001;\n        animation: st-header-fade-in 0.3s ease;\n      }\n\n      :host([mobile-open]) .menu-row,\n      :host([mobile-open]) .utility-row {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 1.5rem;\n        margin-left: 0;\n      }\n\n      :host([mobile-open]) .utility-row {\n        padding: 1.5rem 0 0;\n        border-left: 0;\n        border-top: 1px solid var(--st-color-border);\n      }\n\n      /* Apps usually slot one flex-row wrapper per slot; stack its items as the source does. */\n      :host([mobile-open]) ::slotted([slot='menu']),\n      :host([mobile-open]) ::slotted([slot='utility']) {\n        flex-direction: column !important;\n        align-items: stretch !important;\n        margin: 0 !important;\n      }\n    }\n\n    /* The same collapsed layout, switched on by script when the menu no longer fits the bar at\n       desktop width (see evaluateFit) — without it the menu spills over the utility controls. */\n    :host([compact]) .mobile-panel {\n      display: none;\n    }\n\n    :host([compact]) .toggle {\n      display: inline-flex;\n    }\n\n    :host([compact][mobile-open]) .mobile-panel {\n      display: flex;\n      flex-direction: column;\n      gap: 2rem;\n      position: fixed;\n      inset: 0;\n      background: var(--st-color-surface);\n      padding: 5rem 1.5rem 2rem;\n      overflow-y: auto;\n      z-index: 1001;\n      animation: st-header-fade-in 0.3s ease;\n    }\n\n    :host([compact][mobile-open]) .menu-row,\n    :host([compact][mobile-open]) .utility-row {\n      flex-direction: column;\n      align-items: stretch;\n      gap: 1.5rem;\n      margin-left: 0;\n    }\n\n    :host([compact][mobile-open]) .utility-row {\n      padding: 1.5rem 0 0;\n      border-left: 0;\n      border-top: 1px solid var(--st-color-border);\n    }\n\n    :host([compact][mobile-open]) ::slotted([slot='menu']),\n    :host([compact][mobile-open]) ::slotted([slot='utility']) {\n      flex-direction: column !important;\n      align-items: stretch !important;\n      margin: 0 !important;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host,\n      .mobile-panel {\n        animation: none !important;\n        transition: none !important;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\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). */\n  @property({ type: String, attribute: 'brand-image-url' })\n  brandImageUrl = '';\n\n  /** `alt` text for the brand image — matches the source component's `altText` (default `'Logo'`). */\n  @property({ type: String, attribute: 'alt-text' })\n  altText = 'Logo';\n\n  /** Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise. */\n  @property({ type: String })\n  logoHref = '';\n\n  /** `target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set. */\n  @property({ type: String, attribute: 'logo-target' })\n  logoTarget = '_self';\n\n  /** Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`. */\n  @property({ type: String, attribute: 'logo-class-name' })\n  logoClassName = '';\n\n  /** Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\n   * source component's `inverted` (from its shared `BaseProps`). */\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  /**\n   * Fixes the header over the top of the page and makes it see-through, with light text\n   * (`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\n   * header laid over a dark hero. It then takes its normal background and a shadow. The page\n   * content starts under it, so the first section should leave room for the 64px bar.\n   */\n  @property({ type: Boolean, reflect: true })\n  transparent = false;\n\n  /** Slides the header out of view while the page scrolls down and back in when it scrolls up. */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-on-scroll' })\n  hideOnScroll = false;\n\n  /** Scroll distance in px after which the header counts as `scrolled`. */\n  @property({ type: Number, attribute: 'scroll-threshold' })\n  scrollThreshold = 8;\n\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. */\n  @property({ type: Boolean, reflect: true })\n  scrolled = false;\n\n  /** True while `hide-on-scroll` has slid the header away. Set by the header, never from outside. */\n  @property({ type: Boolean, reflect: true, attribute: 'scroll-hidden' })\n  scrollHidden = false;\n\n  private lastScrollY = 0;\n  private scrollFrame = 0;\n\n  private onScroll = (): void => {\n    if (this.scrollFrame) return;\n    this.scrollFrame = requestAnimationFrame(() => {\n      this.scrollFrame = 0;\n      const y = Math.max(0, window.scrollY);\n      this.scrolled = y > this.scrollThreshold;\n      if (this.hideOnScroll) {\n        const delta = y - this.lastScrollY;\n        // Ignore tiny jitters; never hide while still at the top of the page or with the menu open.\n        if (Math.abs(delta) > 4) this.scrollHidden = delta > 0 && y > this.offsetHeight && !this.mobileOpen;\n      } else {\n        this.scrollHidden = false;\n      }\n      this.lastScrollY = y;\n    });\n  };\n\n  /**\n   * Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\n   * when empty or when only one language is offered (same convention as `st-app-header`'s\n   * `languages`, which this reuses verbatim). This component has no translation logic itself —\n   * selecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\n   * what `code` actually means and which content it re-renders.\n   */\n  @property({ attribute: false })\n  languages: { code: string; label: string }[] = [];\n\n  @property({ type: String, attribute: 'current-language-code' })\n  currentLanguageCode = '';\n\n  @property({ type: String, attribute: 'language-menu-label' })\n  languageMenuLabel = 'Language';\n\n  /** Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\n   * the `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\n   * outside. */\n  @property({ type: Boolean, reflect: true, attribute: 'mobile-open' })\n  mobileOpen = false;\n\n  /** True while the menu doesn't fit the bar at the current width: the header then shows the same\n   * hamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside. */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  @state() private languageMenuOpen = false;\n\n  /** Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden. */\n  @state() private hasUtility = false;\n\n  /** Whether `slot=\"brand-extra\"` has content — an empty one takes no room beside the brand. */\n  @state() private hasBrandExtra = false;\n\n  private resizeObserver?: ResizeObserver;\n\n  /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */\n  private narrowQuery?: MediaQueryList;\n\n  /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's\n   * own `inline` setting is left alone. */\n  private inlinedDropdowns = new Set<HTMLElement & { inline: boolean; open: boolean }>();\n\n  /** While the hamburger layout is on, the dropdowns in the header open in the flow of the\n   * full-screen panel instead of floating over it (the touch-device layout). */\n  private syncInlineDropdowns = (): void => {\n    const collapsed = this.compact || !!this.narrowQuery?.matches;\n    const dropdowns = Array.from(this.querySelectorAll('st-dropdown')) as (HTMLElement & { inline: boolean; open: boolean })[];\n    if (collapsed) {\n      for (const dropdown of dropdowns) {\n        if (dropdown.inline) continue;\n        dropdown.inline = true;\n        this.inlinedDropdowns.add(dropdown);\n      }\n    } else {\n      for (const dropdown of this.inlinedDropdowns) dropdown.inline = false;\n      this.inlinedDropdowns.clear();\n    }\n  };\n\n  private onBrandExtraSlotChange = (event: Event): void => {\n    this.hasBrandExtra = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n    this.evaluateFit();\n  };\n\n  private onUtilitySlotChange = (event: Event): void => {\n    this.hasUtility = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n    this.evaluateFit();\n  };\n\n  private onMenuSlotChange = (): void => {\n    this.evaluateFit();\n    this.syncInlineDropdowns();\n  };\n\n  protected updated(changed: Map<string, unknown>): void {\n    if (changed.has('compact')) this.syncInlineDropdowns();\n    // A mega dropdown's drill-down panel would otherwise still cover the menu next time it opens.\n    if (changed.has('mobileOpen') && !this.mobileOpen) {\n      for (const dropdown of this.inlinedDropdowns) dropdown.open = false;\n    }\n  }\n\n  /** The bar width at which the menu last overflowed — the bar only expands again once it is\n   * clearly wider than this, so it can't flip back and forth right at the threshold. */\n  private collapsedAtWidth = 0;\n\n  /** Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\n   * once there is room. The collapsed layout hides the menu, so the room it needs can't be\n   * measured then; the width remembered when it collapsed stands in for it. */\n  private evaluateFit = (): void => {\n    const width = this.clientWidth;\n    if (this.compact) {\n      if (width > this.collapsedAtWidth + 24) {\n        this.compact = false;\n        this.mobileOpen = false;\n        void this.updateComplete.then(this.evaluateFit);\n      }\n      return;\n    }\n    if (this.menuOverflows()) {\n      this.collapsedAtWidth = width;\n      this.compact = true;\n    }\n  };\n\n  /** Whether the visible menu items reach past the right edge of the menu row. Measured from the\n   * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\n   * a closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\n   * report overflow at any width. */\n  private menuOverflows(): boolean {\n    const row = this.renderRoot.querySelector<HTMLElement>('.menu-row');\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\n    if (!row || !slot) return false;\n    const limit = row.getBoundingClientRect().right + 1;\n    let right = 0;\n    for (const el of slot.assignedElements({ flatten: true })) {\n      for (const box of [el, ...Array.from(el.children)]) {\n        const rect = box.getBoundingClientRect();\n        if (rect.width > 0) right = Math.max(right, rect.right);\n      }\n    }\n    return right > limit;\n  }\n\n  protected firstUpdated(): void {\n    this.resizeObserver = new ResizeObserver(this.evaluateFit);\n    this.resizeObserver.observe(this);\n    this.evaluateFit();\n    this.syncInlineDropdowns();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.closeOnEscape);\n    window.addEventListener('click', this.closeLanguageMenuOnOutsideClick);\n    window.addEventListener('scroll', this.onScroll, { passive: true });\n    this.onScroll();\n    this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);\n    this.narrowQuery.addEventListener('change', this.syncInlineDropdowns);\n    // Menus often render their dropdowns after the header (e.g. once the user's role loads),\n    // deeper than a slotchange reports.\n    this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);\n    this.lightDomObserver.observe(this, { childList: true, subtree: true });\n  }\n\n  private lightDomObserver?: MutationObserver;\n\n  disconnectedCallback(): void {\n    this.lightDomObserver?.disconnect();\n    this.narrowQuery?.removeEventListener('change', this.syncInlineDropdowns);\n    this.resizeObserver?.disconnect();\n    window.removeEventListener('keydown', this.closeOnEscape);\n    window.removeEventListener('click', this.closeLanguageMenuOnOutsideClick);\n    window.removeEventListener('scroll', this.onScroll);\n    if (this.scrollFrame) cancelAnimationFrame(this.scrollFrame);\n    this.scrollFrame = 0;\n    super.disconnectedCallback();\n  }\n\n  private closeOnEscape = (event: KeyboardEvent): void => {\n    if (this.mobileOpen && event.key === 'Escape') this.mobileOpen = false;\n    if (this.languageMenuOpen && event.key === 'Escape') this.languageMenuOpen = false;\n  };\n\n  private closeLanguageMenuOnOutsideClick = (event: Event): void => {\n    if (this.languageMenuOpen && !event.composedPath().includes(this)) this.languageMenuOpen = false;\n  };\n\n  private renderLanguageMenu() {\n    if (this.languages.length < 2) return nothing;\n    const current = this.languages.find((lang) => lang.code === this.currentLanguageCode);\n    return html`\n      <div class=\"lang-menu\" part=\"language-menu\">\n        <button\n          part=\"language-menu-trigger\"\n          type=\"button\"\n          class=\"lang-trigger\"\n          aria-label=${this.languageMenuLabel}\n          aria-expanded=${this.languageMenuOpen}\n          @click=${(event: Event) => {\n            event.stopPropagation();\n            this.languageMenuOpen = !this.languageMenuOpen;\n          }}\n        >\n          <span part=\"language-menu-current\">${current?.label ?? this.languageMenuLabel}</span>\n          ${chevronIcon('down', 10)}\n        </button>\n        ${this.languageMenuOpen\n          ? html`\n              <div part=\"language-dropdown\" class=\"lang-dropdown\">\n                ${this.languages.map(\n                  (lang) => html`\n                    <button\n                      part=\"language-option\"\n                      type=\"button\"\n                      class=\"lang-option ${lang.code === this.currentLanguageCode ? 'active' : ''}\"\n                      aria-current=${lang.code === this.currentLanguageCode}\n                      @click=${() => this.onLanguageSelect(lang.code)}\n                    >\n                      ${lang.label}\n                    </button>\n                  `\n                )}\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  private onLanguageSelect(code: string): void {\n    this.languageMenuOpen = false;\n    if (code === this.currentLanguageCode) return;\n    this.dispatchEvent(new CustomEvent<LanguageChangedEventDetail>('language-change', { detail: { code }, bubbles: true, composed: true }));\n  }\n\n  private renderBrand() {\n    const content = html`\n      ${this.brandImageUrl ? html`<img part=\"brand-mark\" class=\"brand-mark\" src=${this.brandImageUrl} alt=${this.altText} /> ` : nothing}\n      <span part=\"brand-title\" class=\"brand-title\">${this.title}</span>\n    `;\n    return this.logoHref\n      ? html`<a part=\"brand\" class=\"brand ${this.logoClassName}\" href=${this.logoHref} target=${this.logoTarget}>${content}</a>`\n      : html`<div part=\"brand\" class=\"brand ${this.logoClassName}\">${content}</div>`;\n  }\n\n  render() {\n    return html`\n      ${this.renderBrand()}\n      <div class=\"brand-extra ${this.hasBrandExtra ? '' : 'empty'}\" part=\"brand-extra\"><slot name=\"brand-extra\" @slotchange=${this.onBrandExtraSlotChange}></slot></div>\n\n      <div class=\"mobile-panel\" part=\"mobile-panel\" @click=${() => (this.mobileOpen = false)}>\n        <div class=\"menu-row\" part=\"menu-row\"><slot name=\"menu\" @slotchange=${this.onMenuSlotChange}></slot></div>\n        <div class=\"utility-row ${this.hasUtility || this.languages.length >= 2 ? '' : 'empty'}\" part=\"utility-row\">\n          ${this.renderLanguageMenu()}<slot name=\"utility\" @slotchange=${this.onUtilitySlotChange}></slot>\n        </div>\n      </div>\n\n      <button\n        part=\"toggle\"\n        type=\"button\"\n        class=\"toggle\"\n        aria-label=${this.mobileOpen ? 'Close menu' : 'Open menu'}\n        aria-expanded=${this.mobileOpen}\n        @click=${() => (this.mobileOpen = !this.mobileOpen)}\n      >\n        <slot name=\"menu-icon\" ?hidden=${this.mobileOpen}>${menuIcon()}</slot>\n        <slot name=\"close-icon\" ?hidden=${!this.mobileOpen}>${closeIcon()}</slot>\n      </button>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,UAAU,aAAa;AAsCxC,IAAM,SAAN,cAAqB,WAAW;AAAA,EAAhC;AAAA;AAuYL,iBAAQ;AAIR,yBAAgB;AAIhB,mBAAU;AAIV,oBAAW;AAIX,sBAAa;AAIb,yBAAgB;AAKhB,oBAAW;AAGX,kBAAS;AAST,uBAAc;AAId,wBAAe;AAIf,2BAAkB;AAIlB,oBAAW;AAIX,wBAAe;AAEf,SAAQ,cAAc;AACtB,SAAQ,cAAc;AAEtB,SAAQ,WAAW,MAAY;AAC7B,UAAI,KAAK,YAAa;AACtB,WAAK,cAAc,sBAAsB,MAAM;AAC7C,aAAK,cAAc;AACnB,cAAM,IAAI,KAAK,IAAI,GAAG,OAAO,OAAO;AACpC,aAAK,WAAW,IAAI,KAAK;AACzB,YAAI,KAAK,cAAc;AACrB,gBAAM,QAAQ,IAAI,KAAK;AAEvB,cAAI,KAAK,IAAI,KAAK,IAAI,EAAG,MAAK,eAAe,QAAQ,KAAK,IAAI,KAAK,gBAAgB,CAAC,KAAK;AAAA,QAC3F,OAAO;AACL,eAAK,eAAe;AAAA,QACtB;AACA,aAAK,cAAc;AAAA,MACrB,CAAC;AAAA,IACH;AAUA,qBAA+C,CAAC;AAGhD,+BAAsB;AAGtB,6BAAoB;AAMpB,sBAAa;AAKb,mBAAU;AAED,SAAQ,mBAAmB;AAG3B,SAAQ,aAAa;AAGrB,SAAQ,gBAAgB;AASjC;AAAA;AAAA,SAAQ,mBAAmB,oBAAI,IAAsD;AAIrF;AAAA;AAAA,SAAQ,sBAAsB,MAAY;AACxC,YAAM,YAAY,KAAK,WAAW,CAAC,CAAC,KAAK,aAAa;AACtD,YAAM,YAAY,MAAM,KAAK,KAAK,iBAAiB,aAAa,CAAC;AACjE,UAAI,WAAW;AACb,mBAAW,YAAY,WAAW;AAChC,cAAI,SAAS,OAAQ;AACrB,mBAAS,SAAS;AAClB,eAAK,iBAAiB,IAAI,QAAQ;AAAA,QACpC;AAAA,MACF,OAAO;AACL,mBAAW,YAAY,KAAK,iBAAkB,UAAS,SAAS;AAChE,aAAK,iBAAiB,MAAM;AAAA,MAC9B;AAAA,IACF;AAEA,SAAQ,yBAAyB,CAAC,UAAuB;AACvD,WAAK,gBAAiB,MAAM,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AACpG,WAAK,YAAY;AAAA,IACnB;AAEA,SAAQ,sBAAsB,CAAC,UAAuB;AACpD,WAAK,aAAc,MAAM,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AACjG,WAAK,YAAY;AAAA,IACnB;AAEA,SAAQ,mBAAmB,MAAY;AACrC,WAAK,YAAY;AACjB,WAAK,oBAAoB;AAAA,IAC3B;AAYA;AAAA;AAAA,SAAQ,mBAAmB;AAK3B;AAAA;AAAA;AAAA,SAAQ,cAAc,MAAY;AAChC,YAAM,QAAQ,KAAK;AACnB,UAAI,KAAK,SAAS;AAChB,YAAI,QAAQ,KAAK,mBAAmB,IAAI;AACtC,eAAK,UAAU;AACf,eAAK,aAAa;AAClB,eAAK,KAAK,eAAe,KAAK,KAAK,WAAW;AAAA,QAChD;AACA;AAAA,MACF;AACA,UAAI,KAAK,cAAc,GAAG;AACxB,aAAK,mBAAmB;AACxB,aAAK,UAAU;AAAA,MACjB;AAAA,IACF;AAwDA,SAAQ,gBAAgB,CAAC,UAA+B;AACtD,UAAI,KAAK,cAAc,MAAM,QAAQ,SAAU,MAAK,aAAa;AACjE,UAAI,KAAK,oBAAoB,MAAM,QAAQ,SAAU,MAAK,mBAAmB;AAAA,IAC/E;AAEA,SAAQ,kCAAkC,CAAC,UAAuB;AAChE,UAAI,KAAK,oBAAoB,CAAC,MAAM,aAAa,EAAE,SAAS,IAAI,EAAG,MAAK,mBAAmB;AAAA,IAC7F;AAAA;AAAA,EA5FU,QAAQ,SAAqC;AACrD,QAAI,QAAQ,IAAI,SAAS,EAAG,MAAK,oBAAoB;AAErD,QAAI,QAAQ,IAAI,YAAY,KAAK,CAAC,KAAK,YAAY;AACjD,iBAAW,YAAY,KAAK,iBAAkB,UAAS,OAAO;AAAA,IAChE;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EA6BQ,gBAAyB;AAC/B,UAAM,MAAM,KAAK,WAAW,cAA2B,WAAW;AAClE,UAAM,OAAO,KAAK,WAAW,cAA+B,mBAAmB;AAC/E,QAAI,CAAC,OAAO,CAAC,KAAM,QAAO;AAC1B,UAAM,QAAQ,IAAI,sBAAsB,EAAE,QAAQ;AAClD,QAAI,QAAQ;AACZ,eAAW,MAAM,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAAC,GAAG;AACzD,iBAAW,OAAO,CAAC,IAAI,GAAG,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG;AAClD,cAAM,OAAO,IAAI,sBAAsB;AACvC,YAAI,KAAK,QAAQ,EAAG,SAAQ,KAAK,IAAI,OAAO,KAAK,KAAK;AAAA,MACxD;AAAA,IACF;AACA,WAAO,QAAQ;AAAA,EACjB;AAAA,EAEU,eAAqB;AAC7B,SAAK,iBAAiB,IAAI,eAAe,KAAK,WAAW;AACzD,SAAK,eAAe,QAAQ,IAAI;AAChC,SAAK,YAAY;AACjB,SAAK,oBAAoB;AAAA,EAC3B;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAkB;AACxB,WAAO,iBAAiB,WAAW,KAAK,aAAa;AACrD,WAAO,iBAAiB,SAAS,KAAK,+BAA+B;AACrE,WAAO,iBAAiB,UAAU,KAAK,UAAU,EAAE,SAAS,KAAK,CAAC;AAClE,SAAK,SAAS;AACd,SAAK,cAAc,OAAO,WAAW,eAAe,iBAAiB,KAAK;AAC1E,SAAK,YAAY,iBAAiB,UAAU,KAAK,mBAAmB;AAGpE,SAAK,mBAAmB,IAAI,iBAAiB,KAAK,mBAAmB;AACrE,SAAK,iBAAiB,QAAQ,MAAM,EAAE,WAAW,MAAM,SAAS,KAAK,CAAC;AAAA,EACxE;AAAA,EAIA,uBAA6B;AAC3B,SAAK,kBAAkB,WAAW;AAClC,SAAK,aAAa,oBAAoB,UAAU,KAAK,mBAAmB;AACxE,SAAK,gBAAgB,WAAW;AAChC,WAAO,oBAAoB,WAAW,KAAK,aAAa;AACxD,WAAO,oBAAoB,SAAS,KAAK,+BAA+B;AACxE,WAAO,oBAAoB,UAAU,KAAK,QAAQ;AAClD,QAAI,KAAK,YAAa,sBAAqB,KAAK,WAAW;AAC3D,SAAK,cAAc;AACnB,UAAM,qBAAqB;AAAA,EAC7B;AAAA,EAWQ,qBAAqB;AAC3B,QAAI,KAAK,UAAU,SAAS,EAAG,QAAO;AACtC,UAAM,UAAU,KAAK,UAAU,KAAK,CAAC,SAAS,KAAK,SAAS,KAAK,mBAAmB;AACpF,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAMY,KAAK,iBAAiB;AAAA,0BACnB,KAAK,gBAAgB;AAAA,mBAC5B,CAAC,UAAiB;AACzB,YAAM,gBAAgB;AACtB,WAAK,mBAAmB,CAAC,KAAK;AAAA,IAChC,CAAC;AAAA;AAAA,+CAEoC,SAAS,SAAS,KAAK,iBAAiB;AAAA,YAC3E,YAAY,QAAQ,EAAE,CAAC;AAAA;AAAA,UAEzB,KAAK,mBACH;AAAA;AAAA,kBAEM,KAAK,UAAU;AAAA,MACf,CAAC,SAAS;AAAA;AAAA;AAAA;AAAA,2CAIe,KAAK,SAAS,KAAK,sBAAsB,WAAW,EAAE;AAAA,qCAC5D,KAAK,SAAS,KAAK,mBAAmB;AAAA,+BAC5C,MAAM,KAAK,iBAAiB,KAAK,IAAI,CAAC;AAAA;AAAA,wBAE7C,KAAK,KAAK;AAAA;AAAA;AAAA,IAGlB,CAAC;AAAA;AAAA,gBAGL,OAAO;AAAA;AAAA;AAAA,EAGjB;AAAA,EAEQ,iBAAiB,MAAoB;AAC3C,SAAK,mBAAmB;AACxB,QAAI,SAAS,KAAK,oBAAqB;AACvC,SAAK,cAAc,IAAI,YAAwC,mBAAmB,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,MAAM,UAAU,KAAK,CAAC,CAAC;AAAA,EACxI;AAAA,EAEQ,cAAc;AACpB,UAAM,UAAU;AAAA,QACZ,KAAK,gBAAgB,qDAAqD,KAAK,aAAa,QAAQ,KAAK,OAAO,SAAS,OAAO;AAAA,qDACnF,KAAK,KAAK;AAAA;AAE3D,WAAO,KAAK,WACR,oCAAoC,KAAK,aAAa,UAAU,KAAK,QAAQ,WAAW,KAAK,UAAU,IAAI,OAAO,SAClH,sCAAsC,KAAK,aAAa,KAAK,OAAO;AAAA,EAC1E;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,YAAY,CAAC;AAAA,gCACM,KAAK,gBAAgB,KAAK,OAAO,6DAA6D,KAAK,sBAAsB;AAAA;AAAA,6DAE5F,MAAO,KAAK,aAAa,KAAM;AAAA,8EACd,KAAK,gBAAgB;AAAA,kCACjE,KAAK,cAAc,KAAK,UAAU,UAAU,IAAI,KAAK,OAAO;AAAA,YAClF,KAAK,mBAAmB,CAAC,oCAAoC,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAQ5E,KAAK,aAAa,eAAe,WAAW;AAAA,wBACzC,KAAK,UAAU;AAAA,iBACtB,MAAO,KAAK,aAAa,CAAC,KAAK,UAAW;AAAA;AAAA,yCAElB,KAAK,UAAU,IAAI,SAAS,CAAC;AAAA,0CAC5B,CAAC,KAAK,UAAU,IAAI,UAAU,CAAC;AAAA;AAAA;AAAA,EAGvE;AACF;AA/sBa,OACJ,SAAS;AAAA,MACZ,iBAAiB;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;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,QA4NpB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBjB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKnB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAoBA,iBAAiB;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;AAuGxC;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtYf,OAuYX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GA1Y7C,OA2YX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,CAAC;AAAA,GA9YtC,OA+YX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlZf,OAmZX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAtZzC,OAuZX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GA1Z7C,OA2ZX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA/Z/B,OAgaX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAla/B,OAmaX;AASA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA3a/B,OA4aX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GA/a5D,OAgbX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB,CAAC;AAAA,GAnb9C,OAobX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvb/B,OAwbX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GA3b3D,OA4bX;AA8BA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAzdnB,OA0dX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,wBAAwB,CAAC;AAAA,GA5dnD,OA6dX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,sBAAsB,CAAC;AAAA,GA/djD,OAgeX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,cAAc,CAAC;AAAA,GArezD,OAseX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA1e/B,OA2eX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GA7eI,OA6eM;AAGA;AAAA,EAAhB,MAAM;AAAA,GAhfI,OAgfM;AAGA;AAAA,EAAhB,MAAM;AAAA,GAnfI,OAmfM;AAnfN,SAAN;AAAA,EADN,cAAc,WAAW;AAAA,GACb;","names":[]}

package/dist/chunk-ZRC5BVDX.js

@@ -0,0 +1,219 @@
+import {
+  sectionHeaderStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-FZ36KL73.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-KMU6ABQF.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/steps/Steps.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var Steps = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.eyebrow = "";
+    this.title = "";
+    this.subtitle = "";
+    this.items = [];
+    this.highlightLast = false;
+    this.inverted = false;
+  }
+  render() {
+    const heading = this.eyebrow || this.title || this.subtitle;
+    const last = this.items.length - 1;
+    return html`
+      <div class="container" part="container">
+        ${heading ? html`<div class="header" part="header">
+              ${this.eyebrow ? html`<p class="eyebrow" part="eyebrow">${this.eyebrow}</p>` : nothing}
+              ${this.title ? html`<h2 class="title" part="title">${this.title}</h2>` : nothing}
+              ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+            </div>` : nothing}
+        <ol class="grid" part="grid" aria-label=${this.title || nothing}>
+          ${this.items.map(
+      (step, index) => html`
+              <li class="card ${this.highlightLast && index === last ? "highlight" : ""}" part="card">
+                <span class="number" part="number" aria-hidden="true">${String(index + 1).padStart(2, "0")}</span>
+                <h3 class="card-title" part="card-title">${step.title}</h3>
+                ${step.description ? html`<p class="description" part="description">${step.description}</p>` : nothing}
+              </li>
+            `
+    )}
+        </ol>
+      </div>
+    `;
+  }
+};
+Steps.styles = css`
+    ${controlBaseStyles}
+    ${fontFamilyStyles}
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-steps-padding instead. */
+      padding: var(--st-steps-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;
+      background: var(--st-color-page);
+    }
+
+    :host([inverted]) {
+      background: var(--st-cms-band-dark-bg);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+    }
+
+    .header {
+      ${sectionHeaderStyles}
+    }
+
+    .eyebrow {
+      margin: 0 0 var(--st-space-12);
+      font-size: var(--st-text-sm);
+      font-weight: var(--st-font-weight-bold);
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--st-color-text-muted);
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      color: inherit;
+      letter-spacing: -0.02em;
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      max-width: 60ch;
+      margin: 0 auto;
+    }
+
+    .grid {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+      gap: var(--st-space-24);
+    }
+
+    .card {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-12);
+      box-sizing: border-box;
+      margin: 0;
+      padding: var(--st-space-32);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-lg);
+      background: var(--st-color-surface);
+      color: var(--st-color-text);
+    }
+
+    .number {
+      font-size: var(--st-cms-text-3xl);
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1;
+      letter-spacing: -0.02em;
+      color: var(--st-color-accent);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .card-title {
+      margin: var(--st-space-8) 0 0;
+      font-size: var(--st-text-xl);
+      font-weight: var(--st-font-weight-semibold);
+      line-height: 1.3;
+      color: var(--st-color-text-strong);
+    }
+
+    .description {
+      margin: 0;
+      font-size: var(--st-text-md);
+      line-height: 1.6;
+      color: var(--st-color-text-muted);
+    }
+
+    /* inverted: a dark band with light cards; the number moves to the cyan highlight so it reads on navy. */
+    :host([inverted]) .card {
+      background: color-mix(in oklch, var(--st-cms-band-dark-color) 6%, transparent);
+      border-color: color-mix(in oklch, var(--st-cms-band-dark-color) 16%, transparent);
+    }
+
+    :host([inverted]) .number {
+      color: var(--st-cms-highlight);
+    }
+
+    :host([inverted]) .title,
+    :host([inverted]) .card-title {
+      color: var(--st-cms-band-dark-color);
+    }
+
+    :host([inverted]) .eyebrow,
+    :host([inverted]) .subtitle,
+    :host([inverted]) .description {
+      color: color-mix(in oklch, var(--st-cms-band-dark-color) 75%, transparent);
+    }
+
+    /* highlightLast: the final card is the dark call-out. Declared after the inverted rules so it wins. */
+    .card.highlight {
+      background: var(--st-cms-navy);
+      border-color: var(--st-cms-navy);
+      color: var(--st-cms-on-dark);
+    }
+
+    .card.highlight .number {
+      color: var(--st-cms-highlight);
+    }
+
+    .card.highlight .card-title {
+      color: var(--st-cms-on-dark);
+    }
+
+    .card.highlight .description {
+      color: color-mix(in oklch, var(--st-cms-on-dark) 80%, transparent);
+    }
+
+    @media (max-width: 600px) {
+      :host {
+        padding: var(--st-steps-padding, var(--st-space-40) var(--st-space-20)) !important;
+      }
+      .card {
+        padding: var(--st-space-24);
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Steps.prototype, "eyebrow", 2);
+__decorateClass([
+  property({ type: String })
+], Steps.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], Steps.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], Steps.prototype, "items", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "highlight-last" })
+], Steps.prototype, "highlightLast", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Steps.prototype, "inverted", 2);
+Steps = __decorateClass([
+  customElement("st-steps")
+], Steps);
+
+export {
+  Steps
+};
+//# sourceMappingURL=chunk-ZRC5BVDX.js.map

package/dist/chunk-ZRC5BVDX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/steps/Steps.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { sectionHeaderStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\n\nexport interface StepItem {\n  title: string;\n  description?: string;\n}\n\n/**\n * A numbered process: a responsive grid of cards, each with an automatic \"01\", \"02\", ... number, a\n * title and a description. `highlightLast` makes the final card a dark navy call-out, the way\n * enterprise pages close a how-it-works sequence. `inverted` puts the whole block on the dark band.\n *\n * @cssprop --st-steps-padding - Overrides the block's padding.\n * @csspart header - The eyebrow/title/subtitle block.\n * @csspart card - Each step card (an `li`).\n * @csspart number - The step number.\n */\n@customElement('st-steps')\nexport class Steps extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n    ${fontFamilyStyles}\n\n    :host {\n      display: block;\n      box-sizing: border-box;\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-steps-padding instead. */\n      padding: var(--st-steps-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\n      background: var(--st-color-page);\n    }\n\n    :host([inverted]) {\n      background: var(--st-cms-band-dark-bg);\n    }\n\n    .container {\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n    }\n\n    .header {\n      ${sectionHeaderStyles}\n    }\n\n    .eyebrow {\n      margin: 0 0 var(--st-space-12);\n      font-size: var(--st-text-sm);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      color: var(--st-color-text-muted);\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      color: inherit;\n      letter-spacing: -0.02em;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      max-width: 60ch;\n      margin: 0 auto;\n    }\n\n    .grid {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n      gap: var(--st-space-24);\n    }\n\n    .card {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-12);\n      box-sizing: border-box;\n      margin: 0;\n      padding: var(--st-space-32);\n      border: 1px solid var(--st-color-border);\n      border-radius: var(--st-radius-lg);\n      background: var(--st-color-surface);\n      color: var(--st-color-text);\n    }\n\n    .number {\n      font-size: var(--st-cms-text-3xl);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1;\n      letter-spacing: -0.02em;\n      color: var(--st-color-accent);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .card-title {\n      margin: var(--st-space-8) 0 0;\n      font-size: var(--st-text-xl);\n      font-weight: var(--st-font-weight-semibold);\n      line-height: 1.3;\n      color: var(--st-color-text-strong);\n    }\n\n    .description {\n      margin: 0;\n      font-size: var(--st-text-md);\n      line-height: 1.6;\n      color: var(--st-color-text-muted);\n    }\n\n    /* inverted: a dark band with light cards; the number moves to the cyan highlight so it reads on navy. */\n    :host([inverted]) .card {\n      background: color-mix(in oklch, var(--st-cms-band-dark-color) 6%, transparent);\n      border-color: color-mix(in oklch, var(--st-cms-band-dark-color) 16%, transparent);\n    }\n\n    :host([inverted]) .number {\n      color: var(--st-cms-highlight);\n    }\n\n    :host([inverted]) .title,\n    :host([inverted]) .card-title {\n      color: var(--st-cms-band-dark-color);\n    }\n\n    :host([inverted]) .eyebrow,\n    :host([inverted]) .subtitle,\n    :host([inverted]) .description {\n      color: color-mix(in oklch, var(--st-cms-band-dark-color) 75%, transparent);\n    }\n\n    /* highlightLast: the final card is the dark call-out. Declared after the inverted rules so it wins. */\n    .card.highlight {\n      background: var(--st-cms-navy);\n      border-color: var(--st-cms-navy);\n      color: var(--st-cms-on-dark);\n    }\n\n    .card.highlight .number {\n      color: var(--st-cms-highlight);\n    }\n\n    .card.highlight .card-title {\n      color: var(--st-cms-on-dark);\n    }\n\n    .card.highlight .description {\n      color: color-mix(in oklch, var(--st-cms-on-dark) 80%, transparent);\n    }\n\n    @media (max-width: 600px) {\n      :host {\n        padding: var(--st-steps-padding, var(--st-space-40) var(--st-space-20)) !important;\n      }\n      .card {\n        padding: var(--st-space-24);\n      }\n    }\n  `;\n\n  /** Small uppercase label above the title. */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  /** The steps, in order. */\n  @property({ attribute: false })\n  items: StepItem[] = [];\n\n  /** Renders the last step as a dark navy call-out card. */\n  @property({ type: Boolean, reflect: true, attribute: 'highlight-last' })\n  highlightLast = false;\n\n  /** Puts the block on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme. */\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  render() {\n    const heading = this.eyebrow || this.title || this.subtitle;\n    const last = this.items.length - 1;\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${heading\n          ? html`<div class=\"header\" part=\"header\">\n              ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n              ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n              ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n            </div>`\n          : nothing}\n        <ol class=\"grid\" part=\"grid\" aria-label=${this.title || nothing}>\n          ${this.items.map(\n            (step, index) => html`\n              <li class=\"card ${this.highlightLast && index === last ? 'highlight' : ''}\" part=\"card\">\n                <span class=\"number\" part=\"number\" aria-hidden=\"true\">${String(index + 1).padStart(2, '0')}</span>\n                <h3 class=\"card-title\" part=\"card-title\">${step.title}</h3>\n                ${step.description ? html`<p class=\"description\" part=\"description\">${step.description}</p>` : nothing}\n              </li>\n            `\n          )}\n        </ol>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAqBjC,IAAM,QAAN,cAAoB,WAAW;AAAA,EAA/B;AAAA;AAkJL,mBAAU;AAGV,iBAAQ;AAGR,oBAAW;AAIX,iBAAoB,CAAC;AAIrB,yBAAgB;AAIhB,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,UAAM,UAAU,KAAK,WAAW,KAAK,SAAS,KAAK;AACnD,UAAM,OAAO,KAAK,MAAM,SAAS;AACjC,WAAO;AAAA;AAAA,UAED,UACE;AAAA,gBACI,KAAK,UAAU,yCAAyC,KAAK,OAAO,SAAS,OAAO;AAAA,gBACpF,KAAK,QAAQ,sCAAsC,KAAK,KAAK,UAAU,OAAO;AAAA,gBAC9E,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA,sBAE5F,OAAO;AAAA,kDAC+B,KAAK,SAAS,OAAO;AAAA,YAC3D,KAAK,MAAM;AAAA,MACX,CAAC,MAAM,UAAU;AAAA,gCACG,KAAK,iBAAiB,UAAU,OAAO,cAAc,EAAE;AAAA,wEACf,OAAO,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC;AAAA,2DAC/C,KAAK,KAAK;AAAA,kBACnD,KAAK,cAAc,iDAAiD,KAAK,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA,IAG5G,CAAC;AAAA;AAAA;AAAA;AAAA,EAIT;AACF;AAhMa,MACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA,MACjB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqBd,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAanB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMlB,qBAAqB;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;AAuG3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjJf,MAkJX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApJf,MAqJX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvJf,MAwJX;AAIA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GA3JnB,MA4JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GA/J5D,MAgKX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAnK/B,MAoKX;AApKW,QAAN;AAAA,EADN,cAAc,UAAU;AAAA,GACZ;","names":[]}

package/dist/cms-theme.css

@@ -18,6 +18,13 @@
      stays dark there too. */
   --st-cms-band-dark-bg: var(--st-color-text-strong);
   --st-cms-band-dark-color: var(--st-color-on-solid);
+
+  /* Fixed brand colours for highlight surfaces (steps' last card, flow's accent node, bento "dark"
+     cards). They do not swap in the dark theme: navy and cyan read well on both page surfaces.
+     --st-cms-on-dark is the light text placed on them. */
+  --st-cms-navy: #011d41;
+  --st-cms-highlight: #49cce0;
+  --st-cms-on-dark: #ffffff;
 }
 
 :root.dark {

package/dist/content-block/index.d.ts

@@ -3,9 +3,8 @@ import { LitElement } from 'lit';
 
 /**
  * A long-form article section: centered title/subtitle, an optional featured image with caption,
- * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from
- * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the
- * block works without a fetch); `content-src` wins when both are set.
+ * then Markdown body text. The body comes from `content-src` (a Markdown URL) or an inline
+ * `content` string (so the block works without a fetch); `content-src` wins when both are set.
  *
  * @cssprop --st-content-block-padding - Overrides the block's padding.
  */

package/dist/content-block/index.js

@@ -1,7 +1,8 @@
 import {
   ContentBlock
-} from "../chunk-BMHMNXIA.js";
-import "../chunk-5EBWMPJS.js";
+} from "../chunk-4AFOKKSU.js";
+import "../chunk-QLA4BH2B.js";
+import "../chunk-UAIUBPDN.js";
 import "../chunk-FZ36KL73.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";

package/dist/dropdown/index.d.ts

@@ -3,23 +3,20 @@ import { LitElement } from 'lit';
 
 /**
  * A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),
- * action menus, anything "click a trigger, show content under it". A 1:1 port of `SankhyaUI`'s
- * React `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup
+ * action menus, anything "click a trigger, show content under it". Markup
  * (`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —
  *
- * - only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no
- *   provider element is needed);
+ * - only one dropdown is open at a time (a shared provider is built in, so no provider element
+ *   is needed);
  * - a mousedown outside, Escape, or a click inside the panel closes it;
  * - an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;
  * - `inline` opens the panel in the flow, the source's `.touch-device` layout.
  *
- * Colors and the panel's surface come from the suite theme (the source left those to the
- * consumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out
- * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel
- * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`
- * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions
- * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event — plus
- * `mega` and `open-on-hover` for an okta.com-style mega menu (see `st-mega-menu`).
+ * Colors and the panel's surface come from the suite theme. The panel is never 100vw wide at
+ * <=768px (it would overflow the screen from wherever the trigger sits; use `inline` in headers
+ * instead), and slotted children are not clipped with `overflow: hidden` (that would cut off their
+ * focus rings). Other attributes: `align`, `active`, `disabled`, `inline`, the `dropdown-toggle`
+ * event, and `mega` plus `open-on-hover` for a mega menu (see `st-mega-menu`).
  *
  * @cssprop --st-mega-menu-max-width - Maximum width of a `mega` panel (default `1400px`).
  * @cssprop --st-mega-menu-inset - Minimum space between a `mega` panel and the header's sides (default `1rem`).

package/dist/dropdown/index.js

@@ -1,6 +1,6 @@
 import {
   Dropdown
-} from "../chunk-LEXZKGQX.js";
+} from "../chunk-2DXHPEB5.js";
 import "../chunk-WTD2YIAA.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";

package/dist/feature-split/index.js

@@ -1,7 +1,8 @@
 import {
   FeatureSplit
 } from "../chunk-WT4OATGP.js";
-import "../chunk-5EBWMPJS.js";
+import "../chunk-QLA4BH2B.js";
+import "../chunk-UAIUBPDN.js";
 import "../chunk-FZ36KL73.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";

package/dist/features-section/index.d.ts

@@ -29,10 +29,10 @@ interface FeatureItemData {
     href?: string;
 }
 /**
- * A titled grid of feature tiles. Ports `SankhyaUI`'s React `FeaturesSection`: tiles come from the
- * `items` property, from slotted `st-feature-item` elements (the source's `children`), or both
- * (slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`
- * is passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.
+ * A titled grid of feature tiles. Tiles come from the `items` property, from slotted
+ * `st-feature-item` elements, or both (slotted first). `columns` sets the grid width (default 2;
+ * one column below 768px). `inverted` is passed on to the `items` tiles; slotted tiles need their
+ * own `inverted` attribute.
  *
  * @cssprop --st-features-section-padding - Overrides the section's padding.
  */

package/dist/features-section/index.js

@@ -1,9 +1,10 @@
 import {
   FeatureItem,
   FeaturesSection
-} from "../chunk-FLY7TNRT.js";
-import "../chunk-ZN4LIKVG.js";
-import "../chunk-5EBWMPJS.js";
+} from "../chunk-7NIWQWTA.js";
+import "../chunk-3OEEOBHB.js";
+import "../chunk-QLA4BH2B.js";
+import "../chunk-UAIUBPDN.js";
 import "../chunk-FZ36KL73.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";

package/dist/flow/index.d.ts

@@ -0,0 +1,35 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface FlowNode {
+    label: string;
+    caption?: string;
+    /** `solid` (default, primary fill), `outline` (dashed accent border) or `accent` (cyan fill). */
+    variant?: 'solid' | 'outline' | 'accent';
+}
+/**
+ * A left-to-right process or architecture flow: boxes joined by arrows. Boxes come in three looks
+ * (`solid`, `outline`, `accent`); the arrows are decorative (`aria-hidden`), and the list is exposed
+ * as an ordered list. Below 600px the row stacks vertically and the arrows point down.
+ * `inverted` puts the flow on the dark band (`--st-cms-band-dark-bg`).
+ *
+ * @cssprop --st-flow-padding - Overrides the block's padding.
+ * @csspart flow - The ordered list of nodes.
+ * @csspart node - Each step's box (a `li`'s child).
+ * @csspart label - The box's label.
+ * @csspart caption - The box's caption.
+ * @csspart arrow - The arrow between two boxes.
+ */
+declare class Flow extends LitElement {
+    static styles: lit.CSSResult;
+    /** The boxes, in order. */
+    nodes: FlowNode[];
+    /** Accessible name for the list of steps. */
+    label: string;
+    /** Puts the flow on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme. */
+    inverted: boolean;
+    private arrow;
+    render(): lit.TemplateResult<1>;
+}
+
+export { Flow, type FlowNode };

package/dist/flow/index.js

@@ -0,0 +1,9 @@
+import {
+  Flow
+} from "../chunk-O4FCRKDX.js";
+import "../chunk-KMU6ABQF.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  Flow
+};
+//# sourceMappingURL=index.js.map

package/dist/flow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/header/index.d.ts

@@ -4,18 +4,13 @@ import { LitElement } from 'lit';
 /**
  * The app-shell header bar — brand (image + title, or title alone) on the left, a `slot="menu"`
  * for primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the
- * middle, and a `slot="utility"` for account/app-switcher/theme controls on the right. Ported
- * from `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this
- * package's Lit conventions and this workspace's actual needs — that source component takes an
- * `imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so
- * `title` is the primary brand prop here and `brand-image-url` is optional, mirroring
- * `st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a
- * deliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu
- * props — pick whichever fits a given app's header).
+ * middle, and a `slot="utility"` for account/app-switcher/theme controls on the right. `title` is
+ * the primary brand prop; `brand-image-url` is optional. For a fixed nav-links/user-menu header,
+ * use `st-app-header` instead.
  *
- * Layout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility
- * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the
- * source) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the
+ * Layout: the menu starts 4rem after the brand, the utility
+ * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px) `menu`/`utility`
+ * collapse behind a hamburger toggle into a full-screen layer under the
  * toggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to
  * `inline` so they open in the flow — the same two slotted elements just get repositioned by CSS
  * (`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below
@@ -26,9 +21,7 @@ import { LitElement } from 'lit';
  * "🇮🇳 India Edition"); unlike `menu`/`utility` it stays in the bar at every width.
  *
  * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires
- * `language-change`) — ported from `st-app-header`'s own implementation verbatim rather than
- * rebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`
- * as a first-class header utility. Hidden entirely when `languages` has fewer than two entries.
+ * `language-change`). Hidden entirely when `languages` has fewer than two entries.
  * This component has no translation logic itself; the consuming app owns what a language `code`
  * means and which content it re-renders in response.
  *
@@ -106,7 +99,7 @@ declare class Header extends LitElement {
      * own `inline` setting is left alone. */
     private inlinedDropdowns;
     /** While the hamburger layout is on, the dropdowns in the header open in the flow of the
-     * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */
+     * full-screen panel instead of floating over it (the touch-device layout). */
     private syncInlineDropdowns;
     private onBrandExtraSlotChange;
     private onUtilitySlotChange;

package/dist/header/index.js

@@ -1,6 +1,6 @@
 import {
   Header
-} from "../chunk-XWB4CKDU.js";
+} from "../chunk-XUGEXERO.js";
 import "../chunk-WTD2YIAA.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";

package/dist/hero/index.d.ts

@@ -3,18 +3,25 @@ import { LitElement } from 'lit';
 
 /**
  * Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,
- * optional subtitle and up to two call-to-action links. Port of `SankhyaUI`'s React `Hero`; the
- * framer-motion entrance is redone as CSS keyframes (skipped under `prefers-reduced-motion`).
+ * optional subtitle and up to two call-to-action links. The entrance animation is CSS keyframes
+ * (skipped under `prefers-reduced-motion`).
  *
  * `size`, `content-position` and `overlay="gradient"` give the large editorial layout (copy on the
  * lower left over a gradient that darkens towards it) used by enterprise marketing heroes; the
  * defaults keep the original centered banner. Put several heroes in an `st-carousel` with
  * `indicator-style="tabs"` for a tabbed hero carousel.
  *
+ * `badge` is a pill above the title; `highlights` is a row of check-marked points under the buttons.
+ * `layout="split"` swaps the background for a two-column layout: copy on one side, `image-src` as an
+ * `<img>` (alt from `image-alt`) on the other, on normal page colours with no overlay.
+ *
  * @fires action - Cancelable, before navigating. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.
  * @cssprop --st-hero-text-color - Text colour over the image.
  * @cssprop --st-hero-min-height - Minimum height when `size` is `large` (default `640px`).
  * @csspart eyebrow - The small label above the title.
+ * @csspart badge - The pill above the title.
+ * @csspart highlights - The row of check-marked points.
+ * @csspart image - The image in `layout="split"`.
  * @csspart secondary-action - The outlined second button.
  */
 declare class Hero extends LitElement {
@@ -33,6 +40,14 @@ declare class Hero extends LitElement {
     /** Label of an outlined second button next to the primary one. */
     secondaryActionLabel: string;
     secondaryHref: string;
+    /** Small pill above the title (e.g. "New", "Now available"). */
+    badge: string;
+    /** Check-marked points shown in a row under the buttons. */
+    highlights: string[];
+    /** `background` (default) puts `image-src` behind the copy; `split` puts copy and image side by side. */
+    layout: 'background' | 'split';
+    /** Alt text of the image in `layout="split"`. Empty marks it as decorative. */
+    imageAlt: string;
     /** `auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport. */
     size: 'auto' | 'large' | 'full';
     /** `center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container. */
@@ -50,7 +65,7 @@ declare class Hero extends LitElement {
 /** Fired by `st-hero` / `st-promo-banner` when the call-to-action is activated (source: `onAction`). */
 interface HeroActionEventDetail {
     href: string;
-    /** Which `st-hero` button was activated; `st-promo-banner` leaves it unset. */
+    /** Which button was activated. Unset for a primary button; `st-promo-banner` sets `secondary` on its second button. */
     kind?: 'primary' | 'secondary';
 }
 

package/dist/hero/index.js

@@ -1,6 +1,6 @@
 import {
   Hero
-} from "../chunk-JKBWZLG4.js";
+} from "../chunk-SQ3OZO32.js";
 import "../chunk-FZ36KL73.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";

package/dist/icon-button/index.d.ts

@@ -2,10 +2,8 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 /**
- * A small, icon-only action button — ported from `SankhyaUI`'s React `IconButton` (a separate,
- * unrelated marketing-site project; that source takes an iconify string `icon` prop, this package
- * has no iconify dependency, so the icon is default-slotted content instead, same convention as
- * `st-dropdown`/`st-menu-grid-item`'s `slot="icon"`).
+ * A small, icon-only action button. The icon is default-slotted content (the package has no icon
+ * library dependency), the same convention as `st-dropdown`/`st-menu-grid-item`'s `slot="icon"`.
  *
  * Fires a plain native `click` — no custom event, since a caller just wants an ordinary button.
  */