@sankhyatronics/sankhya-cms 0.0.0-stage → 0.0.9

package/dist/chunk-23IHTBAB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { chevronIcon, closeIcon, menuIcon } from '../shared/icons';\r\nimport { BREAKPOINT_TABLET, buttonResetStyles, controlBaseStyles, dropdownPanelStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { LanguageChangedEventDetail } from './HeaderEvents';\r\n\r\n/**\r\n * The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\r\n * for primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\r\n * middle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\r\n * from `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\r\n * package's Lit conventions and this workspace's actual needs — that source component takes an\r\n * `imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\r\n * `title` is the primary brand prop here and `brand-image-url` is optional, mirroring\r\n * `st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\r\n * deliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\r\n * props — pick whichever fits a given app's header).\r\n *\r\n * Layout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\r\n * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\r\n * source) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\r\n * toggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\r\n * `inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\r\n * (`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\r\n * `BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\r\n * root can only ever assign a given light-DOM child to the *first* slot of a given name.\r\n *\r\n * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\r\n * `language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\r\n * rebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\r\n * as a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\r\n * This component has no translation logic itself; the consuming app owns what a language `code`\r\n * means and which content it re-renders in response.\r\n */\r\n@customElement('st-header')\r\nexport class Header extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: flex;\r\n      align-items: center;\r\n      /* Spacing between brand, menu and utility controls is the rows' own margins (SankhyaUI's\r\n         layout), not a flex gap. */\r\n      gap: 0;\r\n      /* !important on the box-model properties only: a shadow host's own :host rule always loses\r\n       * to ANY rule the consuming page has for the same property on that element, regardless of\r\n       * specificity (see st-footer's own padding/border-top for the same fix). Without\r\n       * box-sizing: border-box pinned here, a page that also sets its own padding on this host\r\n       * (e.g. a p-2 utility class) adds that padding on TOP of the fixed 64px height instead of\r\n       * being absorbed inside it — which is exactly what happens in Template Hub, the one app that\r\n       * doesn't load Tailwind Preflight (Preflight's own box-sizing: border-box reset is what\r\n       * silently keeps every other app's header at the intended 64px). */\r\n      box-sizing: border-box !important;\r\n      padding: 0 2rem !important;\r\n      height: 64px !important;\r\n      background: var(--st-color-surface);\r\n      border-bottom: 1px solid var(--st-color-border) !important;\r\n      ${rootFontFamilyStyles}\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    :host([sticky]) {\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 100;\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background: var(--st-color-text-strong);\r\n      color: var(--st-color-on-solid);\r\n      border-bottom-color: transparent;\r\n    }\r\n\r\n    .brand {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--st-space-10);\r\n      flex: none;\r\n      text-decoration: none;\r\n      color: inherit;\r\n    }\r\n\r\n    .brand-mark {\r\n      width: var(--st-size-28);\r\n      height: var(--st-size-28);\r\n      border-radius: var(--st-radius-sm);\r\n      flex: none;\r\n      object-fit: contain;\r\n    }\r\n\r\n    .brand-title {\r\n      font-size: var(--st-text-xl);\r\n      font-weight: var(--st-font-weight-bold);\r\n      letter-spacing: var(--st-tracking-tight);\r\n      white-space: nowrap;\r\n    }\r\n\r\n    /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's\r\n       own flex children. Mobile (see below) turns this into the actual overlay box. */\r\n    .mobile-panel {\r\n      display: contents;\r\n    }\r\n\r\n    /* Desktop layout from SankhyaUI's Header: the menu starts 4rem after the brand and takes the\r\n       free width; the utility controls sit after a vertical divider. Between 901px and 1200px the\r\n       gaps tighten so the menu still fits down to the 900px hamburger breakpoint. */\r\n    .menu-row {\r\n      flex: 1;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 1.5rem;\r\n      min-width: 0;\r\n      margin-left: 4rem;\r\n    }\r\n\r\n    .utility-row {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 1rem;\r\n      margin-left: 1.5rem;\r\n      padding-left: 1.5rem;\r\n      border-left: 1px solid var(--st-color-border);\r\n    }\r\n\r\n    :host([inverted]) .utility-row {\r\n      border-left-color: currentColor;\r\n    }\r\n\r\n    .utility-row.empty {\r\n      display: none;\r\n    }\r\n\r\n    @media (max-width: 1200px) {\r\n      :host {\r\n        padding: 0 1rem !important;\r\n      }\r\n\r\n      .menu-row {\r\n        margin-left: 0.5rem;\r\n      }\r\n\r\n      .utility-row {\r\n        margin-left: 0.5rem;\r\n        padding-left: 0.5rem;\r\n      }\r\n    }\r\n\r\n    @keyframes st-header-fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    .toggle {\r\n      display: none;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex: none;\r\n      position: relative;\r\n      z-index: 1002;\r\n      width: var(--st-size-32);\r\n      height: var(--st-size-32);\r\n      margin-left: auto;\r\n      padding: 0.5rem;\r\n      border: 0;\r\n      border-radius: var(--st-radius-sm);\r\n      background: transparent;\r\n      color: var(--st-color-text-strong);\r\n      cursor: pointer;\r\n    }\r\n\r\n    .toggle:hover {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    .lang-menu {\r\n      position: relative;\r\n      flex: none;\r\n    }\r\n\r\n    .lang-trigger {\r\n      ${buttonResetStyles}\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--st-space-4);\r\n      height: var(--st-size-32);\r\n      padding: 0 var(--st-space-8);\r\n      border-radius: var(--st-radius-sm);\r\n      font-size: var(--st-text-base);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      color: var(--st-color-text-muted);\r\n    }\r\n\r\n    .lang-trigger:hover {\r\n      background: var(--st-color-hover);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .lang-dropdown {\r\n      ${dropdownPanelStyles}\r\n      min-width: 140px;\r\n    }\r\n\r\n    .lang-option {\r\n      ${buttonResetStyles}\r\n      display: block;\r\n      width: 100%;\r\n      padding: var(--st-space-10) var(--st-space-14);\r\n      font-size: var(--st-text-base);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      text-align: left;\r\n      color: inherit;\r\n    }\r\n\r\n    .lang-option:hover {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    .lang-option.active {\r\n      color: var(--st-color-accent-text);\r\n    }\r\n\r\n    /* Hamburger layout from SankhyaUI's Header: a full-screen layer under the toggle, menu above\r\n       the utility controls, the menu's dropdowns opening in the flow (see syncInlineDropdowns). */\r\n    @media (max-width: ${BREAKPOINT_TABLET}px) {\r\n      :host {\r\n        padding: 0 1rem !important;\r\n      }\r\n\r\n      .mobile-panel {\r\n        display: none;\r\n      }\r\n\r\n      .toggle {\r\n        display: inline-flex;\r\n      }\r\n\r\n      :host([mobile-open]) .mobile-panel {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 2rem;\r\n        position: fixed;\r\n        inset: 0;\r\n        background: var(--st-color-surface);\r\n        padding: 5rem 1.5rem 2rem;\r\n        overflow-y: auto;\r\n        z-index: 1001;\r\n        animation: st-header-fade-in 0.3s ease;\r\n      }\r\n\r\n      :host([mobile-open]) .menu-row,\r\n      :host([mobile-open]) .utility-row {\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        gap: 1.5rem;\r\n        margin-left: 0;\r\n      }\r\n\r\n      :host([mobile-open]) .utility-row {\r\n        padding: 1.5rem 0 0;\r\n        border-left: 0;\r\n        border-top: 1px solid var(--st-color-border);\r\n      }\r\n\r\n      /* Apps usually slot one flex-row wrapper per slot; stack its items as the source does. */\r\n      :host([mobile-open]) ::slotted([slot='menu']),\r\n      :host([mobile-open]) ::slotted([slot='utility']) {\r\n        flex-direction: column !important;\r\n        align-items: stretch !important;\r\n        margin: 0 !important;\r\n      }\r\n    }\r\n\r\n    /* The same collapsed layout, switched on by script when the menu no longer fits the bar at\r\n       desktop width (see evaluateFit) — without it the menu spills over the utility controls. */\r\n    :host([compact]) .mobile-panel {\r\n      display: none;\r\n    }\r\n\r\n    :host([compact]) .toggle {\r\n      display: inline-flex;\r\n    }\r\n\r\n    :host([compact][mobile-open]) .mobile-panel {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 2rem;\r\n      position: fixed;\r\n      inset: 0;\r\n      background: var(--st-color-surface);\r\n      padding: 5rem 1.5rem 2rem;\r\n      overflow-y: auto;\r\n      z-index: 1001;\r\n      animation: st-header-fade-in 0.3s ease;\r\n    }\r\n\r\n    :host([compact][mobile-open]) .menu-row,\r\n    :host([compact][mobile-open]) .utility-row {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      gap: 1.5rem;\r\n      margin-left: 0;\r\n    }\r\n\r\n    :host([compact][mobile-open]) .utility-row {\r\n      padding: 1.5rem 0 0;\r\n      border-left: 0;\r\n      border-top: 1px solid var(--st-color-border);\r\n    }\r\n\r\n    :host([compact][mobile-open]) ::slotted([slot='menu']),\r\n    :host([compact][mobile-open]) ::slotted([slot='utility']) {\r\n      flex-direction: column !important;\r\n      align-items: stretch !important;\r\n      margin: 0 !important;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .mobile-panel {\r\n        animation: none !important;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  /** Optional logo image URL, shown before `title`. Omitted entirely when empty — none of this suite's apps has one today. Matches the source component's `imageSrc` (renamed here to pair with `title`/`logoHref`, since this component's only image use is the brand mark). */\r\n  @property({ type: String, attribute: 'brand-image-url' })\r\n  brandImageUrl = '';\r\n\r\n  /** `alt` text for the brand image — matches the source component's `altText` (default `'Logo'`). */\r\n  @property({ type: String, attribute: 'alt-text' })\r\n  altText = 'Logo';\r\n\r\n  /** Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise. */\r\n  @property({ type: String })\r\n  logoHref = '';\r\n\r\n  /** `target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set. */\r\n  @property({ type: String, attribute: 'logo-target' })\r\n  logoTarget = '_self';\r\n\r\n  /** Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`. */\r\n  @property({ type: String, attribute: 'logo-class-name' })\r\n  logoClassName = '';\r\n\r\n  /** Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\r\n   * source component's `inverted` (from its shared `BaseProps`). */\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  sticky = false;\r\n\r\n  /**\r\n   * Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\r\n   * when empty or when only one language is offered (same convention as `st-app-header`'s\r\n   * `languages`, which this reuses verbatim). This component has no translation logic itself —\r\n   * selecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\r\n   * what `code` actually means and which content it re-renders.\r\n   */\r\n  @property({ attribute: false })\r\n  languages: { code: string; label: string }[] = [];\r\n\r\n  @property({ type: String, attribute: 'current-language-code' })\r\n  currentLanguageCode = '';\r\n\r\n  @property({ type: String, attribute: 'language-menu-label' })\r\n  languageMenuLabel = 'Language';\r\n\r\n  /** Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\n   * the `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\n   * outside. */\r\n  @property({ type: Boolean, reflect: true, attribute: 'mobile-open' })\r\n  mobileOpen = false;\r\n\r\n  /** True while the menu doesn't fit the bar at the current width: the header then shows the same\r\n   * hamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside. */\r\n  @property({ type: Boolean, reflect: true })\r\n  compact = false;\r\n\r\n  @state() private languageMenuOpen = false;\r\n\r\n  /** Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden. */\r\n  @state() private hasUtility = false;\r\n\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */\r\n  private narrowQuery?: MediaQueryList;\r\n\r\n  /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's\r\n   * own `inline` setting is left alone. */\r\n  private inlinedDropdowns = new Set<HTMLElement & { inline: boolean }>();\r\n\r\n  /** While the hamburger layout is on, the dropdowns in the header open in the flow of the\r\n   * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */\r\n  private syncInlineDropdowns = (): void => {\r\n    const collapsed = this.compact || !!this.narrowQuery?.matches;\r\n    const dropdowns = Array.from(this.querySelectorAll('st-dropdown')) as (HTMLElement & { inline: boolean })[];\r\n    if (collapsed) {\r\n      for (const dropdown of dropdowns) {\r\n        if (dropdown.inline) continue;\r\n        dropdown.inline = true;\r\n        this.inlinedDropdowns.add(dropdown);\r\n      }\r\n    } else {\r\n      for (const dropdown of this.inlinedDropdowns) dropdown.inline = false;\r\n      this.inlinedDropdowns.clear();\r\n    }\r\n  };\r\n\r\n  private onUtilitySlotChange = (event: Event): void => {\r\n    this.hasUtility = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\r\n    this.evaluateFit();\r\n  };\r\n\r\n  private onMenuSlotChange = (): void => {\r\n    this.evaluateFit();\r\n    this.syncInlineDropdowns();\r\n  };\r\n\r\n  protected updated(changed: Map<string, unknown>): void {\r\n    if (changed.has('compact')) this.syncInlineDropdowns();\r\n  }\r\n\r\n  /** The bar width at which the menu last overflowed — the bar only expands again once it is\r\n   * clearly wider than this, so it can't flip back and forth right at the threshold. */\r\n  private collapsedAtWidth = 0;\r\n\r\n  /** Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\r\n   * once there is room. The collapsed layout hides the menu, so the room it needs can't be\r\n   * measured then; the width remembered when it collapsed stands in for it. */\r\n  private evaluateFit = (): void => {\r\n    const width = this.clientWidth;\r\n    if (this.compact) {\r\n      if (width > this.collapsedAtWidth + 24) {\r\n        this.compact = false;\r\n        this.mobileOpen = false;\r\n        void this.updateComplete.then(this.evaluateFit);\r\n      }\r\n      return;\r\n    }\r\n    if (this.menuOverflows()) {\r\n      this.collapsedAtWidth = width;\r\n      this.compact = true;\r\n    }\r\n  };\r\n\r\n  /** Whether the visible menu items reach past the right edge of the menu row. Measured from the\r\n   * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\r\n   * a closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\r\n   * report overflow at any width. */\r\n  private menuOverflows(): boolean {\r\n    const row = this.renderRoot.querySelector<HTMLElement>('.menu-row');\r\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\r\n    if (!row || !slot) return false;\r\n    const limit = row.getBoundingClientRect().right + 1;\r\n    let right = 0;\r\n    for (const el of slot.assignedElements({ flatten: true })) {\r\n      for (const box of [el, ...Array.from(el.children)]) {\r\n        const rect = box.getBoundingClientRect();\r\n        if (rect.width > 0) right = Math.max(right, rect.right);\r\n      }\r\n    }\r\n    return right > limit;\r\n  }\r\n\r\n  protected firstUpdated(): void {\r\n    this.resizeObserver = new ResizeObserver(this.evaluateFit);\r\n    this.resizeObserver.observe(this);\r\n    this.evaluateFit();\r\n    this.syncInlineDropdowns();\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    window.addEventListener('keydown', this.closeOnEscape);\r\n    window.addEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n    this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);\r\n    this.narrowQuery.addEventListener('change', this.syncInlineDropdowns);\r\n    // Menus often render their dropdowns after the header (e.g. once the user's role loads),\r\n    // deeper than a slotchange reports.\r\n    this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);\r\n    this.lightDomObserver.observe(this, { childList: true, subtree: true });\r\n  }\r\n\r\n  private lightDomObserver?: MutationObserver;\r\n\r\n  disconnectedCallback(): void {\r\n    this.lightDomObserver?.disconnect();\r\n    this.narrowQuery?.removeEventListener('change', this.syncInlineDropdowns);\r\n    this.resizeObserver?.disconnect();\r\n    window.removeEventListener('keydown', this.closeOnEscape);\r\n    window.removeEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  private closeOnEscape = (event: KeyboardEvent): void => {\r\n    if (this.mobileOpen && event.key === 'Escape') this.mobileOpen = false;\r\n    if (this.languageMenuOpen && event.key === 'Escape') this.languageMenuOpen = false;\r\n  };\r\n\r\n  private closeLanguageMenuOnOutsideClick = (event: Event): void => {\r\n    if (this.languageMenuOpen && !event.composedPath().includes(this)) this.languageMenuOpen = false;\r\n  };\r\n\r\n  private renderLanguageMenu() {\r\n    if (this.languages.length < 2) return nothing;\r\n    const current = this.languages.find((lang) => lang.code === this.currentLanguageCode);\r\n    return html`\r\n      <div class=\"lang-menu\" part=\"language-menu\">\r\n        <button\r\n          part=\"language-menu-trigger\"\r\n          type=\"button\"\r\n          class=\"lang-trigger\"\r\n          aria-label=${this.languageMenuLabel}\r\n          aria-expanded=${this.languageMenuOpen}\r\n          @click=${(event: Event) => {\r\n            event.stopPropagation();\r\n            this.languageMenuOpen = !this.languageMenuOpen;\r\n          }}\r\n        >\r\n          <span part=\"language-menu-current\">${current?.label ?? this.languageMenuLabel}</span>\r\n          ${chevronIcon('down', 10)}\r\n        </button>\r\n        ${this.languageMenuOpen\r\n          ? html`\r\n              <div part=\"language-dropdown\" class=\"lang-dropdown\">\r\n                ${this.languages.map(\r\n                  (lang) => html`\r\n                    <button\r\n                      part=\"language-option\"\r\n                      type=\"button\"\r\n                      class=\"lang-option ${lang.code === this.currentLanguageCode ? 'active' : ''}\"\r\n                      aria-current=${lang.code === this.currentLanguageCode}\r\n                      @click=${() => this.onLanguageSelect(lang.code)}\r\n                    >\r\n                      ${lang.label}\r\n                    </button>\r\n                  `\r\n                )}\r\n              </div>\r\n            `\r\n          : nothing}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private onLanguageSelect(code: string): void {\r\n    this.languageMenuOpen = false;\r\n    if (code === this.currentLanguageCode) return;\r\n    this.dispatchEvent(new CustomEvent<LanguageChangedEventDetail>('language-change', { detail: { code }, bubbles: true, composed: true }));\r\n  }\r\n\r\n  private renderBrand() {\r\n    const content = html`\r\n      ${this.brandImageUrl ? html`<img part=\"brand-mark\" class=\"brand-mark\" src=${this.brandImageUrl} alt=${this.altText} /> ` : nothing}\r\n      <span part=\"brand-title\" class=\"brand-title\">${this.title}</span>\r\n    `;\r\n    return this.logoHref\r\n      ? html`<a part=\"brand\" class=\"brand ${this.logoClassName}\" href=${this.logoHref} target=${this.logoTarget}>${content}</a>`\r\n      : html`<div part=\"brand\" class=\"brand ${this.logoClassName}\">${content}</div>`;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      ${this.renderBrand()}\r\n\r\n      <div class=\"mobile-panel\" part=\"mobile-panel\" @click=${() => (this.mobileOpen = false)}>\r\n        <div class=\"menu-row\" part=\"menu-row\"><slot name=\"menu\" @slotchange=${this.onMenuSlotChange}></slot></div>\r\n        <div class=\"utility-row ${this.hasUtility || this.languages.length >= 2 ? '' : 'empty'}\" part=\"utility-row\">\r\n          ${this.renderLanguageMenu()}<slot name=\"utility\" @slotchange=${this.onUtilitySlotChange}></slot>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        part=\"toggle\"\r\n        type=\"button\"\r\n        class=\"toggle\"\r\n        aria-label=${this.mobileOpen ? 'Close menu' : 'Open menu'}\r\n        aria-expanded=${this.mobileOpen}\r\n        @click=${() => (this.mobileOpen = !this.mobileOpen)}\r\n      >\r\n        ${this.mobileOpen ? closeIcon() : menuIcon()}\r\n      </button>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-2VZFHTBC.js

@@ -0,0 +1,203 @@
+import {
+  buttonResetStyles,
+  controlBaseStyles,
+  rootFontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/cookie-consent/CookieConsent.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var DEFAULT_STORAGE_KEY = "sankhya_ui_cookie_consent";
+var CookieConsent = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.message = "";
+    this.acceptButtonText = "Accept";
+    this.refuseButtonText = "Refuse";
+    this.privacyPolicyLink = "";
+    this.privacyPolicyText = "Privacy Policy";
+    this.storageKey = DEFAULT_STORAGE_KEY;
+    this.consent = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.consent = this.readStored();
+  }
+  readStored() {
+    try {
+      const saved = localStorage.getItem(this.storageKey);
+      return saved === "accepted" || saved === "refused" ? saved : null;
+    } catch {
+      return null;
+    }
+  }
+  choose(status) {
+    this.consent = status;
+    try {
+      localStorage.setItem(this.storageKey, status);
+    } catch {
+    }
+    this.dispatchEvent(
+      new CustomEvent(status === "accepted" ? "cookie-consent-accept" : "cookie-consent-refuse", {
+        detail: { status },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    if (this.consent !== null) return nothing;
+    return html`
+      <div class="content" part="content">
+        <p class="message" part="message">
+          <slot>
+            ${this.message || "We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies."}
+            ${this.privacyPolicyLink ? html`<a class="link" part="link" href=${this.privacyPolicyLink} target="_blank" rel="noopener noreferrer">${this.privacyPolicyText}</a>` : nothing}
+          </slot>
+        </p>
+      </div>
+      <div class="actions" part="actions">
+        <button class="btn refuse" part="refuse" type="button" @click=${() => this.choose("refused")}>${this.refuseButtonText}</button>
+        <button class="btn accept" part="accept" type="button" @click=${() => this.choose("accepted")}>${this.acceptButtonText}</button>
+      </div>
+    `;
+  }
+};
+CookieConsent.styles = css`
+    ${controlBaseStyles}
+
+    @keyframes st-cookie-slide-up {
+      from {
+        transform: translateY(100%);
+      }
+      to {
+        transform: translateY(0);
+      }
+    }
+
+    :host {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      box-sizing: border-box;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-16);
+      padding: var(--st-space-24);
+      background: var(--st-color-surface);
+      color: var(--st-color-text);
+      border-top: 1px solid var(--st-color-border);
+      box-shadow: 0 -4px 10px var(--st-shadow-color-sm);
+      animation: st-cookie-slide-up 0.3s ease-out;
+      ${rootFontFamilyStyles}
+    }
+
+    .content {
+      flex: 1;
+    }
+
+    .message {
+      margin: 0;
+      font-size: var(--st-text-md);
+      line-height: 1.5;
+    }
+
+    .link {
+      color: var(--st-color-accent-text);
+      text-decoration: underline;
+      margin-left: var(--st-space-4);
+    }
+
+    .link:hover {
+      text-decoration: none;
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--st-space-12);
+      flex-shrink: 0;
+    }
+
+    .btn {
+      ${buttonResetStyles}
+      padding: var(--st-space-8) var(--st-space-16);
+      border: 1px solid transparent;
+      border-radius: var(--st-radius-xs);
+      font-weight: var(--st-font-weight-medium);
+      font-size: var(--st-text-md);
+      transition:
+        background-color 0.2s ease,
+        color 0.2s ease;
+    }
+
+    .accept {
+      background: var(--st-button-primary-bg);
+      color: var(--st-button-primary-color);
+    }
+
+    .accept:hover {
+      opacity: 0.9;
+    }
+
+    .refuse {
+      border-color: var(--st-color-border);
+      color: var(--st-color-text-muted);
+    }
+
+    .refuse:hover {
+      background: var(--st-color-hover);
+      color: var(--st-color-text-strong);
+    }
+
+    @media (min-width: 768px) {
+      :host {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--st-space-16) var(--st-space-32);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        animation: none;
+      }
+      .btn {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], CookieConsent.prototype, "message", 2);
+__decorateClass([
+  property({ type: String, attribute: "accept-button-text" })
+], CookieConsent.prototype, "acceptButtonText", 2);
+__decorateClass([
+  property({ type: String, attribute: "refuse-button-text" })
+], CookieConsent.prototype, "refuseButtonText", 2);
+__decorateClass([
+  property({ type: String, attribute: "privacy-policy-link" })
+], CookieConsent.prototype, "privacyPolicyLink", 2);
+__decorateClass([
+  property({ type: String, attribute: "privacy-policy-text" })
+], CookieConsent.prototype, "privacyPolicyText", 2);
+__decorateClass([
+  property({ type: String, attribute: "storage-key" })
+], CookieConsent.prototype, "storageKey", 2);
+__decorateClass([
+  state()
+], CookieConsent.prototype, "consent", 2);
+CookieConsent = __decorateClass([
+  customElement("st-cookie-consent")
+], CookieConsent);
+
+export {
+  CookieConsent
+};
+//# sourceMappingURL=chunk-2VZFHTBC.js.map

package/dist/chunk-2VZFHTBC.js.map

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

package/dist/chunk-3ERKQNZT.js

@@ -0,0 +1,155 @@
+import {
+  ctaLinkStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  buttonResetStyles,
+  controlBaseStyles,
+  rootFontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/promo-banner/PromoBanner.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var PromoBanner = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.subtitle = "";
+    this.actionLabel = "";
+    this.href = "";
+    this.imageSrc = "";
+    this.inverted = false;
+    this.onAction = () => {
+      this.dispatchEvent(
+        new CustomEvent("action", { detail: { href: this.href }, bubbles: true, composed: true })
+      );
+    };
+  }
+  willUpdate() {
+    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : "";
+  }
+  render() {
+    return html`
+      <div class="container" part="container">
+        <h2 class="title" part="title">${this.title}</h2>
+        ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+        <slot></slot>
+        ${this.actionLabel ? html`<div class="actions" part="actions">
+              <button class="cta" part="action" type="button" @click=${this.onAction}>${this.actionLabel}</button>
+            </div>` : nothing}
+      </div>
+    `;
+  }
+};
+PromoBanner.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: calc(100% - 48px);
+      max-width: var(--st-cms-container-max);
+      margin: var(--st-space-40) auto;
+      padding: 100px var(--st-space-24);
+      border-radius: var(--st-space-24);
+      background-color: var(--st-color-text-strong);
+      background-size: cover;
+      background-position: center;
+      color: var(--st-color-on-solid);
+      text-align: center;
+      ${rootFontFamilyStyles}
+    }
+
+    :host([inverted]) {
+      background-color: var(--st-color-subtle);
+      color: var(--st-color-text-strong);
+    }
+
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--st-space-32);
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      color: inherit;
+      margin: 0;
+      letter-spacing: -0.02em;
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      color: inherit;
+      opacity: 0.8;
+      margin: 0;
+    }
+
+    .actions {
+      margin-top: var(--st-space-16);
+    }
+
+    .cta {
+      ${buttonResetStyles}
+      ${ctaLinkStyles}
+      border: 1px solid currentColor;
+      color: inherit;
+    }
+
+    .cta:hover {
+      transform: scale(1.05);
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        width: auto;
+        margin: var(--st-space-24);
+        padding: 60px var(--st-space-24);
+        border-radius: var(--st-radius-lg);
+      }
+      .actions,
+      .cta {
+        width: 100%;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .cta {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], PromoBanner.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], PromoBanner.prototype, "subtitle", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-label" })
+], PromoBanner.prototype, "actionLabel", 2);
+__decorateClass([
+  property({ type: String })
+], PromoBanner.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-src" })
+], PromoBanner.prototype, "imageSrc", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PromoBanner.prototype, "inverted", 2);
+PromoBanner = __decorateClass([
+  customElement("st-promo-banner")
+], PromoBanner);
+
+export {
+  PromoBanner
+};
+//# sourceMappingURL=chunk-3ERKQNZT.js.map

package/dist/chunk-3ERKQNZT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/promo-banner/PromoBanner.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport { ctaLinkStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\r\nimport type { HeroActionEventDetail } from '../hero/HeroEvents';\r\n\r\n/**\r\n * Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a\r\n * background image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event\r\n * (detail `{ href }`, empty unless set) in place of `onAction`.\r\n */\r\n@customElement('st-promo-banner')\r\nexport class PromoBanner extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      width: calc(100% - 48px);\r\n      max-width: var(--st-cms-container-max);\r\n      margin: var(--st-space-40) auto;\r\n      padding: 100px var(--st-space-24);\r\n      border-radius: var(--st-space-24);\r\n      background-color: var(--st-color-text-strong);\r\n      background-size: cover;\r\n      background-position: center;\r\n      color: var(--st-color-on-solid);\r\n      text-align: center;\r\n      ${rootFontFamilyStyles}\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background-color: var(--st-color-subtle);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .container {\r\n      max-width: 800px;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: var(--st-space-32);\r\n    }\r\n\r\n    .title {\r\n      ${sectionTitleStyles}\r\n      color: inherit;\r\n      margin: 0;\r\n      letter-spacing: -0.02em;\r\n    }\r\n\r\n    .subtitle {\r\n      ${sectionSubtitleStyles}\r\n      color: inherit;\r\n      opacity: 0.8;\r\n      margin: 0;\r\n    }\r\n\r\n    .actions {\r\n      margin-top: var(--st-space-16);\r\n    }\r\n\r\n    .cta {\r\n      ${buttonResetStyles}\r\n      ${ctaLinkStyles}\r\n      border: 1px solid currentColor;\r\n      color: inherit;\r\n    }\r\n\r\n    .cta:hover {\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        width: auto;\r\n        margin: var(--st-space-24);\r\n        padding: 60px var(--st-space-24);\r\n        border-radius: var(--st-radius-lg);\r\n      }\r\n      .actions,\r\n      .cta {\r\n        width: 100%;\r\n      }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .cta {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  @property({ type: String })\r\n  subtitle = '';\r\n\r\n  @property({ type: String, attribute: 'action-label' })\r\n  actionLabel = '';\r\n\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  @property({ type: String, attribute: 'image-src' })\r\n  imageSrc = '';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  protected willUpdate(): void {\r\n    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\r\n  }\r\n\r\n  private onAction = (): void => {\r\n    this.dispatchEvent(\r\n      new CustomEvent<HeroActionEventDetail>('action', { detail: { href: this.href }, bubbles: true, composed: true })\r\n    );\r\n  };\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"container\" part=\"container\">\r\n        <h2 class=\"title\" part=\"title\">${this.title}</h2>\r\n        ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n        <slot></slot>\r\n        ${this.actionLabel\r\n          ? html`<div class=\"actions\" part=\"actions\">\r\n              <button class=\"cta\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>\r\n            </div>`\r\n          : nothing}\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAYjC,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC;AAAA;AAoFL,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;AA7Ha,YACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAef,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,GAnFf,YAoFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtFf,YAuFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAzF1C,YA0FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5Ff,YA6FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA/FvC,YAgGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlG/B,YAmGX;AAnGW,cAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}

package/dist/chunk-3JU3R22O.js

@@ -0,0 +1,193 @@
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/markdown/Markdown.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+var Markdown = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.content = "";
+    this.src = "";
+    this.fetched = "";
+    this.loading = false;
+    this.error = null;
+  }
+  willUpdate(changed) {
+    if (changed.has("src")) void this.load();
+  }
+  disconnectedCallback() {
+    this.abort?.abort();
+    super.disconnectedCallback();
+  }
+  async load() {
+    this.abort?.abort();
+    this.fetched = "";
+    this.error = null;
+    if (!this.src) {
+      this.loading = false;
+      return;
+    }
+    const controller = new AbortController();
+    this.abort = controller;
+    this.loading = true;
+    try {
+      const response = await fetch(this.src, { signal: controller.signal });
+      if (!response.ok) throw new Error(`Failed to fetch markdown: ${response.statusText}`);
+      const text = await response.text();
+      if (controller.signal.aborted) return;
+      this.fetched = text;
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      this.error = err instanceof Error ? err : new Error("Unknown error fetching markdown");
+      this.dispatchEvent(
+        new CustomEvent("markdown-error", {
+          detail: { error: this.error },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+    this.loading = false;
+  }
+  render() {
+    if (this.loading) return html`<div part="loading">Loading content...</div>`;
+    if (this.error) return html`<div part="error">Error loading content.</div>`;
+    const source = this.src ? this.fetched : this.content;
+    if (!source) return nothing;
+    const rendered = DOMPurify.sanitize(marked.parse(source, { gfm: true, breaks: true, async: false }));
+    return html`<div part="body">${unsafeHTML(rendered)}</div>`;
+  }
+};
+Markdown.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      ${fontFamilyStyles}
+      line-height: 1.7;
+    }
+
+    :host > div > :first-child {
+      margin-top: 0;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+      color: inherit;
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1.3;
+    }
+
+    h2 {
+      font-size: var(--st-text-2xl);
+      margin: var(--st-space-48) 0 var(--st-space-24);
+    }
+
+    h3 {
+      font-size: var(--st-text-xl);
+      font-weight: var(--st-font-weight-semibold);
+      margin: var(--st-space-32) 0 var(--st-space-16);
+    }
+
+    p {
+      margin: 0 0 var(--st-space-24);
+    }
+
+    ul,
+    ol {
+      margin: 0 0 var(--st-space-24);
+      padding-left: var(--st-space-24);
+    }
+
+    li {
+      margin-bottom: var(--st-space-8);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 4px;
+    }
+
+    a:hover {
+      color: var(--st-color-text-strong);
+    }
+
+    img {
+      max-width: 100%;
+      height: auto;
+      border-radius: var(--st-radius-sm);
+      margin: var(--st-space-32) 0;
+    }
+
+    blockquote {
+      border-left: 4px solid var(--st-color-border);
+      margin: var(--st-space-32) 0;
+      padding-left: var(--st-space-24);
+      font-style: italic;
+    }
+
+    table {
+      border-collapse: collapse;
+      margin: 0 0 var(--st-space-24);
+    }
+
+    th,
+    td {
+      border: 1px solid var(--st-color-border);
+      padding: var(--st-space-8) var(--st-space-12);
+    }
+
+    pre,
+    code {
+      background: var(--st-color-subtle);
+      border-radius: var(--st-radius-xs);
+    }
+
+    code {
+      padding: 0 var(--st-space-4);
+    }
+
+    pre {
+      padding: var(--st-space-16);
+      overflow-x: auto;
+    }
+
+    pre code {
+      padding: 0;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Markdown.prototype, "content", 2);
+__decorateClass([
+  property({ type: String })
+], Markdown.prototype, "src", 2);
+__decorateClass([
+  state()
+], Markdown.prototype, "fetched", 2);
+__decorateClass([
+  state()
+], Markdown.prototype, "loading", 2);
+__decorateClass([
+  state()
+], Markdown.prototype, "error", 2);
+Markdown = __decorateClass([
+  customElement("st-markdown")
+], Markdown);
+
+export {
+  Markdown
+};
+//# sourceMappingURL=chunk-3JU3R22O.js.map

package/dist/chunk-3JU3R22O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/markdown/Markdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\r\nimport DOMPurify from 'dompurify';\r\nimport { marked } from 'marked';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { MarkdownErrorEventDetail } from './MarkdownEvents';\r\n\r\n/**\r\n * Renders Markdown (GFM, single newlines become `<br>`) from either an inline `content` string or\r\n * a `src` URL it fetches. Ports `SankhyaUI`'s `useMarkdown` hook + `react-markdown` (remark-gfm,\r\n * remark-breaks); output is sanitized with DOMPurify. `src` wins over `content` when both are set.\r\n * While a fetch is pending it shows \"Loading content...\"; on failure \"Error loading content.\" and\r\n * a `markdown-error` event (detail: `{ error }`).\r\n *\r\n * Text color is inherited from the parent so inverted containers just work.\r\n */\r\n@customElement('st-markdown')\r\nexport class Markdown extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n      line-height: 1.7;\r\n    }\r\n\r\n    :host > div > :first-child {\r\n      margin-top: 0;\r\n    }\r\n\r\n    h1,\r\n    h2,\r\n    h3,\r\n    h4 {\r\n      color: inherit;\r\n      font-weight: var(--st-font-weight-bold);\r\n      line-height: 1.3;\r\n    }\r\n\r\n    h2 {\r\n      font-size: var(--st-text-2xl);\r\n      margin: var(--st-space-48) 0 var(--st-space-24);\r\n    }\r\n\r\n    h3 {\r\n      font-size: var(--st-text-xl);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      margin: var(--st-space-32) 0 var(--st-space-16);\r\n    }\r\n\r\n    p {\r\n      margin: 0 0 var(--st-space-24);\r\n    }\r\n\r\n    ul,\r\n    ol {\r\n      margin: 0 0 var(--st-space-24);\r\n      padding-left: var(--st-space-24);\r\n    }\r\n\r\n    li {\r\n      margin-bottom: var(--st-space-8);\r\n    }\r\n\r\n    a {\r\n      color: inherit;\r\n      text-decoration: underline;\r\n      text-underline-offset: 4px;\r\n    }\r\n\r\n    a:hover {\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    img {\r\n      max-width: 100%;\r\n      height: auto;\r\n      border-radius: var(--st-radius-sm);\r\n      margin: var(--st-space-32) 0;\r\n    }\r\n\r\n    blockquote {\r\n      border-left: 4px solid var(--st-color-border);\r\n      margin: var(--st-space-32) 0;\r\n      padding-left: var(--st-space-24);\r\n      font-style: italic;\r\n    }\r\n\r\n    table {\r\n      border-collapse: collapse;\r\n      margin: 0 0 var(--st-space-24);\r\n    }\r\n\r\n    th,\r\n    td {\r\n      border: 1px solid var(--st-color-border);\r\n      padding: var(--st-space-8) var(--st-space-12);\r\n    }\r\n\r\n    pre,\r\n    code {\r\n      background: var(--st-color-subtle);\r\n      border-radius: var(--st-radius-xs);\r\n    }\r\n\r\n    code {\r\n      padding: 0 var(--st-space-4);\r\n    }\r\n\r\n    pre {\r\n      padding: var(--st-space-16);\r\n      overflow-x: auto;\r\n    }\r\n\r\n    pre code {\r\n      padding: 0;\r\n    }\r\n  `;\r\n\r\n  /** Inline Markdown source. Ignored when `src` is set. */\r\n  @property({ type: String })\r\n  content = '';\r\n\r\n  /** URL of a Markdown file to fetch. */\r\n  @property({ type: String })\r\n  src = '';\r\n\r\n  @state() private fetched = '';\r\n  @state() private loading = false;\r\n  @state() private error: Error | null = null;\r\n\r\n  private abort?: AbortController;\r\n\r\n  willUpdate(changed: Map<string, unknown>): void {\r\n    if (changed.has('src')) void this.load();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.abort?.abort();\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  private async load(): Promise<void> {\r\n    this.abort?.abort();\r\n    this.fetched = '';\r\n    this.error = null;\r\n    if (!this.src) {\r\n      this.loading = false;\r\n      return;\r\n    }\r\n    const controller = new AbortController();\r\n    this.abort = controller;\r\n    this.loading = true;\r\n    try {\r\n      const response = await fetch(this.src, { signal: controller.signal });\r\n      if (!response.ok) throw new Error(`Failed to fetch markdown: ${response.statusText}`);\r\n      const text = await response.text();\r\n      if (controller.signal.aborted) return;\r\n      this.fetched = text;\r\n    } catch (err) {\r\n      if (controller.signal.aborted) return;\r\n      this.error = err instanceof Error ? err : new Error('Unknown error fetching markdown');\r\n      this.dispatchEvent(\r\n        new CustomEvent<MarkdownErrorEventDetail>('markdown-error', {\r\n          detail: { error: this.error },\r\n          bubbles: true,\r\n          composed: true\r\n        })\r\n      );\r\n    }\r\n    this.loading = false;\r\n  }\r\n\r\n  render() {\r\n    if (this.loading) return html`<div part=\"loading\">Loading content...</div>`;\r\n    if (this.error) return html`<div part=\"error\">Error loading content.</div>`;\r\n    const source = this.src ? this.fetched : this.content;\r\n    if (!source) return nothing;\r\n    const rendered = DOMPurify.sanitize(marked.parse(source, { gfm: true, breaks: true, async: false }));\r\n    return html`<div part=\"body\">${unsafeHTML(rendered)}</div>`;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}