@sankhyatronics/sankhya-cms 0.1.3 → 0.1.5

package/dist/{chunk-74MILER4.js → chunk-EMVHNAID.js}

@@ -81,7 +81,9 @@ ItemsAccordion.styles = css`
 
     :host {
       display: block;
-      padding: var(--st-cms-section-padding) var(--st-space-24);
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-items-accordion-padding instead. */
+      padding: var(--st-items-accordion-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;
       background: var(--st-color-page);
       ${fontFamilyStyles}
     }
@@ -180,7 +182,7 @@ ItemsAccordion.styles = css`
 
     @media (max-width: 768px) {
       :host {
-        padding: var(--st-space-48) var(--st-space-20);
+        padding: var(--st-items-accordion-padding, var(--st-space-48) var(--st-space-20)) !important;
       }
 
       .title {
@@ -212,4 +214,4 @@ ItemsAccordion = __decorateClass([
 export {
   ItemsAccordion
 };
-//# sourceMappingURL=chunk-74MILER4.js.map
+//# sourceMappingURL=chunk-EMVHNAID.js.map

package/dist/chunk-EMVHNAID.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/items-accordion/ItemsAccordion.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport {\r\n  reducedMotionStyles,\r\n  sectionHeaderStyles,\r\n  sectionSubtitleStyles,\r\n  sectionTitleStyles,\r\n} from '../shared/section-styles';\r\nimport type { AccordionToggleEventDetail } from './ItemsAccordionEvents';\r\n\r\nexport interface AccordionItem {\r\n  id: string;\r\n  title: string;\r\n  content: string;\r\n}\r\n\r\n/**\r\n * A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.\r\n *\r\n * @cssprop --st-items-accordion-padding - Overrides the block's padding.\r\n */\r\n@customElement('st-items-accordion')\r\nexport class ItemsAccordion extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n         padding; override with --st-items-accordion-padding instead. */\r\n      padding: var(--st-items-accordion-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\r\n      background: var(--st-color-page);\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    .container {\r\n      max-width: 800px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .header {\r\n      ${sectionHeaderStyles}\r\n    }\r\n\r\n    .title {\r\n      ${sectionTitleStyles}\r\n      font-size: var(--st-text-2xl);\r\n      margin-bottom: var(--st-space-12);\r\n    }\r\n\r\n    .subtitle {\r\n      ${sectionSubtitleStyles}\r\n      font-size: var(--st-text-base);\r\n      margin: 0;\r\n    }\r\n\r\n    .list {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-16);\r\n    }\r\n\r\n    .item {\r\n      border: 1px solid var(--st-color-border);\r\n      border-radius: var(--st-radius-lg);\r\n      background: var(--st-color-surface);\r\n      overflow: hidden;\r\n      transition:\r\n        border-color 0.2s ease,\r\n        box-shadow 0.2s ease;\r\n    }\r\n\r\n    .item.open {\r\n      border-color: var(--st-color-border-strong);\r\n      box-shadow: 0 4px 6px -1px var(--st-shadow-color-sm);\r\n    }\r\n\r\n    .trigger {\r\n      ${buttonResetStyles}\r\n      width: 100%;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      padding: var(--st-space-24);\r\n      text-align: left;\r\n      font-size: var(--st-text-lg);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .trigger:hover {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    .chevron {\r\n      flex-shrink: 0;\r\n      margin-left: var(--st-space-16);\r\n      font-size: 24px;\r\n      color: var(--st-color-text-faint);\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .open .chevron {\r\n      transform: rotate(180deg);\r\n    }\r\n\r\n    .content {\r\n      display: grid;\r\n      grid-template-rows: 0fr;\r\n      transition: grid-template-rows 0.3s ease;\r\n    }\r\n\r\n    .open .content {\r\n      grid-template-rows: 1fr;\r\n    }\r\n\r\n    .content-clip {\r\n      overflow: hidden;\r\n      min-height: 0;\r\n    }\r\n\r\n    .content-inner {\r\n      padding: 0 var(--st-space-24) var(--st-space-24);\r\n      color: var(--st-color-text);\r\n      line-height: 1.6;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-items-accordion-padding, var(--st-space-48) var(--st-space-20)) !important;\r\n      }\r\n\r\n      .title {\r\n        font-size: var(--st-text-xl);\r\n      }\r\n    }\r\n\r\n    ${reducedMotionStyles}\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  @property({ type: String })\r\n  subtitle = '';\r\n\r\n  @property({ attribute: false })\r\n  items: AccordionItem[] = [];\r\n\r\n  @property({ type: Boolean, attribute: 'allow-multiple' })\r\n  allowMultiple = false;\r\n\r\n  @state() private openIds = new Set<string>();\r\n\r\n  private toggle(id: string) {\r\n    const wasOpen = this.openIds.has(id);\r\n    const next = new Set(this.allowMultiple ? this.openIds : []);\r\n    if (wasOpen) next.delete(id);\r\n    else next.add(id);\r\n    this.openIds = next;\r\n    this.dispatchEvent(\r\n      new CustomEvent<AccordionToggleEventDetail>('accordion-toggle', {\r\n        detail: { id, open: !wasOpen },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"container\" part=\"container\">\r\n        ${this.title || this.subtitle\r\n          ? html`<div class=\"header\" part=\"header\">\r\n              ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\r\n              ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n            </div>`\r\n          : nothing}\r\n        <div class=\"list\" part=\"list\">\r\n          ${this.items.map((item) => {\r\n            const open = this.openIds.has(item.id);\r\n            return html`\r\n              <div class=\"item ${open ? 'open' : ''}\" part=\"item\">\r\n                <button\r\n                  class=\"trigger\"\r\n                  part=\"trigger\"\r\n                  type=\"button\"\r\n                  aria-expanded=${open ? 'true' : 'false'}\r\n                  aria-controls=\"content-${item.id}\"\r\n                  @click=${() => this.toggle(item.id)}\r\n                >\r\n                  <span>${item.title}</span>\r\n                  <iconify-icon class=\"chevron\" icon=\"mdi:chevron-down\"></iconify-icon>\r\n                </button>\r\n                <div class=\"content\" id=\"content-${item.id}\" part=\"content\" role=\"region\" ?inert=${!open}>\r\n                  <div class=\"content-clip\">\r\n                    <div class=\"content-inner\">${item.content}</div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            `;\r\n          })}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/{chunk-3ERKQNZT.js → chunk-HGJT24UG.js}

@@ -54,8 +54,10 @@ PromoBanner.styles = css`
       box-sizing: border-box;
       width: calc(100% - 48px);
       max-width: var(--st-cms-container-max);
-      margin: var(--st-space-40) auto;
-      padding: 100px var(--st-space-24);
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         margin/padding; override with --st-promo-banner-margin/-padding instead. */
+      margin: var(--st-promo-banner-margin, var(--st-space-40) auto) !important;
+      padding: var(--st-promo-banner-padding, 100px var(--st-space-24)) !important;
       border-radius: var(--st-space-24);
       background-color: var(--st-color-text-strong);
       background-size: cover;
@@ -111,8 +113,8 @@ PromoBanner.styles = css`
     @media (max-width: 768px) {
       :host {
         width: auto;
-        margin: var(--st-space-24);
-        padding: 60px var(--st-space-24);
+        margin: var(--st-promo-banner-margin, var(--st-space-24)) !important;
+        padding: var(--st-promo-banner-padding, 60px var(--st-space-24)) !important;
         border-radius: var(--st-radius-lg);
       }
       .actions,
@@ -152,4 +154,4 @@ PromoBanner = __decorateClass([
 export {
   PromoBanner
 };
-//# sourceMappingURL=chunk-3ERKQNZT.js.map
+//# sourceMappingURL=chunk-HGJT24UG.js.map

package/dist/chunk-HGJT24UG.js.map

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

package/dist/chunk-HGTC3LCW.js

@@ -0,0 +1,607 @@
+import {
+  arrowUpRightIcon
+} from "./chunk-PB7ZPPLP.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/mega-menu/MegaMenu.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var MegaMenu = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.heading = "";
+    this.description = "";
+    this.featuredHeading = "";
+    this.columns = 0;
+    this.columnCount = 1;
+    this.hasIntroLinks = false;
+    this.hasFeatured = false;
+    this.onColumnsSlotChange = (event) => {
+      this.columnCount = Math.max(1, event.target.assignedElements({ flatten: true }).length);
+    };
+    this.onIntroSlotChange = (event) => {
+      this.hasIntroLinks = event.target.assignedElements({ flatten: true }).length > 0;
+    };
+    this.onFeaturedSlotChange = (event) => {
+      this.hasFeatured = event.target.assignedElements({ flatten: true }).length > 0;
+    };
+  }
+  render() {
+    const columns = Math.min(6, Math.max(1, Math.round(this.columns) || this.columnCount));
+    const hasIntroText = !!(this.heading || this.description);
+    const hasIntro = hasIntroText || this.hasIntroLinks;
+    const hasFeatured = this.hasFeatured || !!this.featuredHeading;
+    const tracks = [hasIntro ? "minmax(0, 1fr)" : "", `minmax(0, ${columns}fr)`, hasFeatured ? "minmax(0, 1fr)" : ""].filter(Boolean).join(" ");
+    return html`
+      <div
+        part="inner"
+        class="inner"
+        style="grid-template-columns:${tracks};--st-mega-menu-columns:${columns};--st-mega-menu-columns-md:${Math.min(2, columns)}"
+      >
+        <div part="intro" class="intro" ?hidden=${!hasIntro}>
+          ${this.heading ? html`<p part="heading" class="intro-heading">${this.heading}</p>` : nothing}
+          ${this.description ? html`<p part="description" class="intro-description">${this.description}</p>` : nothing}
+          <div part="intro-links" class="intro-links ${hasIntroText ? "" : "no-text"}" ?hidden=${!this.hasIntroLinks}>
+            <slot name="intro" @slotchange=${this.onIntroSlotChange}></slot>
+          </div>
+        </div>
+        <div part="columns" class="columns"><slot @slotchange=${this.onColumnsSlotChange}></slot></div>
+        <div part="featured" class="featured" ?hidden=${!hasFeatured}>
+          ${this.featuredHeading ? html`<p part="featured-heading" class="featured-heading">${this.featuredHeading}</p>` : nothing}
+          <div class="featured-items"><slot name="featured" @slotchange=${this.onFeaturedSlotChange}></slot></div>
+        </div>
+      </div>
+    `;
+  }
+};
+MegaMenu.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      container-type: inline-size;
+      ${fontFamilyStyles}
+    }
+
+    .inner {
+      display: grid;
+      gap: 3rem;
+      padding: 3rem 3.5rem;
+      box-sizing: border-box;
+    }
+
+    .columns {
+      display: grid;
+      grid-template-columns: repeat(var(--st-mega-menu-columns, 3), minmax(0, 1fr));
+      gap: 3rem;
+      align-items: stretch;
+    }
+
+    .intro,
+    .featured {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .intro-heading {
+      margin: 0 0 1rem;
+      font-size: 2rem;
+      font-weight: 400;
+      line-height: 1.15;
+      color: var(--st-color-text-strong);
+    }
+
+    .intro-description {
+      margin: 0;
+      font-size: 1rem;
+      line-height: 1.55;
+      color: var(--st-color-text);
+    }
+
+    .intro-links {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      margin-top: 2.5rem;
+      padding-top: 2rem;
+      border-top: 1px solid var(--st-color-border);
+    }
+
+    .intro-links.no-text {
+      margin-top: 0;
+      padding-top: 0;
+      border-top: 0;
+    }
+
+    .featured-heading {
+      margin: 0 0 1rem;
+      font-size: 1.125rem;
+      font-weight: 500;
+      line-height: 1.35;
+      color: var(--st-color-text-strong);
+    }
+
+    .featured-items {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    [hidden] {
+      display: none !important;
+    }
+
+    /* Medium panel: intro on top, two link columns, featured cards side by side underneath. */
+    @container (max-width: 960px) {
+      .inner {
+        grid-template-columns: minmax(0, 1fr) !important;
+        gap: 2rem;
+        padding: 2rem;
+      }
+
+      .columns {
+        grid-template-columns: repeat(var(--st-mega-menu-columns-md, 2), minmax(0, 1fr));
+        gap: 2rem;
+      }
+
+      .intro-links {
+        margin-top: 1.5rem;
+        padding-top: 1.5rem;
+      }
+
+      .featured-items {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      }
+    }
+
+    /* Narrow panel (the phone drill-down): everything stacked. */
+    @container (max-width: 560px) {
+      .inner {
+        gap: 1.75rem;
+        padding: 0.5rem 0 1.5rem;
+      }
+
+      .columns {
+        grid-template-columns: minmax(0, 1fr);
+        gap: 1.75rem;
+      }
+
+      .intro-heading {
+        display: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], MegaMenu.prototype, "heading", 2);
+__decorateClass([
+  property({ type: String })
+], MegaMenu.prototype, "description", 2);
+__decorateClass([
+  property({ type: String, attribute: "featured-heading" })
+], MegaMenu.prototype, "featuredHeading", 2);
+__decorateClass([
+  property({ type: Number })
+], MegaMenu.prototype, "columns", 2);
+__decorateClass([
+  state()
+], MegaMenu.prototype, "columnCount", 2);
+__decorateClass([
+  state()
+], MegaMenu.prototype, "hasIntroLinks", 2);
+__decorateClass([
+  state()
+], MegaMenu.prototype, "hasFeatured", 2);
+MegaMenu = __decorateClass([
+  customElement("st-mega-menu")
+], MegaMenu);
+
+// src/mega-menu/MegaMenuColumn.ts
+import { LitElement as LitElement2, css as css2, html as html2, nothing as nothing2 } from "lit";
+import { customElement as customElement2, property as property2 } from "lit/decorators.js";
+var MegaMenuColumn = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.heading = "";
+    this.href = "";
+    this.description = "";
+    this.variant = "plain";
+    this.ctaLabel = "";
+    this.ctaHref = "";
+  }
+  select(event, href) {
+    if (href.startsWith("http")) return;
+    const selectEvent = new CustomEvent("mega-menu-select", {
+      detail: { href },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    this.dispatchEvent(selectEvent);
+    if (selectEvent.defaultPrevented) event.preventDefault();
+  }
+  renderHeading() {
+    if (!this.heading) return nothing2;
+    return this.href ? html2`<a part="heading" class="heading" href=${this.href} @click=${(event) => this.select(event, this.href)}
+          >${this.heading}</a
+        >` : html2`<p part="heading" class="heading">${this.heading}</p>`;
+  }
+  renderCta() {
+    if (!this.ctaLabel || !this.ctaHref) return nothing2;
+    const external = this.ctaHref.startsWith("http");
+    return html2`
+      <span class="cta-spacer"></span>
+      <a
+        part="cta"
+        class="cta"
+        href=${this.ctaHref}
+        target=${external ? "_blank" : "_self"}
+        rel=${external ? "noopener noreferrer" : nothing2}
+        @click=${(event) => this.select(event, this.ctaHref)}
+        >${this.ctaLabel} ${external ? arrowUpRightIcon(14) : nothing2}</a
+      >
+    `;
+  }
+  render() {
+    return html2`
+      ${this.renderHeading()}
+      ${this.description ? html2`<p part="description" class="description">${this.description}</p>` : nothing2}
+      <div part="items" class="items" role="group" aria-label=${this.heading || nothing2}><slot></slot></div>
+      ${this.renderCta()}
+    `;
+  }
+};
+MegaMenuColumn.styles = css2`
+    ${controlBaseStyles}
+
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      box-sizing: border-box;
+      ${fontFamilyStyles}
+    }
+
+    :host([variant='card']),
+    :host([variant='accent']) {
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-mega-menu-column-padding instead. */
+      padding: var(--st-mega-menu-column-padding, 2rem 1.75rem 1.75rem) !important;
+      border-radius: 20px;
+      background: color-mix(in oklch, var(--st-color-text-strong) 5%, var(--st-color-surface));
+    }
+
+    :host([variant='accent']) {
+      background: var(--st-color-accent);
+      color: var(--st-color-on-solid);
+      /* Read by the st-menu-item links inside. */
+      --st-nav-color: var(--st-color-on-solid);
+      --st-nav-hover-bg: transparent;
+    }
+
+    .heading {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      margin: 0 0 0.75rem;
+      font-size: 1.125rem;
+      font-weight: 500;
+      line-height: 1.35;
+      color: var(--st-color-text-strong);
+      text-decoration: none;
+    }
+
+    :host([variant='card']) .heading,
+    :host([variant='accent']) .heading {
+      font-size: 1.375rem;
+    }
+
+    :host([variant='accent']) .heading {
+      color: inherit;
+    }
+
+    a.heading:hover,
+    a.heading:focus-visible {
+      text-decoration: underline;
+      text-underline-offset: 4px;
+    }
+
+    .description {
+      margin: -0.25rem 0 0.75rem;
+      font-size: 0.875rem;
+      line-height: 1.5;
+      color: var(--st-color-text-muted);
+    }
+
+    :host([variant='accent']) .description {
+      color: inherit;
+      opacity: 0.85;
+    }
+
+    .items {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    /* Nested groups stack with room between them (!important for the same page-reset reason). */
+    ::slotted(st-mega-menu-column:not(:first-child)) {
+      margin-top: 2rem !important;
+    }
+
+    .cta {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 0.875rem 1.5rem;
+      border-radius: 9999px;
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+      font-size: 1rem;
+      font-weight: 500;
+      text-align: center;
+      text-decoration: none;
+      transition: box-shadow 0.2s ease;
+    }
+
+    .cta-spacer {
+      flex: 1;
+      min-height: 1.75rem;
+    }
+
+    .cta:hover,
+    .cta:focus-visible {
+      box-shadow: 0 0 0 2px currentColor;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .cta {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property2({ type: String })
+], MegaMenuColumn.prototype, "heading", 2);
+__decorateClass([
+  property2({ type: String })
+], MegaMenuColumn.prototype, "href", 2);
+__decorateClass([
+  property2({ type: String })
+], MegaMenuColumn.prototype, "description", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], MegaMenuColumn.prototype, "variant", 2);
+__decorateClass([
+  property2({ type: String, attribute: "cta-label" })
+], MegaMenuColumn.prototype, "ctaLabel", 2);
+__decorateClass([
+  property2({ type: String, attribute: "cta-href" })
+], MegaMenuColumn.prototype, "ctaHref", 2);
+MegaMenuColumn = __decorateClass([
+  customElement2("st-mega-menu-column")
+], MegaMenuColumn);
+
+// src/mega-menu/MegaMenuFeature.ts
+import { LitElement as LitElement3, css as css3, html as html3, nothing as nothing3 } from "lit";
+import { customElement as customElement3, property as property3 } from "lit/decorators.js";
+var MegaMenuFeature = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    this.variant = "story";
+    this.title = "";
+    this.description = "";
+    this.eyebrow = "";
+    this.href = "";
+    this.target = "";
+    this.imageUrl = "";
+    this.imageAlt = "";
+    this.logoUrl = "";
+    this.logoAlt = "";
+    this.ctaLabel = "";
+    this.onClick = (event) => {
+      if (this.isExternal) return;
+      const selectEvent = new CustomEvent("mega-menu-select", {
+        detail: { href: this.href },
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      });
+      this.dispatchEvent(selectEvent);
+      if (selectEvent.defaultPrevented) event.preventDefault();
+    };
+  }
+  get isExternal() {
+    return this.href.startsWith("http");
+  }
+  render() {
+    const target = this.target || (this.isExternal ? "_blank" : "_self");
+    const overlay = this.variant === "overlay";
+    const style = overlay && this.imageUrl ? `--st-mega-menu-feature-image:url(${JSON.stringify(this.imageUrl)})` : "";
+    return html3`
+      <a
+        part="card"
+        class="card"
+        style=${style}
+        href=${this.href || nothing3}
+        target=${target}
+        rel=${target === "_blank" ? "noopener noreferrer" : nothing3}
+        @click=${this.onClick}
+      >
+        ${overlay && this.logoUrl ? html3`<img part="logo" class="logo" src=${this.logoUrl} alt=${this.logoAlt} />` : nothing3}
+        ${!overlay && this.imageUrl ? html3`<img part="image" class="image" src=${this.imageUrl} alt=${this.imageAlt} loading="lazy" />` : nothing3}
+        ${this.eyebrow ? html3`<span part="eyebrow" class="eyebrow">${this.eyebrow}</span>` : nothing3}
+        ${this.title ? html3`<p part="title" class="title">${this.title}</p>` : nothing3}
+        ${this.description ? html3`<p part="description" class="description">${this.description}</p>` : nothing3}
+        ${this.ctaLabel ? html3`<span part="cta" class="cta">${this.ctaLabel}</span>` : nothing3}
+      </a>
+    `;
+  }
+};
+/** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key to it. */
+MegaMenuFeature.shadowRootOptions = { ...LitElement3.shadowRootOptions, delegatesFocus: true };
+MegaMenuFeature.styles = css3`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      ${fontFamilyStyles}
+    }
+
+    .card {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+      box-sizing: border-box;
+      color: var(--st-color-text-strong);
+      text-decoration: none;
+    }
+
+    .image {
+      display: block;
+      width: 100%;
+      aspect-ratio: 9 / 8;
+      object-fit: cover;
+      border-radius: 20px;
+      transition: transform 0.3s ease;
+    }
+
+    .card:hover .image {
+      transform: scale(1.015);
+    }
+
+    .eyebrow {
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--st-color-accent-text);
+    }
+
+    .title {
+      margin: 0;
+      font-size: 1.125rem;
+      font-weight: 500;
+      line-height: 1.3;
+    }
+
+    .description {
+      margin: 0;
+      font-size: 0.9375rem;
+      line-height: 1.5;
+    }
+
+    .cta {
+      align-self: flex-start;
+      margin-top: 0.75rem;
+      font-size: 0.9375rem;
+      font-weight: 500;
+      text-decoration: underline;
+      text-underline-offset: 5px;
+      text-decoration-thickness: 1px;
+    }
+
+    .card:hover .cta,
+    .card:focus-visible .cta {
+      text-decoration-thickness: 2px;
+    }
+
+    /* overlay */
+    :host([variant='overlay']) .card {
+      justify-content: flex-end;
+      gap: 0.5rem;
+      min-height: 15rem;
+      padding: 1.75rem;
+      border-radius: 20px;
+      color: #fff;
+      background-color: var(--st-color-accent);
+      background-image:
+        linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05)),
+        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))));
+      background-size: cover;
+      background-position: center;
+      transition: transform 0.2s ease;
+    }
+
+    :host([variant='overlay']) .card:hover {
+      transform: translateY(-2px);
+    }
+
+    :host([variant='overlay']) .logo {
+      height: 2.25rem;
+      width: auto;
+      max-width: 70%;
+      margin-bottom: auto;
+      align-self: flex-start;
+      object-fit: contain;
+    }
+
+    :host([variant='overlay']) .title {
+      font-size: 1.75rem;
+      font-weight: 400;
+    }
+
+    :host([variant='overlay']) .eyebrow,
+    :host([variant='overlay']) .cta {
+      color: inherit;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .image,
+      :host([variant='overlay']) .card {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property3({ type: String, reflect: true })
+], MegaMenuFeature.prototype, "variant", 2);
+__decorateClass([
+  property3({ type: String })
+], MegaMenuFeature.prototype, "title", 2);
+__decorateClass([
+  property3({ type: String })
+], MegaMenuFeature.prototype, "description", 2);
+__decorateClass([
+  property3({ type: String })
+], MegaMenuFeature.prototype, "eyebrow", 2);
+__decorateClass([
+  property3({ type: String })
+], MegaMenuFeature.prototype, "href", 2);
+__decorateClass([
+  property3({ type: String })
+], MegaMenuFeature.prototype, "target", 2);
+__decorateClass([
+  property3({ type: String, attribute: "image-url" })
+], MegaMenuFeature.prototype, "imageUrl", 2);
+__decorateClass([
+  property3({ type: String, attribute: "image-alt" })
+], MegaMenuFeature.prototype, "imageAlt", 2);
+__decorateClass([
+  property3({ type: String, attribute: "logo-url" })
+], MegaMenuFeature.prototype, "logoUrl", 2);
+__decorateClass([
+  property3({ type: String, attribute: "logo-alt" })
+], MegaMenuFeature.prototype, "logoAlt", 2);
+__decorateClass([
+  property3({ type: String, attribute: "cta-label" })
+], MegaMenuFeature.prototype, "ctaLabel", 2);
+MegaMenuFeature = __decorateClass([
+  customElement3("st-mega-menu-feature")
+], MegaMenuFeature);
+
+export {
+  MegaMenu,
+  MegaMenuColumn,
+  MegaMenuFeature
+};
+//# sourceMappingURL=chunk-HGTC3LCW.js.map