@sankhyatronics/sankhya-cms 0.1.3 → 0.1.5

package/dist/chunk-UVNBZD7R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/content-block/ContentBlock.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\r\nimport '../markdown';\r\n\r\n/**\r\n * A long-form article section: centered title/subtitle, an optional featured image with caption,\r\n * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\r\n * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\r\n * block works without a fetch); `content-src` wins when both are set.\r\n *\r\n * @cssprop --st-content-block-padding - Overrides the block's padding.\r\n */\r\n@customElement('st-content-block')\r\nexport class ContentBlock extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n         padding; override with --st-content-block-padding instead. */\r\n      padding: var(--st-content-block-padding, var(--st-space-24)) !important;\r\n      background: var(--st-color-surface);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background: var(--st-color-text-strong);\r\n      color: var(--st-color-on-solid);\r\n    }\r\n\r\n    .container {\r\n      max-width: var(--st-cms-container-max);\r\n      padding: 0 var(--st-space-48);\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      line-height: 1.1;\r\n    }\r\n\r\n    .subtitle {\r\n      ${sectionSubtitleStyles}\r\n    }\r\n\r\n    :host([inverted]) .title,\r\n    :host([inverted]) .subtitle {\r\n      color: inherit;\r\n    }\r\n\r\n    .featured-image {\r\n      margin: 0 0 var(--st-space-48);\r\n      border-radius: var(--st-radius-lg);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .featured-image img {\r\n      width: 100%;\r\n      height: auto;\r\n      display: block;\r\n    }\r\n\r\n    figcaption {\r\n      padding: var(--st-space-12);\r\n      text-align: center;\r\n      color: var(--st-color-text-muted);\r\n      font-size: var(--st-text-xs);\r\n    }\r\n\r\n    st-markdown {\r\n      color: var(--st-color-text);\r\n      font-size: var(--st-text-xl);\r\n    }\r\n\r\n    :host([inverted]) st-markdown {\r\n      color: inherit;\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-content-block-padding, var(--st-space-48) var(--st-space-24)) !important;\r\n      }\r\n\r\n      .container {\r\n        padding: 0;\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  /** URL of a Markdown file. */\r\n  @property({ type: String, attribute: 'content-src' })\r\n  contentSrc = '';\r\n\r\n  /** Inline Markdown, used when `content-src` is not set. */\r\n  @property({ type: String })\r\n  content = '';\r\n\r\n  @property({ type: String, attribute: 'image-src' })\r\n  imageSrc = '';\r\n\r\n  @property({ type: String, attribute: 'image-alt' })\r\n  imageAlt = '';\r\n\r\n  @property({ type: String, attribute: 'image-caption' })\r\n  imageCaption = '';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  render() {\r\n    return html`\r\n      <section class=\"container\" part=\"container\">\r\n        <div class=\"header\" part=\"header\">\r\n          ${this.title ? html`<div class=\"title\" part=\"title\">${this.title}</div>` : nothing}\r\n          ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\r\n        </div>\r\n        ${this.imageSrc\r\n          ? html`\r\n              <figure class=\"featured-image\" part=\"image\">\r\n                <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n                ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}\r\n              </figure>\r\n            `\r\n          : nothing}\r\n        <st-markdown part=\"body\" .src=${this.contentSrc} .content=${this.content}></st-markdown>\r\n      </section>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAejC,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAmFL,iBAAQ;AAGR,oBAAW;AAIX,sBAAa;AAIb,mBAAU;AAGV,oBAAW;AAGX,oBAAW;AAGX,wBAAe;AAGf,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,YAGC,KAAK,QAAQ,uCAAuC,KAAK,KAAK,WAAW,OAAO;AAAA,YAChF,KAAK,WAAW,6CAA6C,KAAK,QAAQ,WAAW,OAAO;AAAA;AAAA,UAE9F,KAAK,WACH;AAAA;AAAA,2BAEe,KAAK,QAAQ,QAAQ,KAAK,YAAY,KAAK,KAAK;AAAA,kBACzD,KAAK,eAAe,mBAAmB,KAAK,YAAY,kBAAkB,OAAO;AAAA;AAAA,gBAGvF,OAAO;AAAA,wCACqB,KAAK,UAAU,aAAa,KAAK,OAAO;AAAA;AAAA;AAAA,EAG9E;AACF;AA/Ha,aACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAoBhB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgD3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlFf,aAmFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,aAsFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAzFzC,aA0FX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Ff,aA8FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAhGvC,aAiGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAnGvC,aAoGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAtG3C,aAuGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzG/B,aA0GX;AA1GW,eAAN;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB;","names":[]}

package/dist/{chunk-5REZSZCK.js → chunk-VRRBMOUP.js}

@@ -74,7 +74,9 @@ FeatureSplit.styles = css`
 
     :host {
       display: block;
-      padding: var(--st-space-24);
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-feature-split-padding instead. */
+      padding: var(--st-feature-split-padding, var(--st-space-24)) !important;
       background: var(--st-color-page);
       ${fontFamilyStyles}
     }
@@ -213,7 +215,7 @@ FeatureSplit.styles = css`
 
     @media (max-width: 768px) {
       :host {
-        padding: var(--st-space-48) var(--st-space-24);
+        padding: var(--st-feature-split-padding, var(--st-space-48) var(--st-space-24)) !important;
       }
 
       .container {
@@ -263,4 +265,4 @@ FeatureSplit = __decorateClass([
 export {
   FeatureSplit
 };
-//# sourceMappingURL=chunk-5REZSZCK.js.map
+//# sourceMappingURL=chunk-VRRBMOUP.js.map

package/dist/chunk-VRRBMOUP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/feature-split/FeatureSplit.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { controlBaseStyles, ctaButtonStyles, fontFamilyStyles } from '../shared/styles';\r\nimport '../markdown';\r\nimport {\r\n  cardTitleStyles,\r\n  iconTileStyles,\r\n  reducedMotionStyles,\r\n  sectionTitleStyles,\r\n} from '../shared/section-styles';\r\nimport type { FeatureSplitActionEventDetail } from './FeatureSplitEvents';\r\n\r\nexport interface FeatureSplitItem {\r\n  /** Iconify icon name, e.g. `mdi:check`. */\r\n  icon?: string;\r\n  title: string;\r\n  /** Markdown. */\r\n  description: string;\r\n}\r\n\r\nexport type FeatureSplitImagePosition = 'left' | 'right' | 'top';\r\n\r\n/**\r\n * A title/markdown-subtitle/feature-list block beside (or under) an image.\r\n *\r\n * @cssprop --st-feature-split-padding - Overrides the block's padding.\r\n */\r\n@customElement('st-feature-split')\r\nexport class FeatureSplit 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-feature-split-padding instead. */\r\n      padding: var(--st-feature-split-padding, var(--st-space-24)) !important;\r\n      background: var(--st-color-page);\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background: var(--st-color-text-strong);\r\n    }\r\n\r\n    .container {\r\n      max-width: var(--st-cms-container-max);\r\n      margin: 0 auto;\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: var(--st-space-48);\r\n      align-items: center;\r\n    }\r\n\r\n    :host([image-position='left']) .container {\r\n      direction: rtl;\r\n    }\r\n\r\n    :host([image-position='left']) .content {\r\n      direction: ltr;\r\n    }\r\n\r\n    :host([image-position='top']) .container {\r\n      grid-template-columns: 1fr;\r\n      text-align: center;\r\n    }\r\n\r\n    :host([image-position='top']) .content {\r\n      align-items: center;\r\n    }\r\n\r\n    :host([image-position='top']) .image-wrapper {\r\n      order: -1;\r\n      max-width: 800px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-32);\r\n    }\r\n\r\n    .title {\r\n      ${sectionTitleStyles}\r\n      margin: 0;\r\n    }\r\n\r\n    .subtitle {\r\n      color: var(--st-color-text-muted);\r\n      font-size: var(--st-text-base);\r\n      line-height: 1.6;\r\n    }\r\n\r\n    .list {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-24);\r\n      margin-top: var(--st-space-16);\r\n    }\r\n\r\n    .item {\r\n      display: flex;\r\n      gap: var(--st-space-16);\r\n      align-items: flex-start;\r\n      text-align: left;\r\n    }\r\n\r\n    .icon {\r\n      ${iconTileStyles}\r\n      width: var(--st-space-48);\r\n      height: var(--st-space-48);\r\n      font-size: 24px;\r\n    }\r\n\r\n    .item-title {\r\n      ${cardTitleStyles}\r\n    }\r\n\r\n    .item-description {\r\n      color: var(--st-color-text-muted);\r\n      font-size: var(--st-text-sm);\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .action {\r\n      ${ctaButtonStyles}\r\n      justify-self: start;\r\n      padding: var(--st-space-16);\r\n      border-radius: var(--st-radius-lg);\r\n    }\r\n\r\n    .image-wrapper {\r\n      width: 100%;\r\n      height: 100%;\r\n      min-height: 400px;\r\n      border-radius: var(--st-space-24);\r\n      overflow: hidden;\r\n      box-shadow: 0 20px 40px -12px var(--st-shadow-color-md);\r\n    }\r\n\r\n    .image {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: transform 0.5s ease;\r\n    }\r\n\r\n    .image:hover {\r\n      transform: scale(1.02);\r\n    }\r\n\r\n    :host([inverted]) .title,\r\n    :host([inverted]) .item-title {\r\n      color: var(--st-color-on-solid);\r\n    }\r\n\r\n    :host([inverted]) .subtitle,\r\n    :host([inverted]) .item-description {\r\n      color: var(--st-color-border);\r\n    }\r\n\r\n    :host([inverted]) .icon {\r\n      background: var(--st-color-text);\r\n      color: var(--st-color-border);\r\n    }\r\n\r\n    @media (max-width: 1024px) {\r\n      .container {\r\n        gap: var(--st-space-40);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-feature-split-padding, var(--st-space-48) var(--st-space-24)) !important;\r\n      }\r\n\r\n      .container {\r\n        grid-template-columns: 1fr;\r\n        direction: ltr !important;\r\n      }\r\n\r\n      .image-wrapper {\r\n        min-height: 300px;\r\n        order: -1;\r\n      }\r\n    }\r\n\r\n    ${reducedMotionStyles}\r\n  `;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  /** Markdown. */\r\n  @property({ type: String })\r\n  subtitle = '';\r\n\r\n  @property({ attribute: false })\r\n  items: FeatureSplitItem[] = [];\r\n\r\n  @property({ type: String, attribute: 'image-src' })\r\n  imageSrc = '';\r\n\r\n  @property({ type: String, attribute: 'image-alt' })\r\n  imageAlt = '';\r\n\r\n  @property({ type: String, attribute: 'image-position', reflect: true })\r\n  imagePosition: FeatureSplitImagePosition = 'right';\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  private onAction() {\r\n    const event = new CustomEvent<FeatureSplitActionEventDetail>('feature-split-action', {\r\n      detail: { href: this.href },\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: true,\r\n    });\r\n    if (this.dispatchEvent(event)) window.location.href = this.href;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"container\" part=\"container\">\r\n        <div class=\"content\" part=\"content\">\r\n          <h2 class=\"title\" part=\"title\">${this.title}</h2>\r\n          ${this.subtitle\r\n            ? html`<div class=\"subtitle\" part=\"subtitle\"><st-markdown .content=${this.subtitle}></st-markdown></div>`\r\n            : nothing}\r\n          ${this.items.length > 0\r\n            ? html`<div class=\"list\" part=\"list\">\r\n                ${this.items.map(\r\n                  (item) => html`\r\n                    <div class=\"item\" part=\"item\">\r\n                      ${item.icon\r\n                        ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>`\r\n                        : nothing}\r\n                      <div>\r\n                        <h3 class=\"item-title\" part=\"item-title\">${item.title}</h3>\r\n                        <div class=\"item-description\" part=\"item-description\">\r\n                          <st-markdown .content=${item.description}></st-markdown>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  `,\r\n                )}\r\n              </div>`\r\n            : nothing}\r\n          ${this.actionLabel && this.href\r\n            ? html`<button class=\"action\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>`\r\n            : nothing}\r\n        </div>\r\n        <div class=\"image-wrapper\" part=\"image-wrapper\">\r\n          <img class=\"image\" part=\"image\" src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/cms-theme.css

@@ -12,4 +12,15 @@
   --st-cms-text-lg: 1.125rem;
   --st-cms-section-padding: 4rem;
   --st-cms-container-max: 1200px;
+
+  /* A dark band (st-section background="dark", st-stats inverted) and the text on it. Kept apart
+     from --st-color-text-strong / --st-color-on-solid, which swap in the dark theme, so the band
+     stays dark there too. */
+  --st-cms-band-dark-bg: var(--st-color-text-strong);
+  --st-cms-band-dark-color: var(--st-color-on-solid);
+}
+
+:root.dark {
+  --st-cms-band-dark-bg: var(--st-neutral-100);
+  --st-cms-band-dark-color: var(--st-neutral-950);
 }

package/dist/content-block/index.d.ts

@@ -6,6 +6,8 @@ import { LitElement } from 'lit';
  * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from
  * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the
  * block works without a fetch); `content-src` wins when both are set.
