@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/chunk-J6EO4R73.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/mega-menu/MegaMenu.ts","../src/mega-menu/MegaMenuColumn.ts","../src/mega-menu/MegaMenuFeature.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\n\n/**\n * The rich layout of a mega-menu panel, after okta.com: an optional intro column on the left (a\n * large `heading`, a `description` and, under a divider, quick links in `slot=\"intro\"`), then the\n * link columns side by side (`st-mega-menu-column`s in the default slot), then an optional\n * featured column on the right (`featured-heading` over the `st-mega-menu-feature` cards in\n * `slot=\"featured\"`). Slot it into an `st-dropdown` with `mega` set.\n *\n * The layout follows the width it is given, not the viewport (a container query): side by side\n * when there is room; intro and featured column above/below two link columns on a medium panel;\n * everything stacked in the narrow drill-down panel `st-header` shows on a phone (where the intro\n * heading is left out — the drill-down already shows the section's name).\n *\n * @slot - The link columns (`st-mega-menu-column`s, or any blocks).\n * @slot intro - Quick links under the intro text, e.g. `st-menu-item`s with an icon.\n * @slot featured - Promo cards (`st-mega-menu-feature`s), stacked.\n * @csspart inner - The grid holding every area.\n * @csspart intro - The intro column.\n * @csspart columns - The grid holding the link columns.\n * @csspart featured - The featured column.\n */\n@customElement('st-mega-menu')\nexport class MegaMenu extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      container-type: inline-size;\n      ${fontFamilyStyles}\n    }\n\n    .inner {\n      display: grid;\n      gap: 3rem;\n      padding: 3rem 3.5rem;\n      box-sizing: border-box;\n    }\n\n    .columns {\n      display: grid;\n      grid-template-columns: repeat(var(--st-mega-menu-columns, 3), minmax(0, 1fr));\n      gap: 3rem;\n      align-items: stretch;\n    }\n\n    .intro,\n    .featured {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .intro-heading {\n      margin: 0 0 1rem;\n      font-size: 2rem;\n      font-weight: 400;\n      line-height: 1.15;\n      color: var(--st-color-text-strong);\n    }\n\n    .intro-description {\n      margin: 0;\n      font-size: 1rem;\n      line-height: 1.55;\n      color: var(--st-color-text);\n    }\n\n    .intro-links {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      margin-top: 2.5rem;\n      padding-top: 2rem;\n      border-top: 1px solid var(--st-color-border);\n    }\n\n    .intro-links.no-text {\n      margin-top: 0;\n      padding-top: 0;\n      border-top: 0;\n    }\n\n    .featured-heading {\n      margin: 0 0 1rem;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.35;\n      color: var(--st-color-text-strong);\n    }\n\n    .featured-items {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n    }\n\n    [hidden] {\n      display: none !important;\n    }\n\n    /* Medium panel: intro on top, two link columns, featured cards side by side underneath. */\n    @container (max-width: 960px) {\n      .inner {\n        grid-template-columns: minmax(0, 1fr) !important;\n        gap: 2rem;\n        padding: 2rem;\n      }\n\n      .columns {\n        grid-template-columns: repeat(var(--st-mega-menu-columns-md, 2), minmax(0, 1fr));\n        gap: 2rem;\n      }\n\n      .intro-links {\n        margin-top: 1.5rem;\n        padding-top: 1.5rem;\n      }\n\n      .featured-items {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n      }\n    }\n\n    /* Narrow panel (the phone drill-down): everything stacked. */\n    @container (max-width: 560px) {\n      .inner {\n        gap: 1.75rem;\n        padding: 0.5rem 0 1.5rem;\n      }\n\n      .columns {\n        grid-template-columns: minmax(0, 1fr);\n        gap: 1.75rem;\n      }\n\n      .intro-heading {\n        display: none;\n      }\n    }\n  `;\n\n  /** Large title of the intro column. */\n  @property({ type: String })\n  heading = '';\n\n  /** Text under the intro title. */\n  @property({ type: String })\n  description = '';\n\n  /** Heading over the featured cards. */\n  @property({ type: String, attribute: 'featured-heading' })\n  featuredHeading = '';\n\n  /** Number of link columns side by side at full width. `0` (the default) uses one per slotted column. */\n  @property({ type: Number })\n  columns = 0;\n\n  @state() private columnCount = 1;\n  @state() private hasIntroLinks = false;\n  @state() private hasFeatured = false;\n\n  private onColumnsSlotChange = (event: Event): void => {\n    this.columnCount = Math.max(1, (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length);\n  };\n\n  private onIntroSlotChange = (event: Event): void => {\n    this.hasIntroLinks = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  };\n\n  private onFeaturedSlotChange = (event: Event): void => {\n    this.hasFeatured = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  };\n\n  render() {\n    const columns = Math.min(6, Math.max(1, Math.round(this.columns) || this.columnCount));\n    const hasIntroText = !!(this.heading || this.description);\n    const hasIntro = hasIntroText || this.hasIntroLinks;\n    const hasFeatured = this.hasFeatured || !!this.featuredHeading;\n    // Every column — intro, each link column, featured — gets the same share of the width.\n    const tracks = [hasIntro ? 'minmax(0, 1fr)' : '', `minmax(0, ${columns}fr)`, hasFeatured ? 'minmax(0, 1fr)' : '']\n      .filter(Boolean)\n      .join(' ');\n    return html`\n      <div\n        part=\"inner\"\n        class=\"inner\"\n        style=\"grid-template-columns:${tracks};--st-mega-menu-columns:${columns};--st-mega-menu-columns-md:${Math.min(2, columns)}\"\n      >\n        <div part=\"intro\" class=\"intro\" ?hidden=${!hasIntro}>\n          ${this.heading ? html`<p part=\"heading\" class=\"intro-heading\">${this.heading}</p>` : nothing}\n          ${this.description ? html`<p part=\"description\" class=\"intro-description\">${this.description}</p>` : nothing}\n          <div part=\"intro-links\" class=\"intro-links ${hasIntroText ? '' : 'no-text'}\" ?hidden=${!this.hasIntroLinks}>\n            <slot name=\"intro\" @slotchange=${this.onIntroSlotChange}></slot>\n          </div>\n        </div>\n        <div part=\"columns\" class=\"columns\"><slot @slotchange=${this.onColumnsSlotChange}></slot></div>\n        <div part=\"featured\" class=\"featured\" ?hidden=${!hasFeatured}>\n          ${this.featuredHeading ? html`<p part=\"featured-heading\" class=\"featured-heading\">${this.featuredHeading}</p>` : nothing}\n          <div class=\"featured-items\"><slot name=\"featured\" @slotchange=${this.onFeaturedSlotChange}></slot></div>\n        </div>\n      </div>\n    `;\n  }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { arrowUpRightIcon } from '../shared/icons';\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * One column (or one group within a column) of an `st-mega-menu`: a heading, an optional line of\n * description, then its links stacked — usually `st-menu-item`s with `variant=\"link\"`. Nest\n * columns to stack several headed groups in one column, as okta.com does.\n *\n * `variant=\"card\"` puts the column on a tinted rounded tile and `variant=\"accent\"` on a solid\n * accent tile with light text; both suit a row of equal columns without intro or featured area.\n * `cta-label` + `cta-href` add a pill button at the bottom of the column.\n *\n * The heading (when `href` is set) and the button fire a *cancelable* `mega-menu-select` event\n * (detail: `{ href }`) before navigating; a host doing client-side routing calls\n * `event.preventDefault()` on it.\n *\n * @slot - The column's links, or nested `st-mega-menu-column` groups.\n * @fires mega-menu-select - The heading link or the button was clicked (cancelable; detail `{ href }`).\n * @csspart heading - The heading text or link.\n * @csspart description - The line under the heading.\n * @csspart items - The box holding the links.\n * @csspart cta - The pill button.\n * @cssprop --st-mega-menu-column-padding - Overrides the padding of a `card`/`accent` column.\n */\n@customElement('st-mega-menu-column')\nexport class MegaMenuColumn extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n      box-sizing: border-box;\n      ${fontFamilyStyles}\n    }\n\n    :host([variant='card']),\n    :host([variant='accent']) {\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-mega-menu-column-padding instead. */\n      padding: var(--st-mega-menu-column-padding, 2rem 1.75rem 1.75rem) !important;\n      border-radius: 20px;\n      background: color-mix(in oklch, var(--st-color-text-strong) 5%, var(--st-color-surface));\n    }\n\n    :host([variant='accent']) {\n      background: var(--st-color-accent);\n      color: var(--st-color-on-solid);\n      /* Read by the st-menu-item links inside. */\n      --st-nav-color: var(--st-color-on-solid);\n      --st-nav-hover-bg: transparent;\n    }\n\n    .heading {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      margin: 0 0 0.75rem;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.35;\n      color: var(--st-color-text-strong);\n      text-decoration: none;\n    }\n\n    :host([variant='card']) .heading,\n    :host([variant='accent']) .heading {\n      font-size: 1.375rem;\n    }\n\n    :host([variant='accent']) .heading {\n      color: inherit;\n    }\n\n    a.heading:hover,\n    a.heading:focus-visible {\n      text-decoration: underline;\n      text-underline-offset: 4px;\n    }\n\n    .description {\n      margin: -0.25rem 0 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1.5;\n      color: var(--st-color-text-muted);\n    }\n\n    :host([variant='accent']) .description {\n      color: inherit;\n      opacity: 0.85;\n    }\n\n    .items {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    /* Nested groups stack with room between them (!important for the same page-reset reason). */\n    ::slotted(st-mega-menu-column:not(:first-child)) {\n      margin-top: 2rem !important;\n    }\n\n    .cta {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n      padding: 0.875rem 1.5rem;\n      border-radius: 9999px;\n      background: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n      font-size: 1rem;\n      font-weight: 500;\n      text-align: center;\n      text-decoration: none;\n      transition: box-shadow 0.2s ease;\n    }\n\n    .cta-spacer {\n      flex: 1;\n      min-height: 1.75rem;\n    }\n\n    .cta:hover,\n    .cta:focus-visible {\n      box-shadow: 0 0 0 2px currentColor;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .cta {\n        transition: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  heading = '';\n\n  /** Makes the heading a link (e.g. to the section's overview page). */\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** `plain` (default), `card` (tinted tile) or `accent` (solid accent tile, light text). */\n  @property({ type: String, reflect: true })\n  variant: 'plain' | 'card' | 'accent' = 'plain';\n\n  /** Text of a pill button at the bottom of the column; needs `cta-href`. */\n  @property({ type: String, attribute: 'cta-label' })\n  ctaLabel = '';\n\n  @property({ type: String, attribute: 'cta-href' })\n  ctaHref = '';\n\n  private select(event: MouseEvent, href: string): void {\n    if (href.startsWith('http')) return;\n    const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n      detail: { href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  }\n\n  private renderHeading() {\n    if (!this.heading) return nothing;\n    return this.href\n      ? html`<a part=\"heading\" class=\"heading\" href=${this.href} @click=${(event: MouseEvent) => this.select(event, this.href)}\n          >${this.heading}</a\n        >`\n      : html`<p part=\"heading\" class=\"heading\">${this.heading}</p>`;\n  }\n\n  private renderCta() {\n    if (!this.ctaLabel || !this.ctaHref) return nothing;\n    const external = this.ctaHref.startsWith('http');\n    return html`\n      <span class=\"cta-spacer\"></span>\n      <a\n        part=\"cta\"\n        class=\"cta\"\n        href=${this.ctaHref}\n        target=${external ? '_blank' : '_self'}\n        rel=${external ? 'noopener noreferrer' : nothing}\n        @click=${(event: MouseEvent) => this.select(event, this.ctaHref)}\n        >${this.ctaLabel} ${external ? arrowUpRightIcon(14) : nothing}</a\n      >\n    `;\n  }\n\n  render() {\n    return html`\n      ${this.renderHeading()}\n      ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n      <div part=\"items\" class=\"items\" role=\"group\" aria-label=${this.heading || nothing}><slot></slot></div>\n      ${this.renderCta()}\n    `;\n  }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * A promo card for the featured column of an `st-mega-menu` (`slot=\"featured\"`). The whole card\n * is one link. Two looks, after okta.com:\n *\n * - `story` (default): a rounded image on top, then the description and an underlined\n *   call-to-action line — a customer story or announcement.\n * - `overlay`: a tile with light text over `image-url` (darkened), or over an accent gradient when\n *   there is no image — an optional `logo-url` top left, the title and description at the bottom.\n *\n * An `http(s)` `href` opens in a new tab unless `target` says otherwise. Any other `href` fires a\n * *cancelable* `mega-menu-select` event (detail: `{ href }`) first; a host doing client-side\n * routing calls `event.preventDefault()` on it.\n *\n * @fires mega-menu-select - The card was clicked (cancelable; detail `{ href }`).\n * @csspart card - The card link.\n * @csspart image - The image (`story`).\n * @csspart logo - The logo (`overlay`).\n * @csspart eyebrow - The small label above the title.\n * @csspart title - The title.\n * @csspart description - The description.\n * @csspart cta - The call-to-action line.\n * @cssprop --st-mega-menu-feature-from - Start colour of the `overlay` gradient (default: the accent colour).\n * @cssprop --st-mega-menu-feature-to - End colour of the `overlay` gradient.\n */\n@customElement('st-mega-menu-feature')\nexport class MegaMenuFeature extends LitElement {\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key to it. */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n    }\n\n    .card {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n      box-sizing: border-box;\n      color: var(--st-color-text-strong);\n      text-decoration: none;\n    }\n\n    .image {\n      display: block;\n      width: 100%;\n      aspect-ratio: 9 / 8;\n      object-fit: cover;\n      border-radius: 20px;\n      transition: transform 0.3s ease;\n    }\n\n    .card:hover .image {\n      transform: scale(1.015);\n    }\n\n    .eyebrow {\n      font-size: 0.75rem;\n      font-weight: 600;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      color: var(--st-color-accent-text);\n    }\n\n    .title {\n      margin: 0;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.3;\n    }\n\n    .description {\n      margin: 0;\n      font-size: 0.9375rem;\n      line-height: 1.5;\n    }\n\n    .cta {\n      align-self: flex-start;\n      margin-top: 0.75rem;\n      font-size: 0.9375rem;\n      font-weight: 500;\n      text-decoration: underline;\n      text-underline-offset: 5px;\n      text-decoration-thickness: 1px;\n    }\n\n    .card:hover .cta,\n    .card:focus-visible .cta {\n      text-decoration-thickness: 2px;\n    }\n\n    /* overlay */\n    :host([variant='overlay']) .card {\n      justify-content: flex-end;\n      gap: 0.5rem;\n      min-height: 15rem;\n      padding: 1.75rem;\n      border-radius: 20px;\n      color: #fff;\n      background-color: var(--st-color-accent);\n      background-image:\n        linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05)),\n        var(--st-mega-menu-feature-image, linear-gradient(160deg, var(--st-mega-menu-feature-from, var(--st-color-accent)), var(--st-mega-menu-feature-to, oklch(0.25 0.12 280))));\n      background-size: cover;\n      background-position: center;\n      transition: transform 0.2s ease;\n    }\n\n    :host([variant='overlay']) .card:hover {\n      transform: translateY(-2px);\n    }\n\n    :host([variant='overlay']) .logo {\n      height: 2.25rem;\n      width: auto;\n      max-width: 70%;\n      margin-bottom: auto;\n      align-self: flex-start;\n      object-fit: contain;\n    }\n\n    :host([variant='overlay']) .title {\n      font-size: 1.75rem;\n      font-weight: 400;\n    }\n\n    :host([variant='overlay']) .eyebrow,\n    :host([variant='overlay']) .cta {\n      color: inherit;\n    }\n\n    /* tip: a light-blue card with dark text, like a tip panel on a page. */\n    :host([variant='tip']) .card {\n      gap: 0.5rem;\n      padding: 1.25rem;\n      border-radius: var(--st-radius-md);\n      border: 1px solid var(--st-color-accent-border);\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-text);\n      transition: border-color 0.2s ease;\n    }\n\n    :host([variant='tip']) .card:hover {\n      border-color: var(--st-color-accent-muted);\n    }\n\n    :host([variant='tip']) .title {\n      font-size: var(--st-text-lg);\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n    }\n\n    :host([variant='tip']) .eyebrow,\n    :host([variant='tip']) .cta {\n      color: var(--st-color-accent-text);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .image,\n      :host([variant='overlay']) .card {\n        transition: none;\n      }\n    }\n  `;\n\n  /** `story` (default), `overlay` (dark, over an image or gradient) or `tip` (light blue, for a hint). */\n  @property({ type: String, reflect: true })\n  variant: 'story' | 'overlay' | 'tip' = 'story';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Small label above the title, e.g. \"New\" or \"Report\". */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  href = '';\n\n  /** `target` for the link. Defaults to `_blank` for an `http(s)` `href`, `_self` otherwise. */\n  @property({ type: String })\n  target = '';\n\n  /** Image on top (`story`) or behind the text (`overlay`). */\n  @property({ type: String, attribute: 'image-url' })\n  imageUrl = '';\n\n  @property({ type: String, attribute: 'image-alt' })\n  imageAlt = '';\n\n  /** Logo at the top of an `overlay` card. */\n  @property({ type: String, attribute: 'logo-url' })\n  logoUrl = '';\n\n  @property({ type: String, attribute: 'logo-alt' })\n  logoAlt = '';\n\n  /** Call-to-action text at the bottom of the card; empty hides it. */\n  @property({ type: String, attribute: 'cta-label' })\n  ctaLabel = '';\n\n  private get isExternal(): boolean {\n    return this.href.startsWith('http');\n  }\n\n  private onClick = (event: MouseEvent): void => {\n    if (this.isExternal) return;\n    const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n      detail: { href: this.href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  };\n\n  render() {\n    const target = this.target || (this.isExternal ? '_blank' : '_self');\n    const overlay = this.variant === 'overlay';\n    const style = overlay && this.imageUrl ? `--st-mega-menu-feature-image:url(${JSON.stringify(this.imageUrl)})` : '';\n    return html`\n      <a\n        part=\"card\"\n        class=\"card\"\n        style=${style}\n        href=${this.href || nothing}\n        target=${target}\n        rel=${target === '_blank' ? 'noopener noreferrer' : nothing}\n        @click=${this.onClick}\n      >\n        ${overlay && this.logoUrl ? html`<img part=\"logo\" class=\"logo\" src=${this.logoUrl} alt=${this.logoAlt} />` : nothing}\n        ${!overlay && this.imageUrl\n          ? html`<img part=\"image\" class=\"image\" src=${this.imageUrl} alt=${this.imageAlt} loading=\"lazy\" />`\n          : nothing}\n        ${this.eyebrow ? html`<span part=\"eyebrow\" class=\"eyebrow\">${this.eyebrow}</span>` : nothing}\n        ${this.title ? html`<p part=\"title\" class=\"title\">${this.title}</p>` : nothing}\n        ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n        ${this.ctaLabel ? html`<span part=\"cta\" class=\"cta\">${this.ctaLabel}</span>` : nothing}\n      </a>\n    `;\n  }\n}\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement","LitElement","css","html","nothing","customElement","property","LitElement","html","nothing","css","property","customElement"]}

