@sankhyatronics/sankhya-cms 0.1.0 → 0.1.2

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

@@ -1 +0,0 @@
-{"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-LHU23TF6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/menu-item/MenuItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { MenuItemSelectEventDetail } from './MenuItemEvents';\r\n\r\n/**\r\n * A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\r\n * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\r\n * port of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\r\n * markup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\r\n * hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\r\n * in. Colors come from the suite theme rather than per-item utility classes.\r\n *\r\n * Renders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\r\n * before navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\r\n * source used react-router's `Link` here; the suite apps have no router).\r\n */\r\n@customElement('st-menu-item')\r\nexport class MenuItem extends LitElement {\r\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\r\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\r\n\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    @keyframes st-menu-item-badge-pop {\r\n      from {\r\n        transform: scale(0);\r\n      }\r\n      70% {\r\n        transform: scale(1.12);\r\n      }\r\n      to {\r\n        transform: scale(1);\r\n      }\r\n    }\r\n\r\n    @keyframes st-menu-item-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    .menu-item {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 12px;\r\n      padding: 12px 16px;\r\n      font-size: 0.875rem;\r\n      text-decoration: none;\r\n      color: var(--st-color-text);\r\n      border-radius: 6px;\r\n      /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits\r\n         from a dropdown panel kept it unfocusable for a frame after the panel opened. */\r\n      transition-property: background-color, color, padding, transform, border-color;\r\n      transition-duration: 0.15s;\r\n      transition-timing-function: ease;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would\r\n       spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.\r\n       Keyboard focus gets the same treatment as hover. */\r\n    .menu-item:hover,\r\n    .menu-item:focus-visible {\r\n      background: var(--st-color-hover);\r\n      color: var(--st-color-text-strong);\r\n      padding-left: 20px;\r\n      transition-duration: 0.1s;\r\n    }\r\n\r\n    .menu-item.compact:hover,\r\n    .menu-item.compact:focus-visible {\r\n      padding-left: 16px;\r\n    }\r\n\r\n    .menu-item:active {\r\n      transform: scale(0.99);\r\n      transition-duration: 0.1s;\r\n    }\r\n\r\n    .menu-item.active {\r\n      background-color: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n      border-left: 4px solid var(--st-color-accent);\r\n    }\r\n\r\n    .menu-item-icon {\r\n      display: flex;\r\n      flex-shrink: 0;\r\n      margin-top: 2px;\r\n      transition: transform 0.2s ease;\r\n    }\r\n\r\n    .menu-item-icon:hover {\r\n      transform: rotate(5deg);\r\n    }\r\n\r\n    .menu-item-icon[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    .menu-item-icon ::slotted(*) {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    .menu-item-content {\r\n      flex: 1;\r\n      min-width: 0;\r\n    }\r\n\r\n    .menu-item-header {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-item-title {\r\n      font-weight: 500;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .menu-item-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 20px;\r\n      height: 20px;\r\n      padding: 0 6px;\r\n      font-size: 0.75rem;\r\n      font-weight: 500;\r\n      border-radius: 9999px;\r\n      flex-shrink: 0;\r\n      background: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n      animation: st-menu-item-badge-pop 0.35s ease-out;\r\n    }\r\n\r\n    .menu-item-description {\r\n      display: -webkit-box;\r\n      margin: 4px 0 0;\r\n      font-size: 0.75rem;\r\n      color: var(--st-color-text-muted);\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-height: 1.4;\r\n      animation: st-menu-item-fade-in 0.2s ease;\r\n    }\r\n\r\n    .menu-item.compact {\r\n      padding: 8px 12px;\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-icon ::slotted(*) {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-title {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-description {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-item.no-description {\r\n      align-items: center;\r\n    }\r\n\r\n    .menu-item.no-description .menu-item-icon {\r\n      margin-top: 0;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .menu-item,\r\n      .menu-item-icon {\r\n        transition: none;\r\n      }\r\n\r\n      .menu-item:active,\r\n      .menu-item-icon:hover {\r\n        transform: none;\r\n      }\r\n\r\n      .menu-item-badge,\r\n      .menu-item-description {\r\n        animation: 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  href = '';\r\n\r\n  @property({ type: String })\r\n  description = '';\r\n\r\n  /** Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none. */\r\n  @property({ type: String })\r\n  badge = '';\r\n\r\n  /** Highlights this row as the current page (source: `isActive`). */\r\n  @property({ type: Boolean, reflect: true })\r\n  active = false;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  compact = false;\r\n\r\n  /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\r\n  @property({ type: Boolean, attribute: 'show-description' })\r\n  showDescription = true;\r\n\r\n  /** `target` for the `<a>` (source default `_self`). */\r\n  @property({ type: String })\r\n  target = '_self';\r\n\r\n  /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\r\n  @state() private hasIcon = false;\r\n\r\n  private onIconSlotChange = (event: Event): void => {\r\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  private onClick = (event: MouseEvent): void => {\r\n    const selectEvent = new CustomEvent<MenuItemSelectEventDetail>('menu-item-select', {\r\n      detail: { href: this.href },\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: true\r\n    });\r\n    this.dispatchEvent(selectEvent);\r\n    if (selectEvent.defaultPrevented) event.preventDefault();\r\n  };\r\n\r\n  render() {\r\n    const showDescription = !!this.description && this.showDescription;\r\n    const classes = ['menu-item', this.active ? 'active' : '', this.compact ? 'compact' : '', showDescription ? '' : 'no-description']\r\n      .filter(Boolean)\r\n      .join(' ');\r\n    return html`\r\n      <a part=\"item\" class=${classes} href=${this.href} target=${this.target} @click=${this.onClick}>\r\n        <span class=\"menu-item-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\r\n        <span class=\"menu-item-content\" part=\"content\">\r\n          <span class=\"menu-item-header\" part=\"header\">\r\n            <span part=\"title\" class=\"menu-item-title\">${this.title}</span>\r\n            ${this.badge ? html`<span part=\"badge\" class=\"menu-item-badge\">${this.badge}</span>` : nothing}\r\n          </span>\r\n          ${showDescription ? html`<p part=\"description\" class=\"menu-item-description\">${this.description}</p>` : nothing}\r\n        </span>\r\n      </a>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-RMIJVTFS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { DropdownToggleEventDetail } from './DropdownEvents';\r\n\r\n/**\r\n * A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\r\n * action menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\r\n * React `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\r\n * (`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\r\n *\r\n * - only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\r\n *   provider element is needed);\r\n * - a mousedown outside, Escape, or a click inside the panel closes it;\r\n * - an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\r\n * - `inline` opens the panel in the flow, the source's `.touch-device` layout.\r\n *\r\n * Colors and the panel's surface come from the suite theme (the source left those to the\r\n * consumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\r\n * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\r\n * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\r\n * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\r\n * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event.\r\n */\r\n@customElement('st-dropdown')\r\nexport class Dropdown extends LitElement {\r\n  /** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */\r\n  private static openDropdown: Dropdown | null = null;\r\n\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    .menu-title {\r\n      ${buttonResetStyles}\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      min-height: 40px;\r\n      padding: 12px;\r\n      gap: 8px;\r\n      text-align: center;\r\n      width: fit-content;\r\n      border-radius: var(--st-radius-sm);\r\n      color: var(--st-color-text);\r\n      font-size: 0.875rem;\r\n      text-decoration: none;\r\n      white-space: nowrap;\r\n      transition: background-color 0.3s ease;\r\n    }\r\n\r\n    .menu-title:hover,\r\n    .menu-title[aria-expanded='true'] {\r\n      background: var(--st-color-hover);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    :host([active]) .menu-title {\r\n      background: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n    }\r\n\r\n    :host([disabled]) .menu-title {\r\n      color: var(--st-color-text-muted);\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .icon {\r\n      display: inline-flex;\r\n      flex: none;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .icon[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    .arrow {\r\n      display: inline-block;\r\n      margin-left: 8px;\r\n      font-size: 0.75rem;\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .menu-title[aria-expanded='true'] .arrow {\r\n      transform: rotate(180deg);\r\n    }\r\n\r\n    .menu-dropdown {\r\n      position: absolute;\r\n      top: 100%;\r\n      left: 0;\r\n      z-index: 100;\r\n      padding: 16px;\r\n      background: var(--st-color-surface);\r\n      color: var(--st-color-text);\r\n      border: 1px solid var(--st-color-border);\r\n      border-radius: var(--st-radius-sm);\r\n      box-shadow: 0 4px 16px var(--st-shadow-color-sm);\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      transform: translateY(-10px);\r\n      /* visibility flips at once on open (so keyboard focus can move into the panel on the same\r\n         frame) and only after the 0.3s fade on close. */\r\n      transition:\r\n        opacity 0.3s ease,\r\n        transform 0.3s ease,\r\n        visibility 0s linear 0.3s;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .menu-dropdown.align-right {\r\n      left: auto;\r\n      right: 0;\r\n    }\r\n\r\n    .menu-dropdown.show {\r\n      opacity: 1;\r\n      visibility: visible;\r\n      transform: translateY(0);\r\n      pointer-events: auto;\r\n      transition-delay: 0s;\r\n    }\r\n\r\n    /* Inline: the panel opens in the flow under its trigger and pushes what follows down, instead\r\n       of floating — the source's .touch-device layout. st-header turns this on for its menu while\r\n       the hamburger panel is showing. */\r\n    :host([inline]) {\r\n      display: block;\r\n    }\r\n\r\n    :host([inline]) .menu-title {\r\n      width: 100%;\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    :host([inline]) .arrow {\r\n      margin-left: auto;\r\n    }\r\n\r\n    :host([inline]) .menu-dropdown {\r\n      display: none;\r\n      position: relative;\r\n      top: auto;\r\n      left: auto;\r\n      right: auto;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      box-shadow: none;\r\n      opacity: 1;\r\n      visibility: visible;\r\n      transform: none;\r\n    }\r\n\r\n    :host([inline]) .menu-dropdown.show {\r\n      display: block;\r\n      pointer-events: auto;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .menu-dropdown,\r\n      .arrow {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** Trigger label text (source: `title`, renamed because `title` is the native tooltip\r\n   * attribute). Leave empty to show only `slot=\"icon\"`. */\r\n  @property({ type: String })\r\n  label = '';\r\n\r\n  /** Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in\r\n   * the source); with none it navigates. */\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  @property({ type: String, attribute: 'icon-position' })\r\n  iconPosition: 'left' | 'right' = 'left';\r\n\r\n  /** Inline `width`/`height` of the `slot=\"icon\"` wrapper (source: `iconSize`, default `1.2rem`). */\r\n  @property({ type: String, attribute: 'icon-size' })\r\n  iconSize = '1.2rem';\r\n\r\n  /** Inline `color` of the `slot=\"icon\"` wrapper (source: `iconColor`). */\r\n  @property({ type: String, attribute: 'icon-color' })\r\n  iconColor = 'currentColor';\r\n\r\n  /** Which edge of the trigger the panel lines up with. */\r\n  @property({ type: String })\r\n  align: 'left' | 'right' = 'left';\r\n\r\n  /** `target` of an `href` trigger (source default `_self`). */\r\n  @property({ type: String })\r\n  target = '_self';\r\n\r\n  /** Extra class(es) on the trigger (source: `className`; a `class` on `st-dropdown` styles the host). */\r\n  @property({ type: String, attribute: 'trigger-class-name' })\r\n  triggerClassName = '';\r\n\r\n  /** Extra class(es) on the panel (source: `itemGroupClassName`). */\r\n  @property({ type: String, attribute: 'item-group-class-name' })\r\n  itemGroupClassName = '';\r\n\r\n  /** Unused, as in the source (`itemClassName` is never read there); kept for prop parity. */\r\n  @property({ type: String, attribute: 'item-class-name' })\r\n  itemClassName = '';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  disabled = false;\r\n\r\n  /** Highlights the trigger as the current section (e.g. the current page is one of its items). */\r\n  @property({ type: Boolean, reflect: true })\r\n  active = false;\r\n\r\n  /** Opens the panel in the flow under the trigger instead of floating over the page (see the\r\n   * styles). `st-header` sets this on its own menu's dropdowns while its hamburger panel shows. */\r\n  @property({ type: Boolean, reflect: true })\r\n  inline = false;\r\n\r\n  /** Whether the panel is showing. Follows user toggles; may also be set from outside. */\r\n  @property({ type: Boolean, reflect: true })\r\n  open = false;\r\n\r\n  /** Whether the default slot has content — the source's `children` check. */\r\n  @state() private hasContent = false;\r\n\r\n  /** Whether `slot=\"icon\"` has content. */\r\n  @state() private hasIcon = false;\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    document.addEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n    window.addEventListener('keydown', this.closeOnEscape);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.removeEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n    window.removeEventListener('keydown', this.closeOnEscape);\r\n    if (Dropdown.openDropdown === this) Dropdown.openDropdown = null;\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  protected updated(changed: Map<string, unknown>): void {\r\n    if (!changed.has('open')) return;\r\n    if (this.open) {\r\n      const previous = Dropdown.openDropdown;\r\n      Dropdown.openDropdown = this;\r\n      if (previous && previous !== this) previous.setOpen(false);\r\n    } else if (Dropdown.openDropdown === this) {\r\n      Dropdown.openDropdown = null;\r\n    }\r\n  }\r\n\r\n  private setOpen(open: boolean): void {\r\n    if (this.open === open) return;\r\n    this.open = open;\r\n    this.dispatchEvent(new CustomEvent<DropdownToggleEventDetail>('dropdown-toggle', { detail: { open }, bubbles: true, composed: true }));\r\n  }\r\n\r\n  private closeOnOutsideMouseDown = (event: Event): void => {\r\n    if (this.open && !event.composedPath().includes(this)) this.setOpen(false);\r\n  };\r\n\r\n  private closeOnEscape = (event: KeyboardEvent): void => {\r\n    if (!this.open || event.key !== 'Escape') return;\r\n    const focusWasInside = event.composedPath().includes(this);\r\n    this.setOpen(false);\r\n    if (focusWasInside) this.trigger()?.focus();\r\n  };\r\n\r\n  private trigger(): HTMLElement | null {\r\n    return this.renderRoot.querySelector<HTMLElement>('.menu-title');\r\n  }\r\n\r\n  /** Keyboard-reachable entries in the panel, in order: menu items (they delegate focus to their\r\n   * own link) plus any plain links/buttons/tabbable elements a caller slots in. */\r\n  private panelItems(): HTMLElement[] {\r\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('.menu-dropdown slot');\r\n    if (!slot) return [];\r\n    const selector =\r\n      'st-menu-item, st-menu-grid-item, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\r\n    const items: HTMLElement[] = [];\r\n    for (const el of slot.assignedElements({ flatten: true })) {\r\n      if (el.matches(selector)) items.push(el as HTMLElement);\r\n      items.push(...Array.from(el.querySelectorAll<HTMLElement>(selector)));\r\n    }\r\n    return items;\r\n  }\r\n\r\n  /** Moves focus into the panel once it has become visible (it is `visibility: hidden` until the\r\n   * `show` class lands, and hidden elements can't take focus). */\r\n  private focusItem(pick: (items: HTMLElement[]) => HTMLElement | undefined): void {\r\n    void this.updateComplete.then(() => pick(this.panelItems())?.focus());\r\n  }\r\n\r\n  /** Enter/Space/ArrowDown open the panel and focus its first entry; ArrowUp its last. */\r\n  private onTitleKeyDown = (event: KeyboardEvent): void => {\r\n    if (!this.hasContent || this.disabled) return;\r\n    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.setOpen(true);\r\n      this.focusItem((items) => items[0]);\r\n    } else if (event.key === 'ArrowUp') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.setOpen(true);\r\n      this.focusItem((items) => items[items.length - 1]);\r\n    }\r\n  };\r\n\r\n  /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */\r\n  private onPanelKeyDown = (event: KeyboardEvent): void => {\r\n    if (event.key === 'Tab') {\r\n      this.setOpen(false);\r\n      return;\r\n    }\r\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\r\n    const items = this.panelItems();\r\n    if (items.length === 0) return;\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    const path = event.composedPath();\r\n    const current = items.findIndex((item) => path.includes(item));\r\n    const last = items.length - 1;\r\n    const next =\r\n      event.key === 'Home'\r\n        ? 0\r\n        : event.key === 'End'\r\n          ? last\r\n          : event.key === 'ArrowDown'\r\n            ? current < 0 || current === last ? 0 : current + 1\r\n            : current <= 0 ? last : current - 1;\r\n    items[next].focus();\r\n  };\r\n\r\n  private onTitleClick = (event: Event): void => {\r\n    event.stopPropagation();\r\n    if (!this.hasContent) return;\r\n    event.preventDefault();\r\n    this.setOpen(!this.open);\r\n  };\r\n\r\n  /** A click anywhere inside the panel closes it, as in the source. */\r\n  private onPanelClick = (): void => {\r\n    this.setOpen(false);\r\n  };\r\n\r\n  private onContentSlotChange = (event: Event): void => {\r\n    this.hasContent = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).some(\r\n      (node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim()\r\n    );\r\n  };\r\n\r\n  private onIconSlotChange = (event: Event): void => {\r\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  render() {\r\n    const icon = html`<span\r\n      class=\"icon ${this.iconPosition === 'left' ? 'icon-left' : 'icon-right'}\"\r\n      ?hidden=${!this.hasIcon}\r\n      style=\"width:${this.iconSize};height:${this.iconSize};color:${this.iconColor}\"\r\n      ><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot\r\n    ></span>`;\r\n    const titleContent = html`\r\n      ${this.iconPosition === 'left' ? icon : nothing} ${this.label ? html`<span part=\"label\">${this.label}</span>` : nothing}\r\n      ${this.iconPosition === 'right' ? icon : nothing}\r\n      ${this.hasContent ? html`<span class=\"arrow\" part=\"caret\" aria-hidden=\"true\">▼</span>` : nothing}\r\n    `;\r\n    const titleClass = `menu-title ${this.triggerClassName} ${this.open ? 'active' : ''}`;\r\n\r\n    return html`\r\n      <div class=\"menu\" part=\"menu\">\r\n        ${this.href\r\n          ? html`\r\n              <a\r\n                part=\"trigger\"\r\n                class=${titleClass}\r\n                href=${this.href}\r\n                target=${this.target}\r\n                aria-haspopup=${this.hasContent ? 'true' : 'false'}\r\n                aria-expanded=${this.open}\r\n                aria-disabled=${this.disabled ? 'true' : nothing}\r\n                @click=${this.onTitleClick}\r\n                @keydown=${this.onTitleKeyDown}\r\n              >\r\n                ${titleContent}\r\n              </a>\r\n            `\r\n          : html`\r\n              <button\r\n                part=\"trigger\"\r\n                class=${titleClass}\r\n                type=\"button\"\r\n                aria-haspopup=\"true\"\r\n                aria-expanded=${this.open}\r\n                ?disabled=${this.disabled}\r\n                @click=${this.onTitleClick}\r\n                @keydown=${this.onTitleKeyDown}\r\n              >\r\n                ${titleContent}\r\n              </button>\r\n            `}\r\n        <div\r\n          part=\"panel\"\r\n          class=\"menu-dropdown align-${this.align} ${this.itemGroupClassName} ${this.open ? 'show' : ''}\"\r\n          role=\"menu\"\r\n          @click=${this.onPanelClick}\r\n          @keydown=${this.onPanelKeyDown}\r\n        >\r\n          <slot @slotchange=${this.onContentSlotChange}></slot>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-U7YKCCJG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hero/Hero.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport { ctaLinkStyles, paddingScaleStyles } from '../shared/section-styles';\r\nimport type { HeroActionEventDetail } from './HeroEvents';\r\n\r\n/**\r\n * Full-width hero banner: background image with a darkening overlay, title, optional subtitle and\r\n * a call-to-action link. Port of `SankhyaUI`'s React `Hero`; the framer-motion entrance is redone\r\n * as CSS keyframes (skipped under `prefers-reduced-motion`). The CTA fires a cancelable `action`\r\n * event (detail `{ href }`) before navigating.\r\n */\r\n@customElement('st-hero')\r\nexport class Hero extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n    ${paddingScaleStyles}\r\n\r\n    @keyframes st-hero-zoom {\r\n      from { opacity: 0; transform: scale(1.1); }\r\n      to { opacity: 1; transform: scale(1); }\r\n    }\r\n    @keyframes st-hero-rise {\r\n      from { opacity: 0; transform: translateY(30px); }\r\n      to { opacity: 1; transform: none; }\r\n    }\r\n    @keyframes st-hero-fade {\r\n      from { opacity: 0; }\r\n      to { opacity: 1; }\r\n    }\r\n\r\n    :host {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      overflow: hidden;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      background-color: var(--st-color-text-strong);\r\n      background-repeat: no-repeat;\r\n      background-size: cover;\r\n      background-position: var(--st-hero-position, center center);\r\n      color: var(--st-color-on-solid);\r\n      ${rootFontFamilyStyles}\r\n      animation: st-hero-zoom 1.5s ease-out;\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background-color: var(--st-color-surface);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 1;\r\n      background: linear-gradient(\r\n        to bottom,\r\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),\r\n        color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),\r\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)\r\n      );\r\n    }\r\n\r\n    :host([inverted]) .overlay {\r\n      display: none;\r\n    }\r\n\r\n    .content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-20);\r\n      position: relative;\r\n      z-index: 2;\r\n      width: 80%;\r\n      margin: 0 auto;\r\n      text-align: center;\r\n      align-items: center;\r\n      /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts\r\n         on the host (e.g. a theme text colour) must not turn it dark. */\r\n      color: var(--st-hero-text-color, var(--st-color-on-solid));\r\n    }\r\n\r\n    :host([inverted]) .content {\r\n      color: var(--st-hero-text-color, var(--st-color-text-strong));\r\n    }\r\n\r\n    :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }\r\n    :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }\r\n    :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }\r\n\r\n    .title {\r\n      font-size: var(--st-cms-text-display);\r\n      font-weight: var(--st-font-weight-bold);\r\n      line-height: 1.1;\r\n      color: inherit;\r\n      margin: 0;\r\n      animation: st-hero-rise 0.8s 0.3s ease-out backwards;\r\n    }\r\n\r\n    .subtitle {\r\n      font-size: var(--st-cms-text-xl);\r\n      line-height: 1.5;\r\n      color: inherit;\r\n      margin: 0;\r\n      animation: st-hero-fade 0.8s 0.5s ease-out backwards;\r\n    }\r\n\r\n    .actions {\r\n      display: flex;\r\n      justify-content: center;\r\n      width: 100%;\r\n    }\r\n\r\n    .cta {\r\n      ${ctaLinkStyles}\r\n      background: var(--st-button-primary-bg);\r\n      color: var(--st-button-primary-color);\r\n      font-weight: var(--st-button-font-weight);\r\n      font-size: var(--st-text-md);\r\n      animation: st-hero-rise 0.6s 0.7s ease-out backwards;\r\n    }\r\n\r\n    .cta:hover {\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    .cta:active {\r\n      transform: scale(0.98);\r\n    }\r\n\r\n    @media (min-width: 768px) {\r\n      .content { padding: var(--st-space-32); }\r\n    }\r\n    @media (min-width: 1024px) {\r\n      .content { padding: var(--st-space-48); }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      :host, .title, .subtitle, .cta { animation: none; }\r\n      .cta { transition: none; }\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: 'image-src' })\r\n  imageSrc = '';\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, reflect: true, attribute: 'text-alignment' })\r\n  textAlignment: 'left' | 'center' | 'right' | 'justify' = 'left';\r\n\r\n  @property({ type: String, reflect: true })\r\n  padding: 'none' | 'small' | 'medium' | 'large' = 'none';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  @property({ type: String, attribute: 'focal-point' })\r\n  focalPoint: 'top' | 'left' | 'right' | 'bottom' | 'center' = 'center';\r\n\r\n  private static positions = {\r\n    top: 'center top',\r\n    left: 'left center',\r\n    right: 'right center',\r\n    bottom: 'center bottom',\r\n    center: 'center center'\r\n  } as const;\r\n\r\n  protected willUpdate(): void {\r\n    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\r\n    this.style.setProperty('--st-hero-position', Hero.positions[this.focalPoint] ?? Hero.positions.center);\r\n  }\r\n\r\n  private onClick = (event: MouseEvent): void => {\r\n    const action = new CustomEvent<HeroActionEventDetail>('action', {\r\n      detail: { href: this.href },\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: true\r\n    });\r\n    this.dispatchEvent(action);\r\n    if (action.defaultPrevented) event.preventDefault();\r\n  };\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"overlay\" part=\"overlay\"></div>\r\n      <div class=\"content\" part=\"content\">\r\n        <h1 class=\"title\" part=\"title\">${this.title}</h1>\r\n        ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n        ${this.actionLabel\r\n          ? html`<div class=\"actions\" part=\"actions\">\r\n              <a class=\"cta\" part=\"action\" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>\r\n            </div>`\r\n          : nothing}\r\n        <slot></slot>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-WCO7JAIK.js

@@ -1,195 +0,0 @@
-import {
-  invertedSectionTextStyles,
-  sectionHeaderStyles,
-  sectionSubtitleStyles,
-  sectionTitleStyles
-} from "./chunk-3VE6VFJ4.js";
-import {
-  cardShellStyles,
-  controlBaseStyles,
-  rootFontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
-import {
-  __decorateClass
-} from "./chunk-EUXUH3YW.js";
-
-// src/testimonials/Testimonials.ts
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import "iconify-icon";
-var Testimonials = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.title = "";
-    this.subtitle = "";
-    this.items = [];
-    this.inverted = false;
-  }
-  renderItem(item) {
-    const rating = item.rating || 5;
-    return html`
-      <figure class="card" part="card">
-        <div class="stars" part="stars" role="img" aria-label="${rating} / 5">
-          ${Array.from({ length: rating }, () => html`<iconify-icon icon="mdi:star"></iconify-icon>`)}
-        </div>
-        <blockquote class="quote" part="quote">"${item.quote}"</blockquote>
-        <figcaption class="author" part="author">
-          ${item.imageSrc ? html`<img class="avatar" part="avatar" src=${item.imageSrc} alt=${item.name} />` : html`<div class="avatar avatar-placeholder" part="avatar">${item.name.charAt(0)}</div>`}
-          <span class="author-info">
-            <span class="name" part="name">${item.name}</span>
-            <span class="role" part="role">${item.role}${item.company ? ` at ${item.company}` : ""}</span>
-          </span>
-        </figcaption>
-      </figure>
-    `;
-  }
-  render() {
-    return html`
-      <div class="container" part="container">
-        <div class="header" part="header">
-          <h2 class="title" part="title">${this.title}</h2>
-          ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
-        </div>
-        <div class="grid" part="grid">${this.items.map((item) => this.renderItem(item))}</div>
-      </div>
-    `;
-  }
-};
-Testimonials.styles = css`
-    ${controlBaseStyles}
-
-    :host {
-      display: block;
-      box-sizing: border-box;
-      padding: var(--st-space-48) var(--st-space-24);
-      background-color: var(--st-color-subtle);
-      ${rootFontFamilyStyles}
-    }
-
-    :host([inverted]) {
-      background-color: var(--st-color-text-strong);
-    }
-
-    .container {
-      max-width: var(--st-cms-container-max);
-      margin: 0 auto;
-    }
-
-    .header {
-      ${sectionHeaderStyles}
-    }
-
-    .title {
-      ${sectionTitleStyles}
-      margin-bottom: var(--st-space-16);
-      letter-spacing: -0.02em;
-    }
-
-    .subtitle {
-      ${sectionSubtitleStyles}
-      margin: 0 auto;
-    }
-
-    ${invertedSectionTextStyles}
-
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-      gap: var(--st-space-32);
-    }
-
-    .card {
-      ${cardShellStyles}
-      display: flex;
-      flex-direction: column;
-      gap: var(--st-space-24);
-      margin: 0;
-      padding: var(--st-space-24);
-      box-shadow: 0 1px 3px var(--st-shadow-color-sm);
-    }
-
-    .stars {
-      display: flex;
-      gap: var(--st-space-4);
-      color: var(--st-favorite-accent);
-      font-size: var(--st-size-20);
-    }
-
-    .quote {
-      font-size: var(--st-text-md);
-      line-height: 1.6;
-      color: var(--st-color-text);
-      font-style: italic;
-      margin: 0;
-    }
-
-    .author {
-      display: flex;
-      align-items: center;
-      gap: var(--st-space-12);
-      margin-top: auto;
-    }
-
-    .avatar {
-      width: var(--st-space-48);
-      height: var(--st-space-48);
-      border-radius: var(--st-radius-circle);
-      object-fit: cover;
-      background-color: var(--st-color-divider);
-      flex-shrink: 0;
-    }
-
-    .avatar-placeholder {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--st-color-text-muted);
-      font-weight: var(--st-font-weight-semibold);
-      font-size: var(--st-text-xl);
-    }
-
-    .author-info {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .name {
-      font-weight: var(--st-font-weight-semibold);
-      color: var(--st-color-text-strong);
-      font-size: var(--st-text-xl);
-    }
-
-    .role {
-      font-size: var(--st-text-sm);
-      color: var(--st-color-text-faint);
-    }
-
-    @media (max-width: 768px) {
-      :host {
-        padding: var(--st-space-40) var(--st-space-20);
-      }
-      .grid {
-        grid-template-columns: 1fr;
-      }
-    }
-  `;
-__decorateClass([
-  property({ type: String })
-], Testimonials.prototype, "title", 2);
-__decorateClass([
-  property({ type: String })
-], Testimonials.prototype, "subtitle", 2);
-__decorateClass([
-  property({ attribute: false })
-], Testimonials.prototype, "items", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Testimonials.prototype, "inverted", 2);
-Testimonials = __decorateClass([
-  customElement("st-testimonials")
-], Testimonials);
-
-export {
-  Testimonials
-};
-//# sourceMappingURL=chunk-WCO7JAIK.js.map

