@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/chunk-OEOE6IFY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/product-nav/ProductNav.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { externalLinkAttrs, externalLinkExtras } from '../shared/external-link';\n\nexport interface ProductNavLink {\n  label: string;\n  /** An in-page anchor, e.g. `#features`. A link to another site (e.g. the docs) opens in a new tab, with the ↗ icon. */\n  href: string;\n}\n\n/**\n * A product sub-navigation bar for a product page, shown under the site header: a lockup (the product\n * icon, a prefix and a name, with a tagline under it), in-page section links, an optional site-menu\n * button and an optional external button.\n *\n * The lockup is one link (icon, wordmark, rule and tagline) to `brand-href`.\n *\n * The link whose section is in view gets `aria-current=\"true\"`, found with an IntersectionObserver\n * on the sections the `#anchor` links point at. On phones the links move to their own row and scroll\n * sideways inside the bar. `sticky` pins the bar to the top of the viewport; set\n * `--st-product-nav-top` to the height of a fixed site header above it.\n *\n * `embedded` drops the bar's own background, rule, shadow and sticky positioning, so it fills the\n * row of a host, e.g. the `slot=\"context\"` of `st-header` (its context mode). Desktop: lockup, links\n * centred, site-menu button and action pill at the right, vertically centred. Phones: lockup (wordmark\n * 18px, icon 32px, then 28px under 480px; tagline 9px under 480px and still shown), then a\n * sideways-scrolling links row, then a compact action pill.\n *\n * `site-menu-label` adds a 44px hamburger button before the action pill. Clicking it dispatches\n * `product-nav-site-menu`, which the host `st-header` answers by opening its site menu. While that menu\n * is open the host sets `site-menu-open`, which is reflected to the button's `aria-expanded`.\n *\n * `scroll-spy` marks the link for the section currently in view with `aria-current=\"location\"` and\n * an active style (accent colour and a 2px underline). The section is the one whose top is nearest\n * the top of the viewport at or above a 64px line; none is marked while the page is above the first\n * section.\n *\n * @fires product-nav-site-menu - The site-menu button was clicked. Detail: `{ trigger }`, the button itself, so the host can return focus to it. Bubbles, composed.\n * @attr icon - Product icon image URL, shown in the brand link before the wordmark (40px; 32px, then 28px under 480px, when `embedded`).\n * @attr icon-dark - Dark-theme icon image URL, shown on `:root.dark` in place of `icon`. Needs `icon`.\n * @attr label - Accessible name of the `<nav>` (e.g. `T-pilot`). Default: the brand prefix and name (e.g. `T-pilot`).\n * @attr brand-href - Target of the brand link (icon and wordmark). Default `#top`.\n * @attr site-menu-label - Accessible name of the site-menu button (a hamburger before the action pill). Empty (default): no button.\n * @attr site-menu-open - Reflected. True while the host header's site menu is open, which sets the button's `aria-expanded`. Set by the host header, never from outside.\n * @attr embedded - Fills the host row: no sticky positioning, background, rule or shadow of its own.\n * @attr scroll-spy - Marks the link for the section in view (`aria-current=\"location\"`).\n * @cssprop --st-product-nav-top - The `top` offset of a sticky bar (default `0px`).\n * @cssprop --st-product-nav-z - The `z-index` of a sticky bar (default `90`, under st-header's 100 so its open mega panel paints above).\n * @cssprop --st-product-nav-border - Colour of the bottom rule (default `--st-cms-primary-100`).\n * @csspart nav - The `<nav>` landmark.\n * @csspart lockup - The wrapper of the brand link.\n * @csspart brand - The brand link (icon, wordmark, rule and tagline).\n * @csspart icon - The product icon image (one, or two when `icon-dark` is set).\n * @csspart links - The list of section links.\n * @csspart link - One section link.\n * @csspart site-menu - The site-menu button.\n * @csspart action - The external button.\n */\n@customElement('st-product-nav')\nexport class ProductNav extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n    /* fontFamilyStyles is a bare declaration: it must sit inside a rule, or it swallows the next one. */\n    :host {\n      ${fontFamilyStyles}\n    }\n\n    /* The bar is exactly 64px tall on desktop (the bottom rule is an inset shadow, so it adds no height). */\n    :host {\n      display: block;\n      box-sizing: border-box;\n      background: var(--st-color-surface);\n      box-shadow: inset 0 -1px 0 var(--st-product-nav-border, var(--st-cms-primary-100));\n    }\n\n    /* Below st-header (z-index 100) and its open mega panel, which both sit in the header's stacking context. */\n    :host([sticky]:not([embedded])) {\n      position: sticky;\n      top: var(--st-product-nav-top, 0px);\n      z-index: var(--st-product-nav-z, 90);\n    }\n\n    .bar {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-24);\n      box-sizing: border-box;\n      max-width: var(--st-cms-container-max);\n      height: 64px;\n      margin: 0 auto;\n      padding: 0 var(--st-space-24);\n    }\n\n    .brand {\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n      gap: var(--pn-brand-gap, 12px);\n      min-height: 44px;\n      color: inherit;\n      text-decoration: none;\n    }\n\n    /* The product icon before the lockup. A fixed square that never shrinks; the default image-rendering keeps an SVG crisp. */\n    .icon {\n      flex: none;\n      width: var(--pn-icon-size, 40px);\n      height: var(--pn-icon-size, 40px);\n      object-fit: contain;\n    }\n\n    /* Light and dark icon per the site's theme: the dark one shows on :root.dark (see --st-theme-*-display). */\n    .theme-light {\n      display: var(--st-theme-light-display, inline-block);\n    }\n\n    .theme-dark {\n      display: var(--st-theme-dark-display, none);\n    }\n\n    /* The lockup wrapper around the brand link. The icon size and the gap after the icon are variables,\n       which the embedded phone layout overrides. */\n    .lockup {\n      display: inline-flex;\n      align-items: center;\n      --pn-icon-size: 40px;\n      --pn-brand-gap: 12px;\n    }\n\n    /* The text column: the wordmark, the rule and the tagline. */\n    .brand-text {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .wordmark {\n      display: inline-block;\n      font-size: 24px;\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1;\n      letter-spacing: -0.01em;\n    }\n\n    .prefix {\n      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));\n    }\n\n    .name {\n      color: var(--st-cms-brand-azure);\n    }\n\n    /* The 3px azure bar under the wordmark, as wide as the lockup's tagline. */\n    .rule {\n      display: block;\n      height: 3px;\n      margin: 4px 0;\n      border-radius: 2px;\n      background: var(--st-cms-brand-azure);\n    }\n\n    .tagline {\n      font-size: 10px;\n      font-weight: var(--st-font-weight-semibold);\n      letter-spacing: 0.04em;\n      line-height: 1;\n      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));\n    }\n\n    .brand:focus-visible,\n    .links a:focus-visible,\n    .action:focus-visible,\n    .site-menu:focus-visible {\n      outline: var(--st-focus-ring);\n      outline-offset: 2px;\n    }\n\n    .links {\n      display: flex;\n      flex: 1 1 auto;\n      align-items: center;\n      gap: var(--st-space-4);\n      min-width: 0;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      overflow-x: auto;\n      scrollbar-width: thin;\n    }\n\n    .links a {\n      /* Positioned, so the visually hidden \"(opens in new tab)\" of an external link stays inside the link\n         instead of widening the page past the sideways-scrolling row. */\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      box-sizing: border-box;\n      min-height: 44px;\n      padding: 10px 12px;\n      border-radius: var(--st-radius-xs);\n      color: var(--st-cms-text-strong, var(--st-cms-navy));\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 1.2;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: background-color 0.2s ease;\n    }\n\n    .links a:hover {\n      background: var(--st-cms-primary-100);\n    }\n\n    /* The section in view: brand-navy text with an azure underline. */\n    .links a[aria-current='true'] {\n      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));\n      font-weight: var(--st-font-weight-semibold);\n      box-shadow: inset 0 -3px 0 var(--st-cms-brand-azure);\n    }\n\n    /* The section the scroll spy marks: accent text with a 2px underline. */\n    .links a[aria-current='location'] {\n      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));\n      font-weight: var(--st-font-weight-semibold);\n      box-shadow: inset 0 -2px 0 var(--st-cms-brand-azure);\n    }\n\n    /* embedded: the row of a host header, not a bar of its own. The host stretches to the free width\n       of the header's row; the inner row has no container width, margin or padding of its own, so it\n       lines up with the header's padding. */\n    /* A flex box, so the inner row is vertically centred in the header's row (a percentage height on\n       the row alone does not resolve here). */\n    :host([embedded]) {\n      display: flex;\n      align-items: center;\n      flex: 1 1 auto;\n      min-width: 0;\n      height: 100%;\n      background: transparent;\n      box-shadow: none;\n    }\n\n    /* The <nav> (and the row inside it) fill the flex host, so the links take the free space and the\n       pill sits at the end. */\n    :host([embedded]) nav {\n      display: flex;\n      flex: 1 1 auto;\n      min-width: 0;\n    }\n\n    :host([embedded]) .bar {\n      box-sizing: border-box;\n      flex: 1 1 auto;\n      min-width: 0;\n      align-items: center;\n      gap: 24px;\n      width: 100%;\n      max-width: none;\n      height: auto;\n      margin: 0;\n      padding: 0;\n    }\n\n    /* Links take the space between the lockup and the pill; they scroll inside it if they do not fit. */\n    :host([embedded]) .links {\n      flex: 1 1 auto;\n      justify-content: center;\n      min-width: 0;\n    }\n\n    :host([embedded]) .links > li {\n      flex: none;\n    }\n\n    :host([embedded]) .links a {\n      min-height: 44px;\n    }\n\n    :host([embedded]) .action {\n      flex: none;\n      margin-left: 0;\n    }\n\n    /* The short label of the action pill, shown on phones when the action-short-label attribute is set. */\n    .action-short {\n      display: none;\n    }\n\n    .action {\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n      gap: var(--st-space-8);\n      box-sizing: border-box;\n      min-height: 44px;\n      margin-left: auto;\n      padding: 0 var(--st-space-20);\n      border-radius: var(--st-radius-full);\n      background: var(--st-cms-brand-navy);\n      color: var(--st-cms-on-dark);\n      font-size: 15px;\n      font-weight: var(--st-font-weight-semibold);\n      text-decoration: none;\n      white-space: nowrap;\n    }\n\n    .action svg {\n      flex: none;\n      width: 16px;\n      height: 16px;\n    }\n\n    /* The site-menu button: a 44px round, outlined hamburger before the action pill. Shown at every width. */\n    .site-menu {\n      display: inline-flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      width: 44px;\n      height: 44px;\n      margin: 0;\n      padding: 0;\n      border: 1px solid var(--st-color-border);\n      border-radius: 9999px;\n      background: transparent;\n      color: var(--st-cms-text-strong, currentColor);\n      cursor: pointer;\n    }\n\n    .site-menu:hover {\n      background: var(--st-color-hover);\n    }\n\n    .site-menu svg {\n      flex: none;\n      width: 20px;\n      height: 20px;\n    }\n\n    @media (max-width: 768px) {\n      .bar {\n        flex-wrap: wrap;\n        height: auto;\n        gap: var(--st-space-12) var(--st-space-16);\n        padding-top: var(--st-space-8);\n        padding-bottom: var(--st-space-8);\n      }\n\n      .links {\n        order: 3;\n        flex: 1 0 100%;\n        width: 100%;\n        /* One row that scrolls sideways inside the bar; the page itself never scrolls sideways. */\n        flex-wrap: nowrap;\n      }\n\n      /* embedded on a phone: lockup | sideways links | compact pill, all in one 64px row. */\n      :host([embedded]) .bar {\n        flex-wrap: nowrap;\n        gap: var(--st-space-12) var(--st-space-12);\n        padding: 0;\n      }\n\n      :host([embedded]) .wordmark {\n        font-size: 18px;\n      }\n\n      :host([embedded]) .brand {\n        min-height: 36px;\n      }\n\n      :host([embedded]) .lockup {\n        --pn-icon-size: 32px;\n        --pn-brand-gap: 8px;\n      }\n\n      :host([embedded]) .links {\n        order: 0;\n        flex: 1 1 0;\n        width: auto;\n        min-width: 0;\n        justify-content: flex-start;\n        scrollbar-width: none;\n        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);\n        mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);\n      }\n\n      :host([embedded]) .links::-webkit-scrollbar {\n        display: none;\n      }\n\n      :host([embedded]) .action {\n        min-height: 36px;\n        margin-left: 0;\n        padding: 0 var(--st-space-12);\n        font-size: 13px;\n      }\n    }\n\n    @media (max-width: 480px) {\n      :host([embedded]) .lockup {\n        --pn-icon-size: 28px;\n      }\n\n      /* The tagline stays on phones: it is the way home. One size smaller. */\n      :host([embedded]) .tagline {\n        font-size: 9px;\n      }\n\n      /* Only swap labels when a short one is given; otherwise the full label stays. */\n      :host([embedded]) .action.has-short .action-full {\n        display: none;\n      }\n\n      :host([embedded]) .action.has-short .action-short {\n        display: inline;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .links a {\n        transition: none;\n      }\n    }\n  `;\n\n  /** Brand prefix, e.g. `T-`. Shown in the brand navy. */\n  @property({ type: String, attribute: 'brand-prefix' })\n  brandPrefix = '';\n\n  /** Product name, e.g. `pilot`. Shown in the brand azure with an underline. */\n  @property({ type: String, attribute: 'brand-name' })\n  brandName = '';\n\n  /** Small line under the name, e.g. `by Sankhyatronics`. Plain text inside the brand link. */\n  @property({ type: String, attribute: 'brand-tagline' })\n  brandTagline = '';\n\n  /** Target of the brand link (the icon, wordmark, rule and tagline). */\n  @property({ type: String, attribute: 'brand-href' })\n  brandHref = '#top';\n\n  /** Product icon image URL, shown inside the brand link before the wordmark (40px; 32px and 28px on phones when `embedded`). Omitted when empty. */\n  @property({ type: String })\n  icon = '';\n\n  /** Dark-theme variant of `icon`, shown on the site's dark theme (`:root.dark`) in place of it. Needs `icon`; without it `icon` shows on every theme. */\n  @property({ type: String, attribute: 'icon-dark' })\n  iconDark = '';\n\n  /** In-page section links. */\n  @property({ attribute: false })\n  links: ProductNavLink[] = [];\n\n  /** Label of the external button at the end of the bar. Shown only together with `href`. */\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  /** Shorter button label for phones in `embedded` mode (e.g. `Open ↗`), so the links row keeps its room. Optional; the full `action-label` is used otherwise. */\n  @property({ type: String, attribute: 'action-short-label' })\n  actionShortLabel = '';\n\n  /** Target of the external button. It opens in the same tab. */\n  @property({ type: String })\n  href = '';\n\n  /** Accessible name of the site-menu button, e.g. `Sankhyatronics menu`. Empty (default): no button. Clicking it dispatches `product-nav-site-menu`. */\n  @property({ type: String, attribute: 'site-menu-label' })\n  siteMenuLabel = '';\n\n  /** True while the host header's site menu is open. Set by the header, never from outside: it drives the button's `aria-expanded`. */\n  @property({ type: Boolean, reflect: true, attribute: 'site-menu-open' })\n  siteMenuOpen = false;\n\n  /** Pins the bar to the top of the viewport (`position: sticky`). Ignored when `embedded`. */\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  /** Accessible name of the `<nav>` landmark, e.g. `T-pilot`. Falls back to the brand prefix and name. */\n  @property({ type: String })\n  label = '';\n\n  /** Fills the row of a host header (see the class docs): no bar background, rule, shadow or sticky positioning. */\n  @property({ type: Boolean, reflect: true })\n  embedded = false;\n\n  /** Marks the link for the section in view with `aria-current=\"location\"` and an active style. */\n  @property({ type: Boolean, attribute: 'scroll-spy' })\n  scrollSpy = false;\n\n  /** The id of the section in view, from the IntersectionObserver. */\n  @state() private activeId = '';\n\n  private observer?: IntersectionObserver;\n\n  /** The sections the scroll spy measures (set while `scrollSpy` is on). */\n  private spyTargets: HTMLElement[] = [];\n\n  private spyFrame = 0;\n\n  /** Distance from the top of the viewport that counts as \"passed\", matching the 64px header row. */\n  private static readonly SPY_OFFSET = 64;\n\n  /** Extra pixels past the offset line, so a section an anchor jump lands just under it (sub-pixel) still counts. */\n  private static readonly SPY_TOLERANCE = 8;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.observe();\n  }\n\n  disconnectedCallback(): void {\n    this.observer?.disconnect();\n    this.observer = undefined;\n    this.stopSpyScroll();\n    super.disconnectedCallback();\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n    if (changed.has('links') || changed.has('scrollSpy')) this.observe();\n    if (changed.has('activeId') && this.activeId) this.revealActiveLink();\n  }\n\n  /** When the links row scrolls sideways (phones), keeps the current section's link in view. Only the\n   * row scrolls, never the page. */\n  private revealActiveLink(): void {\n    const row = this.renderRoot.querySelector<HTMLElement>('.links');\n    const link = row?.querySelector<HTMLElement>('a[aria-current]');\n    if (!row || !link || row.scrollWidth <= row.clientWidth) return;\n    const rowBox = row.getBoundingClientRect();\n    const linkBox = link.getBoundingClientRect();\n    const margin = 24;\n    let delta = 0;\n    if (linkBox.left < rowBox.left + margin) delta = linkBox.left - rowBox.left - margin;\n    else if (linkBox.right > rowBox.right - margin) delta = linkBox.right - rowBox.right + margin;\n    if (delta) {\n      const smooth = !window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n      row.scrollBy({ left: delta, behavior: smooth ? 'smooth' : 'auto' });\n    }\n  }\n\n  /**\n   * Scroll spy: the section in view is the LAST one, in document order, whose top is at or above\n   * `SPY_OFFSET + SPY_TOLERANCE`. None above that line (above the first section) leaves no active id.\n   * At the bottom of the page the last section is active, even if its top never reaches the line.\n   */\n  private updateScrollSpy(): void {\n    const targets = this.spyTargets;\n    const atBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2;\n    const line = ProductNav.SPY_OFFSET + ProductNav.SPY_TOLERANCE;\n    let id = '';\n    if (atBottom && targets.length) {\n      id = targets[targets.length - 1].id;\n    } else {\n      for (const target of targets) {\n        if (target.getBoundingClientRect().top <= line) id = target.id;\n      }\n    }\n    if (id !== this.activeId) this.activeId = id;\n  }\n\n  /** Scroll spy re-checks on every scroll frame: an IntersectionObserver alone misses a long section passing the line. */\n  private onSpyScroll = (): void => {\n    if (this.spyFrame) return;\n    this.spyFrame = requestAnimationFrame(() => {\n      this.spyFrame = 0;\n      this.updateScrollSpy();\n    });\n  };\n\n  private stopSpyScroll(): void {\n    window.removeEventListener('scroll', this.onSpyScroll);\n    if (this.spyFrame) cancelAnimationFrame(this.spyFrame);\n    this.spyFrame = 0;\n    this.spyTargets = [];\n  }\n\n  /** Watches the sections the `#anchor` links point at, so the link for the one in view is current. */\n  private observe(): void {\n    this.observer?.disconnect();\n    this.observer = undefined;\n    this.stopSpyScroll();\n    if (typeof IntersectionObserver === 'undefined' || typeof document === 'undefined') return;\n    const targets = this.links\n      .filter(link => link.href.startsWith('#') && link.href.length > 1)\n      .map(link => document.getElementById(link.href.slice(1)))\n      .filter((node): node is HTMLElement => node !== null);\n    if (!targets.length) return;\n    if (this.scrollSpy) {\n      // Document order, so the scroll spy can take the last section above the line.\n      this.spyTargets = [...targets].sort((a, b) =>\n        a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1\n      );\n      this.observer = new IntersectionObserver(() => this.updateScrollSpy(), {\n        rootMargin: `-${ProductNav.SPY_OFFSET}px 0px 0px 0px`,\n        threshold: 0,\n      });\n      targets.forEach(target => this.observer?.observe(target));\n      window.addEventListener('scroll', this.onSpyScroll, { passive: true });\n      this.updateScrollSpy();\n      return;\n    }\n    this.observer = new IntersectionObserver(\n      entries => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) this.activeId = entry.target.id;\n          else if (this.activeId === entry.target.id) this.activeId = '';\n        }\n      },\n      { rootMargin: '-40% 0px -55% 0px' }\n    );\n    targets.forEach(target => this.observer?.observe(target));\n  }\n\n  /** The product icon: the light image, plus the dark one (theme-switched) when `iconDark` is set. Alt is empty: the link text names the product. */\n  private renderIcon() {\n    if (!this.icon) return nothing;\n    const light = html`<img part=\"icon\" class=\"icon${this.iconDark ? ' theme-light' : ''}\" src=${this.icon} alt=\"\" width=\"40\" height=\"40\" />`;\n    if (!this.iconDark) return light;\n    return html`${light}<img part=\"icon\" class=\"icon theme-dark\" src=${this.iconDark} alt=\"\" width=\"40\" height=\"40\" />`;\n  }\n\n  /** The site-menu button, before the action pill. Only with `site-menu-label`. */\n  private renderSiteMenu() {\n    if (!this.siteMenuLabel) return nothing;\n    return html`<button\n      part=\"site-menu\"\n      type=\"button\"\n      class=\"site-menu\"\n      aria-label=${this.siteMenuLabel}\n      aria-haspopup=\"dialog\"\n      aria-expanded=${this.siteMenuOpen}\n      @click=${(event: Event) => this.onSiteMenuClick(event)}\n    >\n      <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M3 5h14M3 10h14M3 15h14\"></path></svg>\n    </button>`;\n  }\n\n  /** Dispatches `product-nav-site-menu`, with the button as the detail's `trigger`, for the host header to open its site menu. */\n  private onSiteMenuClick(event: Event): void {\n    const trigger = event.currentTarget as HTMLElement;\n    this.dispatchEvent(\n      new CustomEvent<{ trigger: HTMLElement }>('product-nav-site-menu', { detail: { trigger }, bubbles: true, composed: true })\n    );\n  }\n\n  render() {\n    // Content renderers may keep `label` as the node's own name, so the brand is the fallback name.\n    const label = this.label || `${this.brandPrefix}${this.brandName}`;\n    return html`\n      <nav part=\"nav\" aria-label=${label}>\n        <div class=\"bar\">\n          <div class=\"lockup\" part=\"lockup\">\n            <a class=\"brand\" part=\"brand\" href=${this.brandHref || '#top'}>\n              ${this.renderIcon()}\n              <span class=\"brand-text\">\n                <span class=\"wordmark\"><span class=\"prefix\">${this.brandPrefix}</span><span class=\"name\">${this.brandName}</span></span>\n                <span class=\"rule\" aria-hidden=\"true\"></span>\n                ${this.brandTagline ? html`<span class=\"tagline\">${this.brandTagline}</span>` : nothing}\n              </span>\n            </a>\n          </div>\n          ${this.links.length\n            ? html`<ul class=\"links\" part=\"links\">\n                ${this.links.map(\n                  link => html`<li>\n                    <a\n                      part=\"link\"\n                      href=${link.href}\n                      target=${externalLinkAttrs(link.href).target}\n                      rel=${externalLinkAttrs(link.href).rel}\n                      aria-current=${this.activeId && link.href === `#${this.activeId}` ? (this.scrollSpy ? 'location' : 'true') : nothing}\n                    >${link.label}${externalLinkExtras(link.href)}</a>\n                  </li>`\n                )}\n              </ul>`\n            : nothing}\n          ${this.renderSiteMenu()}\n          ${this.actionLabel && this.href\n            ? html`<a class=\"action ${this.actionShortLabel ? 'has-short' : ''}\" part=\"action\" href=${this.href} aria-label=${this.actionLabel}><span class=\"action-full\">${this.actionLabel}</span>${this.actionShortLabel ? html`<span class=\"action-short\">${this.actionShortLabel}</span>` : nothing}<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M7 17L17 7\"></path><path d=\"M9 7h8v8\"></path></svg></a>`\n            : nothing}\n        </div>\n      </nav>\n    `;\n  }\n}\n"],"mappings":"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AAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AALX,WA2ba,aAAa;AAAA;AA3b1B,WA8ba,gBAAgB;AA5ExC;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAjX1C,WAkXX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GArXxC,WAsXX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAzX3C,WA0XX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GA7XxC,WA8XX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjYf,WAkYX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GArYvC,WAsYX;AAIA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAzYnB,WA0YX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GA7Y1C,WA8YX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,qBAAqB,CAAC;AAAA,GAjZhD,WAkZX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArZf,WAsZX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GAzZ7C,WA0ZX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GA7Z5D,WA8ZX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAja/B,WAkaX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAraf,WAsaX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAza/B,WA0aX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa,CAAC;AAAA,GA7azC,WA8aX;AAGiB;AAAA,EAAhB,MAAM;AAAA,GAjbI,WAibM;AAjbN,aAAN;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB;","names":[]}

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

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