package/dist/chunk-JKBWZLG4.js

@@ -1,348 +0,0 @@
-import {
-  ctaLinkStyles,
-  paddingScaleStyles
-} from "./chunk-FZ36KL73.js";
-import {
-  controlBaseStyles,
-  rootFontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
-import {
-  __decorateClass
-} from "./chunk-EUXUH3YW.js";
-
-// src/hero/Hero.ts
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-var Hero = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.title = "";
-    this.subtitle = "";
-    this.imageSrc = "";
-    this.actionLabel = "";
-    this.href = "";
-    this.textAlignment = "left";
-    this.padding = "none";
-    this.inverted = false;
-    this.focalPoint = "center";
-    this.eyebrow = "";
-    this.secondaryActionLabel = "";
-    this.secondaryHref = "";
-    this.size = "auto";
-    this.contentPosition = "center";
-    this.overlay = "even";
-    this.onClick = (event) => this.emitAction(event, this.href, "primary");
-    this.onSecondaryClick = (event) => this.emitAction(event, this.secondaryHref, "secondary");
-  }
-  willUpdate() {
-    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : "";
-    this.style.setProperty("--st-hero-position", Hero.positions[this.focalPoint] ?? Hero.positions.center);
-  }
-  emitAction(event, href, kind) {
-    const action = new CustomEvent("action", {
-      detail: { href, kind },
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    });
-    this.dispatchEvent(action);
-    if (action.defaultPrevented) event.preventDefault();
-  }
-  render() {
-    return html`
-      <div class="overlay" part="overlay"></div>
-      <div class="content" part="content">
-        ${this.eyebrow ? html`<p class="eyebrow" part="eyebrow">${this.eyebrow}</p>` : nothing}
-        <h1 class="title" part="title">${this.title}</h1>
-        ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
-        ${this.actionLabel || this.secondaryActionLabel ? html`<div class="actions" part="actions">
-              ${this.actionLabel ? html`<a class="cta" part="action" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>` : nothing}
-              ${this.secondaryActionLabel ? html`<a class="cta secondary" part="secondary-action" href=${this.secondaryHref || nothing} @click=${this.onSecondaryClick}
-                    >${this.secondaryActionLabel}</a
-                  >` : nothing}
-            </div>` : nothing}
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-Hero.styles = css`
-    ${controlBaseStyles}
-    ${paddingScaleStyles}
-
-    @keyframes st-hero-zoom {
-      from { opacity: 0; transform: scale(1.1); }
-      to { opacity: 1; transform: scale(1); }
-    }
-    @keyframes st-hero-rise {
-      from { opacity: 0; transform: translateY(30px); }
-      to { opacity: 1; transform: none; }
-    }
-    @keyframes st-hero-fade {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-
-    :host {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      overflow: hidden;
-      width: 100%;
-      box-sizing: border-box;
-      background-color: var(--st-color-text-strong);
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: var(--st-hero-position, center center);
-      color: var(--st-color-on-solid);
-      ${rootFontFamilyStyles}
-      animation: st-hero-zoom 1.5s ease-out;
-    }
-
-    :host([inverted]) {
-      background-color: var(--st-color-surface);
-      color: var(--st-color-text-strong);
-    }
-
-    .overlay {
-      position: absolute;
-      inset: 0;
-      z-index: 1;
-      background: linear-gradient(
-        to bottom,
-        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),
-        color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),
-        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)
-      );
-    }
-
-    :host([inverted]) .overlay {
-      display: none;
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--st-space-20);
-      position: relative;
-      z-index: 2;
-      width: 80%;
-      margin: 0 auto;
-      text-align: center;
-      align-items: center;
-      /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts
-         on the host (e.g. a theme text colour) must not turn it dark. */
-      color: var(--st-hero-text-color, var(--st-color-on-solid));
-    }
-
-    :host([inverted]) .content {
-      color: var(--st-hero-text-color, var(--st-color-text-strong));
-    }
-
-    :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }
-    :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }
-    :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }
-
-    .title {
-      font-size: var(--st-cms-text-display);
-      font-weight: var(--st-font-weight-bold);
-      line-height: 1.1;
-      color: inherit;
-      margin: 0;
-      animation: st-hero-rise 0.8s 0.3s ease-out backwards;
-    }
-
-    .subtitle {
-      font-size: var(--st-cms-text-xl);
-      line-height: 1.5;
-      color: inherit;
-      margin: 0;
-      animation: st-hero-fade 0.8s 0.5s ease-out backwards;
-    }
-
-    .actions {
-      display: flex;
-      justify-content: center;
-      width: 100%;
-    }
-
-    .cta {
-      ${ctaLinkStyles}
-      background: var(--st-button-primary-bg);
-      color: var(--st-button-primary-color);
-      font-weight: var(--st-button-font-weight);
-      font-size: var(--st-text-md);
-      animation: st-hero-rise 0.6s 0.7s ease-out backwards;
-    }
-
-    .cta:hover {
-      transform: scale(1.05);
-    }
-
-    .cta:active {
-      transform: scale(0.98);
-    }
-
-    .eyebrow {
-      margin: 0;
-      font-size: var(--st-text-sm);
-      font-weight: var(--st-font-weight-bold);
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-      color: inherit;
-      opacity: 0.85;
-      animation: st-hero-fade 0.8s 0.2s ease-out backwards;
-    }
-
-    .actions {
-      flex-wrap: wrap;
-      gap: var(--st-space-12);
-    }
-
-    .cta.secondary {
-      background: transparent;
-      color: inherit;
-      box-shadow: inset 0 0 0 1.5px currentColor;
-    }
-
-    .cta.secondary:hover {
-      background: color-mix(in oklch, currentColor 12%, transparent);
-    }
-
-    /* size="large" / "full": a tall editorial hero. */
-    :host([size='large']) {
-      min-height: var(--st-hero-min-height, 640px);
-    }
-
-    :host([size='full']) {
-      min-height: 100svh;
-    }
-
-    :host([size='large']) .title,
-    :host([size='full']) .title {
-      font-size: clamp(2.5rem, 6vw, 5rem);
-      letter-spacing: -0.02em;
-      line-height: 1.05;
-    }
-
-    /* content-position="bottom": copy sits in the lower part of the hero, on the container grid. */
-    :host([content-position='bottom']) {
-      align-items: flex-end;
-    }
-
-    :host([content-position='bottom']) .content {
-      width: 100%;
-      max-width: var(--st-cms-container-max);
-      box-sizing: border-box;
-      padding: var(--st-space-48) var(--st-space-24);
-    }
-
-    :host([content-position='bottom']) .title,
-    :host([content-position='bottom']) .subtitle {
-      max-width: 18ch;
-    }
-
-    :host([content-position='bottom']) .subtitle {
-      max-width: 48ch;
-    }
-
-    :host([content-position='bottom']:not([text-alignment='center']):not([text-alignment='right'])) .actions {
-      justify-content: flex-start;
-    }
-
-    :host([content-position='bottom'][text-alignment='center']) .title,
-    :host([content-position='bottom'][text-alignment='center']) .subtitle {
-      margin-inline: auto;
-    }
-
-    /* overlay="gradient": darkest behind the copy, clearing towards the far side of the image. */
-    :host([overlay='gradient']) .overlay {
-      background:
-        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),
-        linear-gradient(to right, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);
-    }
-
-    :host([overlay='gradient'][text-alignment='right']) .overlay {
-      background:
-        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),
-        linear-gradient(to left, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);
-    }
-
-    :host([overlay='none']) .overlay {
-      display: none;
-    }
-
-    @media (min-width: 768px) {
-      .content { padding: var(--st-space-32); }
-    }
-    @media (min-width: 1024px) {
-      .content { padding: var(--st-space-48); }
-      :host([content-position='bottom']) .content { padding: var(--st-space-48) var(--st-space-32) 6rem; }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      :host, .eyebrow, .title, .subtitle, .cta { animation: none; }
-      .cta { transition: none; }
-    }
-  `;
-Hero.positions = {
-  top: "center top",
-  left: "left center",
-  right: "right center",
-  bottom: "center bottom",
-  center: "center center"
-};
-__decorateClass([
-  property({ type: String })
-], Hero.prototype, "title", 2);
-__decorateClass([
-  property({ type: String })
-], Hero.prototype, "subtitle", 2);
-__decorateClass([
-  property({ type: String, attribute: "image-src" })
-], Hero.prototype, "imageSrc", 2);
-__decorateClass([
-  property({ type: String, attribute: "action-label" })
-], Hero.prototype, "actionLabel", 2);
-__decorateClass([
-  property({ type: String })
-], Hero.prototype, "href", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "text-alignment" })
-], Hero.prototype, "textAlignment", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], Hero.prototype, "padding", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Hero.prototype, "inverted", 2);
-__decorateClass([
-  property({ type: String, attribute: "focal-point" })
-], Hero.prototype, "focalPoint", 2);
-__decorateClass([
-  property({ type: String })
-], Hero.prototype, "eyebrow", 2);
-__decorateClass([
-  property({ type: String, attribute: "secondary-action-label" })
-], Hero.prototype, "secondaryActionLabel", 2);
-__decorateClass([
-  property({ type: String, attribute: "secondary-href" })
-], Hero.prototype, "secondaryHref", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], Hero.prototype, "size", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "content-position" })
-], Hero.prototype, "contentPosition", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], Hero.prototype, "overlay", 2);
-Hero = __decorateClass([
-  customElement("st-hero")
-], Hero);
-
-export {
-  Hero
-};
-//# sourceMappingURL=chunk-JKBWZLG4.js.map

package/dist/chunk-JKBWZLG4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hero/Hero.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { ctaLinkStyles, paddingScaleStyles } from '../shared/section-styles';\nimport type { HeroActionEventDetail } from './HeroEvents';\n\n/**\n * Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,\n * optional subtitle and up to two call-to-action links. Port of `SankhyaUI`'s React `Hero`; the\n * framer-motion entrance is redone as CSS keyframes (skipped under `prefers-reduced-motion`).\n *\n * `size`, `content-position` and `overlay=\"gradient\"` give the large editorial layout (copy on the\n * lower left over a gradient that darkens towards it) used by enterprise marketing heroes; the\n * defaults keep the original centered banner. Put several heroes in an `st-carousel` with\n * `indicator-style=\"tabs\"` for a tabbed hero carousel.\n *\n * @fires action - Cancelable, before navigating. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.\n * @cssprop --st-hero-text-color - Text colour over the image.\n * @cssprop --st-hero-min-height - Minimum height when `size` is `large` (default `640px`).\n * @csspart eyebrow - The small label above the title.\n * @csspart secondary-action - The outlined second button.\n */\n@customElement('st-hero')\nexport class Hero extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n    ${paddingScaleStyles}\n\n    @keyframes st-hero-zoom {\n      from { opacity: 0; transform: scale(1.1); }\n      to { opacity: 1; transform: scale(1); }\n    }\n    @keyframes st-hero-rise {\n      from { opacity: 0; transform: translateY(30px); }\n      to { opacity: 1; transform: none; }\n    }\n    @keyframes st-hero-fade {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      overflow: hidden;\n      width: 100%;\n      box-sizing: border-box;\n      background-color: var(--st-color-text-strong);\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: var(--st-hero-position, center center);\n      color: var(--st-color-on-solid);\n      ${rootFontFamilyStyles}\n      animation: st-hero-zoom 1.5s ease-out;\n    }\n\n    :host([inverted]) {\n      background-color: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n    }\n\n    .overlay {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      background: linear-gradient(\n        to bottom,\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),\n        color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)\n      );\n    }\n\n    :host([inverted]) .overlay {\n      display: none;\n    }\n\n    .content {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-20);\n      position: relative;\n      z-index: 2;\n      width: 80%;\n      margin: 0 auto;\n      text-align: center;\n      align-items: center;\n      /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts\n         on the host (e.g. a theme text colour) must not turn it dark. */\n      color: var(--st-hero-text-color, var(--st-color-on-solid));\n    }\n\n    :host([inverted]) .content {\n      color: var(--st-hero-text-color, var(--st-color-text-strong));\n    }\n\n    :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }\n    :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }\n    :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }\n\n    .title {\n      font-size: var(--st-cms-text-display);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1.1;\n      color: inherit;\n      margin: 0;\n      animation: st-hero-rise 0.8s 0.3s ease-out backwards;\n    }\n\n    .subtitle {\n      font-size: var(--st-cms-text-xl);\n      line-height: 1.5;\n      color: inherit;\n      margin: 0;\n      animation: st-hero-fade 0.8s 0.5s ease-out backwards;\n    }\n\n    .actions {\n      display: flex;\n      justify-content: center;\n      width: 100%;\n    }\n\n    .cta {\n      ${ctaLinkStyles}\n      background: var(--st-button-primary-bg);\n      color: var(--st-button-primary-color);\n      font-weight: var(--st-button-font-weight);\n      font-size: var(--st-text-md);\n      animation: st-hero-rise 0.6s 0.7s ease-out backwards;\n    }\n\n    .cta:hover {\n      transform: scale(1.05);\n    }\n\n    .cta:active {\n      transform: scale(0.98);\n    }\n\n    .eyebrow {\n      margin: 0;\n      font-size: var(--st-text-sm);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      color: inherit;\n      opacity: 0.85;\n      animation: st-hero-fade 0.8s 0.2s ease-out backwards;\n    }\n\n    .actions {\n      flex-wrap: wrap;\n      gap: var(--st-space-12);\n    }\n\n    .cta.secondary {\n      background: transparent;\n      color: inherit;\n      box-shadow: inset 0 0 0 1.5px currentColor;\n    }\n\n    .cta.secondary:hover {\n      background: color-mix(in oklch, currentColor 12%, transparent);\n    }\n\n    /* size=\"large\" / \"full\": a tall editorial hero. */\n    :host([size='large']) {\n      min-height: var(--st-hero-min-height, 640px);\n    }\n\n    :host([size='full']) {\n      min-height: 100svh;\n    }\n\n    :host([size='large']) .title,\n    :host([size='full']) .title {\n      font-size: clamp(2.5rem, 6vw, 5rem);\n      letter-spacing: -0.02em;\n      line-height: 1.05;\n    }\n\n    /* content-position=\"bottom\": copy sits in the lower part of the hero, on the container grid. */\n    :host([content-position='bottom']) {\n      align-items: flex-end;\n    }\n\n    :host([content-position='bottom']) .content {\n      width: 100%;\n      max-width: var(--st-cms-container-max);\n      box-sizing: border-box;\n      padding: var(--st-space-48) var(--st-space-24);\n    }\n\n    :host([content-position='bottom']) .title,\n    :host([content-position='bottom']) .subtitle {\n      max-width: 18ch;\n    }\n\n    :host([content-position='bottom']) .subtitle {\n      max-width: 48ch;\n    }\n\n    :host([content-position='bottom']:not([text-alignment='center']):not([text-alignment='right'])) .actions {\n      justify-content: flex-start;\n    }\n\n    :host([content-position='bottom'][text-alignment='center']) .title,\n    :host([content-position='bottom'][text-alignment='center']) .subtitle {\n      margin-inline: auto;\n    }\n\n    /* overlay=\"gradient\": darkest behind the copy, clearing towards the far side of the image. */\n    :host([overlay='gradient']) .overlay {\n      background:\n        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\n        linear-gradient(to right, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\n    }\n\n    :host([overlay='gradient'][text-alignment='right']) .overlay {\n      background:\n        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\n        linear-gradient(to left, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\n    }\n\n    :host([overlay='none']) .overlay {\n      display: none;\n    }\n\n    @media (min-width: 768px) {\n      .content { padding: var(--st-space-32); }\n    }\n    @media (min-width: 1024px) {\n      .content { padding: var(--st-space-48); }\n      :host([content-position='bottom']) .content { padding: var(--st-space-48) var(--st-space-32) 6rem; }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host, .eyebrow, .title, .subtitle, .cta { animation: none; }\n      .cta { transition: none; }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ type: String, attribute: 'image-src' })\n  imageSrc = '';\n\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String, reflect: true, attribute: 'text-alignment' })\n  textAlignment: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  @property({ type: String, reflect: true })\n  padding: 'none' | 'small' | 'medium' | 'large' = 'none';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  @property({ type: String, attribute: 'focal-point' })\n  focalPoint: 'top' | 'left' | 'right' | 'bottom' | 'center' = 'center';\n\n  /** Small uppercase label above the title (e.g. an event or product name). */\n  @property({ type: String })\n  eyebrow = '';\n\n  /** Label of an outlined second button next to the primary one. */\n  @property({ type: String, attribute: 'secondary-action-label' })\n  secondaryActionLabel = '';\n\n  @property({ type: String, attribute: 'secondary-href' })\n  secondaryHref = '';\n\n  /** `auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport. */\n  @property({ type: String, reflect: true })\n  size: 'auto' | 'large' | 'full' = 'auto';\n\n  /** `center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container. */\n  @property({ type: String, reflect: true, attribute: 'content-position' })\n  contentPosition: 'center' | 'bottom' = 'center';\n\n  /** `even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is. */\n  @property({ type: String, reflect: true })\n  overlay: 'even' | 'gradient' | 'none' = 'even';\n\n  private static positions = {\n    top: 'center top',\n    left: 'left center',\n    right: 'right center',\n    bottom: 'center bottom',\n    center: 'center center'\n  } as const;\n\n  protected willUpdate(): void {\n    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\n    this.style.setProperty('--st-hero-position', Hero.positions[this.focalPoint] ?? Hero.positions.center);\n  }\n\n  private emitAction(event: MouseEvent, href: string, kind: 'primary' | 'secondary'): void {\n    const action = new CustomEvent<HeroActionEventDetail>('action', {\n      detail: { href, kind },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(action);\n    if (action.defaultPrevented) event.preventDefault();\n  }\n\n  private onClick = (event: MouseEvent): void => this.emitAction(event, this.href, 'primary');\n\n  private onSecondaryClick = (event: MouseEvent): void => this.emitAction(event, this.secondaryHref, 'secondary');\n\n  render() {\n    return html`\n      <div class=\"overlay\" part=\"overlay\"></div>\n      <div class=\"content\" part=\"content\">\n        ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n        <h1 class=\"title\" part=\"title\">${this.title}</h1>\n        ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n        ${this.actionLabel || this.secondaryActionLabel\n          ? html`<div class=\"actions\" part=\"actions\">\n              ${this.actionLabel\n                ? html`<a class=\"cta\" part=\"action\" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>`\n                : nothing}\n              ${this.secondaryActionLabel\n                ? html`<a class=\"cta secondary\" part=\"secondary-action\" href=${this.secondaryHref || nothing} @click=${this.onSecondaryClick}\n                    >${this.secondaryActionLabel}</a\n                  >`\n                : nothing}\n            </div>`\n          : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-JQY2G4QK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/menu-grid-item/MenuGridItem.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 type { MenuGridItemSelectEventDetail } from './MenuGridItemEvents';\n\n/**\n * One entry in an `st-menu-grid` — icon (via `slot=\"icon\"`) + title on one line, an optional\n * description below, and an optional corner badge (\"New\", \"Popular\", ...). A 1:1 port of\n * `SankhyaUI`'s React `MenuGridItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same markup and\n * CSS, with its `motion` effects redone in CSS — fades up the first time it scrolls into view,\n * scales to 1.02 on hover / 0.98 while pressed, the icon tilts on hover, the badge pops in.\n * Colors come from the suite theme rather than per-item utility classes.\n *\n * An `http(s)` `href` opens in a new tab, like the source. Any other `href` fires a *cancelable*\n * `menu-grid-item-select` event (detail: `{ href }`) first: a host doing client-side routing calls\n * `event.preventDefault()` on it, which also cancels the anchor's own navigation (the source used\n * react-router's `Link` here; the suite apps have no router).\n */\n@customElement('st-menu-grid-item')\nexport class MenuGridItem extends LitElement {\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n    }\n\n    @keyframes st-menu-grid-badge-pop {\n      from {\n        transform: scale(0);\n      }\n      70% {\n        transform: scale(1.12);\n      }\n      to {\n        transform: scale(1);\n      }\n    }\n\n    .menu-grid-item {\n      display: flex;\n      flex-direction: column;\n      border-radius: 8px;\n      position: relative;\n      overflow: hidden;\n      color: var(--st-color-text);\n      transition:\n        opacity 0.4s ease-out,\n        transform 0.2s ease,\n        background-color 0.2s ease;\n    }\n\n    .menu-grid-item.pending {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n\n    .menu-grid-item.regular {\n      padding: 16px;\n    }\n\n    .menu-grid-item.compact {\n      padding: 12px;\n    }\n\n    /* Keyboard focus gets the same treatment as hover. */\n    .menu-grid-item:hover,\n    .menu-grid-item:has(.menu-grid-link:focus-visible) {\n      background: var(--st-color-hover);\n      transform: scale(1.02);\n    }\n\n    .menu-grid-item:active {\n      transform: scale(0.98);\n    }\n\n    .menu-grid-link {\n      display: flex;\n      flex-direction: column;\n      text-decoration: none;\n      color: inherit;\n      width: 100%;\n      height: 100%;\n      gap: 8px;\n    }\n\n    .menu-grid-badge {\n      position: absolute;\n      top: 2px;\n      right: 8px;\n      font-size: 0.5rem;\n      padding: 2px 8px;\n      border-radius: 9999px;\n      font-weight: 500;\n      z-index: 1;\n      background-color: var(--st-color-text-strong);\n      color: var(--st-color-on-solid);\n      animation: st-menu-grid-badge-pop 0.35s ease-out;\n    }\n\n    .menu-grid-header {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      width: 100%;\n    }\n\n    .menu-grid-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      transition:\n        background-color 0.2s ease,\n        transform 0.2s ease;\n      flex-shrink: 0;\n      padding: 0;\n      margin-bottom: 0;\n    }\n\n    .menu-grid-icon:hover {\n      transform: rotate(5deg) scale(1.1);\n    }\n\n    .menu-grid-icon[hidden] {\n      display: none;\n    }\n\n    .menu-grid-icon ::slotted(*) {\n      width: 18px;\n      height: 18px;\n    }\n\n    .menu-grid-title {\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: var(--st-color-text-strong);\n      transition: color 0.2s ease;\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      margin-bottom: 0;\n    }\n\n    .menu-grid-description {\n      font-size: 0.75rem;\n      color: var(--st-color-text-muted);\n      display: -webkit-box;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      line-height: 1.4;\n      transition: color 0.2s ease;\n    }\n\n    .menu-grid-item.compact .menu-grid-header {\n      gap: 8px;\n    }\n\n    .menu-grid-item.compact .menu-grid-icon {\n      width: 24px;\n      height: 24px;\n    }\n\n    .menu-grid-item.compact .menu-grid-icon ::slotted(*) {\n      width: 14px;\n      height: 14px;\n    }\n\n    .menu-grid-item.compact .menu-grid-title {\n      font-size: 0.75rem;\n    }\n\n    .menu-grid-item.compact .menu-grid-description {\n      font-size: 0.75rem;\n    }\n\n    .menu-grid-header.icon-only {\n      justify-content: center;\n    }\n\n    @media (max-width: 480px) {\n      .menu-grid-header {\n        gap: 8px;\n      }\n\n      .menu-grid-icon {\n        width: 28px;\n        height: 28px;\n      }\n\n      .menu-grid-icon ::slotted(*) {\n        width: 16px;\n        height: 16px;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .menu-grid-item,\n      .menu-grid-icon {\n        transition: none;\n      }\n\n      .menu-grid-item.pending {\n        opacity: 1;\n        transform: none;\n      }\n\n      .menu-grid-badge {\n        animation: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  description = '';\n\n  @property({ type: String })\n  href = '';\n\n  /** Small corner label, e.g. \"New\"/\"Beta\" — omit for none. */\n  @property({ type: String })\n  badge = '';\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\n  @property({ type: Boolean, attribute: 'show-description' })\n  showDescription = true;\n\n  /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\n  @state() private hasIcon = false;\n\n  /** True until the item first scrolls into view (the source's `whileInView ... once`). */\n  @state() private pending = true;\n\n  private observer?: IntersectionObserver;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (typeof IntersectionObserver === 'undefined') {\n      this.pending = false;\n      return;\n    }\n    this.observer = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        this.pending = false;\n        this.observer?.disconnect();\n      }\n    });\n    this.observer.observe(this);\n  }\n\n  disconnectedCallback(): void {\n    this.observer?.disconnect();\n    super.disconnectedCallback();\n  }\n\n  private onIconSlotChange = (event: Event): void => {\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  private get isExternal(): boolean {\n    return this.href.startsWith('http');\n  }\n\n  private onClick = (event: MouseEvent): void => {\n    if (this.isExternal) return;\n    const selectEvent = new CustomEvent<MenuGridItemSelectEventDetail>('menu-grid-item-select', {\n      detail: { href: this.href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  };\n\n  render() {\n    const iconOnly = this.hasIcon && !this.title;\n    return html`\n      <div class=\"menu-grid-item ${this.compact ? 'compact' : 'regular'} ${this.pending ? 'pending' : ''}\" part=\"item\">\n        <a\n          part=\"link\"\n          class=\"menu-grid-link\"\n          href=${this.href}\n          target=${this.isExternal ? '_blank' : '_self'}\n          rel=${this.isExternal ? 'noopener noreferrer' : nothing}\n          @click=${this.onClick}\n        >\n          ${this.badge ? html`<span part=\"badge\" class=\"menu-grid-badge\">${this.badge}</span>` : nothing}\n          <span class=\"menu-grid-header ${iconOnly ? 'icon-only' : ''}\" part=\"header\">\n            <span class=\"menu-grid-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\n            ${this.title ? html`<span part=\"title\" class=\"menu-grid-title\">${this.title}</span>` : nothing}\n          </span>\n          ${this.description && this.showDescription\n            ? html`<span part=\"description\" class=\"menu-grid-description\">${this.description}</span>`\n            : nothing}\n        </a>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-KMU6ABQF.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/shared/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Reusable `css` fragments shared across component `static styles` blocks.\n *\n * Lit's `css` tag allows interpolating another `CSSResult` anywhere inside a\n * template, including mid-rule — `${fragment}` below expands to raw CSS\n * text, so these compose into a component's own selectors without forcing a\n * shared class name or touching `render()`. Each component keeps its own\n * selectors; only the duplicated property lists move here. Layout details\n * that genuinely vary per component (padding, gap, font-size, ...) stay\n * local, declared after a fragment so the cascade lets them override it.\n *\n * Add a fragment here only once a pattern is byte-identical (or near enough\n * that the deltas are better expressed as local overrides) across 3+\n * components — see `packages/suite-components/README.md#shared-style-fragments`.\n */\n\n/** Truncates overflowing text to a single line with an ellipsis. */\nexport const truncateStyles = css`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\n/**\n * Base for an unstyled, click-through interactive element (icon buttons,\n * menu triggers, link-like buttons) before component-specific padding,\n * font-size, and color are layered on.\n */\nexport const buttonResetStyles = css`\n  border: 0;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n`;\n\n/**\n * The dark-filled primary-action button look (wizard Next/Generate/Run/Save,\n * active toggle buttons, ...). Pair with `ctaButtonDisabledStyles` on the\n * same selector's `:disabled` state.\n */\nexport const ctaButtonStyles = css`\n  border: 0;\n  border-radius: var(--st-button-radius);\n  background: var(--st-button-primary-bg);\n  color: var(--st-button-primary-color);\n  font-weight: var(--st-button-font-weight);\n  cursor: pointer;\n`;\n\nexport const ctaButtonDisabledStyles = css`\n  background: var(--st-color-subtle);\n  cursor: not-allowed;\n`;\n\n/**\n * Just the fill (background + color) from `ctaButtonStyles`, for selectors\n * that only need to swap an already-bordered/sized button into the CTA look\n * on an active/pressed/selected state (`[aria-pressed='true']`, `.active`,\n * ...) rather than defining the button from scratch.\n */\nexport const ctaButtonFillStyles = css`\n  background: var(--st-button-primary-bg);\n  color: var(--st-button-primary-color);\n`;\n\n/** Floating menu/dropdown panel chrome (user menu, language menu, ...). */\nexport const dropdownPanelStyles = css`\n  position: absolute;\n  top: 38px;\n  right: 0;\n  background: var(--st-color-surface);\n  border: 1px solid var(--st-color-border);\n  border-radius: var(--st-radius-sm);\n  box-shadow: 0 4px 16px var(--st-shadow-color-sm);\n  z-index: 30;\n  overflow: hidden;\n`;\n\n/** \"No results\" / \"Nothing here.\" empty-state text. Padding stays local. */\nexport const emptyStateStyles = css`\n  text-align: center;\n  color: var(--st-color-text-muted);\n  font-size: var(--st-text-base);\n`;\n\n/** Bordered, rounded shell wrapping a data table (browse/list views). */\nexport const tableShellStyles = css`\n  background: var(--st-color-surface);\n  border: 1px solid var(--st-color-border);\n  border-radius: var(--st-radius-md);\n  overflow: hidden;\n`;\n\n/** A single bordered result row with a name (truncated) + trailing link. */\nexport const resultRowStyles = css`\n  display: flex;\n  align-items: center;\n  gap: var(--st-space-12);\n  padding: var(--st-space-12) var(--st-space-14);\n  border: 1px solid var(--st-color-border);\n  border-radius: var(--st-radius-sm);\n`;\n\nexport const resultNameStyles = css`\n  flex: 1;\n  min-width: 120px;\n  font-size: var(--st-text-base);\n  font-weight: var(--st-font-weight-medium);\n  ${truncateStyles}\n`;\n\nexport const resultLinkStyles = css`\n  font-size: var(--st-text-sm);\n  font-weight: var(--st-font-weight-semibold);\n  color: var(--st-color-accent-text);\n`;\n\n/**\n * Uppercase, letter-spaced section/field \"eyebrow\" label (card headings,\n * table headers, field labels, ...). Font-size stays local since it varies\n * (11–12px) by context.\n */\nexport const eyebrowLabelStyles = css`\n  font-weight: var(--st-font-weight-bold);\n  color: var(--st-color-text-muted);\n  text-transform: uppercase;\n  letter-spacing: var(--st-tracking-wide);\n`;\n\n/** Top border separating stacked rows in a list/table (folder rows, data rows, table rows, ...). */\nexport const rowDividerStyles = css`\n  border-top: 1px solid var(--st-color-divider);\n`;\n\n/**\n * Bordered, rounded surface shell for a card/tile/panel (as opposed to\n * `tableShellStyles`, which additionally clips overflow for tabular content).\n * Padding, gap, and cursor stay local since they vary by component.\n */\nexport const cardShellStyles = css`\n  background: var(--st-color-surface);\n  border: 1px solid var(--st-color-border);\n  border-radius: var(--st-radius-md);\n`;\n\n/** A card/tile/row's bold primary name line (folder tiles/rows, template cards, ...). */\nexport const itemNameStyles = css`\n  font-size: var(--st-text-base);\n  font-weight: var(--st-font-weight-semibold);\n  color: var(--st-color-text-strong);\n`;\n\n/** A card/tile/row's muted secondary caption line, paired with `itemNameStyles`. */\nexport const itemCaptionStyles = css`\n  font-size: var(--st-text-xs);\n  color: var(--st-color-text-muted);\n`;\n\n/**\n * Whole rules (not a property list) every component's stylesheet starts\n * with: routes keyboard focus rings and native checkbox/radio tint through\n * `--st-focus-ring` / `--st-checkbox-color`, whose defaults (`auto`) keep\n * the browser's own look until a host app themes them.\n */\nexport const controlBaseStyles = css`\n  :is(button, a, input, select, textarea, [tabindex]):focus-visible {\n    outline: var(--st-focus-ring);\n    outline-offset: var(--st-focus-ring-offset);\n  }\n\n  input[type='checkbox'],\n  input[type='radio'] {\n    accent-color: var(--st-checkbox-color);\n  }\n`;\n\n/** Default font stack, used by nearly every component. */\nexport const fontFamilyStyles = css`\n  font-family: var(--st-font-family);\n`;\n\n/**\n * Font stack for page-root/chrome components (`st-template-hub`, the admin\n * and configuration pages, `st-app-header`, ...). Identical to\n * `fontFamilyStyles` now that `--st-font-family` always resolves via\n * `theme.css` (no per-usage fallback) — kept as a separate export so those\n * call sites stay semantically distinct if the two ever need to diverge\n * again.\n */\nexport const rootFontFamilyStyles = css`\n  font-family: var(--st-font-family);\n`;\n\n/** Canonical responsive breakpoints (px). Interpolate as `${BREAKPOINT_TABLET}px`. */\nexport const BREAKPOINT_TABLET = 900;\nexport const BREAKPOINT_MOBILE = 500;\n"],"mappings":";AAAA,SAAS,WAAW;AAmBb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAWvB,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAY1B,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASxB,IAAM,0BAA0B;AAAA;AAAA;AAAA;AAWhC,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAM5B,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa5B,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAOzB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASxB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5B,cAAc;AAAA;AAGX,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAWzB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,IAAM,mBAAmB;AAAA;AAAA;AASzB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAOxB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAOvB,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAW1B,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa1B,IAAM,mBAAmB;AAAA;AAAA;AAYzB,IAAM,uBAAuB;AAAA;AAAA;AAK7B,IAAM,oBAAoB;AAC1B,IAAM,oBAAoB;","names":[]}

package/dist/chunk-LEXZKGQX.js.map

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