+ *
+ * @cssprop --st-content-block-padding - Overrides the block's padding.
  */
 declare class ContentBlock extends LitElement {
     static styles: lit.CSSResult;

package/dist/content-block/index.js

@@ -1,6 +1,6 @@
 import {
   ContentBlock
-} from "../chunk-IMACP7HN.js";
+} from "../chunk-UVNBZD7R.js";
 import "../chunk-3JU3R22O.js";
 import "../chunk-3VE6VFJ4.js";
 import "../chunk-RHAOQ6K4.js";

package/dist/cookie-consent/index.d.ts

@@ -7,6 +7,8 @@ import { LitElement, nothing } from 'lit';
  * `sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice
  * exists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The
  * default slot replaces the message text.
+ *
+ * @cssprop --st-cookie-consent-padding - Overrides the bar's padding.
  */
 declare class CookieConsent extends LitElement {
     static styles: lit.CSSResult;

package/dist/cookie-consent/index.js

@@ -1,6 +1,6 @@
 import {
   CookieConsent
-} from "../chunk-2VZFHTBC.js";
+} from "../chunk-MW43OS47.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/dropdown/index.d.ts

@@ -18,7 +18,13 @@ import { LitElement } from 'lit';
  * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel
  * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`
  * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions
- * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event.
+ * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event — plus
+ * `mega` and `open-on-hover` for an okta.com-style mega menu (see `st-mega-menu`).
+ *
+ * @cssprop --st-mega-menu-max-width - Maximum width of a `mega` panel (default `1400px`).
+ * @cssprop --st-mega-menu-inset - Minimum space between a `mega` panel and the header's sides (default `1rem`).
+ * @cssprop --st-mega-menu-gap - Space between the header and a `mega` panel (default `12px`).
+ * @cssprop --st-mega-menu-radius - Corner radius of a `mega` panel (default `24px`).
  */
 declare class Dropdown extends LitElement {
     /** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */
@@ -53,6 +59,21 @@ declare class Dropdown extends LitElement {
     inline: boolean;
     /** Whether the panel is showing. Follows user toggles; may also be set from outside. */
     open: boolean;
+    /**
+     * Mega-menu panel (okta.com style), typically holding an `st-mega-menu`: the panel spans the
+     * full width of the nearest positioned ancestor — `st-header` — right under it, instead of
+     * hanging off the trigger. In `st-header`'s hamburger layout (`inline`) it slides in over the
+     * screen with a Back button rather than opening as an accordion. A click inside the panel only
+     * closes it when it lands on a link.
+     */
+    mega: boolean;
+    /** Opens the panel while a mouse hovers the trigger or panel (touch and keyboard still click). Off while `inline`. */
+    openOnHover: boolean;
+    /** Text of the Back button in the `mega` + `inline` drill-down panel. */
+    backLabel: string;
+    private hoverTimer;
+    /** When hover last opened the panel — a click right after that keeps it open instead of toggling it shut. */
+    private hoverOpenedAt;
     /** Whether the default slot has content — the source's `children` check. */
     private hasContent;
     /** Whether `slot="icon"` has content. */
@@ -61,6 +82,11 @@ declare class Dropdown extends LitElement {
     disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
     private setOpen;
+    private hovers;
+    /** Short delays so a pointer crossing the gap between trigger and panel doesn't close it. */
+    private onPointerEnter;
+    private onPointerLeave;
+    private onBackClick;
     private closeOnOutsideMouseDown;
     private closeOnEscape;
     private trigger;
@@ -75,7 +101,9 @@ declare class Dropdown extends LitElement {
     /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */
     private onPanelKeyDown;
     private onTitleClick;
-    /** A click anywhere inside the panel closes it, as in the source. */
+    /** A click anywhere inside the panel closes it, as in the source — for `mega`, only a click on a
+     * link: a big panel has headings and gaps, and a click there shouldn't also close st-header's
+     * hamburger layer. */
     private onPanelClick;
     private onContentSlotChange;
     private onIconSlotChange;

package/dist/dropdown/index.js

@@ -1,6 +1,7 @@
 import {
   Dropdown
-} from "../chunk-FWIG6GEZ.js";
+} from "../chunk-5MTPMXAQ.js";
+import "../chunk-PB7ZPPLP.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/feature-split/index.d.ts

@@ -9,7 +9,11 @@ interface FeatureSplitItem {
     description: string;
 }
 type FeatureSplitImagePosition = 'left' | 'right' | 'top';
-/** A title/markdown-subtitle/feature-list block beside (or under) an image. */
+/**
+ * A title/markdown-subtitle/feature-list block beside (or under) an image.
+ *
+ * @cssprop --st-feature-split-padding - Overrides the block's padding.
+ */
 declare class FeatureSplit extends LitElement {
     static styles: lit.CSSResult;
     inverted: boolean;

package/dist/feature-split/index.js

@@ -1,6 +1,6 @@
 import {
   FeatureSplit
-} from "../chunk-5REZSZCK.js";
+} from "../chunk-VRRBMOUP.js";
 import "../chunk-3JU3R22O.js";
 import "../chunk-3VE6VFJ4.js";
 import "../chunk-RHAOQ6K4.js";

package/dist/features-section/index.d.ts

@@ -33,6 +33,8 @@ interface FeatureItemData {
  * `items` property, from slotted `st-feature-item` elements (the source's `children`), or both
  * (slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`
  * is passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.
+ *
+ * @cssprop --st-features-section-padding - Overrides the section's padding.
  */
 declare class FeaturesSection extends LitElement {
     static styles: lit.CSSResult;

package/dist/features-section/index.js

@@ -1,7 +1,7 @@
 import {
   FeatureItem,
   FeaturesSection
-} from "../chunk-E52WO7R7.js";
+} from "../chunk-BQTDFQ4V.js";
 import "../chunk-7PSYCTEN.js";
 import "../chunk-3JU3R22O.js";
 import "../chunk-3VE6VFJ4.js";

package/dist/header/index.js

@@ -1,7 +1,7 @@
 import {
   Header
-} from "../chunk-PKTRYUGP.js";
-import "../chunk-3TCP25JG.js";
+} from "../chunk-5KHI36M5.js";
+import "../chunk-PB7ZPPLP.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { Hero, HeroActionEventDetail } from './hero/index.js';
 export { IconButton } from './icon-button/index.js';
 export { AccordionItem, AccordionToggleEventDetail, ItemsAccordion } from './items-accordion/index.js';
 export { Markdown, MarkdownErrorEventDetail } from './markdown/index.js';
+export { MegaMenu, MegaMenuColumn, MegaMenuFeature, MegaMenuSelectEventDetail } from './mega-menu/index.js';
 export { MenuGrid } from './menu-grid/index.js';
 export { MenuGridItem, MenuGridItemSelectEventDetail } from './menu-grid-item/index.js';
 export { MenuItem, MenuItemSelectEventDetail } from './menu-item/index.js';

package/dist/index.js

@@ -1,72 +1,77 @@
 import {
-  Section
-} from "./chunk-N63TVWK3.js";
+  Stats
+} from "./chunk-6H262SG6.js";
 import {
   Testimonials
-} from "./chunk-5DNVCMOO.js";
+} from "./chunk-IDBEZY2O.js";
+import {
+  MenuGrid
+} from "./chunk-VYON56QO.js";
 import {
   MenuGridItem
 } from "./chunk-4HKSA5UT.js";
+import {
+  MenuItem
+} from "./chunk-KHPJ5FAJ.js";
 import {
   PromoBanner
-} from "./chunk-3ERKQNZT.js";
+} from "./chunk-HGJT24UG.js";
 import {
-  MenuItem
-} from "./chunk-TH5NZXA7.js";
+  Section
+} from "./chunk-NN3OCPDV.js";
 import {
   Select
-} from "./chunk-5UFRGZWG.js";
+} from "./chunk-TLHG33MM.js";
 import {
-  Stats
-} from "./chunk-USNFT4DU.js";
+  FeatureItem,
+  FeaturesSection
+} from "./chunk-BQTDFQ4V.js";
 import {
-  Footer
-} from "./chunk-CDC4P77V.js";
+  Header
+} from "./chunk-5KHI36M5.js";
 import {
   FeatureSplit
-} from "./chunk-5REZSZCK.js";
+} from "./chunk-VRRBMOUP.js";
 import {
   Hero
 } from "./chunk-K4ZICRZL.js";
-import {
-  Header
-} from "./chunk-PKTRYUGP.js";
-import "./chunk-3TCP25JG.js";
 import {
   IconButton
 } from "./chunk-XXPBFHWR.js";
 import {
   ItemsAccordion
-} from "./chunk-74MILER4.js";
+} from "./chunk-EMVHNAID.js";
 import {
-  MenuGrid
-} from "./chunk-VYON56QO.js";
-import {
-  BentoGrid
-} from "./chunk-OEX5FDMR.js";
+  MegaMenu,
+  MegaMenuColumn,
+  MegaMenuFeature
+} from "./chunk-HGTC3LCW.js";
 import {
   Carousel
 } from "./chunk-47RPYNFG.js";
 import {
-  ContentBlock
-} from "./chunk-IMACP7HN.js";
-import {
-  CookieConsent
-} from "./chunk-2VZFHTBC.js";
-import {
-  Dropdown
-} from "./chunk-FWIG6GEZ.js";
-import {
-  FeatureItem,
-  FeaturesSection
-} from "./chunk-E52WO7R7.js";
+  BentoGrid
+} from "./chunk-2JGWWXEI.js";
 import {
   Card
 } from "./chunk-7PSYCTEN.js";
+import {
+  ContentBlock
+} from "./chunk-UVNBZD7R.js";
 import {
   Markdown
 } from "./chunk-3JU3R22O.js";
 import "./chunk-3VE6VFJ4.js";
+import {
+  CookieConsent
+} from "./chunk-MW43OS47.js";
+import {
+  Dropdown
+} from "./chunk-5MTPMXAQ.js";
+import "./chunk-PB7ZPPLP.js";
+import {
+  Footer
+} from "./chunk-CDC4P77V.js";
 import "./chunk-RHAOQ6K4.js";
 import "./chunk-EUXUH3YW.js";
 export {
@@ -85,6 +90,9 @@ export {
   IconButton,
   ItemsAccordion,
   Markdown,
+  MegaMenu,
+  MegaMenuColumn,
+  MegaMenuFeature,
   MenuGrid,
   MenuGridItem,
   MenuItem,

package/dist/items-accordion/index.d.ts

@@ -6,7 +6,11 @@ interface AccordionItem {
     title: string;
     content: string;
 }
-/** A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`. */
+/**
+ * A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.
+ *
+ * @cssprop --st-items-accordion-padding - Overrides the block's padding.
+ */
 declare class ItemsAccordion extends LitElement {
     static styles: lit.CSSResult;
     title: string;

package/dist/items-accordion/index.js

@@ -1,6 +1,6 @@
 import {
   ItemsAccordion
-} from "../chunk-74MILER4.js";
+} from "../chunk-EMVHNAID.js";
 import "../chunk-3VE6VFJ4.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";

package/dist/mega-menu/index.d.ts

@@ -0,0 +1,142 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * The rich layout of a mega-menu panel, after okta.com: an optional intro column on the left (a
+ * large `heading`, a `description` and, under a divider, quick links in `slot="intro"`), then the
+ * link columns side by side (`st-mega-menu-column`s in the default slot), then an optional
+ * featured column on the right (`featured-heading` over the `st-mega-menu-feature` cards in
+ * `slot="featured"`). Slot it into an `st-dropdown` with `mega` set.
+ *
+ * The layout follows the width it is given, not the viewport (a container query): side by side
+ * when there is room; intro and featured column above/below two link columns on a medium panel;
+ * everything stacked in the narrow drill-down panel `st-header` shows on a phone (where the intro
+ * heading is left out — the drill-down already shows the section's name).
+ *
+ * @slot - The link columns (`st-mega-menu-column`s, or any blocks).
+ * @slot intro - Quick links under the intro text, e.g. `st-menu-item`s with an icon.
+ * @slot featured - Promo cards (`st-mega-menu-feature`s), stacked.
+ * @csspart inner - The grid holding every area.
+ * @csspart intro - The intro column.
+ * @csspart columns - The grid holding the link columns.
+ * @csspart featured - The featured column.
+ */
+declare class MegaMenu extends LitElement {
+    static styles: lit.CSSResult;
+    /** Large title of the intro column. */
+    heading: string;
+    /** Text under the intro title. */
+    description: string;
+    /** Heading over the featured cards. */
+    featuredHeading: string;
+    /** Number of link columns side by side at full width. `0` (the default) uses one per slotted column. */
+    columns: number;
+    private columnCount;
+    private hasIntroLinks;
+    private hasFeatured;
+    private onColumnsSlotChange;
+    private onIntroSlotChange;
+    private onFeaturedSlotChange;
+    render(): lit.TemplateResult<1>;
+}
+
+/**
+ * One column (or one group within a column) of an `st-mega-menu`: a heading, an optional line of
+ * description, then its links stacked — usually `st-menu-item`s with `variant="link"`. Nest
+ * columns to stack several headed groups in one column, as okta.com does.
+ *
+ * `variant="card"` puts the column on a tinted rounded tile and `variant="accent"` on a solid
+ * accent tile with light text; both suit a row of equal columns without intro or featured area.
+ * `cta-label` + `cta-href` add a pill button at the bottom of the column.
+ *
+ * The heading (when `href` is set) and the button fire a *cancelable* `mega-menu-select` event
+ * (detail: `{ href }`) before navigating; a host doing client-side routing calls
+ * `event.preventDefault()` on it.
+ *
+ * @slot - The column's links, or nested `st-mega-menu-column` groups.
+ * @fires mega-menu-select - The heading link or the button was clicked (cancelable; detail `{ href }`).
+ * @csspart heading - The heading text or link.
+ * @csspart description - The line under the heading.
+ * @csspart items - The box holding the links.
+ * @csspart cta - The pill button.
+ * @cssprop --st-mega-menu-column-padding - Overrides the padding of a `card`/`accent` column.
+ */
+declare class MegaMenuColumn extends LitElement {
+    static styles: lit.CSSResult;
+    heading: string;
+    /** Makes the heading a link (e.g. to the section's overview page). */
+    href: string;
+    description: string;
+    /** `plain` (default), `card` (tinted tile) or `accent` (solid accent tile, light text). */
+    variant: 'plain' | 'card' | 'accent';
+    /** Text of a pill button at the bottom of the column; needs `cta-href`. */
+    ctaLabel: string;
+    ctaHref: string;
+    private select;
+    private renderHeading;
+    private renderCta;
+    render(): lit.TemplateResult<1>;
+}
+
+/**
+ * A promo card for the featured column of an `st-mega-menu` (`slot="featured"`). The whole card
+ * is one link. Two looks, after okta.com:
+ *
+ * - `story` (default): a rounded image on top, then the description and an underlined
+ *   call-to-action line — a customer story or announcement.
+ * - `overlay`: a tile with light text over `image-url` (darkened), or over an accent gradient when
+ *   there is no image — an optional `logo-url` top left, the title and description at the bottom.
+ *
+ * An `http(s)` `href` opens in a new tab unless `target` says otherwise. Any other `href` fires a
+ * *cancelable* `mega-menu-select` event (detail: `{ href }`) first; a host doing client-side
+ * routing calls `event.preventDefault()` on it.
+ *
+ * @fires mega-menu-select - The card was clicked (cancelable; detail `{ href }`).
+ * @csspart card - The card link.
+ * @csspart image - The image (`story`).
+ * @csspart logo - The logo (`overlay`).
+ * @csspart eyebrow - The small label above the title.
+ * @csspart title - The title.
+ * @csspart description - The description.
+ * @csspart cta - The call-to-action line.
+ * @cssprop --st-mega-menu-feature-from - Start colour of the `overlay` gradient (default: the accent colour).
+ * @cssprop --st-mega-menu-feature-to - End colour of the `overlay` gradient.
+ */
+declare class MegaMenuFeature extends LitElement {
+    /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key to it. */
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: lit.CSSResult;
+    /** `story` (default) or `overlay` — see the element description. */
+    variant: 'story' | 'overlay';
+    title: string;
+    description: string;
+    /** Small label above the title, e.g. "New" or "Report". */
+    eyebrow: string;
+    href: string;
+    /** `target` for the link. Defaults to `_blank` for an `http(s)` `href`, `_self` otherwise. */
+    target: string;
+    /** Image on top (`story`) or behind the text (`overlay`). */
+    imageUrl: string;
+    imageAlt: string;
+    /** Logo at the top of an `overlay` card. */
+    logoUrl: string;
+    logoAlt: string;
+    /** Call-to-action text at the bottom of the card; empty hides it. */
+    ctaLabel: string;
+    private get isExternal();
+    private onClick;
+    render(): lit.TemplateResult<1>;
+}
+
+interface MegaMenuSelectEventDetail {
+    href: string;
+}
+
+export { MegaMenu, MegaMenuColumn, MegaMenuFeature, type MegaMenuSelectEventDetail };

package/dist/mega-menu/index.js

@@ -0,0 +1,14 @@
+import {
+  MegaMenu,
+  MegaMenuColumn,
+  MegaMenuFeature
+} from "../chunk-HGTC3LCW.js";
+import "../chunk-PB7ZPPLP.js";
+import "../chunk-RHAOQ6K4.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  MegaMenu,
+  MegaMenuColumn,
+  MegaMenuFeature
+};
+//# sourceMappingURL=index.js.map

package/dist/mega-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/menu-item/index.d.ts

@@ -36,6 +36,9 @@ declare class MenuItem extends LitElement {
     showDescription: boolean;
     /** `target` for the `<a>` (source default `_self`). */
     target: string;
+    /** `default` (a row with a hover box) or `link` (a plain text link, as in `st-mega-menu-column`;
+     * marked with an arrow when it opens a new tab). */
+    variant: 'default' | 'link';
     /** Whether `slot="icon"` has content, so an omitted icon leaves no empty box. */
     private hasIcon;
     private onIconSlotChange;

package/dist/menu-item/index.js

@@ -1,6 +1,7 @@
 import {
   MenuItem
-} from "../chunk-TH5NZXA7.js";
+} from "../chunk-KHPJ5FAJ.js";
+import "../chunk-PB7ZPPLP.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/promo-banner/index.d.ts

@@ -5,6 +5,9 @@ import { LitElement } from 'lit';
  * Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a
  * background image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event
  * (detail `{ href }`, empty unless set) in place of `onAction`.
+ *
+ * @cssprop --st-promo-banner-margin - Overrides the banner's margin.
+ * @cssprop --st-promo-banner-padding - Overrides the banner's padding.
  */
 declare class PromoBanner extends LitElement {
     static styles: lit.CSSResult;

package/dist/promo-banner/index.js

@@ -1,6 +1,6 @@
 import {
   PromoBanner
-} from "../chunk-3ERKQNZT.js";
+} from "../chunk-HGJT24UG.js";
 import "../chunk-3VE6VFJ4.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";

package/dist/schema/index.d.ts

@@ -48,6 +48,9 @@ declare const componentTags: {
     readonly Hero: "st-hero";
     readonly IconButton: "st-icon-button";
     readonly ItemsAccordion: "st-items-accordion";
+    readonly MegaMenu: "st-mega-menu";
+    readonly MegaMenuColumn: "st-mega-menu-column";
+    readonly MegaMenuFeature: "st-mega-menu-feature";
     readonly MenuGrid: "st-menu-grid";
     readonly MenuGridItem: "st-menu-grid-item";
     readonly MenuItem: "st-menu-item";

package/dist/schema/index.js

@@ -29,6 +29,9 @@ var componentTags = {
   Hero: "st-hero",
   IconButton: "st-icon-button",
   ItemsAccordion: "st-items-accordion",
+  MegaMenu: "st-mega-menu",
+  MegaMenuColumn: "st-mega-menu-column",
+  MegaMenuFeature: "st-mega-menu-feature",
   MenuGrid: "st-menu-grid",
   MenuGridItem: "st-menu-grid-item",
   MenuItem: "st-menu-item",