package/dist/chunk-PV6OCXXN.js.map

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

package/dist/chunk-Q66CJO3P.js

@@ -0,0 +1,534 @@
+import {
+  renderMarkdown
+} from "./chunk-TJK55CJ2.js";
+import {
+  cardTitleStyles,
+  ctaLinkStyles,
+  iconTileStyles,
+  invertedSectionTextStyles,
+  reducedMotionStyles,
+  sectionHeaderStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-KZ7PMFWS.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/bento-grid/BentoGrid.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import "iconify-icon";
+var BentoGrid = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.inverted = false;
+    this.title = "";
+    this.subtitle = "";
+    this.items = [];
+  }
+  renderCard(item) {
+    const variant = item.variant ?? "default";
+    const colSpan = item.colSpan ?? 1;
+    const hasChips = !!item.chips?.length;
+    const styled = hasChips || !!item.layout;
+    const classes = [
+      "card",
+      `col-${colSpan}`,
+      `row-${item.rowSpan ?? 1}`,
+      item.imageSrc ? "has-image" : "",
+      variant === "default" ? "" : variant,
+      styled ? "v2" : "",
+      item.layout === "row" ? "row" : ""
+    ].filter(Boolean).join(" ");
+    const beside = hasChips && colSpan === 4;
+    const iconInText = beside || item.layout === "row";
+    const icon = item.icon ? html`<div class="icon" part="icon"><iconify-icon icon=${item.icon}></iconify-icon></div>` : nothing;
+    const text = html`<div class="text" part="text">
+      ${iconInText ? icon : nothing}
+      <h3 class="card-title" part="card-title">${item.title}</h3>
+      ${item.description ? html`<div class="card-description" part="card-description">${unsafeHTML(renderMarkdown(item.description))}</div>` : nothing}
+    </div>`;
+    const chips = hasChips ? html`<ul class="chips" part="chips">
+          ${item.chips?.map(
+      (chip) => html`<li class="chip ${chip.tone ?? "plain"}" part="chip">${chip.label}</li>`
+    )}
+        </ul>` : nothing;
+    const body = html`
+      ${item.imageSrc ? html`<div class="image-wrapper" part="image-wrapper">
+            <img class="image" part="image" src=${item.imageSrc} alt=${item.imageAlt ?? item.title} />
+          </div>` : nothing}
+      <div class="content" part="content">
+        ${iconInText ? nothing : icon}
+        ${beside ? html`<div class="split">${text}${chips}</div>` : html`${text}${chips}`}
+        ${item.href && item.actionLabel ? html`<a class="action" part="action" href=${item.href} aria-label=${item.actionAriaLabel || nothing}>${item.actionLabel}</a>` : nothing}
+      </div>
+    `;
+    return item.href && !item.actionLabel ? html`<a part="card" class=${classes} href=${item.href}>${body}</a>` : html`<div part="card" class=${classes}>${body}</div>`;
+  }
+  render() {
+    return html`
+      <div class="container" part="container">
+        ${this.title || this.subtitle ? html`<div class="header" part="header">
+              ${this.title ? html`<h2 class="title" part="title">${this.title}</h2>` : nothing}
+              ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+            </div>` : nothing}
+        <div class="grid" part="grid">${this.items.map((item) => this.renderCard(item))}</div>
+      </div>
+    `;
+  }
+};
+BentoGrid.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-bento-grid-padding instead. */
+      padding: var(--st-bento-grid-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;
+      background: var(--st-color-page);
+      ${fontFamilyStyles}
+    }
+
+    :host([inverted]) {
+      background: var(--st-color-text-strong);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+    }
+
+    .header {
+      ${sectionHeaderStyles}
+    }
+
+    .title {
+      ${sectionTitleStyles}
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      margin-bottom: 0;
+    }
+
+    ${invertedSectionTextStyles}
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-auto-rows: minmax(240px, auto);
+      gap: var(--st-space-24);
+    }
+
+    .card {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      border: 1px solid var(--st-bento-card-border, var(--st-color-border));
+      border-radius: var(--st-space-24);
+      background: var(--st-color-surface);
+      color: inherit;
+      text-decoration: none;
+      transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+    }
+
+    :host([inverted]) .card {
+      background: var(--st-color-text-strong);
+      border-color: var(--st-color-text);
+    }
+
+    .card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 24px -10px var(--st-shadow-color-lg);
+      z-index: 1;
+    }
+
+    .image-wrapper {
+      position: absolute;
+      inset: 0;
+    }
+
+    .image-wrapper::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(to bottom, transparent 0%, var(--st-shadow-color-xl) 100%);
+    }
+
+    .image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.5s ease;
+    }
+
+    .card:hover .image {
+      transform: scale(1.05);
+    }
+
+    .content {
+      position: relative;
+      z-index: 1;
+      margin-top: auto;
+      padding: var(--st-space-24);
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-16);
+    }
+
+    .icon {
+      ${iconTileStyles}
+      width: var(--st-size-40);
+      height: var(--st-size-40);
+      font-size: 24px;
+      background: var(--st-bento-icon-bg, var(--st-color-subtle));
+      color: var(--st-bento-icon-color, var(--st-color-text-muted));
+    }
+
+    .text {
+      padding: var(--st-space-16);
+      border-radius: var(--st-radius-md);
+    }
+
+    .card-title {
+      ${cardTitleStyles}
+      font-size: var(--st-text-lg);
+    }
+
+    .card-description {
+      margin: 0;
+      font-size: var(--st-text-md);
+      color: var(--st-color-text-muted);
+    }
+
+    :host([inverted]) .card-title {
+      color: var(--st-color-on-solid);
+    }
+
+    :host([inverted]) .card-description {
+      color: var(--st-color-border);
+    }
+
+    .card.has-image .card-title,
+    .card.has-image .card-description {
+      color: var(--st-color-on-solid);
+    }
+
+    .card.has-image .icon {
+      background: var(--st-shadow-color-lg);
+      color: var(--st-color-on-solid);
+      backdrop-filter: blur(4px);
+    }
+
+    /* variant: prefixed with :host so it outranks the :host([inverted]) card rules above. */
+    :host .card.primary {
+      background: var(--st-color-accent);
+      border-color: var(--st-color-accent);
+      color: var(--st-color-on-solid);
+    }
+
+    :host .card.dark {
+      background: var(--st-cms-navy);
+      border-color: var(--st-cms-navy);
+      color: var(--st-cms-on-dark);
+    }
+
+    :host .card.primary .card-title {
+      color: var(--st-color-on-solid);
+    }
+
+    :host .card.dark .card-title {
+      color: var(--st-cms-on-dark);
+    }
+
+    :host .card.primary .card-description {
+      color: color-mix(in oklch, var(--st-color-on-solid) 85%, transparent);
+    }
+
+    :host .card.dark .card-description {
+      color: color-mix(in oklch, var(--st-cms-on-dark) 80%, transparent);
+    }
+
+    :host .card.primary .icon {
+      background: color-mix(in oklch, var(--st-color-on-solid) 18%, transparent);
+      color: var(--st-color-on-solid);
+    }
+
+    :host .card.dark .icon {
+      background: color-mix(in oklch, var(--st-cms-on-dark) 12%, transparent);
+      color: var(--st-cms-on-dark);
+    }
+
+    .card-description > :first-child {
+      margin-top: 0;
+    }
+
+    .card-description > :last-child {
+      margin-bottom: 0;
+    }
+
+    .card-description p {
+      margin: 0 0 var(--st-space-8);
+    }
+
+    .card-description a {
+      position: relative;
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+
+    /* Touch target: the link keeps its text size; a 44px hit area (WCAG 2.5.5) sits over it. */
+    .card-description a::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: max(100%, 44px);
+      height: 44px;
+      transform: translate(-50%, -50%);
+    }
+
+    .action {
+      ${ctaLinkStyles}
+      align-self: flex-start;
+      min-height: 44px;
+      margin-top: var(--st-space-8);
+      background: var(--st-button-primary-bg);
+      color: var(--st-button-primary-color);
+      font-weight: var(--st-button-font-weight);
+      position: relative;
+      z-index: 1;
+    }
+
+    .action:hover {
+      transform: scale(1.03);
+    }
+
+    .action:focus-visible {
+      outline: var(--st-focus-ring);
+      outline-offset: 2px;
+    }
+
+    .card.primary .action {
+      background: var(--st-cms-on-dark);
+      color: var(--st-color-accent);
+    }
+
+    .card.dark .action {
+      background: var(--st-cms-highlight);
+      color: var(--st-cms-navy);
+    }
+
+    /* Design-system look, only on cards that use chips or layout (.v2). */
+    .card.v2 .content {
+      padding: var(--st-space-32);
+    }
+
+    .card.v2 .icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      background: var(--st-cms-primary-100);
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+    }
+
+    :host .card.v2.primary .icon,
+    :host .card.v2.dark .icon {
+      background: var(--st-cms-highlight);
+      color: var(--st-cms-navy);
+    }
+
+    :host .card.v2.primary .icon {
+      background: var(--st-cms-highlight);
+    }
+
+    .card.row .content {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .card.row .text {
+      flex: 1 1 360px;
+      padding: 0;
+    }
+
+    .card.row .action {
+      margin-top: 0;
+      align-self: center;
+    }
+
+    .split {
+      width: 100%;
+    }
+
+    .card.v2 .text {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-12);
+    }
+
+    .card.v2 .card-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    .card.v2 .card-description {
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--st-bento-description-color, var(--st-cms-text, var(--st-cms-navy-2, #03346b)));
+    }
+
+    .card.v2 .chip {
+      padding: 12px 6px;
+      border-radius: 8px;
+      font-size: 13px;
+    }
+
+    /* The suite card: navy fill, light description, cyan icon tile (set above), white pill. */
+    :host .card.v2.primary {
+      background: var(--st-cms-brand-navy, #2144aa);
+      border-color: var(--st-cms-brand-navy, #2144aa);
+    }
+
+    :host .card.v2.primary .card-description {
+      color: var(--st-cms-primary-100, #e4ebff);
+    }
+
+    :host .card.v2.primary.row .action {
+      min-height: 44px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 20px;
+      font-size: 15px;
+      border-radius: var(--st-radius-full);
+      background: var(--st-cms-on-dark);
+      color: var(--st-cms-navy);
+    }
+
+    .split {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
+      gap: var(--st-space-24);
+      align-items: center;
+    }
+
+    .split .text {
+      padding: 0;
+    }
+
+    .chips {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: var(--st-space-8);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .chip {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 0;
+      padding: var(--st-space-8) var(--st-space-12);
+      border-radius: var(--st-radius-sm);
+      background: var(--st-bento-chip-plain-bg, var(--st-cms-surface-soft));
+      color: var(--st-bento-chip-text, var(--st-cms-text-strong, var(--st-cms-navy)));
+      font-size: var(--st-text-sm);
+      font-weight: var(--st-font-weight-semibold);
+      line-height: 1.3;
+      text-align: center;
+    }
+
+    .chip.solid {
+      background: var(--st-cms-brand-navy);
+      color: var(--st-cms-on-dark);
+    }
+
+    .chip.soft {
+      background: var(--st-bento-chip-soft-bg, var(--st-cms-primary-100));
+      color: var(--st-bento-chip-text, var(--st-cms-text-strong, var(--st-cms-navy)));
+    }
+
+    :host .card.dark .chip.plain {
+      background: var(--st-cms-navy-2);
+      color: var(--st-cms-on-dark);
+    }
+
+    @media (max-width: 1024px) {
+      .split {
+        grid-template-columns: minmax(0, 1fr);
+      }
+    }
+
+    @media (max-width: 640px) {
+      .chips {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    .col-1 { grid-column: span 1; }
+    .col-2 { grid-column: span 2; }
+    .col-3 { grid-column: span 3; }
+    .col-4 { grid-column: span 4; }
+    .row-1 { grid-row: span 1; }
+    .row-2 { grid-row: span 2; }
+
+    @media (max-width: 1024px) {
+      .grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      .col-3,
+      .col-4 {
+        grid-column: span 2;
+      }
+    }
+
+    @media (max-width: 640px) {
+      .grid {
+        grid-template-columns: 1fr;
+      }
+      .col-1,
+      .col-2,
+      .col-3,
+      .col-4 {
+        grid-column: span 1;
+      }
+    }
+
+    ${reducedMotionStyles}
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], BentoGrid.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: String })
+], BentoGrid.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], BentoGrid.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], BentoGrid.prototype, "items", 2);
+BentoGrid = __decorateClass([
+  customElement("st-bento-grid")
+], BentoGrid);
+
+export {
+  BentoGrid
+};
+//# sourceMappingURL=chunk-Q66CJO3P.js.map