@sankhyatronics/sankhya-cms 0.2.0 → 0.3.0

package/dist/chunk-MIBVQXRU.js

@@ -0,0 +1,1098 @@
+import {
+  MEGA_MENU_LAYOUT_EVENT
+} from "./chunk-ER7MCPDV.js";
+import {
+  isCurrentPath
+} from "./chunk-UKIVLF7S.js";
+import {
+  arrowUpRightIcon
+} from "./chunk-WTD2YIAA.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.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.ctaLabel = "";
+    this.ctaHref = "";
+    this.visible = true;
+    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;
+    };
+    this.lastTracks = 0;
+  }
+  get layout() {
+    const columns = Math.min(6, Math.max(1, Math.round(this.columns) || this.columnCount));
+    const hasIntroText = !!(this.heading || this.description);
+    const hasCta = !!(this.ctaLabel && this.ctaHref);
+    const hasIntro = hasIntroText || this.hasIntroLinks || hasCta;
+    const hasFeatured = this.hasFeatured || !!this.featuredHeading;
+    return { columns, hasIntroText, hasCta, hasIntro, hasFeatured, tracks: columns + (hasIntro ? 1 : 0) + (hasFeatured ? 1 : 0) };
+  }
+  updated(_changed) {
+    const { tracks } = this.layout;
+    if (tracks === this.lastTracks) return;
+    this.lastTracks = tracks;
+    this.dispatchEvent(
+      new CustomEvent(MEGA_MENU_LAYOUT_EVENT, { detail: { tracks }, bubbles: true, composed: true })
+    );
+  }
+  render() {
+    const { columns, hasIntroText, hasCta, hasIntro, hasFeatured } = this.layout;
+    const tracks = [hasIntro ? "minmax(0, 1fr)" : "", `minmax(0, ${columns}fr)`, hasFeatured ? "minmax(0, 1fr)" : ""].filter(Boolean).join(" ");
+    return html`
+      <div
+        part="inner"
+        class="inner"
+        ?hidden=${!this.visible}
+        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>
+          ${hasCta ? html`<div part="cta-row" class="intro-footer"><a part="cta" class="intro-cta" href=${this.ctaHref}>${this.ctaLabel}</a></div>` : nothing}
+        </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;
+    }
+
+    /* The intro column's call to action: pinned to the foot of the column, so it lines up with the featured cards. */
+    .intro-footer {
+      display: flex;
+      margin-top: auto;
+      padding-top: 2rem;
+    }
+
+    .intro-cta {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      min-height: 44px;
+      padding: 0 1.25rem;
+      border-radius: 9999px;
+      background: var(--st-color-accent);
+      color: var(--st-color-on-solid);
+      font-size: 1rem;
+      font-weight: 600;
+      text-decoration: none;
+    }
+
+    .intro-cta:hover {
+      background: color-mix(in oklch, var(--st-color-accent) 88%, var(--st-color-text-strong));
+    }
+
+    .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([
+  property({ type: String, attribute: "cta-label" })
+], MegaMenu.prototype, "ctaLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "cta-href" })
+], MegaMenu.prototype, "ctaHref", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MegaMenu.prototype, "visible", 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 "iconify-icon";
+import { LitElement as LitElement2, css as css2, html as html2, nothing as nothing2, svg } from "lit";
+import { customElement as customElement2, property as property2, state as state2 } from "lit/decorators.js";
+var DECORATIONS = {
+  flow: svg`
+    <path d="M240 8 C 190 20, 150 70, 70 150" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"/>
+    <path d="M240 28 C 196 40, 162 84, 100 156" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.25"/>
+    <path d="M240 48 C 204 60, 176 98, 130 160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1"/>
+    <path d="M226 0 C 180 10, 130 52, 40 132" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.25"/>
+    <path d="M206 0 C 166 8, 112 36, 12 108" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1"/>
+  `,
+  orbit: svg`
+    <circle cx="240" cy="0" r="36" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"/>
+    <circle cx="240" cy="0" r="62" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.25"/>
+    <circle cx="240" cy="0" r="90" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1"/>
+    <circle cx="240" cy="0" r="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1" stroke-dasharray="2 6"/>
+    <circle cx="204" cy="34" r="3" fill="currentColor" stroke="none"/>
+  `,
+  waves: svg`
+    <path d="M0 30 C 40 6, 80 54, 120 30 S 200 6, 240 30" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"/>
+    <path d="M0 48 C 40 24, 80 72, 120 48 S 200 24, 240 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.25"/>
+    <path d="M0 66 C 40 42, 80 90, 120 66 S 200 42, 240 66" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1"/>
+    <path d="M0 84 C 40 60, 80 108, 120 84 S 200 60, 240 84" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1"/>
+  `,
+  ribbon: svg`
+    <path d="M250 20 C 170 -10, 120 90, 180 110 S 250 40, 150 20 S 40 70, -10 40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"/>
+    <path d="M250 50 C 180 20, 140 110, 196 128 S 256 70, 160 52 S 60 100, -10 80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1"/>
+  `
+};
+var MegaMenuColumn = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.heading = "";
+    this.href = "";
+    this.description = "";
+    this.variant = "plain";
+    this.ctaLabel = "";
+    this.ctaHref = "";
+    this.currentVariant = "";
+    this.icon = "";
+    this.iconSrc = "";
+    this.iconSrcDark = "";
+    this.tag = "";
+    this.accent = "";
+    this.decoration = "none";
+    this.currentLabel = "Current";
+    this.currentPath = "";
+    this.current = false;
+    this.hasLinks = false;
+    this.onLinksSlotChange = (event) => {
+      this.hasLinks = event.target.assignedElements({ flatten: true }).length > 0;
+    };
+  }
+  willUpdate(changed) {
+    if (changed.has("currentVariant") || changed.has("variant") || changed.has("currentPath") || changed.has("href") || changed.has("ctaHref")) {
+      this.current = (!!this.currentVariant || this.variant === "product") && (isCurrentPath(this.href, this.currentPath) || isCurrentPath(this.ctaHref, this.currentPath));
+    }
+    if (changed.has("accent")) {
+      if (this.accent) this.style.setProperty("--st-mega-menu-column-accent", this.accent);
+      else this.style.removeProperty("--st-mega-menu-column-accent");
+    }
+  }
+  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}
+          aria-current=${isCurrentPath(this.href, this.currentPath) ? "page" : nothing2}
+          @click=${(event) => this.select(event, this.href)}
+          >${this.heading}</a
+        >` : html2`<p part="heading" class="heading">${this.heading}</p>`;
+  }
+  renderDecoration() {
+    if (this.variant !== "product" || this.decoration === "none") return nothing2;
+    return html2`<svg
+      class="deco"
+      part="decoration"
+      viewBox="0 0 240 160"
+      preserveAspectRatio="xMaxYMin meet"
+      aria-hidden="true"
+      focusable="false"
+      >${DECORATIONS[this.decoration]}</svg
+    >`;
+  }
+  /** The tile's content: the `icon-src` image (light, plus the dark one when `icon-src-dark` is set), else the iconify `icon`. */
+  renderTileIcon() {
+    if (this.iconSrc) {
+      const light = html2`<img class="${this.iconSrcDark ? "theme-light" : ""}" src=${this.iconSrc} alt="" width="28" height="28" />`;
+      if (!this.iconSrcDark) return light;
+      return html2`${light}<img class="theme-dark" src=${this.iconSrcDark} alt="" width="28" height="28" />`;
+    }
+    return html2`<iconify-icon icon=${this.icon} aria-hidden="true"></iconify-icon>`;
+  }
+  renderTop() {
+    if (this.variant !== "product") return nothing2;
+    return html2`<div part="top" class="top">
+      ${this.iconSrc || this.icon ? html2`<span part="icon" class="tile ${this.iconSrc ? "image" : ""}">${this.renderTileIcon()}</span>` : nothing2}
+      <span class="pills">
+        ${this.current ? html2`<span part="current" class="pill current">${this.currentLabel}</span>` : this.tag ? html2`<span part="tag" class="pill tag">${this.tag}</span>` : nothing2}
+      </span>
+    </div>`;
+  }
+  renderCta() {
+    if (!this.ctaLabel || !this.ctaHref) return nothing2;
+    const external = this.ctaHref.startsWith("http");
+    let trailing = nothing2;
+    if (external) trailing = arrowUpRightIcon(14);
+    else if (this.variant === "product") trailing = html2`<span class="cta-arrow" aria-hidden="true">→</span>`;
+    return html2`
+      <span class="cta-spacer"></span>
+      <a
+        part="cta"
+        class="cta"
+        href=${this.ctaHref}
+        target=${external ? "_blank" : "_self"}
+        rel=${external ? "noopener noreferrer" : nothing2}
+        aria-current=${isCurrentPath(this.ctaHref, this.currentPath) ? "page" : nothing2}
+        @click=${(event) => this.select(event, this.ctaHref)}
+        >${this.ctaLabel} ${trailing}</a
+      >
+    `;
+  }
+  render() {
+    return html2`
+      ${this.renderDecoration()}
+      ${this.variant === "product" ? html2`<span class="edge" part="edge" aria-hidden="true"></span>` : nothing2}
+      ${this.renderTop()}
+      ${this.renderHeading()}
+      ${this.description ? html2`<p part="description" class="description">${this.description}</p>` : nothing2}
+      <div part="items" class=${this.hasLinks ? "items has-links" : "items"} role="group" aria-label=${this.heading || nothing2}><slot @slotchange=${this.onLinksSlotChange}></slot></div>
+      ${this.renderCta()}
+    `;
+  }
+};
+MegaMenuColumn.styles = css2`
+    ${controlBaseStyles}
+
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      box-sizing: border-box;
+      --st-mega-menu-column-accent: var(--st-color-accent);
+      /* Accent for text and icons: blended with the theme's strong text colour, so a dark accent
+         (e.g. navy) still reads on the dark theme's surface and stays crisp on the light one. */
+      --st-mega-menu-column-accent-text: color-mix(in oklch, var(--st-mega-menu-column-accent) 60%, var(--st-color-text-strong));
+      ${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));
+    }
+
+    /* The accent look, from variant="accent" or from current-variant="accent" while the page it links to is shown. */
+    :host([variant='accent']),
+    :host([current][current-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,
+    :host([current][current-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,
+    :host([current][current-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;
+    }
+
+    .cta-arrow {
+      display: inline-block;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .cta {
+        transition: none;
+      }
+    }
+
+    /* ---- variant="product": a product card ---- */
+
+    .edge,
+    .top,
+    .tile,
+    .pill {
+      display: none;
+    }
+
+    :host([variant='product']) {
+      position: relative;
+      overflow: hidden;
+      gap: 14px;
+      /* !important for the same page-reset reason as card/accent. The border is 1px; the current card's
+         2px border takes its padding from the 1px it gives up, so nothing moves. */
+      padding: 24px !important;
+      border: 1px solid var(--st-color-border);
+      border-radius: 20px;
+      background: var(--st-color-surface);
+      box-shadow: 0 1px 2px var(--st-shadow-color-sm);
+      transition:
+        transform 0.2s ease,
+        box-shadow 0.2s ease,
+        border-color 0.2s ease,
+        background-color 0.2s ease;
+    }
+
+    :host([variant='product']) .edge {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, var(--st-mega-menu-column-accent), transparent);
+      pointer-events: none;
+    }
+
+    /* The decorative line art: behind the card's content (z-index 0), faded toward the bottom-left. */
+    :host([variant='product']) .deco {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 240px;
+      height: 160px;
+      z-index: 0;
+      pointer-events: none;
+      color: var(--st-mega-menu-column-accent);
+      opacity: var(--st-mega-menu-column-deco-opacity, 0.28);
+      -webkit-mask-image: radial-gradient(120% 120% at 100% 0%, #000 35%, transparent 75%);
+      mask-image: radial-gradient(120% 120% at 100% 0%, #000 35%, transparent 75%);
+      transition:
+        transform 0.4s ease,
+        opacity 0.4s ease;
+    }
+
+    /* Everything else in the card paints above the line art (.edge keeps its absolute position). */
+    :host([variant='product']) .edge {
+      z-index: 1;
+    }
+
+    :host([variant='product']) .top,
+    :host([variant='product']) .heading,
+    :host([variant='product']) .description,
+    :host([variant='product']) .items,
+    :host([variant='product']) .cta-spacer,
+    :host([variant='product']) .cta {
+      position: relative;
+      z-index: 1;
+    }
+
+    :host([variant='product']:hover) .deco,
+    :host([variant='product']:focus-within) .deco {
+      opacity: 0.5;
+      transform: var(--st-mega-menu-column-deco-transform, translate(-6px, 4px));
+    }
+
+    :host([variant='product'][current]) .deco {
+      opacity: 0.42;
+    }
+
+    :host([variant='product']) .top {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 8px;
+    }
+
+    :host([variant='product']) .tile {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      border-radius: 12px;
+      background: color-mix(in oklch, var(--st-mega-menu-column-accent) 14%, transparent);
+      color: var(--st-mega-menu-column-accent-text);
+    }
+
+    :host([variant='product']) .tile iconify-icon {
+      display: block;
+      width: 24px;
+      height: 24px;
+      font-size: 24px;
+    }
+
+    /* The image is 28px inside the 44px tile, which keeps the same tinted background as an iconify tile. No display here: the theme classes below set it. */
+    :host([variant='product']) .tile img {
+      flex: none;
+      width: 28px;
+      height: 28px;
+      object-fit: contain;
+    }
+
+    /* Light and dark icon per the site's theme: the dark one shows on :root.dark (see --st-theme-*-display). */
+    .theme-light {
+      display: var(--st-theme-light-display, inline-block);
+    }
+
+    .theme-dark {
+      display: var(--st-theme-dark-display, none);
+    }
+
+    :host([variant='product']) .pills {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: 6px;
+      margin-left: auto;
+    }
+
+    :host([variant='product']) .pill {
+      display: inline-flex;
+      align-items: center;
+      height: 22px;
+      padding: 0 8px;
+      border-radius: 9999px;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      white-space: nowrap;
+    }
+
+    :host([variant='product']) .pill.tag {
+      display: inline-flex;
+      background: color-mix(in oklch, var(--st-mega-menu-column-accent) 12%, transparent);
+      color: var(--st-mega-menu-column-accent-text);
+    }
+
+    :host([variant='product']) .heading {
+      margin: 0;
+      font-size: 1.125rem;
+      font-weight: 600;
+    }
+
+    :host([variant='product']) .description {
+      margin: 0;
+    }
+
+    :host([variant='product']) .items.has-links {
+      gap: 4px;
+      padding-top: 12px;
+      border-top: 1px solid var(--st-color-border);
+    }
+
+    /* Each link is a row: the arrow (set on the links here, drawn by st-menu-item) slides on hover in the accent. */
+    :host([variant='product']) ::slotted(st-menu-item) {
+      --st-menu-item-arrow: '→';
+    }
+
+    :host([variant='product']) ::slotted(st-menu-item:hover) {
+      --st-nav-color: var(--st-mega-menu-column-accent-text);
+    }
+
+    :host([variant='product']) .cta {
+      display: flex;
+      box-sizing: border-box;
+      width: 100%;
+      height: 40px;
+      padding: 0 1rem;
+      white-space: nowrap;
+      background: color-mix(in oklch, var(--st-mega-menu-column-accent) 10%, transparent);
+      color: var(--st-mega-menu-column-accent-text);
+      font-size: 0.875rem;
+      font-weight: 600;
+      transition:
+        background-color 0.2s ease,
+        color 0.2s ease;
+    }
+
+    :host([variant='product']) .cta:hover,
+    :host([variant='product']) .cta:focus-visible {
+      box-shadow: none;
+      background: var(--st-mega-menu-column-accent);
+      color: #fff;
+    }
+
+    :host([variant='product']) .cta:hover .cta-arrow,
+    :host([variant='product']) .cta:focus-visible .cta-arrow {
+      transform: translateX(2px);
+    }
+
+    :host([variant='product']:hover),
+    :host([variant='product']:focus-within) {
+      transform: translateY(var(--st-mega-menu-column-lift, -3px));
+      box-shadow: 0 16px 32px -12px var(--st-shadow-color-md);
+      border-color: color-mix(in oklch, var(--st-mega-menu-column-accent) 45%, var(--st-color-border));
+    }
+
+    /* The page being shown: no solid block, an accent border and wash, and a solid button. Declared after
+       the hover rules so it keeps its border while hovered. */
+    :host([variant='product'][current]) {
+      padding: 23px !important;
+      border: 2px solid var(--st-mega-menu-column-accent);
+      background: color-mix(in oklch, var(--st-mega-menu-column-accent) 6%, var(--st-color-surface));
+    }
+
+    :host([variant='product'][current]) .pill.current {
+      display: inline-flex;
+      background: var(--st-mega-menu-column-accent);
+      color: #fff;
+    }
+
+    :host([variant='product'][current]) .cta {
+      background: var(--st-mega-menu-column-accent);
+      color: #fff;
+    }
+
+    :host([variant='product'][current]) .cta:hover,
+    :host([variant='product'][current]) .cta:focus-visible {
+      background: color-mix(in oklch, var(--st-mega-menu-column-accent) 85%, #000);
+      color: #fff;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host([variant='product']),
+      :host([variant='product']) .cta,
+      :host([variant='product']) .cta-arrow {
+        transition: none;
+      }
+
+      :host([variant='product']:hover),
+      :host([variant='product']:focus-within) {
+        transform: none;
+      }
+
+      :host([variant='product']) .deco {
+        transition: none;
+      }
+
+      :host([variant='product']:hover) .deco,
+      :host([variant='product']:focus-within) .deco {
+        transform: none;
+      }
+
+      :host([variant='product']) .cta:hover .cta-arrow,
+      :host([variant='product']) .cta:focus-visible .cta-arrow {
+        transform: 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);
+__decorateClass([
+  property2({ type: String, attribute: "current-variant", reflect: true })
+], MegaMenuColumn.prototype, "currentVariant", 2);
+__decorateClass([
+  property2({ type: String })
+], MegaMenuColumn.prototype, "icon", 2);
+__decorateClass([
+  property2({ type: String, attribute: "icon-src" })
+], MegaMenuColumn.prototype, "iconSrc", 2);
+__decorateClass([
+  property2({ type: String, attribute: "icon-src-dark" })
+], MegaMenuColumn.prototype, "iconSrcDark", 2);
+__decorateClass([
+  property2({ type: String })
+], MegaMenuColumn.prototype, "tag", 2);
+__decorateClass([
+  property2({ type: String })
+], MegaMenuColumn.prototype, "accent", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], MegaMenuColumn.prototype, "decoration", 2);
+__decorateClass([
+  property2({ type: String, attribute: "current-label" })
+], MegaMenuColumn.prototype, "currentLabel", 2);
+__decorateClass([
+  property2({ attribute: false })
+], MegaMenuColumn.prototype, "currentPath", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], MegaMenuColumn.prototype, "current", 2);
+__decorateClass([
+  state2()
+], MegaMenuColumn.prototype, "hasLinks", 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.currentPath = "";
+    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}
+        aria-current=${isCurrentPath(this.href, this.currentPath) ? "page" : 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;
+    }
+
+    /* tip: a light-blue card with dark text, like a tip panel on a page. */
+    :host([variant='tip']) .card {
+      gap: 0.5rem;
+      padding: 1.25rem;
+      border-radius: var(--st-radius-md);
+      border: 1px solid var(--st-color-accent-border);
+      background: var(--st-color-accent-subtle);
+      color: var(--st-color-text);
+      transition: border-color 0.2s ease;
+    }
+
+    :host([variant='tip']) .card:hover {
+      border-color: var(--st-color-accent-muted);
+    }
+
+    :host([variant='tip']) .title {
+      font-size: var(--st-text-lg);
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    :host([variant='tip']) .eyebrow,
+    :host([variant='tip']) .cta {
+      color: var(--st-color-accent-text);
+    }
+
+    @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);
+__decorateClass([
+  property3({ attribute: false })
+], MegaMenuFeature.prototype, "currentPath", 2);
+MegaMenuFeature = __decorateClass([
+  customElement3("st-mega-menu-feature")
+], MegaMenuFeature);
+
+export {
+  MegaMenu,
+  MegaMenuColumn,
+  MegaMenuFeature
+};
+//# sourceMappingURL=chunk-MIBVQXRU.js.map