package/dist/chunk-WCO7JAIK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/testimonials/Testimonials.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { cardShellStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, invertedSectionTextStyles, sectionHeaderStyles } from '../shared/section-styles';\r\n\r\nexport interface TestimonialItem {\r\n  id?: string;\r\n  name: string;\r\n  role: string;\r\n  company?: string;\r\n  imageSrc?: string;\r\n  quote: string;\r\n  /** Number of stars, default 5. */\r\n  rating?: number;\r\n}\r\n\r\n/** Section heading plus a grid of quote cards with star rating and author. Port of React `Testimonials`. */\r\n@customElement('st-testimonials')\r\nexport class Testimonials 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      padding: var(--st-space-48) var(--st-space-24);\r\n      background-color: var(--st-color-subtle);\r\n      ${rootFontFamilyStyles}\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background-color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .container {\r\n      max-width: var(--st-cms-container-max);\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .header {\r\n      ${sectionHeaderStyles}\r\n    }\r\n\r\n    .title {\r\n      ${sectionTitleStyles}\r\n      margin-bottom: var(--st-space-16);\r\n      letter-spacing: -0.02em;\r\n    }\r\n\r\n    .subtitle {\r\n      ${sectionSubtitleStyles}\r\n      margin: 0 auto;\r\n    }\r\n\r\n    ${invertedSectionTextStyles}\r\n\r\n    .grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n      gap: var(--st-space-32);\r\n    }\r\n\r\n    .card {\r\n      ${cardShellStyles}\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-24);\r\n      margin: 0;\r\n      padding: var(--st-space-24);\r\n      box-shadow: 0 1px 3px var(--st-shadow-color-sm);\r\n    }\r\n\r\n    .stars {\r\n      display: flex;\r\n      gap: var(--st-space-4);\r\n      color: var(--st-favorite-accent);\r\n      font-size: var(--st-size-20);\r\n    }\r\n\r\n    .quote {\r\n      font-size: var(--st-text-md);\r\n      line-height: 1.6;\r\n      color: var(--st-color-text);\r\n      font-style: italic;\r\n      margin: 0;\r\n    }\r\n\r\n    .author {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--st-space-12);\r\n      margin-top: auto;\r\n    }\r\n\r\n    .avatar {\r\n      width: var(--st-space-48);\r\n      height: var(--st-space-48);\r\n      border-radius: var(--st-radius-circle);\r\n      object-fit: cover;\r\n      background-color: var(--st-color-divider);\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .avatar-placeholder {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--st-color-text-muted);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      font-size: var(--st-text-xl);\r\n    }\r\n\r\n    .author-info {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .name {\r\n      font-weight: var(--st-font-weight-semibold);\r\n      color: var(--st-color-text-strong);\r\n      font-size: var(--st-text-xl);\r\n    }\r\n\r\n    .role {\r\n      font-size: var(--st-text-sm);\r\n      color: var(--st-color-text-faint);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-space-40) var(--st-space-20);\r\n      }\r\n      .grid {\r\n        grid-template-columns: 1fr;\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({ attribute: false })\r\n  items: TestimonialItem[] = [];\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  private renderItem(item: TestimonialItem) {\r\n    const rating = item.rating || 5;\r\n    return html`\r\n      <figure class=\"card\" part=\"card\">\r\n        <div class=\"stars\" part=\"stars\" role=\"img\" aria-label=\"${rating} / 5\">\r\n          ${Array.from({ length: rating }, () => html`<iconify-icon icon=\"mdi:star\"></iconify-icon>`)}\r\n        </div>\r\n        <blockquote class=\"quote\" part=\"quote\">\"${item.quote}\"</blockquote>\r\n        <figcaption class=\"author\" part=\"author\">\r\n          ${item.imageSrc\r\n            ? html`<img class=\"avatar\" part=\"avatar\" src=${item.imageSrc} alt=${item.name} />`\r\n            : html`<div class=\"avatar avatar-placeholder\" part=\"avatar\">${item.name.charAt(0)}</div>`}\r\n          <span class=\"author-info\">\r\n            <span class=\"name\" part=\"name\">${item.name}</span>\r\n            <span class=\"role\" part=\"role\">${item.role}${item.company ? ` at ${item.company}` : ''}</span>\r\n          </span>\r\n        </figcaption>\r\n      </figure>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"container\" part=\"container\">\r\n        <div class=\"header\" part=\"header\">\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        </div>\r\n        <div class=\"grid\" part=\"grid\">${this.items.map((item) => this.renderItem(item))}</div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AACxC,OAAO;AAkBA,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAyHL,iBAAQ;AAGR,oBAAW;AAGX,iBAA2B,CAAC;AAG5B,oBAAW;AAAA;AAAA,EAEH,WAAW,MAAuB;AACxC,UAAM,SAAS,KAAK,UAAU;AAC9B,WAAO;AAAA;AAAA,iEAEsD,MAAM;AAAA,YAC3D,MAAM,KAAK,EAAE,QAAQ,OAAO,GAAG,MAAM,mDAAmD,CAAC;AAAA;AAAA,kDAEnD,KAAK,KAAK;AAAA;AAAA,YAEhD,KAAK,WACH,6CAA6C,KAAK,QAAQ,QAAQ,KAAK,IAAI,QAC3E,4DAA4D,KAAK,KAAK,OAAO,CAAC,CAAC,QAAQ;AAAA;AAAA,6CAExD,KAAK,IAAI;AAAA,6CACT,KAAK,IAAI,GAAG,KAAK,UAAU,OAAO,KAAK,OAAO,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhG;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,2CAGgC,KAAK,KAAK;AAAA,YACzC,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA;AAAA,wCAE5D,KAAK,MAAM,IAAI,CAAC,SAAS,KAAK,WAAW,IAAI,CAAC,CAAC;AAAA;AAAA;AAAA,EAGrF;AACF;AApKa,aACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAapB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMlB,qBAAqB;AAAA;AAAA;AAAA;AAAA,MAIvB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASvB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4ErB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxHf,aAyHX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3Hf,aA4HX;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GA9HnB,aA+HX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjI/B,aAkIX;AAlIW,eAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}

package/dist/chunk-XHBC23TV.js

@@ -1,254 +0,0 @@
-import {
-  reducedMotionStyles
-} from "./chunk-3VE6VFJ4.js";
-import {
-  buttonResetStyles,
-  controlBaseStyles
-} from "./chunk-RHAOQ6K4.js";
-import {
-  __decorateClass
-} from "./chunk-EUXUH3YW.js";
-
-// src/carousel/Carousel.ts
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-var Carousel = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.autoPlay = true;
-    this.interval = 5e3;
-    this.showArrows = true;
-    this.showIndicators = true;
-    this.index = 0;
-    this.count = 0;
-    this.paused = false;
-    this.pause = () => {
-      this.paused = true;
-    };
-    this.resume = () => {
-      this.paused = false;
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("mouseenter", this.pause);
-    this.addEventListener("mouseleave", this.resume);
-    this.addEventListener("focusin", this.pause);
-    this.addEventListener("focusout", this.resume);
-  }
-  disconnectedCallback() {
-    this.stopTimer();
-    this.removeEventListener("mouseenter", this.pause);
-    this.removeEventListener("mouseleave", this.resume);
-    this.removeEventListener("focusin", this.pause);
-    this.removeEventListener("focusout", this.resume);
-    super.disconnectedCallback();
-  }
-  updated(changed) {
-    if (changed.has("index") || changed.has("count")) this.syncSlides();
-    if (changed.has("autoPlay") || changed.has("interval") || changed.has("count")) this.restartTimer();
-  }
-  get slides() {
-    return this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: true }) ?? [];
-  }
-  syncSlides() {
-    this.slides.forEach((el, i) => el.toggleAttribute("data-st-active", i === this.index));
-  }
-  onSlotChange() {
-    this.count = this.slides.length;
-    if (this.index >= this.count) this.index = 0;
-    this.syncSlides();
-  }
-  stopTimer() {
-    if (this.timer !== void 0) clearInterval(this.timer);
-    this.timer = void 0;
-  }
-  restartTimer() {
-    this.stopTimer();
-    if (!this.autoPlay || this.count < 2) return;
-    this.timer = setInterval(() => {
-      if (!this.paused) this.go(this.index + 1, "next");
-    }, this.interval);
-  }
-  go(target, direction) {
-    if (this.count === 0) return;
-    this.setAttribute("data-direction", direction);
-    this.index = (target + this.count) % this.count;
-    this.dispatchEvent(
-      new CustomEvent("carousel-change", {
-        detail: { index: this.index },
-        bubbles: true,
-        composed: true
-      })
-    );
-    this.restartTimer();
-  }
-  render() {
-    const multiple = this.count > 1;
-    return html`
-      <slot @slotchange=${this.onSlotChange}></slot>
-      ${this.showArrows && multiple ? html`
-            <button part="nav-button prev" class="nav prev" aria-label="Previous Slide" @click=${() => this.go(this.index - 1, "prev")}>&#10094;</button>
-            <button part="nav-button next" class="nav next" aria-label="Next Slide" @click=${() => this.go(this.index + 1, "next")}>&#10095;</button>
-          ` : nothing}
-      ${this.showIndicators && multiple ? html`<div class="indicators" part="indicators">
-            ${Array.from(
-      { length: this.count },
-      (_, i) => html`
-                <button
-                  part="dot"
-                  class="dot ${i === this.index ? "active" : ""}"
-                  aria-label="Go to slide ${i + 1}"
-                  aria-current=${i === this.index ? "true" : "false"}
-                  @click=${() => this.go(i, i > this.index ? "next" : "prev")}
-                ></button>
-              `
-    )}
-          </div>` : nothing}
-    `;
-  }
-};
-Carousel.styles = css`
-    ${controlBaseStyles}
-
-    :host {
-      display: block;
-      position: relative;
-      width: 100%;
-      overflow: hidden;
-    }
-
-    ::slotted(*) {
-      display: none !important;
-    }
-
-    ::slotted([data-st-active]) {
-      display: block !important;
-      animation: st-carousel-in-next 0.4s ease both;
-    }
-
-    :host([data-direction='prev']) ::slotted([data-st-active]) {
-      animation-name: st-carousel-in-prev;
-    }
-
-    @keyframes st-carousel-in-next {
-      from {
-        transform: translateX(10%);
-        opacity: 0;
-      }
-      to {
-        transform: none;
-        opacity: 1;
-      }
-    }
-
-    @keyframes st-carousel-in-prev {
-      from {
-        transform: translateX(-10%);
-        opacity: 0;
-      }
-      to {
-        transform: none;
-        opacity: 1;
-      }
-    }
-
-    .nav {
-      ${buttonResetStyles}
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--st-size-38);
-      height: var(--st-size-38);
-      border-radius: var(--st-radius-circle);
-      border: 1px solid var(--st-color-border);
-      background: var(--st-color-surface);
-      color: var(--st-color-text-strong);
-      font-size: var(--st-text-xl);
-      opacity: 0.8;
-      transition:
-        opacity 0.3s ease,
-        transform 0.3s ease;
-    }
-
-    .nav:hover {
-      opacity: 1;
-      transform: translateY(-50%) scale(1.1);
-    }
-
-    .prev {
-      left: var(--st-space-12);
-    }
-
-    .next {
-      right: var(--st-space-12);
-    }
-
-    .indicators {
-      position: absolute;
-      bottom: var(--st-space-24);
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 10;
-      display: flex;
-      gap: var(--st-space-12);
-    }
-
-    .dot {
-      ${buttonResetStyles}
-      width: var(--st-space-12);
-      height: var(--st-space-12);
-      padding: 0;
-      border-radius: var(--st-radius-circle);
-      background: var(--st-color-border-strong);
-      transition:
-        background 0.3s ease,
-        transform 0.3s ease;
-    }
-
-    .dot:hover {
-      background: var(--st-color-text-muted);
-    }
-
-    .dot.active {
-      background: var(--st-color-text-strong);
-      transform: scale(1.2);
-    }
-
-    ${reducedMotionStyles}
-    @media (prefers-reduced-motion: reduce) {
-      ::slotted([data-st-active]) {
-        animation: none;
-      }
-    }
-  `;
-__decorateClass([
-  property({ type: Boolean, attribute: "auto-play" })
-], Carousel.prototype, "autoPlay", 2);
-__decorateClass([
-  property({ type: Number })
-], Carousel.prototype, "interval", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-arrows" })
-], Carousel.prototype, "showArrows", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-indicators" })
-], Carousel.prototype, "showIndicators", 2);
-__decorateClass([
-  state()
-], Carousel.prototype, "index", 2);
-__decorateClass([
-  state()
-], Carousel.prototype, "count", 2);
-Carousel = __decorateClass([
-  customElement("st-carousel")
-], Carousel);
-
-export {
-  Carousel
-};
-//# sourceMappingURL=chunk-XHBC23TV.js.map