@sankhyatronics/sankhya-cms 0.1.7 → 0.1.9

package/dist/{chunk-IQPW3CYZ.js → chunk-LEXZKGQX.js}

@@ -1,11 +1,11 @@
 import {
   chevronIcon
-} from "./chunk-PB7ZPPLP.js";
+} from "./chunk-WTD2YIAA.js";
 import {
   buttonResetStyles,
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -571,4 +571,4 @@ Dropdown = __decorateClass([
 export {
   Dropdown
 };
-//# sourceMappingURL=chunk-IQPW3CYZ.js.map
+//# sourceMappingURL=chunk-LEXZKGQX.js.map

package/dist/chunk-LEXZKGQX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chevronIcon } from '../shared/icons';\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { DropdownToggleEventDetail } from './DropdownEvents';\n\n/**\n * A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\n * action menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\n * React `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\n * (`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\n *\n * - only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\n *   provider element is needed);\n * - a mousedown outside, Escape, or a click inside the panel closes it;\n * - an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\n * - `inline` opens the panel in the flow, the source's `.touch-device` layout.\n *\n * Colors and the panel's surface come from the suite theme (the source left those to the\n * consumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\n * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\n * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\n * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\n * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event — plus\n * `mega` and `open-on-hover` for an okta.com-style mega menu (see `st-mega-menu`).\n *\n * @cssprop --st-mega-menu-max-width - Maximum width of a `mega` panel (default `1400px`).\n * @cssprop --st-mega-menu-inset - Minimum space between a `mega` panel and the header's sides (default `1rem`).\n * @cssprop --st-mega-menu-gap - Space between the header and a `mega` panel (default `12px`).\n * @cssprop --st-mega-menu-radius - Corner radius of a `mega` panel (default `24px`).\n */\n@customElement('st-dropdown')\nexport class Dropdown extends LitElement {\n  /** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */\n  private static openDropdown: Dropdown | null = null;\n\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: inline-block;\n      position: relative;\n      ${fontFamilyStyles}\n    }\n\n    .menu-title {\n      ${buttonResetStyles}\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      min-height: 40px;\n      padding: 12px;\n      gap: 8px;\n      text-align: center;\n      width: fit-content;\n      border-radius: var(--st-radius-sm);\n      /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\n      color: var(--st-nav-color, var(--st-color-text));\n      font-size: 0.875rem;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: background-color 0.3s ease;\n    }\n\n    .menu-title:hover,\n    .menu-title[aria-expanded='true'] {\n      background: var(--st-nav-hover-bg, var(--st-color-hover));\n      color: var(--st-nav-color, var(--st-color-text-strong));\n    }\n\n    :host([active]) .menu-title {\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-accent-text);\n    }\n\n    :host([disabled]) .menu-title {\n      color: var(--st-color-text-muted);\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    .icon {\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .icon[hidden] {\n      display: none;\n    }\n\n    .arrow {\n      display: inline-block;\n      margin-left: 8px;\n      font-size: 0.75rem;\n      transition: transform 0.3s ease;\n    }\n\n    .menu-title[aria-expanded='true'] .arrow {\n      transform: rotate(180deg);\n    }\n\n    .menu-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      z-index: 100;\n      padding: 16px;\n      background: var(--st-color-surface);\n      color: var(--st-color-text);\n      /* The panel has its own surface: items in it never take the bar's nav colours. */\n      --st-nav-color: initial;\n      --st-nav-hover-bg: initial;\n      border: 1px solid var(--st-color-border);\n      border-radius: var(--st-radius-sm);\n      box-shadow: 0 4px 16px var(--st-shadow-color-sm);\n      opacity: 0;\n      visibility: hidden;\n      transform: translateY(-10px);\n      /* visibility flips at once on open (so keyboard focus can move into the panel on the same\n         frame) and only after the 0.3s fade on close. */\n      transition:\n        opacity 0.3s ease,\n        transform 0.3s ease,\n        visibility 0s linear 0.3s;\n      pointer-events: none;\n    }\n\n    .menu-dropdown.align-right {\n      left: auto;\n      right: 0;\n    }\n\n    .menu-dropdown.show {\n      opacity: 1;\n      visibility: visible;\n      transform: translateY(0);\n      pointer-events: auto;\n      transition-delay: 0s;\n    }\n\n    /* Inline: the panel opens in the flow under its trigger and pushes what follows down, instead\n       of floating — the source's .touch-device layout. st-header turns this on for its menu while\n       the hamburger panel is showing. */\n    :host([inline]) {\n      display: block;\n    }\n\n    :host([inline]) .menu-title {\n      width: 100%;\n      justify-content: flex-start;\n    }\n\n    :host([inline]) .arrow {\n      margin-left: auto;\n    }\n\n    :host([inline]) .menu-dropdown {\n      display: none;\n      position: relative;\n      top: auto;\n      left: auto;\n      right: auto;\n      width: 100%;\n      box-sizing: border-box;\n      box-shadow: none;\n      opacity: 1;\n      visibility: visible;\n      transform: none;\n    }\n\n    :host([inline]) .menu-dropdown.show {\n      display: block;\n      pointer-events: auto;\n    }\n\n    /* Mega (okta.com): the panel is a large rounded card floating under the whole bar, centred on\n       the nearest positioned ancestor (st-header) instead of hanging off the trigger — the host\n       stops being the panel's containing block. */\n    :host([mega]:not([inline])) {\n      position: static;\n    }\n\n    :host([mega]:not([inline])) .menu-dropdown {\n      top: calc(100% + var(--st-mega-menu-gap, 12px));\n      left: var(--st-mega-menu-inset, 1rem);\n      right: var(--st-mega-menu-inset, 1rem);\n      max-width: var(--st-mega-menu-max-width, 1400px);\n      margin: 0 auto;\n      padding: 0;\n      max-height: calc(100dvh - var(--st-mega-menu-offset, 96px));\n      overflow-y: auto;\n      border: 0;\n      border-radius: var(--st-mega-menu-radius, 24px);\n      box-shadow: 0 24px 48px var(--st-shadow-color-md);\n    }\n\n    /* The open section's trigger becomes an accent pill — also for a plain dropdown marked \\`bar\\`,\n       so it matches the mega triggers (and st-menu-item variant=\"bar\") beside it. */\n    :host([mega]:not([inline])) .menu-title,\n    :host([bar]:not([inline])) .menu-title {\n      border-radius: 9999px;\n    }\n\n    :host([mega]:not([inline])) .menu-title[aria-expanded='true'],\n    :host([bar]:not([inline])) .menu-title[aria-expanded='true'] {\n      background: var(--st-color-accent);\n      color: var(--st-color-on-solid);\n    }\n\n    .mega-back-bar,\n    .mega-heading {\n      display: none;\n    }\n\n    /* Mega in st-header's hamburger panel: rather than an accordion, the panel slides in over the\n       whole screen with a Back button (okta.com's phone menu). Fixed to the viewport, stacked\n       inside the header's own full-screen layer, so the header's close toggle stays on top. */\n    :host([mega][inline]) .menu-dropdown {\n      display: block;\n      position: fixed;\n      inset: 0;\n      z-index: 1;\n      padding: 0 1.5rem 2rem;\n      overflow-y: auto;\n      border: 0;\n      border-radius: 0;\n      visibility: hidden;\n      transform: translateX(100%);\n      transition:\n        transform 0.3s ease,\n        visibility 0s linear 0.3s;\n    }\n\n    :host([mega][inline]) .menu-dropdown.show {\n      visibility: visible;\n      transform: none;\n      transition-delay: 0s;\n    }\n\n    :host([mega][inline]) .mega-back-bar {\n      display: flex;\n      align-items: center;\n      position: sticky;\n      top: 0;\n      z-index: 1;\n      height: 64px;\n      margin: 0 -1.5rem;\n      padding: 0 1rem;\n      background: inherit;\n      border-bottom: 1px solid var(--st-color-border);\n    }\n\n    .mega-back {\n      ${buttonResetStyles}\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      height: 40px;\n      padding: 0 12px 0 6px;\n      border-radius: var(--st-radius-sm);\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: var(--st-color-text-strong);\n    }\n\n    .mega-back:hover {\n      background: var(--st-color-hover);\n    }\n\n    :host([mega][inline]) .mega-heading {\n      display: block;\n      margin: 1.25rem 0 0.75rem;\n      font-size: 1.375rem;\n      font-weight: 600;\n      color: var(--st-color-text-strong);\n    }\n\n    /* The drill-down replaces the trigger's open state, so the caret points the way it goes. */\n    :host([mega][inline]) .arrow {\n      transform: rotate(-90deg);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .menu-dropdown,\n      .arrow,\n      :host([mega][inline]) .menu-dropdown {\n        transition: none;\n      }\n    }\n  `;\n\n  /** Trigger label text (source: `title`, renamed because `title` is the native tooltip\n   * attribute). Leave empty to show only `slot=\"icon\"`. */\n  @property({ type: String })\n  label = '';\n\n  /** Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in\n   * the source); with none it navigates. */\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String, attribute: 'icon-position' })\n  iconPosition: 'left' | 'right' = 'left';\n\n  /** Inline `width`/`height` of the `slot=\"icon\"` wrapper (source: `iconSize`, default `1.2rem`). */\n  @property({ type: String, attribute: 'icon-size' })\n  iconSize = '1.2rem';\n\n  /** Inline `color` of the `slot=\"icon\"` wrapper (source: `iconColor`). */\n  @property({ type: String, attribute: 'icon-color' })\n  iconColor = 'currentColor';\n\n  /** Which edge of the trigger the panel lines up with. */\n  @property({ type: String })\n  align: 'left' | 'right' = 'left';\n\n  /** `target` of an `href` trigger (source default `_self`). */\n  @property({ type: String })\n  target = '_self';\n\n  /** Extra class(es) on the trigger (source: `className`; a `class` on `st-dropdown` styles the host). */\n  @property({ type: String, attribute: 'trigger-class-name' })\n  triggerClassName = '';\n\n  /** Extra class(es) on the panel (source: `itemGroupClassName`). */\n  @property({ type: String, attribute: 'item-group-class-name' })\n  itemGroupClassName = '';\n\n  /** Unused, as in the source (`itemClassName` is never read there); kept for prop parity. */\n  @property({ type: String, attribute: 'item-class-name' })\n  itemClassName = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Highlights the trigger as the current section (e.g. the current page is one of its items). */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Opens the panel in the flow under the trigger instead of floating over the page (see the\n   * styles). `st-header` sets this on its own menu's dropdowns while its hamburger panel shows. */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /** Whether the panel is showing. Follows user toggles; may also be set from outside. */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Mega-menu panel (okta.com style), typically holding an `st-mega-menu`: the panel spans the\n   * full width of the nearest positioned ancestor — `st-header` — right under it, instead of\n   * hanging off the trigger. In `st-header`'s hamburger layout (`inline`) it slides in over the\n   * screen with a Back button rather than opening as an accordion. A click inside the panel only\n   * closes it when it lands on a link.\n   */\n  @property({ type: Boolean, reflect: true })\n  mega = false;\n\n  /** Styles a non-`mega` trigger like a mega one — a pill that turns solid accent while open — so\n   * a plain dropdown (e.g. \"+ New\") lines up with mega triggers in the same header bar. */\n  @property({ type: Boolean, reflect: true })\n  bar = false;\n\n  /** Opens the panel while a mouse hovers the trigger or panel (touch and keyboard still click). Off while `inline`. */\n  @property({ type: Boolean, attribute: 'open-on-hover' })\n  openOnHover = false;\n\n  /** Text of the Back button in the `mega` + `inline` drill-down panel. */\n  @property({ type: String, attribute: 'back-label' })\n  backLabel = 'Back';\n\n  private hoverTimer = 0;\n\n  /** When hover last opened the panel — a click right after that keeps it open instead of toggling it shut. */\n  private hoverOpenedAt = 0;\n\n  /** Whether the default slot has content — the source's `children` check. */\n  @state() private hasContent = false;\n\n  /** Whether `slot=\"icon\"` has content. */\n  @state() private hasIcon = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('mousedown', this.closeOnOutsideMouseDown);\n    window.addEventListener('keydown', this.closeOnEscape);\n    this.addEventListener('pointerenter', this.onPointerEnter);\n    this.addEventListener('pointerleave', this.onPointerLeave);\n  }\n\n  disconnectedCallback(): void {\n    document.removeEventListener('mousedown', this.closeOnOutsideMouseDown);\n    window.removeEventListener('keydown', this.closeOnEscape);\n    this.removeEventListener('pointerenter', this.onPointerEnter);\n    this.removeEventListener('pointerleave', this.onPointerLeave);\n    clearTimeout(this.hoverTimer);\n    if (Dropdown.openDropdown === this) Dropdown.openDropdown = null;\n    super.disconnectedCallback();\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n    if (!changed.has('open')) return;\n    if (this.open) {\n      const previous = Dropdown.openDropdown;\n      Dropdown.openDropdown = this;\n      if (previous && previous !== this) previous.setOpen(false);\n    } else if (Dropdown.openDropdown === this) {\n      Dropdown.openDropdown = null;\n    }\n  }\n\n  private setOpen(open: boolean): void {\n    if (this.open === open) return;\n    this.open = open;\n    this.dispatchEvent(new CustomEvent<DropdownToggleEventDetail>('dropdown-toggle', { detail: { open }, bubbles: true, composed: true }));\n  }\n\n  private hovers(event: PointerEvent): boolean {\n    return this.openOnHover && !this.inline && !this.disabled && this.hasContent && event.pointerType === 'mouse';\n  }\n\n  /** Short delays so a pointer crossing the gap between trigger and panel doesn't close it. */\n  private onPointerEnter = (event: PointerEvent): void => {\n    if (!this.hovers(event)) return;\n    clearTimeout(this.hoverTimer);\n    this.hoverTimer = window.setTimeout(() => {\n      if (!this.open) this.hoverOpenedAt = Date.now();\n      this.setOpen(true);\n    }, 80);\n  };\n\n  private onPointerLeave = (event: PointerEvent): void => {\n    if (!this.hovers(event)) return;\n    clearTimeout(this.hoverTimer);\n    this.hoverTimer = window.setTimeout(() => this.setOpen(false), 200);\n  };\n\n  private onBackClick = (event: Event): void => {\n    event.stopPropagation();\n    this.setOpen(false);\n    this.trigger()?.focus();\n  };\n\n  private closeOnOutsideMouseDown = (event: Event): void => {\n    if (this.open && !event.composedPath().includes(this)) this.setOpen(false);\n  };\n\n  private closeOnEscape = (event: KeyboardEvent): void => {\n    if (!this.open || event.key !== 'Escape') return;\n    const focusWasInside = event.composedPath().includes(this);\n    this.setOpen(false);\n    if (focusWasInside) this.trigger()?.focus();\n  };\n\n  private trigger(): HTMLElement | null {\n    return this.renderRoot.querySelector<HTMLElement>('.menu-title');\n  }\n\n  /** Keyboard-reachable entries in the panel, in order: menu items (they delegate focus to their\n   * own link) plus any plain links/buttons/tabbable elements a caller slots in. */\n  private panelItems(): HTMLElement[] {\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('.menu-dropdown slot');\n    if (!slot) return [];\n    const selector =\n      'st-menu-item, st-menu-grid-item, st-mega-menu-feature, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n    const items: HTMLElement[] = [];\n    for (const el of slot.assignedElements({ flatten: true })) {\n      if (el.matches(selector)) items.push(el as HTMLElement);\n      items.push(...Array.from(el.querySelectorAll<HTMLElement>(selector)));\n    }\n    return items;\n  }\n\n  /** Moves focus into the panel once it has become visible (it is `visibility: hidden` until the\n   * `show` class lands, and hidden elements can't take focus). */\n  private focusItem(pick: (items: HTMLElement[]) => HTMLElement | undefined): void {\n    void this.updateComplete.then(() => pick(this.panelItems())?.focus());\n  }\n\n  /** Enter/Space/ArrowDown open the panel and focus its first entry; ArrowUp its last. */\n  private onTitleKeyDown = (event: KeyboardEvent): void => {\n    if (!this.hasContent || this.disabled) return;\n    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.setOpen(true);\n      this.focusItem((items) => items[0]);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.setOpen(true);\n      this.focusItem((items) => items[items.length - 1]);\n    }\n  };\n\n  /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */\n  private onPanelKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Tab') {\n      this.setOpen(false);\n      return;\n    }\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n    const items = this.panelItems();\n    if (items.length === 0) return;\n    event.preventDefault();\n    event.stopPropagation();\n    const path = event.composedPath();\n    const current = items.findIndex((item) => path.includes(item));\n    const last = items.length - 1;\n    const next =\n      event.key === 'Home'\n        ? 0\n        : event.key === 'End'\n          ? last\n          : event.key === 'ArrowDown'\n            ? current < 0 || current === last ? 0 : current + 1\n            : current <= 0 ? last : current - 1;\n    items[next].focus();\n  };\n\n  private onTitleClick = (event: Event): void => {\n    event.stopPropagation();\n    if (!this.hasContent) return;\n    event.preventDefault();\n    clearTimeout(this.hoverTimer);\n    if (this.open && Date.now() - this.hoverOpenedAt < 400) return;\n    this.setOpen(!this.open);\n  };\n\n  /** A click anywhere inside the panel closes it, as in the source — for `mega`, only a click on a\n   * link: a big panel has headings and gaps, and a click there shouldn't also close st-header's\n   * hamburger layer. */\n  private onPanelClick = (event: Event): void => {\n    if (this.mega && !event.composedPath().some((node) => node instanceof HTMLAnchorElement)) {\n      event.stopPropagation();\n      return;\n    }\n    this.setOpen(false);\n  };\n\n  private onContentSlotChange = (event: Event): void => {\n    this.hasContent = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).some(\n      (node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim()\n    );\n  };\n\n  private onIconSlotChange = (event: Event): void => {\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  render() {\n    const icon = html`<span\n      class=\"icon ${this.iconPosition === 'left' ? 'icon-left' : 'icon-right'}\"\n      ?hidden=${!this.hasIcon}\n      style=\"width:${this.iconSize};height:${this.iconSize};color:${this.iconColor}\"\n      ><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot\n    ></span>`;\n    const titleContent = html`\n      ${this.iconPosition === 'left' ? icon : nothing} ${this.label ? html`<span part=\"label\">${this.label}</span>` : nothing}\n      ${this.iconPosition === 'right' ? icon : nothing}\n      ${this.hasContent ? html`<span class=\"arrow\" part=\"caret\" aria-hidden=\"true\">▼</span>` : nothing}\n    `;\n    const titleClass = `menu-title ${this.triggerClassName} ${this.open ? 'active' : ''}`;\n\n    return html`\n      <div class=\"menu\" part=\"menu\">\n        ${this.href\n          ? html`\n              <a\n                part=\"trigger\"\n                class=${titleClass}\n                href=${this.href}\n                target=${this.target}\n                aria-haspopup=${this.hasContent ? 'true' : 'false'}\n                aria-expanded=${this.open}\n                aria-disabled=${this.disabled ? 'true' : nothing}\n                @click=${this.onTitleClick}\n                @keydown=${this.onTitleKeyDown}\n              >\n                ${titleContent}\n              </a>\n            `\n          : html`\n              <button\n                part=\"trigger\"\n                class=${titleClass}\n                type=\"button\"\n                aria-haspopup=\"true\"\n                aria-expanded=${this.open}\n                ?disabled=${this.disabled}\n                @click=${this.onTitleClick}\n                @keydown=${this.onTitleKeyDown}\n              >\n                ${titleContent}\n              </button>\n            `}\n        <div\n          part=\"panel\"\n          class=\"menu-dropdown align-${this.align} ${this.itemGroupClassName} ${this.open ? 'show' : ''}\"\n          role=\"menu\"\n          @click=${this.onPanelClick}\n          @keydown=${this.onPanelKeyDown}\n        >\n          ${this.mega\n            ? html`\n                <div class=\"mega-back-bar\" part=\"back-bar\">\n                  <button type=\"button\" class=\"mega-back\" part=\"back\" @click=${this.onBackClick}>\n                    ${chevronIcon('left', 16)} ${this.backLabel}\n                  </button>\n                </div>\n                ${this.label ? html`<p class=\"mega-heading\" part=\"mobile-heading\">${this.label}</p>` : nothing}\n              `\n            : nothing}\n          <slot @slotchange=${this.onContentSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-MW43OS47.js → chunk-MSSH3HFK.js}

@@ -2,7 +2,7 @@ import {
   buttonResetStyles,
   controlBaseStyles,
   rootFontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -202,4 +202,4 @@ CookieConsent = __decorateClass([
 export {
   CookieConsent
 };
-//# sourceMappingURL=chunk-MW43OS47.js.map
+//# sourceMappingURL=chunk-MSSH3HFK.js.map

package/dist/chunk-MSSH3HFK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cookie-consent/CookieConsent.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport type { CookieConsentEventDetail, CookieConsentStatus } from './CookieConsentEvents';\n\nconst DEFAULT_STORAGE_KEY = 'sankhya_ui_cookie_consent';\n\n/**\n * Fixed bottom consent bar. The source read/wrote consent through a React `UserContext`; here the\n * element persists the choice itself in localStorage (`storage-key`, default the source's\n * `sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice\n * exists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The\n * default slot replaces the message text.\n *\n * @cssprop --st-cookie-consent-padding - Overrides the bar's padding.\n */\n@customElement('st-cookie-consent')\nexport class CookieConsent extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    @keyframes st-cookie-slide-up {\n      from {\n        transform: translateY(100%);\n      }\n      to {\n        transform: translateY(0);\n      }\n    }\n\n    :host {\n      position: fixed;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      box-sizing: border-box;\n      z-index: 9999;\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-16);\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-cookie-consent-padding instead. */\n      padding: var(--st-cookie-consent-padding, var(--st-space-24)) !important;\n      background: var(--st-color-surface);\n      color: var(--st-color-text);\n      border-top: 1px solid var(--st-color-border);\n      box-shadow: 0 -4px 10px var(--st-shadow-color-sm);\n      animation: st-cookie-slide-up 0.3s ease-out;\n      ${rootFontFamilyStyles}\n    }\n\n    .content {\n      flex: 1;\n    }\n\n    .message {\n      margin: 0;\n      font-size: var(--st-text-md);\n      line-height: 1.5;\n    }\n\n    .link {\n      color: var(--st-color-accent-text);\n      text-decoration: underline;\n      margin-left: var(--st-space-4);\n    }\n\n    .link:hover {\n      text-decoration: none;\n    }\n\n    .actions {\n      display: flex;\n      gap: var(--st-space-12);\n      flex-shrink: 0;\n    }\n\n    .btn {\n      ${buttonResetStyles}\n      padding: var(--st-space-8) var(--st-space-16);\n      border: 1px solid transparent;\n      border-radius: var(--st-radius-xs);\n      font-weight: var(--st-font-weight-medium);\n      font-size: var(--st-text-md);\n      transition:\n        background-color 0.2s ease,\n        color 0.2s ease;\n    }\n\n    .accept {\n      background: var(--st-button-primary-bg);\n      color: var(--st-button-primary-color);\n    }\n\n    .accept:hover {\n      opacity: 0.9;\n    }\n\n    .refuse {\n      border-color: var(--st-color-border);\n      color: var(--st-color-text-muted);\n    }\n\n    .refuse:hover {\n      background: var(--st-color-hover);\n      color: var(--st-color-text-strong);\n    }\n\n    @media (min-width: 768px) {\n      :host {\n        flex-direction: row;\n        align-items: center;\n        justify-content: space-between;\n        padding: var(--st-cookie-consent-padding, var(--st-space-16) var(--st-space-32)) !important;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host {\n        animation: none;\n      }\n      .btn {\n        transition: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  message = '';\n\n  @property({ type: String, attribute: 'accept-button-text' })\n  acceptButtonText = 'Accept';\n\n  @property({ type: String, attribute: 'refuse-button-text' })\n  refuseButtonText = 'Refuse';\n\n  @property({ type: String, attribute: 'privacy-policy-link' })\n  privacyPolicyLink = '';\n\n  @property({ type: String, attribute: 'privacy-policy-text' })\n  privacyPolicyText = 'Privacy Policy';\n\n  @property({ type: String, attribute: 'storage-key' })\n  storageKey = DEFAULT_STORAGE_KEY;\n\n  /** The stored choice, or `null` while undecided (the bar is only shown then). */\n  @state() private consent: CookieConsentStatus | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.consent = this.readStored();\n  }\n\n  private readStored(): CookieConsentStatus | null {\n    try {\n      const saved = localStorage.getItem(this.storageKey);\n      return saved === 'accepted' || saved === 'refused' ? saved : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private choose(status: CookieConsentStatus): void {\n    this.consent = status;\n    try {\n      localStorage.setItem(this.storageKey, status);\n    } catch {\n      // Storage unavailable (private mode, blocked): the choice just doesn't persist.\n    }\n    this.dispatchEvent(\n      new CustomEvent<CookieConsentEventDetail>(status === 'accepted' ? 'cookie-consent-accept' : 'cookie-consent-refuse', {\n        detail: { status },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  render() {\n    if (this.consent !== null) return nothing;\n    return html`\n      <div class=\"content\" part=\"content\">\n        <p class=\"message\" part=\"message\">\n          <slot>\n            ${this.message || 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.'}\n            ${this.privacyPolicyLink\n              ? html`<a class=\"link\" part=\"link\" href=${this.privacyPolicyLink} target=\"_blank\" rel=\"noopener noreferrer\">${this.privacyPolicyText}</a>`\n              : nothing}\n          </slot>\n        </p>\n      </div>\n      <div class=\"actions\" part=\"actions\">\n        <button class=\"btn refuse\" part=\"refuse\" type=\"button\" @click=${() => this.choose('refused')}>${this.refuseButtonText}</button>\n        <button class=\"btn accept\" part=\"accept\" type=\"button\" @click=${() => this.choose('accepted')}>${this.acceptButtonText}</button>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-DQHMJZ6X.js → chunk-R5G6KFTJ.js}

@@ -1,10 +1,10 @@
 import {
   arrowUpRightIcon
-} from "./chunk-PB7ZPPLP.js";
+} from "./chunk-WTD2YIAA.js";
 import {
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -24,6 +24,7 @@ var MenuItem = class extends LitElement {
     this.showDescription = true;
     this.target = "_self";
     this.variant = "default";
+    this.iconSize = "";
     this.hasIcon = false;
     this.onIconSlotChange = (event) => {
       this.hasIcon = event.target.assignedNodes({ flatten: true }).length > 0;
@@ -60,7 +61,13 @@ var MenuItem = class extends LitElement {
         rel=${this.target === "_blank" ? "noopener noreferrer" : nothing}
         @click=${this.onClick}
       >
-        <span class="menu-item-icon" part="icon" ?hidden=${!this.hasIcon}><slot name="icon" @slotchange=${this.onIconSlotChange}></slot></span>
+        <span
+          class="menu-item-icon"
+          part="icon"
+          ?hidden=${!this.hasIcon}
+          style=${this.iconSize ? `--st-menu-item-icon-size: ${this.iconSize}` : nothing}
+          ><slot name="icon" @slotchange=${this.onIconSlotChange}></slot
+        ></span>
         <span class="menu-item-content" part="content">
           <span class="menu-item-header" part="header">
             <span part="title" class="menu-item-title"
@@ -166,8 +173,8 @@ MenuItem.styles = css`
     }
 
     .menu-item-icon ::slotted(*) {
-      width: 16px;
-      height: 16px;
+      width: var(--st-menu-item-icon-size, 16px);
+      height: var(--st-menu-item-icon-size, 16px);
     }
 
     .menu-item-content {
@@ -222,8 +229,8 @@ MenuItem.styles = css`
     }
 
     .menu-item.compact .menu-item-icon ::slotted(*) {
-      width: 14px;
-      height: 14px;
+      width: var(--st-menu-item-icon-size, 14px);
+      height: var(--st-menu-item-icon-size, 14px);
     }
 
     .menu-item.compact .menu-item-title {
@@ -371,6 +378,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], MenuItem.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, attribute: "icon-size" })
+], MenuItem.prototype, "iconSize", 2);
 __decorateClass([
   state()
 ], MenuItem.prototype, "hasIcon", 2);
@@ -381,4 +391,4 @@ MenuItem = __decorateClass([
 export {
   MenuItem
 };
-//# sourceMappingURL=chunk-DQHMJZ6X.js.map
+//# sourceMappingURL=chunk-R5G6KFTJ.js.map

package/dist/chunk-R5G6KFTJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-item/MenuItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { arrowUpRightIcon } from '../shared/icons';\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MenuItemSelectEventDetail } from './MenuItemEvents';\n\n/**\n * A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\n * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\n * port of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\n * markup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\n * hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\n * in. Colors come from the suite theme rather than per-item utility classes.\n *\n * Renders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\n * before navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\n * source used react-router's `Link` here; the suite apps have no router).\n *\n * @slot icon - The row's icon, sized to `icon-size` (16px, or 14px when `compact`).\n * @cssprop --st-menu-item-icon-size - Width and height of the slotted icon; `icon-size` sets it.\n */\n@customElement('st-menu-item')\nexport class MenuItem extends LitElement {\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n    }\n\n    @keyframes st-menu-item-badge-pop {\n      from {\n        transform: scale(0);\n      }\n      70% {\n        transform: scale(1.12);\n      }\n      to {\n        transform: scale(1);\n      }\n    }\n\n    @keyframes st-menu-item-fade-in {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      padding: 12px 16px;\n      font-size: 0.875rem;\n      text-decoration: none;\n      /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\n      color: var(--st-nav-color, var(--st-color-text));\n      border-radius: 6px;\n      /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits\n         from a dropdown panel kept it unfocusable for a frame after the panel opened. */\n      transition-property: background-color, color, padding, transform, border-color;\n      transition-duration: 0.15s;\n      transition-timing-function: ease;\n      box-sizing: border-box;\n    }\n\n    /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would\n       spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.\n       Keyboard focus gets the same treatment as hover. */\n    .menu-item:hover,\n    .menu-item:focus-visible {\n      background: var(--st-nav-hover-bg, var(--st-color-hover));\n      color: var(--st-nav-color, var(--st-color-text-strong));\n      padding-left: 20px;\n      transition-duration: 0.1s;\n    }\n\n    .menu-item.compact:hover,\n    .menu-item.compact:focus-visible {\n      padding-left: 16px;\n    }\n\n    .menu-item:active {\n      transform: scale(0.99);\n      transition-duration: 0.1s;\n    }\n\n    .menu-item.active {\n      background-color: var(--st-color-accent-subtle);\n      color: var(--st-color-accent-text);\n      border-left: 4px solid var(--st-color-accent);\n    }\n\n    .menu-item-icon {\n      display: flex;\n      flex-shrink: 0;\n      margin-top: 2px;\n      transition: transform 0.2s ease;\n    }\n\n    .menu-item-icon:hover {\n      transform: rotate(5deg);\n    }\n\n    .menu-item-icon[hidden] {\n      display: none;\n    }\n\n    .menu-item-icon ::slotted(*) {\n      width: var(--st-menu-item-icon-size, 16px);\n      height: var(--st-menu-item-icon-size, 16px);\n    }\n\n    .menu-item-content {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .menu-item-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px;\n    }\n\n    .menu-item-title {\n      font-weight: 500;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .menu-item-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 20px;\n      height: 20px;\n      padding: 0 6px;\n      font-size: 0.75rem;\n      font-weight: 500;\n      border-radius: 9999px;\n      flex-shrink: 0;\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-accent-text);\n      animation: st-menu-item-badge-pop 0.35s ease-out;\n    }\n\n    .menu-item-description {\n      display: -webkit-box;\n      margin: 4px 0 0;\n      font-size: 0.75rem;\n      color: var(--st-color-text-muted);\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      line-height: 1.4;\n      animation: st-menu-item-fade-in 0.2s ease;\n    }\n\n    .menu-item.compact {\n      padding: 8px 12px;\n      gap: 8px;\n    }\n\n    .menu-item.compact .menu-item-icon ::slotted(*) {\n      width: var(--st-menu-item-icon-size, 14px);\n      height: var(--st-menu-item-icon-size, 14px);\n    }\n\n    .menu-item.compact .menu-item-title {\n      font-size: 0.75rem;\n    }\n\n    .menu-item.compact .menu-item-description {\n      font-size: 0.75rem;\n    }\n\n    /* link: a plain text link (okta.com mega-menu columns) — no box, no nudge, the badge right\n       after the title, long titles wrap. */\n    .menu-item.link {\n      padding: 7px 0;\n      gap: 10px;\n      font-size: 0.9375rem;\n      color: var(--st-nav-color, var(--st-color-text));\n    }\n\n    .menu-item.link:hover,\n    .menu-item.link:focus-visible {\n      padding-left: 0;\n      background: transparent;\n      color: var(--st-nav-color, var(--st-color-text-strong));\n    }\n\n    .menu-item.link:hover .menu-item-title,\n    .menu-item.link:focus-visible .menu-item-title {\n      text-decoration: underline;\n      text-underline-offset: 4px;\n    }\n\n    .menu-item.link:active {\n      transform: none;\n    }\n\n    .menu-item.link.active {\n      border-left: 0;\n      background: transparent;\n      font-weight: 600;\n    }\n\n    .menu-item.link .menu-item-header {\n      justify-content: flex-start;\n    }\n\n    .menu-item.link .menu-item-title {\n      white-space: normal;\n      font-weight: 400;\n    }\n\n    .menu-item.link .menu-item-description {\n      margin-top: 2px;\n      font-size: 0.8125rem;\n    }\n\n    /* bar: a top-level item in a header bar next to mega st-dropdowns (e.g. \"Dashboard\" beside\n       \"Masters ▼\") — the same pill, size and active look as their triggers, so the row reads as\n       one set. Wins over compact (declared after it). */\n    .menu-item.bar {\n      align-items: center;\n      min-height: 40px;\n      padding: 12px;\n      gap: 8px;\n      border-radius: 9999px;\n      white-space: nowrap;\n    }\n\n    /* Hover fills like a mega trigger opening on hover. */\n    .menu-item.bar:hover,\n    .menu-item.bar:focus-visible {\n      padding-left: 12px;\n      background: var(--st-color-accent);\n      color: var(--st-color-on-solid);\n    }\n\n    .menu-item.bar.active {\n      border-left: 0;\n    }\n\n    .menu-item.bar .menu-item-icon {\n      margin-top: 0;\n    }\n\n    .menu-item.bar .menu-item-title {\n      font-size: 0.875rem;\n      font-weight: 400;\n    }\n\n    .external {\n      display: inline-flex;\n      margin-left: 3px;\n      vertical-align: 0.05em;\n    }\n\n    .menu-item.no-description {\n      align-items: center;\n    }\n\n    .menu-item.no-description .menu-item-icon {\n      margin-top: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .menu-item,\n      .menu-item-icon {\n        transition: none;\n      }\n\n      .menu-item:active,\n      .menu-item-icon:hover {\n        transform: none;\n      }\n\n      .menu-item-badge,\n      .menu-item-description {\n        animation: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none. */\n  @property({ type: String })\n  badge = '';\n\n  /** Highlights this row as the current page (source: `isActive`). */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\n  @property({ type: Boolean, attribute: 'show-description' })\n  showDescription = true;\n\n  /** `target` for the `<a>` (source default `_self`). */\n  @property({ type: String })\n  target = '_self';\n\n  /** `default` (a row with a hover box), `link` (a plain text link, as in `st-mega-menu-column`;\n   * marked with an arrow when it opens a new tab) or `bar` (a top-level item in a header bar,\n   * shaped like a mega `st-dropdown`'s trigger pill so it lines up with the dropdowns beside it). */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'link' | 'bar' = 'default';\n\n  /** Size of the slotted icon, any CSS length (e.g. `36px`); empty keeps 16px (14px when `compact`). */\n  @property({ type: String, attribute: 'icon-size' })\n  iconSize = '';\n\n  /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\n  @state() private hasIcon = false;\n\n  private onIconSlotChange = (event: Event): void => {\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  private onClick = (event: MouseEvent): void => {\n    const selectEvent = new CustomEvent<MenuItemSelectEventDetail>('menu-item-select', {\n      detail: { href: this.href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  };\n\n  render() {\n    const showDescription = !!this.description && this.showDescription;\n    const link = this.variant === 'link';\n    const classes = [\n      'menu-item',\n      link ? 'link' : '',\n      this.variant === 'bar' ? 'bar' : '',\n      this.active ? 'active' : '',\n      this.compact ? 'compact' : '',\n      showDescription ? '' : 'no-description'\n    ]\n      .filter(Boolean)\n      .join(' ');\n    const external = link && this.target === '_blank';\n    return html`\n      <a\n        part=\"item\"\n        class=${classes}\n        href=${this.href}\n        target=${this.target}\n        rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n        @click=${this.onClick}\n      >\n        <span\n          class=\"menu-item-icon\"\n          part=\"icon\"\n          ?hidden=${!this.hasIcon}\n          style=${this.iconSize ? `--st-menu-item-icon-size: ${this.iconSize}` : nothing}\n          ><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot\n        ></span>\n        <span class=\"menu-item-content\" part=\"content\">\n          <span class=\"menu-item-header\" part=\"header\">\n            <span part=\"title\" class=\"menu-item-title\"\n              >${this.title}${external ? html`<span class=\"external\">${arrowUpRightIcon(11)}</span>` : nothing}</span\n            >\n            ${this.badge ? html`<span part=\"badge\" class=\"menu-item-badge\">${this.badge}</span>` : nothing}\n          </span>\n          ${showDescription ? html`<p part=\"description\" class=\"menu-item-description\">${this.description}</p>` : nothing}\n        </span>\n      </a>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,UAAU,aAAa;AAsBxC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAkRL,iBAAQ;AAGR,gBAAO;AAGP,uBAAc;AAId,iBAAQ;AAIR,kBAAS;AAGT,mBAAU;AAIV,2BAAkB;AAIlB,kBAAS;AAMT,mBAAsC;AAItC,oBAAW;AAGF,SAAQ,UAAU;AAE3B,SAAQ,mBAAmB,CAAC,UAAuB;AACjD,WAAK,UAAW,MAAM,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,IAC7F;AAEA,SAAQ,UAAU,CAAC,UAA4B;AAC7C,YAAM,cAAc,IAAI,YAAuC,oBAAoB;AAAA,QACjF,QAAQ,EAAE,MAAM,KAAK,KAAK;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MACd,CAAC;AACD,WAAK,cAAc,WAAW;AAC9B,UAAI,YAAY,iBAAkB,OAAM,eAAe;AAAA,IACzD;AAAA;AAAA,EAEA,SAAS;AACP,UAAM,kBAAkB,CAAC,CAAC,KAAK,eAAe,KAAK;AACnD,UAAM,OAAO,KAAK,YAAY;AAC9B,UAAM,UAAU;AAAA,MACd;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,KAAK,YAAY,QAAQ,QAAQ;AAAA,MACjC,KAAK,SAAS,WAAW;AAAA,MACzB,KAAK,UAAU,YAAY;AAAA,MAC3B,kBAAkB,KAAK;AAAA,IACzB,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AACX,UAAM,WAAW,QAAQ,KAAK,WAAW;AACzC,WAAO;AAAA;AAAA;AAAA,gBAGK,OAAO;AAAA,eACR,KAAK,IAAI;AAAA,iBACP,KAAK,MAAM;AAAA,cACd,KAAK,WAAW,WAAW,wBAAwB,OAAO;AAAA,iBACvD,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKT,CAAC,KAAK,OAAO;AAAA,kBACf,KAAK,WAAW,6BAA6B,KAAK,QAAQ,KAAK,OAAO;AAAA,2CAC7C,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,iBAK/C,KAAK,KAAK,GAAG,WAAW,8BAA8B,iBAAiB,EAAE,CAAC,YAAY,OAAO;AAAA;AAAA,cAEhG,KAAK,QAAQ,kDAAkD,KAAK,KAAK,YAAY,OAAO;AAAA;AAAA,YAE9F,kBAAkB,2DAA2D,KAAK,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA,EAIvH;AACF;AAAA;AAnXa,SAEJ,oBAAoB,EAAE,GAAG,WAAW,mBAAmB,gBAAgB,KAAK;AAFxE,SAIJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyQtB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjRf,SAkRX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApRf,SAqRX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvRf,SAwRX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3Rf,SA4RX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA/R/B,SAgSX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlS/B,SAmSX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,mBAAmB,CAAC;AAAA,GAtS/C,SAuSX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1Sf,SA2SX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAhT9B,SAiTX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GApTvC,SAqTX;AAGiB;AAAA,EAAhB,MAAM;AAAA,GAxTI,SAwTM;AAxTN,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":[]}

package/dist/{chunk-VYON56QO.js → chunk-SMLR736E.js}

@@ -1,6 +1,6 @@
 import {
   controlBaseStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -87,4 +87,4 @@ MenuGrid = __decorateClass([
 export {
   MenuGrid
 };
-//# sourceMappingURL=chunk-VYON56QO.js.map
+//# sourceMappingURL=chunk-SMLR736E.js.map

package/dist/chunk-SMLR736E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-grid/MenuGrid.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles } from '../shared/styles';\n\n/**\n * A responsive grid of `st-menu-grid-item`s — the \"rich\" nav-menu layout (icon + title +\n * description per entry, arranged in columns), typically slotted into `st-dropdown`'s default\n * slot. A 1:1 port of `SankhyaUI`'s React `MenuGrid` (`SankhyaCMS/SankhyaUI/src/components/Menu`):\n * same markup (`.menu-grid-container` > `.menu-grid.columns-N`), gap and breakpoints (768px: 2–4\n * columns → 2; 480px: everything → 1; a 1-column grid stays 1).\n */\n@customElement('st-menu-grid')\nexport class MenuGrid extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n    }\n\n    .menu-grid-container {\n      width: 100%;\n    }\n\n    .menu-grid {\n      display: grid;\n      gap: 12px;\n    }\n\n    .menu-grid.columns-1 {\n      grid-template-columns: repeat(1, 1fr);\n    }\n\n    .menu-grid.columns-2 {\n      grid-template-columns: repeat(2, 1fr);\n    }\n\n    .menu-grid.columns-3 {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    .menu-grid.columns-4 {\n      grid-template-columns: repeat(4, 1fr);\n    }\n\n    @media (max-width: 768px) {\n      .menu-grid.columns-2,\n      .menu-grid.columns-3,\n      .menu-grid.columns-4 {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 480px) {\n      .menu-grid.columns-1,\n      .menu-grid.columns-2,\n      .menu-grid.columns-3,\n      .menu-grid.columns-4 {\n        grid-template-columns: 1fr;\n      }\n    }\n  `;\n\n  /** Number of columns at full width (1–4, same as the source component's `columns-N` classes). */\n  @property({ type: Number })\n  columns = 3;\n\n  /** Extra class(es) appended to the inner grid element — the source component's `gridClassName`.\n   * Its outer `className` is the host element itself here: set a `class` attribute on `st-menu-grid`. */\n  @property({ type: String, attribute: 'grid-class-name' })\n  gridClassName = '';\n\n  render() {\n    const columns = Math.min(4, Math.max(1, Math.round(this.columns) || 1));\n    return html`\n      <div class=\"menu-grid-container\" part=\"container\">\n        <div part=\"grid\" class=\"menu-grid columns-${columns} ${this.gridClassName}\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAYjC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAqDL,mBAAU;AAKV,yBAAgB;AAAA;AAAA,EAEhB,SAAS;AACP,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC;AACtE,WAAO;AAAA;AAAA,oDAEyC,OAAO,IAAI,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/E;AACF;AAtEa,SACJ,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDrB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApDf,SAqDX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GAzD7C,SA0DX;AA1DW,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":[]}

package/dist/{chunk-HGJT24UG.js → chunk-VWS53WY4.js}

@@ -2,12 +2,12 @@ import {
   ctaLinkStyles,
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-3VE6VFJ4.js";
+} from "./chunk-FZ36KL73.js";
 import {
   buttonResetStyles,
   controlBaseStyles,
   rootFontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -154,4 +154,4 @@ PromoBanner = __decorateClass([
 export {
   PromoBanner
 };
-//# sourceMappingURL=chunk-HGJT24UG.js.map
+//# sourceMappingURL=chunk-VWS53WY4.js.map

package/dist/chunk-VWS53WY4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/promo-banner/PromoBanner.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { ctaLinkStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\nimport type { HeroActionEventDetail } from '../hero/HeroEvents';\n\n/**\n * Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a\n * background image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event\n * (detail `{ href }`, empty unless set) in place of `onAction`.\n *\n * @cssprop --st-promo-banner-margin - Overrides the banner's margin.\n * @cssprop --st-promo-banner-padding - Overrides the banner's padding.\n */\n@customElement('st-promo-banner')\nexport class PromoBanner extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      box-sizing: border-box;\n      width: calc(100% - 48px);\n      max-width: var(--st-cms-container-max);\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         margin/padding; override with --st-promo-banner-margin/-padding instead. */\n      margin: var(--st-promo-banner-margin, var(--st-space-40) auto) !important;\n      padding: var(--st-promo-banner-padding, 100px var(--st-space-24)) !important;\n      border-radius: var(--st-space-24);\n      background-color: var(--st-color-text-strong);\n      background-size: cover;\n      background-position: center;\n      color: var(--st-color-on-solid);\n      text-align: center;\n      ${rootFontFamilyStyles}\n    }\n\n    :host([inverted]) {\n      background-color: var(--st-color-subtle);\n      color: var(--st-color-text-strong);\n    }\n\n    .container {\n      max-width: 800px;\n      margin: 0 auto;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--st-space-32);\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      color: inherit;\n      margin: 0;\n      letter-spacing: -0.02em;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      color: inherit;\n      opacity: 0.8;\n      margin: 0;\n    }\n\n    .actions {\n      margin-top: var(--st-space-16);\n    }\n\n    .cta {\n      ${buttonResetStyles}\n      ${ctaLinkStyles}\n      border: 1px solid currentColor;\n      color: inherit;\n    }\n\n    .cta:hover {\n      transform: scale(1.05);\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        width: auto;\n        margin: var(--st-promo-banner-margin, var(--st-space-24)) !important;\n        padding: var(--st-promo-banner-padding, 60px var(--st-space-24)) !important;\n        border-radius: var(--st-radius-lg);\n      }\n      .actions,\n      .cta {\n        width: 100%;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .cta {\n        transition: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String, attribute: 'image-src' })\n  imageSrc = '';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  protected willUpdate(): void {\n    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\n  }\n\n  private onAction = (): void => {\n    this.dispatchEvent(\n      new CustomEvent<HeroActionEventDetail>('action', { detail: { href: this.href }, bubbles: true, composed: true })\n    );\n  };\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <h2 class=\"title\" part=\"title\">${this.title}</h2>\n        ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n        <slot></slot>\n        ${this.actionLabel\n          ? html`<div class=\"actions\" part=\"actions\">\n              <button class=\"cta\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAejC,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC;AAAA;AAsFL,iBAAQ;AAGR,oBAAW;AAGX,uBAAc;AAGd,gBAAO;AAGP,oBAAW;AAGX,oBAAW;AAMX,SAAQ,WAAW,MAAY;AAC7B,WAAK;AAAA,QACH,IAAI,YAAmC,UAAU,EAAE,QAAQ,EAAE,MAAM,KAAK,KAAK,GAAG,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,MACjH;AAAA,IACF;AAAA;AAAA,EARU,aAAmB;AAC3B,SAAK,MAAM,kBAAkB,KAAK,WAAW,OAAO,KAAK,UAAU,KAAK,QAAQ,CAAC,MAAM;AAAA,EACzF;AAAA,EAQA,SAAS;AACP,WAAO;AAAA;AAAA,yCAE8B,KAAK,KAAK;AAAA,UACzC,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA;AAAA,UAExF,KAAK,cACH;AAAA,uEAC2D,KAAK,QAAQ,IAAI,KAAK,WAAW;AAAA,sBAE5F,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA/Ha,YACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAiBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWrB,iBAAiB;AAAA,QACjB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BnB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,YAsFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxFf,YAyFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GA3F1C,YA4FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Ff,YA+FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAjGvC,YAkGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApG/B,YAqGX;AArGW,cAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}

package/dist/{chunk-VRRBMOUP.js → chunk-WT4OATGP.js}

@@ -3,12 +3,12 @@ import {
   iconTileStyles,
   reducedMotionStyles,
   sectionTitleStyles
-} from "./chunk-3VE6VFJ4.js";
+} from "./chunk-FZ36KL73.js";
 import {
   controlBaseStyles,
   ctaButtonStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -265,4 +265,4 @@ FeatureSplit = __decorateClass([
 export {
   FeatureSplit
 };
-//# sourceMappingURL=chunk-VRRBMOUP.js.map
+//# sourceMappingURL=chunk-WT4OATGP.js.map

package/dist/chunk-WT4OATGP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/feature-split/FeatureSplit.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { controlBaseStyles, ctaButtonStyles, fontFamilyStyles } from '../shared/styles';\nimport '../markdown';\nimport {\n  cardTitleStyles,\n  iconTileStyles,\n  reducedMotionStyles,\n  sectionTitleStyles,\n} from '../shared/section-styles';\nimport type { FeatureSplitActionEventDetail } from './FeatureSplitEvents';\n\nexport interface FeatureSplitItem {\n  /** Iconify icon name, e.g. `mdi:check`. */\n  icon?: string;\n  title: string;\n  /** Markdown. */\n  description: string;\n}\n\nexport type FeatureSplitImagePosition = 'left' | 'right' | 'top';\n\n/**\n * A title/markdown-subtitle/feature-list block beside (or under) an image.\n *\n * @cssprop --st-feature-split-padding - Overrides the block's padding.\n */\n@customElement('st-feature-split')\nexport class FeatureSplit extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-feature-split-padding instead. */\n      padding: var(--st-feature-split-padding, var(--st-space-24)) !important;\n      background: var(--st-color-page);\n      ${fontFamilyStyles}\n    }\n\n    :host([inverted]) {\n      background: var(--st-color-text-strong);\n    }\n\n    .container {\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: var(--st-space-48);\n      align-items: center;\n    }\n\n    :host([image-position='left']) .container {\n      direction: rtl;\n    }\n\n    :host([image-position='left']) .content {\n      direction: ltr;\n    }\n\n    :host([image-position='top']) .container {\n      grid-template-columns: 1fr;\n      text-align: center;\n    }\n\n    :host([image-position='top']) .content {\n      align-items: center;\n    }\n\n    :host([image-position='top']) .image-wrapper {\n      order: -1;\n      max-width: 800px;\n      margin: 0 auto;\n    }\n\n    .content {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-32);\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      margin: 0;\n    }\n\n    .subtitle {\n      color: var(--st-color-text-muted);\n      font-size: var(--st-text-base);\n      line-height: 1.6;\n    }\n\n    .list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-24);\n      margin-top: var(--st-space-16);\n    }\n\n    .item {\n      display: flex;\n      gap: var(--st-space-16);\n      align-items: flex-start;\n      text-align: left;\n    }\n\n    .icon {\n      ${iconTileStyles}\n      width: var(--st-space-48);\n      height: var(--st-space-48);\n      font-size: 24px;\n    }\n\n    .item-title {\n      ${cardTitleStyles}\n    }\n\n    .item-description {\n      color: var(--st-color-text-muted);\n      font-size: var(--st-text-sm);\n      line-height: 1.5;\n    }\n\n    .action {\n      ${ctaButtonStyles}\n      justify-self: start;\n      padding: var(--st-space-16);\n      border-radius: var(--st-radius-lg);\n    }\n\n    .image-wrapper {\n      width: 100%;\n      height: 100%;\n      min-height: 400px;\n      border-radius: var(--st-space-24);\n      overflow: hidden;\n      box-shadow: 0 20px 40px -12px var(--st-shadow-color-md);\n    }\n\n    .image {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transition: transform 0.5s ease;\n    }\n\n    .image:hover {\n      transform: scale(1.02);\n    }\n\n    :host([inverted]) .title,\n    :host([inverted]) .item-title {\n      color: var(--st-color-on-solid);\n    }\n\n    :host([inverted]) .subtitle,\n    :host([inverted]) .item-description {\n      color: var(--st-color-border);\n    }\n\n    :host([inverted]) .icon {\n      background: var(--st-color-text);\n      color: var(--st-color-border);\n    }\n\n    @media (max-width: 1024px) {\n      .container {\n        gap: var(--st-space-40);\n      }\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        padding: var(--st-feature-split-padding, var(--st-space-48) var(--st-space-24)) !important;\n      }\n\n      .container {\n        grid-template-columns: 1fr;\n        direction: ltr !important;\n      }\n\n      .image-wrapper {\n        min-height: 300px;\n        order: -1;\n      }\n    }\n\n    ${reducedMotionStyles}\n  `;\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  @property({ type: String })\n  title = '';\n\n  /** Markdown. */\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ attribute: false })\n  items: FeatureSplitItem[] = [];\n\n  @property({ type: String, attribute: 'image-src' })\n  imageSrc = '';\n\n  @property({ type: String, attribute: 'image-alt' })\n  imageAlt = '';\n\n  @property({ type: String, attribute: 'image-position', reflect: true })\n  imagePosition: FeatureSplitImagePosition = 'right';\n\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  @property({ type: String })\n  href = '';\n\n  private onAction() {\n    const event = new CustomEvent<FeatureSplitActionEventDetail>('feature-split-action', {\n      detail: { href: this.href },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(event)) window.location.href = this.href;\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"content\" part=\"content\">\n          <h2 class=\"title\" part=\"title\">${this.title}</h2>\n          ${this.subtitle\n            ? html`<div class=\"subtitle\" part=\"subtitle\"><st-markdown .content=${this.subtitle}></st-markdown></div>`\n            : nothing}\n          ${this.items.length > 0\n            ? html`<div class=\"list\" part=\"list\">\n                ${this.items.map(\n                  (item) => html`\n                    <div class=\"item\" part=\"item\">\n                      ${item.icon\n                        ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>`\n                        : nothing}\n                      <div>\n                        <h3 class=\"item-title\" part=\"item-title\">${item.title}</h3>\n                        <div class=\"item-description\" part=\"item-description\">\n                          <st-markdown .content=${item.description}></st-markdown>\n                        </div>\n                      </div>\n                    </div>\n                  `,\n                )}\n              </div>`\n            : nothing}\n          ${this.actionLabel && this.href\n            ? html`<button class=\"action\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>`\n            : nothing}\n        </div>\n        <div class=\"image-wrapper\" part=\"image-wrapper\">\n          <img class=\"image\" part=\"image\" src=${this.imageSrc} alt=${this.imageAlt || this.title} />\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-PB7ZPPLP.js → chunk-WTD2YIAA.js}

@@ -352,4 +352,4 @@ export {
   gearIcon,
   paletteIcon
 };
-//# sourceMappingURL=chunk-PB7ZPPLP.js.map
+//# sourceMappingURL=chunk-WTD2YIAA.js.map

package/dist/chunk-WTD2YIAA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/icons.ts"],"sourcesContent":["import { html } from 'lit';\nimport type { TemplateResult } from 'lit';\n\n/**\n * Every inline SVG icon used across components, centralized so a glyph's\n * path data lives in exactly one place instead of being copy-pasted at each\n * call site. Each icon is a small function returning a Lit `TemplateResult`\n * (not a `css`-style fragment) so callers can size — and, where noted, class\n * — the icon per context while sharing the same markup.\n */\n\nconst FOLDER_ICON_COLOR = 'oklch(0.72 0.09 75)';\n\n/** Filled folder glyph (browse rows/tiles). Fixed 20x16 — folders don't resize per usage. */\nexport function folderIcon(): TemplateResult {\n  return html`\n    <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M0 2a2 2 0 012-2h5l2 2h9a2 2 0 012 2v10a2 2 0 01-2 2H2a2 2 0 01-2-2V2z\" fill=${FOLDER_ICON_COLOR} />\n    </svg>\n  `;\n}\n\n/** Outlined folder glyph (breadcrumb crumb icon). `className` lets the caller hook its own layout class. */\nexport function folderOutlineIcon(size = 11, className = ''): TemplateResult {\n  return html`\n    <svg class=${className} width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M4 4h5l2 2h9v12H4V4z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  `;\n}\n\n/** External-link/\"open\" glyph (open site/library actions in the Templates/Data/Save-location pickers). */\nexport function externalLinkIcon(size = 15): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5M15 4h5v5M20 4l-9 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.8\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  `;\n}\n\n/** Refresh/reload glyph (Templates/Data picker refresh buttons). */\nexport function refreshIcon(size = 15): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M17.65 6.35A7.958 7.958 0 0 0 12 4a8 8 0 1 0 8 8h-2a6 6 0 1 1-6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  `;\n}\n\n/** Clock glyph (the wizard's \"Recent activity\" history trigger button, Steps 1-3). */\nexport function historyIcon(size = 15): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\" />\n      <path d=\"M12 7v5l3.5 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    </svg>\n  `;\n}\n\n/** Trash/delete glyph (clear-all button in the selected-chips summary badge). */\nexport function trashIcon(size = 15): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M4 4h2l1.2 12.4A2 2 0 0 0 9.2 18.2h8.1a2 2 0 0 0 1.98-1.7L20.5 8H6.5\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"10\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\n      <circle cx=\"17\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\n    </svg>\n  `;\n}\n\n/** Chevron glyph (pager prev/next buttons, the select trigger's caret). */\nexport function chevronIcon(direction: 'left' | 'right' | 'down', size = 14): TemplateResult {\n  const d = { left: 'M15 18l-6-6 6-6', right: 'M9 6l6 6-6 6', down: 'M6 9l6 6 6-6' }[direction];\n\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=${d} stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    </svg>\n  `;\n}\n\n/** Up-right arrow glyph (marks a link that leaves the site — mega-menu links and buttons). */\nexport function arrowUpRightIcon(size = 12): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M7 17L17 7M8 7h9v9\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    </svg>\n  `;\n}\n\n/** Plus glyph (\"New folder\" action button). */\nexport function plusIcon(size = 13): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M12 4v16M4 12h16\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" />\n    </svg>\n  `;\n}\n\n/** Cards-view glyph (2x2 grid — view-toggle button). */\nexport function cardsViewIcon(size = 15): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <rect x=\"1\" y=\"1\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n      <rect x=\"9\" y=\"1\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n      <rect x=\"1\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n      <rect x=\"9\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\n    </svg>\n  `;\n}\n\n/** Checkmark glyph (completed-step marker in the step indicator). */\nexport function checkIcon(size = 14): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 12l5 5L20 6\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    </svg>\n  `;\n}\n\n/** SharePoint site glyph (globe — root \"All sites\" browser rows). */\nexport function siteIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\n      <path d=\"M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18\" stroke=\"currentColor\" stroke-width=\"1.6\" />\n    </svg>\n  `;\n}\n\n/** 3x3 dot-grid glyph (bento-menu app-switcher trigger). */\nexport function bentoGridIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path\n        d=\"M16 20h4v-4h-4m0-2h4v-4h-4m-6-2h4V4h-4m6 4h4V4h-4m-6 10h4v-4h-4m-6 4h4v-4H4m0 10h4v-4H4m6 4h4v-4h-4M4 8h4V4H4z\"\n      />\n    </svg>\n  `;\n}\n\n/** List-view glyph (stacked rows — view-toggle button). */\nexport function listViewIcon(size = 15): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <rect x=\"1\" y=\"2\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\n      <rect x=\"6\" y=\"2.5\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\n      <rect x=\"1\" y=\"6.5\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\n      <rect x=\"6\" y=\"7\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\n      <rect x=\"1\" y=\"11\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\n      <rect x=\"6\" y=\"11.5\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\n    </svg>\n  `;\n}\n\n/**\n * A small set of generic domain icons for `st-menu-grid-item`'s icon slot (nav \"mega menu\"\n * entries — sales/purchase/accounting/settings items) — deliberately simple line glyphs rather\n * than pixel-perfect illustrations, same fidelity level as the icons above.\n */\n\n/** Shopping-cart glyph (sales/orders). */\nexport function cartIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M3 4h2l2.4 12.4A2 2 0 0 0 9.36 18h8.2a2 2 0 0 0 1.96-1.6L21 8H6\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"10\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\n      <circle cx=\"17\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\n    </svg>\n  `;\n}\n\n/** Delivery-truck glyph (purchase orders / receiving). */\nexport function truckIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M2 6h11v10H2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\n      <path d=\"M13 10h4l4 3.5V16h-8z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\n      <circle cx=\"6.5\" cy=\"18\" r=\"1.8\" stroke=\"currentColor\" stroke-width=\"2\" />\n      <circle cx=\"16.5\" cy=\"18\" r=\"1.8\" stroke=\"currentColor\" stroke-width=\"2\" />\n    </svg>\n  `;\n}\n\n/** Package/box glyph (products, inventory). */\nexport function boxIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M12 3l8 4.2v9.6L12 21l-8-4.2V7.2L12 3z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linejoin=\"round\"\n      />\n      <path d=\"M4.2 7.2L12 11l7.8-3.8M12 11v10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\n    </svg>\n  `;\n}\n\n/** Map-pin glyph (stock locations). */\nexport function mapPinIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M12 21s7-6.1 7-11.5A7 7 0 0 0 5 9.5C5 14.9 12 21 12 21z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"12\" cy=\"9.5\" r=\"2.4\" stroke=\"currentColor\" stroke-width=\"2\" />\n    </svg>\n  `;\n}\n\n/** Two-person glyph (partners — customers/vendors/employees). */\nexport function usersIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"9\" cy=\"8\" r=\"3.2\" stroke=\"currentColor\" stroke-width=\"2\" />\n      <path d=\"M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      <path\n        d=\"M16 5.3a3.2 3.2 0 0 1 0 6.2M19 20c0-2.8-2-5.1-4.6-5.8\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  `;\n}\n\n/** Open-book glyph (journals). */\nexport function bookIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M12 5.5c-1.6-1-4-1.5-6-1.5-1 0-2 .1-3 .4v13.6c1-.3 2-.4 3-.4 2 0 4.4.5 6 1.5m0-13.6c1.6-1 4-1.5 6-1.5 1 0 2 .1 3 .4v13.6c-1-.3-2-.4-3-.4-2 0-4.4.5-6 1.5m0-13.6v13.6\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.8\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>\n  `;\n}\n\n/** Document/invoice glyph. */\nexport function documentIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M6 2h9l5 5v15H6V2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\n      <path d=\"M15 2v5h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\n      <path d=\"M9 12h6M9 16h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  `;\n}\n\n/** Receipt glyph, zig-zag bottom edge (credit/debit notes). */\nexport function receiptIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M5 2h14v19l-2.5-1.6L14 21l-2.5-1.6L9 21l-2.5-1.6L5 21V2z\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linejoin=\"round\"\n      />\n      <path d=\"M8 8h8M8 12h8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  `;\n}\n\n/** Percent glyph (taxes). */\nexport function percentIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      <circle cx=\"7\" cy=\"7\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"2\" />\n      <circle cx=\"17\" cy=\"17\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"2\" />\n    </svg>\n  `;\n}\n\n/** Stacked-coins glyph (payment terms). */\nexport function coinsIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <ellipse cx=\"8\" cy=\"7\" rx=\"5.5\" ry=\"3\" stroke=\"currentColor\" stroke-width=\"2\" />\n      <path d=\"M2.5 7v10c0 1.7 2.5 3 5.5 3s5.5-1.3 5.5-3V7\" stroke=\"currentColor\" stroke-width=\"2\" />\n      <path d=\"M2.5 12c0 1.7 2.5 3 5.5 3s5.5-1.3 5.5-3\" stroke=\"currentColor\" stroke-width=\"2\" />\n      <ellipse cx=\"16.5\" cy=\"12\" rx=\"5\" ry=\"2.7\" stroke=\"currentColor\" stroke-width=\"2\" />\n      <path d=\"M11.5 12v5c0 1.5 2.2 2.7 5 2.7s5-1.2 5-2.7v-5\" stroke=\"currentColor\" stroke-width=\"2\" />\n    </svg>\n  `;\n}\n\n/** Padlock glyph (fiscal year closing / lock dates). */\nexport function lockIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\" />\n      <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      <circle cx=\"12\" cy=\"16\" r=\"1.6\" fill=\"currentColor\" />\n    </svg>\n  `;\n}\n\n/**\n * Office file-type glyphs, ported from `PennyIcons` in `@sankhyatronics/sankhya-icons`\n * (FileWordIcon/FileExcelIcon/FilePowerPointIcon) — this package is Lit, so it can't import\n * the React components and carries the same path data instead. Filled, `currentColor`.\n */\nconst FILE_TYPE_ICON_PATHS = {\n  word: 'm19.95 5.54-3.48-3.49A6.96 6.96 0 0 0 11.52 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.48 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-3.28-5.76L15.3 18.9c-.15.61-.68 1.05-1.31 1.09-.63.04-1.21-.32-1.44-.91L12 17.7l-.55 1.38c-.22.56-.75.91-1.34.91h-.1c-.63-.04-1.15-.48-1.31-1.1l-1.41-5.66a1 1 0 0 1 1.94-.48l1 4 .85-2.13a1 1 0 0 1 1.86 0l.84 2.13 1.01-4a1 1 0 0 1 1.94.48Z',\n  excel:\n    'M15.27 13.64 13.3 16l1.97 2.36a1.001 1.001 0 1 1-1.54 1.28L12 17.56l-1.73 2.08a.99.99 0 0 1-.77.36c-.23 0-.45-.08-.64-.23-.42-.35-.48-.98-.13-1.41L10.7 16l-1.97-2.36a1.001 1.001 0 1 1 1.54-1.28L12 14.44l1.73-2.08c.35-.42.98-.48 1.41-.13.42.35.48.98.13 1.41ZM22 10.49V19c0 2.76-2.24 5-5 5H7c-2.76 0-5-2.24-5-5V5c0-2.76 2.24-5 5-5h4.51c1.87 0 3.63.73 4.95 2.05l3.48 3.49a6.96 6.96 0 0 1 2.05 4.95Zm-6.95-7.03c-.32-.32-.67-.59-1.05-.81V7c0 .55.45 1 1 1h4.34c-.22-.38-.49-.73-.81-1.05l-3.48-3.49ZM20 10.48c0-.16 0-.33-.02-.49H15c-1.65 0-3-1.35-3-3V2.02C11.84 2 11.68 2 11.51 2H7C5.35 2 4 3.35 4 5v14c0 1.65 1.35 3 3 3h10c1.65 0 3-1.35 3-3v-8.51Z',\n  powerpoint:\n    'm19.95 5.54-3.49-3.49A6.96 6.96 0 0 0 11.51 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.49 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-10 1c-.55 0-1-.45-1-1v-5c0-1.1.9-2 2-2h1c1.65 0 3 1.35 3 3s-1.35 3-3 3h-1v1c0 .55-.45 1-1 1Zm1-4h1c.55 0 1-.45 1-1s-.45-1-1-1h-1v2Z'\n} as const;\n\n/** Word/Excel/PowerPoint file glyph (the document icon in front of template/file rows). */\nexport function fileTypeIcon(type: keyof typeof FILE_TYPE_ICON_PATHS, size = 24): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path d=${FILE_TYPE_ICON_PATHS[type]} />\n    </svg>\n  `;\n}\n\n/** Hamburger glyph (`st-header`'s mobile nav toggle, closed state). */\nexport function menuIcon(size = 20): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 6h16M4 12h16M4 18h16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  `;\n}\n\n/** X/close glyph (`st-header`'s mobile nav toggle, open state). */\nexport function closeIcon(size = 20): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M5 5l14 14M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n    </svg>\n  `;\n}\n\n/** Gear/cog glyph (company settings). */\nexport function gearIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\" />\n      <path\n        d=\"M12 3v2.2M12 18.8V21M21 12h-2.2M5.2 12H3M18 6l-1.6 1.6M7.6 16.4L6 18M18 18l-1.6-1.6M7.6 7.6L6 6\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n      />\n    </svg>\n  `;\n}\n\n/** Paint-palette glyph (theme/color-scheme switcher). */\nexport function paletteIcon(size = 18): TemplateResult {\n  return html`\n    <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M12 3a9 9 0 1 0 0 18c1.1 0 2-.9 2-2 0-.5-.2-1-.5-1.3-.3-.4-.5-.8-.5-1.2 0-1.1.9-2 2-2h2a4 4 0 0 0 4-4c0-4.4-4-7.5-9-7.5z\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.6\"\n        stroke-linejoin=\"round\"\n      />\n      <circle cx=\"7.5\" cy=\"10.5\" r=\"1.2\" fill=\"currentColor\" />\n      <circle cx=\"11\" cy=\"7\" r=\"1.2\" fill=\"currentColor\" />\n      <circle cx=\"15.5\" cy=\"7.5\" r=\"1.2\" fill=\"currentColor\" />\n      <circle cx=\"17.5\" cy=\"11.5\" r=\"1.2\" fill=\"currentColor\" />\n    </svg>\n  `;\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-5KHI36M5.js → chunk-XWB4CKDU.js}

@@ -2,14 +2,14 @@ import {
   chevronIcon,
   closeIcon,
   menuIcon
-} from "./chunk-PB7ZPPLP.js";
+} from "./chunk-WTD2YIAA.js";
 import {
   BREAKPOINT_TABLET,
   buttonResetStyles,
   controlBaseStyles,
   dropdownPanelStyles,
   rootFontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -57,6 +57,7 @@ var Header = class extends LitElement {
     this.compact = false;
     this.languageMenuOpen = false;
     this.hasUtility = false;
+    this.hasBrandExtra = false;
     /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's
      * own `inline` setting is left alone. */
     this.inlinedDropdowns = /* @__PURE__ */ new Set();
@@ -76,6 +77,10 @@ var Header = class extends LitElement {
         this.inlinedDropdowns.clear();
       }
     };
+    this.onBrandExtraSlotChange = (event) => {
+      this.hasBrandExtra = event.target.assignedElements({ flatten: true }).length > 0;
+      this.evaluateFit();
+    };
     this.onUtilitySlotChange = (event) => {
       this.hasUtility = event.target.assignedElements({ flatten: true }).length > 0;
       this.evaluateFit();
@@ -219,6 +224,7 @@ var Header = class extends LitElement {
   render() {
     return html`
       ${this.renderBrand()}
+      <div class="brand-extra ${this.hasBrandExtra ? "" : "empty"}" part="brand-extra"><slot name="brand-extra" @slotchange=${this.onBrandExtraSlotChange}></slot></div>
 
       <div class="mobile-panel" part="mobile-panel" @click=${() => this.mobileOpen = false}>
         <div class="menu-row" part="menu-row"><slot name="menu" @slotchange=${this.onMenuSlotChange}></slot></div>
@@ -235,7 +241,8 @@ var Header = class extends LitElement {
         aria-expanded=${this.mobileOpen}
         @click=${() => this.mobileOpen = !this.mobileOpen}
       >
-        ${this.mobileOpen ? closeIcon() : menuIcon()}
+        <slot name="menu-icon" ?hidden=${this.mobileOpen}>${menuIcon()}</slot>
+        <slot name="close-icon" ?hidden=${!this.mobileOpen}>${closeIcon()}</slot>
       </button>
     `;
   }
@@ -274,6 +281,21 @@ Header.styles = css`
       z-index: 100;
     }
 
+    /* Toggle icons: a host's slotted icon, else the built-in glyph; only the current state's shows. */
+    .toggle slot {
+      display: contents;
+    }
+
+    .toggle slot[hidden] {
+      display: none;
+    }
+
+    .toggle ::slotted(*) {
+      flex: none;
+      width: var(--st-header-toggle-icon-size, 20px);
+      height: var(--st-header-toggle-icon-size, 20px);
+    }
+
     :host([inverted]) {
       background: var(--st-color-text-strong);
       color: var(--st-color-on-solid);
@@ -366,6 +388,21 @@ Header.styles = css`
       white-space: nowrap;
     }
 
+    /* Optional slot="brand-extra" (e.g. an edition badge) right after the brand. Outside the
+       mobile panel, so it stays beside the logo at every width; no box at all when empty. */
+    .brand-extra {
+      display: flex;
+      align-items: center;
+      gap: var(--st-space-8);
+      flex: none;
+      margin-left: var(--st-space-10);
+      white-space: nowrap;
+    }
+
+    .brand-extra.empty {
+      display: none;
+    }
+
     /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's
        own flex children. Mobile (see below) turns this into the actual overlay box. */
     .mobile-panel {
@@ -658,6 +695,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], Header.prototype, "hasUtility", 2);
+__decorateClass([
+  state()
+], Header.prototype, "hasBrandExtra", 2);
 Header = __decorateClass([
   customElement("st-header")
 ], Header);
@@ -665,4 +705,4 @@ Header = __decorateClass([
 export {
   Header
 };
-//# sourceMappingURL=chunk-5KHI36M5.js.map
+//# sourceMappingURL=chunk-XWB4CKDU.js.map