@sankhyatronics/sankhya-cms 0.1.16 → 0.1.18

package/custom-elements.json

@@ -910,192 +910,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/content-block/ContentBlock.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A long-form article section: centered title/subtitle, an optional featured image with caption,\nthen Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\n`content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\nblock works without a fetch); `content-src` wins when both are set.",
-          "name": "ContentBlock",
-          "cssProperties": [
-            {
-              "description": "Overrides the block's padding.",
-              "name": "--st-content-block-padding"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "title"
-            },
-            {
-              "kind": "field",
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "subtitle"
-            },
-            {
-              "kind": "field",
-              "name": "contentSrc",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "URL of a Markdown file.",
-              "attribute": "content-src"
-            },
-            {
-              "kind": "field",
-              "name": "content",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Inline Markdown, used when `content-src` is not set.",
-              "attribute": "content"
-            },
-            {
-              "kind": "field",
-              "name": "imageSrc",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "image-src"
-            },
-            {
-              "kind": "field",
-              "name": "imageAlt",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "image-alt"
-            },
-            {
-              "kind": "field",
-              "name": "imageCaption",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "image-caption"
-            },
-            {
-              "kind": "field",
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "title"
-            },
-            {
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "subtitle"
-            },
-            {
-              "name": "content-src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "URL of a Markdown file.",
-              "fieldName": "contentSrc"
-            },
-            {
-              "name": "content",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Inline Markdown, used when `content-src` is not set.",
-              "fieldName": "content"
-            },
-            {
-              "name": "image-src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "imageSrc"
-            },
-            {
-              "name": "image-alt",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "imageAlt"
-            },
-            {
-              "name": "image-caption",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "imageCaption"
-            },
-            {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "inverted"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "st-content-block",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ContentBlock",
-          "declaration": {
-            "name": "ContentBlock",
-            "module": "src/content-block/ContentBlock.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "st-content-block",
-          "declaration": {
-            "name": "ContentBlock",
-            "module": "src/content-block/ContentBlock.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/chip/Chip.ts",
@@ -1404,6 +1218,192 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/content-block/ContentBlock.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A long-form article section: centered title/subtitle, an optional featured image with caption,\nthen Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\n`content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\nblock works without a fetch); `content-src` wins when both are set.",
+          "name": "ContentBlock",
+          "cssProperties": [
+            {
+              "description": "Overrides the block's padding.",
+              "name": "--st-content-block-padding"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "subtitle"
+            },
+            {
+              "kind": "field",
+              "name": "contentSrc",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL of a Markdown file.",
+              "attribute": "content-src"
+            },
+            {
+              "kind": "field",
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Inline Markdown, used when `content-src` is not set.",
+              "attribute": "content"
+            },
+            {
+              "kind": "field",
+              "name": "imageSrc",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "image-src"
+            },
+            {
+              "kind": "field",
+              "name": "imageAlt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "image-alt"
+            },
+            {
+              "kind": "field",
+              "name": "imageCaption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "image-caption"
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "title"
+            },
+            {
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "subtitle"
+            },
+            {
+              "name": "content-src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL of a Markdown file.",
+              "fieldName": "contentSrc"
+            },
+            {
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Inline Markdown, used when `content-src` is not set.",
+              "fieldName": "content"
+            },
+            {
+              "name": "image-src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "imageSrc"
+            },
+            {
+              "name": "image-alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "imageAlt"
+            },
+            {
+              "name": "image-caption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "imageCaption"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "inverted"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-content-block",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ContentBlock",
+          "declaration": {
+            "name": "ContentBlock",
+            "module": "src/content-block/ContentBlock.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-content-block",
+          "declaration": {
+            "name": "ContentBlock",
+            "module": "src/content-block/ContentBlock.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/date-tile/DateTile.ts",
@@ -4777,10 +4777,10 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "'story' | 'overlay'"
+                "text": "'story' | 'overlay' | 'tip'"
               },
               "default": "'story'",
-              "description": "`story` (default) or `overlay` — see the element description.",
+              "description": "`story` (default), `overlay` (dark, over an image or gradient) or `tip` (light blue, for a hint).",
               "attribute": "variant",
               "reflects": true
             },
@@ -4904,10 +4904,10 @@
             {
               "name": "variant",
               "type": {
-                "text": "'story' | 'overlay'"
+                "text": "'story' | 'overlay' | 'tip'"
               },
               "default": "'story'",
-              "description": "`story` (default) or `overlay` — see the element description.",
+              "description": "`story` (default), `overlay` (dark, over an image or gradient) or `tip` (light blue, for a hint).",
               "fieldName": "variant"
             },
             {
@@ -6678,7 +6678,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A small label that shows above a control on hover and on keyboard focus. Wrap the control (a button\nor an icon button) in it and pass the same words as its accessible name in `text`. The bubble is\ndecorative (`aria-hidden`): the control's own `aria-label` is what a screen reader announces, so the\nwords aren't read twice.\n\nThe bubble is positioned by the wrapper, so put the tooltip where it has room above: it's not\nclipped by the wrapper's own box, but it is clipped by an ancestor with `overflow: hidden`.",
+          "description": "A small label that shows above a control: after a short rest on hover, and at once on keyboard focus.\nWrap the control (a button or an icon button) in it and pass the same words as its accessible name in\n`text`. The control is still the thing that's announced; the bubble is decorative (`aria-hidden`), so the\nwords aren't read twice.\n\nThe bubble is `position: fixed` and placed from the wrapper's position when it shows, so a clipping\nancestor (a card or panel with `overflow: hidden`) can't cut it off. It shows around a control that\ncan't act right now too, as long as that control is focusable or hoverable (use `aria-disabled`, not\nthe native `disabled`, which takes a control out of focus and pointer events).",
           "name": "Tooltip",
           "members": [
             {
@@ -6688,8 +6688,44 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The words shown in the bubble: the same words as the control's accessible name.",
+              "description": "The words shown in the bubble: the same words as the control's accessible name, or the reason the\ncontrol can't act right now.",
               "attribute": "text"
+            },
+            {
+              "kind": "field",
+              "name": "bubble",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "timer",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onPointerEnter",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "cancel",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "show",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "hide",
+              "privacy": "private"
             }
           ],
           "attributes": [
@@ -6699,7 +6735,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The words shown in the bubble: the same words as the control's accessible name.",
+              "description": "The words shown in the bubble: the same words as the control's accessible name, or the reason the\ncontrol can't act right now.",
               "fieldName": "text"
             }
           ],

package/dist/chunk-FML6AG2V.js

@@ -0,0 +1,107 @@
+import {
+  fontFamilyStyles
+} from "./chunk-KMU6ABQF.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/tooltip/Tooltip.ts
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var HOVER_DELAY_MS = 300;
+var Tooltip = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.text = "";
+    this.onPointerEnter = () => {
+      this.cancel();
+      this.timer = window.setTimeout(this.show, HOVER_DELAY_MS);
+    };
+    this.show = () => {
+      this.cancel();
+      if (!this.bubble || !this.text) return;
+      const box = this.getBoundingClientRect();
+      this.bubble.style.left = `${box.left + box.width / 2}px`;
+      this.bubble.style.top = `${box.top}px`;
+      this.bubble.setAttribute("data-open", "");
+    };
+    this.hide = () => {
+      this.cancel();
+      this.bubble?.removeAttribute("data-open");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("pointerenter", this.onPointerEnter);
+    this.addEventListener("pointerleave", this.hide);
+    this.addEventListener("focusin", this.show);
+    this.addEventListener("focusout", this.hide);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("pointerenter", this.onPointerEnter);
+    this.removeEventListener("pointerleave", this.hide);
+    this.removeEventListener("focusin", this.show);
+    this.removeEventListener("focusout", this.hide);
+    this.cancel();
+  }
+  firstUpdated() {
+    this.bubble = this.renderRoot.querySelector(".bubble") ?? void 0;
+  }
+  cancel() {
+    if (this.timer !== void 0) window.clearTimeout(this.timer);
+    this.timer = void 0;
+  }
+  render() {
+    return html`<slot></slot><span class="bubble" part="bubble" aria-hidden="true">${this.text}</span>`;
+  }
+};
+Tooltip.styles = css`
+    ${fontFamilyStyles}
+
+    :host {
+      display: inline-flex;
+    }
+
+    .bubble {
+      position: fixed;
+      z-index: 1000;
+      left: 0;
+      top: 0;
+      transform: translate(-50%, calc(-100% - 6px));
+      padding: var(--st-space-4) var(--st-space-8);
+      border-radius: var(--st-radius-xs);
+      background: var(--st-color-text-strong);
+      color: var(--st-color-on-solid);
+      font-size: var(--st-text-xs);
+      font-weight: var(--st-font-weight-medium);
+      line-height: 1.3;
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.12s ease;
+    }
+
+    .bubble[data-open] {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .bubble {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Tooltip.prototype, "text", 2);
+Tooltip = __decorateClass([
+  customElement("st-tooltip")
+], Tooltip);
+
+export {
+  Tooltip
+};
+//# sourceMappingURL=chunk-FML6AG2V.js.map

package/dist/chunk-FML6AG2V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tooltip/Tooltip.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/** How long a pointer must rest on the control before its label shows. Keyboard focus shows it at once. */\nconst HOVER_DELAY_MS = 300;\n\n/**\n * A small label that shows above a control: after a short rest on hover, and at once on keyboard focus.\n * Wrap the control (a button or an icon button) in it and pass the same words as its accessible name in\n * `text`. The control is still the thing that's announced; the bubble is decorative (`aria-hidden`), so the\n * words aren't read twice.\n *\n * The bubble is `position: fixed` and placed from the wrapper's position when it shows, so a clipping\n * ancestor (a card or panel with `overflow: hidden`) can't cut it off. It shows around a control that\n * can't act right now too, as long as that control is focusable or hoverable (use `aria-disabled`, not\n * the native `disabled`, which takes a control out of focus and pointer events).\n */\n@customElement('st-tooltip')\nexport class Tooltip extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: inline-flex;\n    }\n\n    .bubble {\n      position: fixed;\n      z-index: 1000;\n      left: 0;\n      top: 0;\n      transform: translate(-50%, calc(-100% - 6px));\n      padding: var(--st-space-4) var(--st-space-8);\n      border-radius: var(--st-radius-xs);\n      background: var(--st-color-text-strong);\n      color: var(--st-color-on-solid);\n      font-size: var(--st-text-xs);\n      font-weight: var(--st-font-weight-medium);\n      line-height: 1.3;\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      visibility: hidden;\n      transition: opacity 0.12s ease;\n    }\n\n    .bubble[data-open] {\n      opacity: 1;\n      visibility: visible;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .bubble {\n        transition: none;\n      }\n    }\n  `;\n\n  /** The words shown in the bubble: the same words as the control's accessible name, or the reason the\n   * control can't act right now. */\n  @property({ type: String })\n  text = '';\n\n  private bubble?: HTMLElement;\n  private timer?: number;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('pointerenter', this.onPointerEnter);\n    this.addEventListener('pointerleave', this.hide);\n    this.addEventListener('focusin', this.show);\n    this.addEventListener('focusout', this.hide);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('pointerenter', this.onPointerEnter);\n    this.removeEventListener('pointerleave', this.hide);\n    this.removeEventListener('focusin', this.show);\n    this.removeEventListener('focusout', this.hide);\n    this.cancel();\n  }\n\n  firstUpdated() {\n    this.bubble = this.renderRoot.querySelector<HTMLElement>('.bubble') ?? undefined;\n  }\n\n  private onPointerEnter = () => {\n    this.cancel();\n    this.timer = window.setTimeout(this.show, HOVER_DELAY_MS);\n  };\n\n  private cancel() {\n    if (this.timer !== undefined) window.clearTimeout(this.timer);\n    this.timer = undefined;\n  }\n\n  private show = () => {\n    this.cancel();\n    if (!this.bubble || !this.text) return;\n    const box = this.getBoundingClientRect();\n    this.bubble.style.left = `${box.left + box.width / 2}px`;\n    this.bubble.style.top = `${box.top}px`;\n    this.bubble.setAttribute('data-open', '');\n  };\n\n  private hide = () => {\n    this.cancel();\n    this.bubble?.removeAttribute('data-open');\n  };\n\n  render() {\n    return html`<slot></slot><span class=\"bubble\" part=\"bubble\" aria-hidden=\"true\">${this.text}</span>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAKxC,IAAM,iBAAiB;AAchB,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AA2CL,gBAAO;AA0BP,SAAQ,iBAAiB,MAAM;AAC7B,WAAK,OAAO;AACZ,WAAK,QAAQ,OAAO,WAAW,KAAK,MAAM,cAAc;AAAA,IAC1D;AAOA,SAAQ,OAAO,MAAM;AACnB,WAAK,OAAO;AACZ,UAAI,CAAC,KAAK,UAAU,CAAC,KAAK,KAAM;AAChC,YAAM,MAAM,KAAK,sBAAsB;AACvC,WAAK,OAAO,MAAM,OAAO,GAAG,IAAI,OAAO,IAAI,QAAQ,CAAC;AACpD,WAAK,OAAO,MAAM,MAAM,GAAG,IAAI,GAAG;AAClC,WAAK,OAAO,aAAa,aAAa,EAAE;AAAA,IAC1C;AAEA,SAAQ,OAAO,MAAM;AACnB,WAAK,OAAO;AACZ,WAAK,QAAQ,gBAAgB,WAAW;AAAA,IAC1C;AAAA;AAAA,EA3CA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,gBAAgB,KAAK,cAAc;AACzD,SAAK,iBAAiB,gBAAgB,KAAK,IAAI;AAC/C,SAAK,iBAAiB,WAAW,KAAK,IAAI;AAC1C,SAAK,iBAAiB,YAAY,KAAK,IAAI;AAAA,EAC7C;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,oBAAoB,gBAAgB,KAAK,cAAc;AAC5D,SAAK,oBAAoB,gBAAgB,KAAK,IAAI;AAClD,SAAK,oBAAoB,WAAW,KAAK,IAAI;AAC7C,SAAK,oBAAoB,YAAY,KAAK,IAAI;AAC9C,SAAK,OAAO;AAAA,EACd;AAAA,EAEA,eAAe;AACb,SAAK,SAAS,KAAK,WAAW,cAA2B,SAAS,KAAK;AAAA,EACzE;AAAA,EAOQ,SAAS;AACf,QAAI,KAAK,UAAU,OAAW,QAAO,aAAa,KAAK,KAAK;AAC5D,SAAK,QAAQ;AAAA,EACf;AAAA,EAgBA,SAAS;AACP,WAAO,0EAA0E,KAAK,IAAI;AAAA,EAC5F;AACF;AAhGa,QACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCpB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1Cf,QA2CX;AA3CW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}

package/dist/{chunk-G3CF7MBO.js → chunk-J6EO4R73.js}

@@ -555,6 +555,32 @@ MegaMenuFeature.styles = css3`
       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 {
@@ -604,4 +630,4 @@ export {
   MegaMenuColumn,
   MegaMenuFeature
 };
-//# sourceMappingURL=chunk-G3CF7MBO.js.map
+//# sourceMappingURL=chunk-J6EO4R73.js.map

package/dist/{chunk-G3CF7MBO.js.map → chunk-J6EO4R73.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/mega-menu/MegaMenu.ts","../src/mega-menu/MegaMenuColumn.ts","../src/mega-menu/MegaMenuFeature.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\n\n/**\n * The rich layout of a mega-menu panel, after okta.com: an optional intro column on the left (a\n * large `heading`, a `description` and, under a divider, quick links in `slot=\"intro\"`), then the\n * link columns side by side (`st-mega-menu-column`s in the default slot), then an optional\n * featured column on the right (`featured-heading` over the `st-mega-menu-feature` cards in\n * `slot=\"featured\"`). Slot it into an `st-dropdown` with `mega` set.\n *\n * The layout follows the width it is given, not the viewport (a container query): side by side\n * when there is room; intro and featured column above/below two link columns on a medium panel;\n * everything stacked in the narrow drill-down panel `st-header` shows on a phone (where the intro\n * heading is left out — the drill-down already shows the section's name).\n *\n * @slot - The link columns (`st-mega-menu-column`s, or any blocks).\n * @slot intro - Quick links under the intro text, e.g. `st-menu-item`s with an icon.\n * @slot featured - Promo cards (`st-mega-menu-feature`s), stacked.\n * @csspart inner - The grid holding every area.\n * @csspart intro - The intro column.\n * @csspart columns - The grid holding the link columns.\n * @csspart featured - The featured column.\n */\n@customElement('st-mega-menu')\nexport class MegaMenu extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      container-type: inline-size;\n      ${fontFamilyStyles}\n    }\n\n    .inner {\n      display: grid;\n      gap: 3rem;\n      padding: 3rem 3.5rem;\n      box-sizing: border-box;\n    }\n\n    .columns {\n      display: grid;\n      grid-template-columns: repeat(var(--st-mega-menu-columns, 3), minmax(0, 1fr));\n      gap: 3rem;\n      align-items: stretch;\n    }\n\n    .intro,\n    .featured {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .intro-heading {\n      margin: 0 0 1rem;\n      font-size: 2rem;\n      font-weight: 400;\n      line-height: 1.15;\n      color: var(--st-color-text-strong);\n    }\n\n    .intro-description {\n      margin: 0;\n      font-size: 1rem;\n      line-height: 1.55;\n      color: var(--st-color-text);\n    }\n\n    .intro-links {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      margin-top: 2.5rem;\n      padding-top: 2rem;\n      border-top: 1px solid var(--st-color-border);\n    }\n\n    .intro-links.no-text {\n      margin-top: 0;\n      padding-top: 0;\n      border-top: 0;\n    }\n\n    .featured-heading {\n      margin: 0 0 1rem;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.35;\n      color: var(--st-color-text-strong);\n    }\n\n    .featured-items {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n    }\n\n    [hidden] {\n      display: none !important;\n    }\n\n    /* Medium panel: intro on top, two link columns, featured cards side by side underneath. */\n    @container (max-width: 960px) {\n      .inner {\n        grid-template-columns: minmax(0, 1fr) !important;\n        gap: 2rem;\n        padding: 2rem;\n      }\n\n      .columns {\n        grid-template-columns: repeat(var(--st-mega-menu-columns-md, 2), minmax(0, 1fr));\n        gap: 2rem;\n      }\n\n      .intro-links {\n        margin-top: 1.5rem;\n        padding-top: 1.5rem;\n      }\n\n      .featured-items {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n      }\n    }\n\n    /* Narrow panel (the phone drill-down): everything stacked. */\n    @container (max-width: 560px) {\n      .inner {\n        gap: 1.75rem;\n        padding: 0.5rem 0 1.5rem;\n      }\n\n      .columns {\n        grid-template-columns: minmax(0, 1fr);\n        gap: 1.75rem;\n      }\n\n      .intro-heading {\n        display: none;\n      }\n    }\n  `;\n\n  /** Large title of the intro column. */\n  @property({ type: String })\n  heading = '';\n\n  /** Text under the intro title. */\n  @property({ type: String })\n  description = '';\n\n  /** Heading over the featured cards. */\n  @property({ type: String, attribute: 'featured-heading' })\n  featuredHeading = '';\n\n  /** Number of link columns side by side at full width. `0` (the default) uses one per slotted column. */\n  @property({ type: Number })\n  columns = 0;\n\n  @state() private columnCount = 1;\n  @state() private hasIntroLinks = false;\n  @state() private hasFeatured = false;\n\n  private onColumnsSlotChange = (event: Event): void => {\n    this.columnCount = Math.max(1, (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length);\n  };\n\n  private onIntroSlotChange = (event: Event): void => {\n    this.hasIntroLinks = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  };\n\n  private onFeaturedSlotChange = (event: Event): void => {\n    this.hasFeatured = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  };\n\n  render() {\n    const columns = Math.min(6, Math.max(1, Math.round(this.columns) || this.columnCount));\n    const hasIntroText = !!(this.heading || this.description);\n    const hasIntro = hasIntroText || this.hasIntroLinks;\n    const hasFeatured = this.hasFeatured || !!this.featuredHeading;\n    // Every column — intro, each link column, featured — gets the same share of the width.\n    const tracks = [hasIntro ? 'minmax(0, 1fr)' : '', `minmax(0, ${columns}fr)`, hasFeatured ? 'minmax(0, 1fr)' : '']\n      .filter(Boolean)\n      .join(' ');\n    return html`\n      <div\n        part=\"inner\"\n        class=\"inner\"\n        style=\"grid-template-columns:${tracks};--st-mega-menu-columns:${columns};--st-mega-menu-columns-md:${Math.min(2, columns)}\"\n      >\n        <div part=\"intro\" class=\"intro\" ?hidden=${!hasIntro}>\n          ${this.heading ? html`<p part=\"heading\" class=\"intro-heading\">${this.heading}</p>` : nothing}\n          ${this.description ? html`<p part=\"description\" class=\"intro-description\">${this.description}</p>` : nothing}\n          <div part=\"intro-links\" class=\"intro-links ${hasIntroText ? '' : 'no-text'}\" ?hidden=${!this.hasIntroLinks}>\n            <slot name=\"intro\" @slotchange=${this.onIntroSlotChange}></slot>\n          </div>\n        </div>\n        <div part=\"columns\" class=\"columns\"><slot @slotchange=${this.onColumnsSlotChange}></slot></div>\n        <div part=\"featured\" class=\"featured\" ?hidden=${!hasFeatured}>\n          ${this.featuredHeading ? html`<p part=\"featured-heading\" class=\"featured-heading\">${this.featuredHeading}</p>` : nothing}\n          <div class=\"featured-items\"><slot name=\"featured\" @slotchange=${this.onFeaturedSlotChange}></slot></div>\n        </div>\n      </div>\n    `;\n  }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { arrowUpRightIcon } from '../shared/icons';\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * One column (or one group within a column) of an `st-mega-menu`: a heading, an optional line of\n * description, then its links stacked — usually `st-menu-item`s with `variant=\"link\"`. Nest\n * columns to stack several headed groups in one column, as okta.com does.\n *\n * `variant=\"card\"` puts the column on a tinted rounded tile and `variant=\"accent\"` on a solid\n * accent tile with light text; both suit a row of equal columns without intro or featured area.\n * `cta-label` + `cta-href` add a pill button at the bottom of the column.\n *\n * The heading (when `href` is set) and the button fire a *cancelable* `mega-menu-select` event\n * (detail: `{ href }`) before navigating; a host doing client-side routing calls\n * `event.preventDefault()` on it.\n *\n * @slot - The column's links, or nested `st-mega-menu-column` groups.\n * @fires mega-menu-select - The heading link or the button was clicked (cancelable; detail `{ href }`).\n * @csspart heading - The heading text or link.\n * @csspart description - The line under the heading.\n * @csspart items - The box holding the links.\n * @csspart cta - The pill button.\n * @cssprop --st-mega-menu-column-padding - Overrides the padding of a `card`/`accent` column.\n */\n@customElement('st-mega-menu-column')\nexport class MegaMenuColumn extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n      box-sizing: border-box;\n      ${fontFamilyStyles}\n    }\n\n    :host([variant='card']),\n    :host([variant='accent']) {\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-mega-menu-column-padding instead. */\n      padding: var(--st-mega-menu-column-padding, 2rem 1.75rem 1.75rem) !important;\n      border-radius: 20px;\n      background: color-mix(in oklch, var(--st-color-text-strong) 5%, var(--st-color-surface));\n    }\n\n    :host([variant='accent']) {\n      background: var(--st-color-accent);\n      color: var(--st-color-on-solid);\n      /* Read by the st-menu-item links inside. */\n      --st-nav-color: var(--st-color-on-solid);\n      --st-nav-hover-bg: transparent;\n    }\n\n    .heading {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      margin: 0 0 0.75rem;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.35;\n      color: var(--st-color-text-strong);\n      text-decoration: none;\n    }\n\n    :host([variant='card']) .heading,\n    :host([variant='accent']) .heading {\n      font-size: 1.375rem;\n    }\n\n    :host([variant='accent']) .heading {\n      color: inherit;\n    }\n\n    a.heading:hover,\n    a.heading:focus-visible {\n      text-decoration: underline;\n      text-underline-offset: 4px;\n    }\n\n    .description {\n      margin: -0.25rem 0 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1.5;\n      color: var(--st-color-text-muted);\n    }\n\n    :host([variant='accent']) .description {\n      color: inherit;\n      opacity: 0.85;\n    }\n\n    .items {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    /* Nested groups stack with room between them (!important for the same page-reset reason). */\n    ::slotted(st-mega-menu-column:not(:first-child)) {\n      margin-top: 2rem !important;\n    }\n\n    .cta {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n      padding: 0.875rem 1.5rem;\n      border-radius: 9999px;\n      background: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n      font-size: 1rem;\n      font-weight: 500;\n      text-align: center;\n      text-decoration: none;\n      transition: box-shadow 0.2s ease;\n    }\n\n    .cta-spacer {\n      flex: 1;\n      min-height: 1.75rem;\n    }\n\n    .cta:hover,\n    .cta:focus-visible {\n      box-shadow: 0 0 0 2px currentColor;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .cta {\n        transition: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  heading = '';\n\n  /** Makes the heading a link (e.g. to the section's overview page). */\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** `plain` (default), `card` (tinted tile) or `accent` (solid accent tile, light text). */\n  @property({ type: String, reflect: true })\n  variant: 'plain' | 'card' | 'accent' = 'plain';\n\n  /** Text of a pill button at the bottom of the column; needs `cta-href`. */\n  @property({ type: String, attribute: 'cta-label' })\n  ctaLabel = '';\n\n  @property({ type: String, attribute: 'cta-href' })\n  ctaHref = '';\n\n  private select(event: MouseEvent, href: string): void {\n    if (href.startsWith('http')) return;\n    const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n      detail: { href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  }\n\n  private renderHeading() {\n    if (!this.heading) return nothing;\n    return this.href\n      ? html`<a part=\"heading\" class=\"heading\" href=${this.href} @click=${(event: MouseEvent) => this.select(event, this.href)}\n          >${this.heading}</a\n        >`\n      : html`<p part=\"heading\" class=\"heading\">${this.heading}</p>`;\n  }\n\n  private renderCta() {\n    if (!this.ctaLabel || !this.ctaHref) return nothing;\n    const external = this.ctaHref.startsWith('http');\n    return html`\n      <span class=\"cta-spacer\"></span>\n      <a\n        part=\"cta\"\n        class=\"cta\"\n        href=${this.ctaHref}\n        target=${external ? '_blank' : '_self'}\n        rel=${external ? 'noopener noreferrer' : nothing}\n        @click=${(event: MouseEvent) => this.select(event, this.ctaHref)}\n        >${this.ctaLabel} ${external ? arrowUpRightIcon(14) : nothing}</a\n      >\n    `;\n  }\n\n  render() {\n    return html`\n      ${this.renderHeading()}\n      ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n      <div part=\"items\" class=\"items\" role=\"group\" aria-label=${this.heading || nothing}><slot></slot></div>\n      ${this.renderCta()}\n    `;\n  }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * A promo card for the featured column of an `st-mega-menu` (`slot=\"featured\"`). The whole card\n * is one link. Two looks, after okta.com:\n *\n * - `story` (default): a rounded image on top, then the description and an underlined\n *   call-to-action line — a customer story or announcement.\n * - `overlay`: a tile with light text over `image-url` (darkened), or over an accent gradient when\n *   there is no image — an optional `logo-url` top left, the title and description at the bottom.\n *\n * An `http(s)` `href` opens in a new tab unless `target` says otherwise. Any other `href` fires a\n * *cancelable* `mega-menu-select` event (detail: `{ href }`) first; a host doing client-side\n * routing calls `event.preventDefault()` on it.\n *\n * @fires mega-menu-select - The card was clicked (cancelable; detail `{ href }`).\n * @csspart card - The card link.\n * @csspart image - The image (`story`).\n * @csspart logo - The logo (`overlay`).\n * @csspart eyebrow - The small label above the title.\n * @csspart title - The title.\n * @csspart description - The description.\n * @csspart cta - The call-to-action line.\n * @cssprop --st-mega-menu-feature-from - Start colour of the `overlay` gradient (default: the accent colour).\n * @cssprop --st-mega-menu-feature-to - End colour of the `overlay` gradient.\n */\n@customElement('st-mega-menu-feature')\nexport class MegaMenuFeature extends LitElement {\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key to it. */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n    }\n\n    .card {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n      box-sizing: border-box;\n      color: var(--st-color-text-strong);\n      text-decoration: none;\n    }\n\n    .image {\n      display: block;\n      width: 100%;\n      aspect-ratio: 9 / 8;\n      object-fit: cover;\n      border-radius: 20px;\n      transition: transform 0.3s ease;\n    }\n\n    .card:hover .image {\n      transform: scale(1.015);\n    }\n\n    .eyebrow {\n      font-size: 0.75rem;\n      font-weight: 600;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      color: var(--st-color-accent-text);\n    }\n\n    .title {\n      margin: 0;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.3;\n    }\n\n    .description {\n      margin: 0;\n      font-size: 0.9375rem;\n      line-height: 1.5;\n    }\n\n    .cta {\n      align-self: flex-start;\n      margin-top: 0.75rem;\n      font-size: 0.9375rem;\n      font-weight: 500;\n      text-decoration: underline;\n      text-underline-offset: 5px;\n      text-decoration-thickness: 1px;\n    }\n\n    .card:hover .cta,\n    .card:focus-visible .cta {\n      text-decoration-thickness: 2px;\n    }\n\n    /* overlay */\n    :host([variant='overlay']) .card {\n      justify-content: flex-end;\n      gap: 0.5rem;\n      min-height: 15rem;\n      padding: 1.75rem;\n      border-radius: 20px;\n      color: #fff;\n      background-color: var(--st-color-accent);\n      background-image:\n        linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05)),\n        var(--st-mega-menu-feature-image, linear-gradient(160deg, var(--st-mega-menu-feature-from, var(--st-color-accent)), var(--st-mega-menu-feature-to, oklch(0.25 0.12 280))));\n      background-size: cover;\n      background-position: center;\n      transition: transform 0.2s ease;\n    }\n\n    :host([variant='overlay']) .card:hover {\n      transform: translateY(-2px);\n    }\n\n    :host([variant='overlay']) .logo {\n      height: 2.25rem;\n      width: auto;\n      max-width: 70%;\n      margin-bottom: auto;\n      align-self: flex-start;\n      object-fit: contain;\n    }\n\n    :host([variant='overlay']) .title {\n      font-size: 1.75rem;\n      font-weight: 400;\n    }\n\n    :host([variant='overlay']) .eyebrow,\n    :host([variant='overlay']) .cta {\n      color: inherit;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .image,\n      :host([variant='overlay']) .card {\n        transition: none;\n      }\n    }\n  `;\n\n  /** `story` (default) or `overlay` — see the element description. */\n  @property({ type: String, reflect: true })\n  variant: 'story' | 'overlay' = 'story';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Small label above the title, e.g. \"New\" or \"Report\". */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  href = '';\n\n  /** `target` for the link. Defaults to `_blank` for an `http(s)` `href`, `_self` otherwise. */\n  @property({ type: String })\n  target = '';\n\n  /** Image on top (`story`) or behind the text (`overlay`). */\n  @property({ type: String, attribute: 'image-url' })\n  imageUrl = '';\n\n  @property({ type: String, attribute: 'image-alt' })\n  imageAlt = '';\n\n  /** Logo at the top of an `overlay` card. */\n  @property({ type: String, attribute: 'logo-url' })\n  logoUrl = '';\n\n  @property({ type: String, attribute: 'logo-alt' })\n  logoAlt = '';\n\n  /** Call-to-action text at the bottom of the card; empty hides it. */\n  @property({ type: String, attribute: 'cta-label' })\n  ctaLabel = '';\n\n  private get isExternal(): boolean {\n    return this.href.startsWith('http');\n  }\n\n  private onClick = (event: MouseEvent): void => {\n    if (this.isExternal) return;\n    const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n      detail: { href: this.href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  };\n\n  render() {\n    const target = this.target || (this.isExternal ? '_blank' : '_self');\n    const overlay = this.variant === 'overlay';\n    const style = overlay && this.imageUrl ? `--st-mega-menu-feature-image:url(${JSON.stringify(this.imageUrl)})` : '';\n    return html`\n      <a\n        part=\"card\"\n        class=\"card\"\n        style=${style}\n        href=${this.href || nothing}\n        target=${target}\n        rel=${target === '_blank' ? 'noopener noreferrer' : nothing}\n        @click=${this.onClick}\n      >\n        ${overlay && this.logoUrl ? html`<img part=\"logo\" class=\"logo\" src=${this.logoUrl} alt=${this.logoAlt} />` : nothing}\n        ${!overlay && this.imageUrl\n          ? html`<img part=\"image\" class=\"image\" src=${this.imageUrl} alt=${this.imageAlt} loading=\"lazy\" />`\n          : nothing}\n        ${this.eyebrow ? html`<span part=\"eyebrow\" class=\"eyebrow\">${this.eyebrow}</span>` : nothing}\n        ${this.title ? html`<p part=\"title\" class=\"title\">${this.title}</p>` : nothing}\n        ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n        ${this.ctaLabel ? html`<span part=\"cta\" class=\"cta\">${this.ctaLabel}</span>` : nothing}\n      </a>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,UAAU,aAAa;AAyBxC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AA2HL,mBAAU;AAIV,uBAAc;AAId,2BAAkB;AAIlB,mBAAU;AAED,SAAQ,cAAc;AACtB,SAAQ,gBAAgB;AACxB,SAAQ,cAAc;AAE/B,SAAQ,sBAAsB,CAAC,UAAuB;AACpD,WAAK,cAAc,KAAK,IAAI,GAAI,MAAM,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,MAAM;AAAA,IAC7G;AAEA,SAAQ,oBAAoB,CAAC,UAAuB;AAClD,WAAK,gBAAiB,MAAM,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,IACtG;AAEA,SAAQ,uBAAuB,CAAC,UAAuB;AACrD,WAAK,cAAe,MAAM,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,IACpG;AAAA;AAAA,EAEA,SAAS;AACP,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,OAAO,KAAK,KAAK,WAAW,CAAC;AACrF,UAAM,eAAe,CAAC,EAAE,KAAK,WAAW,KAAK;AAC7C,UAAM,WAAW,gBAAgB,KAAK;AACtC,UAAM,cAAc,KAAK,eAAe,CAAC,CAAC,KAAK;AAE/C,UAAM,SAAS,CAAC,WAAW,mBAAmB,IAAI,aAAa,OAAO,OAAO,cAAc,mBAAmB,EAAE,EAC7G,OAAO,OAAO,EACd,KAAK,GAAG;AACX,WAAO;AAAA;AAAA;AAAA;AAAA,uCAI4B,MAAM,2BAA2B,OAAO,8BAA8B,KAAK,IAAI,GAAG,OAAO,CAAC;AAAA;AAAA,kDAE/E,CAAC,QAAQ;AAAA,YAC/C,KAAK,UAAU,+CAA+C,KAAK,OAAO,SAAS,OAAO;AAAA,YAC1F,KAAK,cAAc,uDAAuD,KAAK,WAAW,SAAS,OAAO;AAAA,uDAC/D,eAAe,KAAK,SAAS,aAAa,CAAC,KAAK,aAAa;AAAA,6CACvE,KAAK,iBAAiB;AAAA;AAAA;AAAA,gEAGH,KAAK,mBAAmB;AAAA,wDAChC,CAAC,WAAW;AAAA,YACxD,KAAK,kBAAkB,2DAA2D,KAAK,eAAe,SAAS,OAAO;AAAA,0EACxD,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIjG;AACF;AAvLa,SACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoHtB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1Hf,SA2HX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Hf,SA+HX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB,CAAC;AAAA,GAlI9C,SAmIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtIf,SAuIX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GAzII,SAyIM;AACA;AAAA,EAAhB,MAAM;AAAA,GA1II,SA0IM;AACA;AAAA,EAAhB,MAAM;AAAA,GA3II,SA2IM;AA3IN,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;;;AC1Bb,SAAS,cAAAA,aAAY,OAAAC,MAAK,QAAAC,OAAM,WAAAC,gBAAe;AAC/C,SAAS,iBAAAC,gBAAe,YAAAC,iBAAgB;AA4BjC,IAAM,iBAAN,cAA6BC,YAAW;AAAA,EAAxC;AAAA;AAiHL,mBAAU;AAIV,gBAAO;AAGP,uBAAc;AAId,mBAAuC;AAIvC,oBAAW;AAGX,mBAAU;AAAA;AAAA,EAEF,OAAO,OAAmB,MAAoB;AACpD,QAAI,KAAK,WAAW,MAAM,EAAG;AAC7B,UAAM,cAAc,IAAI,YAAuC,oBAAoB;AAAA,MACjF,QAAQ,EAAE,KAAK;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IACd,CAAC;AACD,SAAK,cAAc,WAAW;AAC9B,QAAI,YAAY,iBAAkB,OAAM,eAAe;AAAA,EACzD;AAAA,EAEQ,gBAAgB;AACtB,QAAI,CAAC,KAAK,QAAS,QAAOC;AAC1B,WAAO,KAAK,OACRC,+CAA8C,KAAK,IAAI,WAAW,CAAC,UAAsB,KAAK,OAAO,OAAO,KAAK,IAAI,CAAC;AAAA,aACjH,KAAK,OAAO;AAAA,aAEjBA,0CAAyC,KAAK,OAAO;AAAA,EAC3D;AAAA,EAEQ,YAAY;AAClB,QAAI,CAAC,KAAK,YAAY,CAAC,KAAK,QAAS,QAAOD;AAC5C,UAAM,WAAW,KAAK,QAAQ,WAAW,MAAM;AAC/C,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKI,KAAK,OAAO;AAAA,iBACV,WAAW,WAAW,OAAO;AAAA,cAChC,WAAW,wBAAwBD,QAAO;AAAA,iBACvC,CAAC,UAAsB,KAAK,OAAO,OAAO,KAAK,OAAO,CAAC;AAAA,WAC7D,KAAK,QAAQ,IAAI,WAAW,iBAAiB,EAAE,IAAIA,QAAO;AAAA;AAAA;AAAA,EAGnE;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,QACH,KAAK,cAAc,CAAC;AAAA,QACpB,KAAK,cAAcA,kDAAiD,KAAK,WAAW,SAASD,QAAO;AAAA,gEAC5C,KAAK,WAAWA,QAAO;AAAA,QAC/E,KAAK,UAAU,CAAC;AAAA;AAAA,EAEtB;AACF;AAnLa,eACJ,SAASE;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwGtB;AAAA,EADCC,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhHf,eAiHX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApHf,eAqHX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvHf,eAwHX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3H9B,eA4HX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA/HvC,eAgIX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,CAAC;AAAA,GAlItC,eAmIX;AAnIW,iBAAN;AAAA,EADNC,eAAc,qBAAqB;AAAA,GACvB;;;AC7Bb,SAAS,cAAAC,aAAY,OAAAC,MAAK,QAAAC,OAAM,WAAAC,gBAAe;AAC/C,SAAS,iBAAAC,gBAAe,YAAAC,iBAAgB;AA8BjC,IAAM,kBAAN,cAA8BC,YAAW;AAAA,EAAzC;AAAA;AAwHL,mBAA+B;AAG/B,iBAAQ;AAGR,uBAAc;AAId,mBAAU;AAGV,gBAAO;AAIP,kBAAS;AAIT,oBAAW;AAGX,oBAAW;AAIX,mBAAU;AAGV,mBAAU;AAIV,oBAAW;AAMX,SAAQ,UAAU,CAAC,UAA4B;AAC7C,UAAI,KAAK,WAAY;AACrB,YAAM,cAAc,IAAI,YAAuC,oBAAoB;AAAA,QACjF,QAAQ,EAAE,MAAM,KAAK,KAAK;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MACd,CAAC;AACD,WAAK,cAAc,WAAW;AAC9B,UAAI,YAAY,iBAAkB,OAAM,eAAe;AAAA,IACzD;AAAA;AAAA,EAdA,IAAY,aAAsB;AAChC,WAAO,KAAK,KAAK,WAAW,MAAM;AAAA,EACpC;AAAA,EAcA,SAAS;AACP,UAAM,SAAS,KAAK,WAAW,KAAK,aAAa,WAAW;AAC5D,UAAM,UAAU,KAAK,YAAY;AACjC,UAAM,QAAQ,WAAW,KAAK,WAAW,oCAAoC,KAAK,UAAU,KAAK,QAAQ,CAAC,MAAM;AAChH,WAAOC;AAAA;AAAA;AAAA;AAAA,gBAIK,KAAK;AAAA,eACN,KAAK,QAAQC,QAAO;AAAA,iBAClB,MAAM;AAAA,cACT,WAAW,WAAW,wBAAwBA,QAAO;AAAA,iBAClD,KAAK,OAAO;AAAA;AAAA,UAEnB,WAAW,KAAK,UAAUD,0CAAyC,KAAK,OAAO,QAAQ,KAAK,OAAO,QAAQC,QAAO;AAAA,UAClH,CAAC,WAAW,KAAK,WACfD,4CAA2C,KAAK,QAAQ,QAAQ,KAAK,QAAQ,uBAC7EC,QAAO;AAAA,UACT,KAAK,UAAUD,6CAA4C,KAAK,OAAO,YAAYC,QAAO;AAAA,UAC1F,KAAK,QAAQD,sCAAqC,KAAK,KAAK,SAASC,QAAO;AAAA,UAC5E,KAAK,cAAcD,kDAAiD,KAAK,WAAW,SAASC,QAAO;AAAA,UACpG,KAAK,WAAWD,qCAAoC,KAAK,QAAQ,YAAYC,QAAO;AAAA;AAAA;AAAA,EAG5F;AACF;AAAA;AAtMa,gBAEJ,oBAAoB,EAAE,GAAGF,YAAW,mBAAmB,gBAAgB,KAAK;AAFxE,gBAIJ,SAASG;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+GtB;AAAA,EADCC,UAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAvH9B,gBAwHX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1Hf,gBA2HX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Hf,gBA8HX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjIf,gBAkIX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApIf,gBAqIX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxIf,gBAyIX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA5IvC,gBA6IX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA/IvC,gBAgJX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,CAAC;AAAA,GAnJtC,gBAoJX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,CAAC;AAAA,GAtJtC,gBAuJX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA1JvC,gBA2JX;AA3JW,kBAAN;AAAA,EADNC,eAAc,sBAAsB;AAAA,GACxB;","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement","LitElement","css","html","nothing","customElement","property","LitElement","html","nothing","css","property","customElement"]}
+{"version":3,"sources":["../src/mega-menu/MegaMenu.ts","../src/mega-menu/MegaMenuColumn.ts","../src/mega-menu/MegaMenuFeature.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\n\n/**\n * The rich layout of a mega-menu panel, after okta.com: an optional intro column on the left (a\n * large `heading`, a `description` and, under a divider, quick links in `slot=\"intro\"`), then the\n * link columns side by side (`st-mega-menu-column`s in the default slot), then an optional\n * featured column on the right (`featured-heading` over the `st-mega-menu-feature` cards in\n * `slot=\"featured\"`). Slot it into an `st-dropdown` with `mega` set.\n *\n * The layout follows the width it is given, not the viewport (a container query): side by side\n * when there is room; intro and featured column above/below two link columns on a medium panel;\n * everything stacked in the narrow drill-down panel `st-header` shows on a phone (where the intro\n * heading is left out — the drill-down already shows the section's name).\n *\n * @slot - The link columns (`st-mega-menu-column`s, or any blocks).\n * @slot intro - Quick links under the intro text, e.g. `st-menu-item`s with an icon.\n * @slot featured - Promo cards (`st-mega-menu-feature`s), stacked.\n * @csspart inner - The grid holding every area.\n * @csspart intro - The intro column.\n * @csspart columns - The grid holding the link columns.\n * @csspart featured - The featured column.\n */\n@customElement('st-mega-menu')\nexport class MegaMenu extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      container-type: inline-size;\n      ${fontFamilyStyles}\n    }\n\n    .inner {\n      display: grid;\n      gap: 3rem;\n      padding: 3rem 3.5rem;\n      box-sizing: border-box;\n    }\n\n    .columns {\n      display: grid;\n      grid-template-columns: repeat(var(--st-mega-menu-columns, 3), minmax(0, 1fr));\n      gap: 3rem;\n      align-items: stretch;\n    }\n\n    .intro,\n    .featured {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .intro-heading {\n      margin: 0 0 1rem;\n      font-size: 2rem;\n      font-weight: 400;\n      line-height: 1.15;\n      color: var(--st-color-text-strong);\n    }\n\n    .intro-description {\n      margin: 0;\n      font-size: 1rem;\n      line-height: 1.55;\n      color: var(--st-color-text);\n    }\n\n    .intro-links {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      margin-top: 2.5rem;\n      padding-top: 2rem;\n      border-top: 1px solid var(--st-color-border);\n    }\n\n    .intro-links.no-text {\n      margin-top: 0;\n      padding-top: 0;\n      border-top: 0;\n    }\n\n    .featured-heading {\n      margin: 0 0 1rem;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.35;\n      color: var(--st-color-text-strong);\n    }\n\n    .featured-items {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n    }\n\n    [hidden] {\n      display: none !important;\n    }\n\n    /* Medium panel: intro on top, two link columns, featured cards side by side underneath. */\n    @container (max-width: 960px) {\n      .inner {\n        grid-template-columns: minmax(0, 1fr) !important;\n        gap: 2rem;\n        padding: 2rem;\n      }\n\n      .columns {\n        grid-template-columns: repeat(var(--st-mega-menu-columns-md, 2), minmax(0, 1fr));\n        gap: 2rem;\n      }\n\n      .intro-links {\n        margin-top: 1.5rem;\n        padding-top: 1.5rem;\n      }\n\n      .featured-items {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n      }\n    }\n\n    /* Narrow panel (the phone drill-down): everything stacked. */\n    @container (max-width: 560px) {\n      .inner {\n        gap: 1.75rem;\n        padding: 0.5rem 0 1.5rem;\n      }\n\n      .columns {\n        grid-template-columns: minmax(0, 1fr);\n        gap: 1.75rem;\n      }\n\n      .intro-heading {\n        display: none;\n      }\n    }\n  `;\n\n  /** Large title of the intro column. */\n  @property({ type: String })\n  heading = '';\n\n  /** Text under the intro title. */\n  @property({ type: String })\n  description = '';\n\n  /** Heading over the featured cards. */\n  @property({ type: String, attribute: 'featured-heading' })\n  featuredHeading = '';\n\n  /** Number of link columns side by side at full width. `0` (the default) uses one per slotted column. */\n  @property({ type: Number })\n  columns = 0;\n\n  @state() private columnCount = 1;\n  @state() private hasIntroLinks = false;\n  @state() private hasFeatured = false;\n\n  private onColumnsSlotChange = (event: Event): void => {\n    this.columnCount = Math.max(1, (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length);\n  };\n\n  private onIntroSlotChange = (event: Event): void => {\n    this.hasIntroLinks = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  };\n\n  private onFeaturedSlotChange = (event: Event): void => {\n    this.hasFeatured = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  };\n\n  render() {\n    const columns = Math.min(6, Math.max(1, Math.round(this.columns) || this.columnCount));\n    const hasIntroText = !!(this.heading || this.description);\n    const hasIntro = hasIntroText || this.hasIntroLinks;\n    const hasFeatured = this.hasFeatured || !!this.featuredHeading;\n    // Every column — intro, each link column, featured — gets the same share of the width.\n    const tracks = [hasIntro ? 'minmax(0, 1fr)' : '', `minmax(0, ${columns}fr)`, hasFeatured ? 'minmax(0, 1fr)' : '']\n      .filter(Boolean)\n      .join(' ');\n    return html`\n      <div\n        part=\"inner\"\n        class=\"inner\"\n        style=\"grid-template-columns:${tracks};--st-mega-menu-columns:${columns};--st-mega-menu-columns-md:${Math.min(2, columns)}\"\n      >\n        <div part=\"intro\" class=\"intro\" ?hidden=${!hasIntro}>\n          ${this.heading ? html`<p part=\"heading\" class=\"intro-heading\">${this.heading}</p>` : nothing}\n          ${this.description ? html`<p part=\"description\" class=\"intro-description\">${this.description}</p>` : nothing}\n          <div part=\"intro-links\" class=\"intro-links ${hasIntroText ? '' : 'no-text'}\" ?hidden=${!this.hasIntroLinks}>\n            <slot name=\"intro\" @slotchange=${this.onIntroSlotChange}></slot>\n          </div>\n        </div>\n        <div part=\"columns\" class=\"columns\"><slot @slotchange=${this.onColumnsSlotChange}></slot></div>\n        <div part=\"featured\" class=\"featured\" ?hidden=${!hasFeatured}>\n          ${this.featuredHeading ? html`<p part=\"featured-heading\" class=\"featured-heading\">${this.featuredHeading}</p>` : nothing}\n          <div class=\"featured-items\"><slot name=\"featured\" @slotchange=${this.onFeaturedSlotChange}></slot></div>\n        </div>\n      </div>\n    `;\n  }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { arrowUpRightIcon } from '../shared/icons';\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * One column (or one group within a column) of an `st-mega-menu`: a heading, an optional line of\n * description, then its links stacked — usually `st-menu-item`s with `variant=\"link\"`. Nest\n * columns to stack several headed groups in one column, as okta.com does.\n *\n * `variant=\"card\"` puts the column on a tinted rounded tile and `variant=\"accent\"` on a solid\n * accent tile with light text; both suit a row of equal columns without intro or featured area.\n * `cta-label` + `cta-href` add a pill button at the bottom of the column.\n *\n * The heading (when `href` is set) and the button fire a *cancelable* `mega-menu-select` event\n * (detail: `{ href }`) before navigating; a host doing client-side routing calls\n * `event.preventDefault()` on it.\n *\n * @slot - The column's links, or nested `st-mega-menu-column` groups.\n * @fires mega-menu-select - The heading link or the button was clicked (cancelable; detail `{ href }`).\n * @csspart heading - The heading text or link.\n * @csspart description - The line under the heading.\n * @csspart items - The box holding the links.\n * @csspart cta - The pill button.\n * @cssprop --st-mega-menu-column-padding - Overrides the padding of a `card`/`accent` column.\n */\n@customElement('st-mega-menu-column')\nexport class MegaMenuColumn extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n      box-sizing: border-box;\n      ${fontFamilyStyles}\n    }\n\n    :host([variant='card']),\n    :host([variant='accent']) {\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-mega-menu-column-padding instead. */\n      padding: var(--st-mega-menu-column-padding, 2rem 1.75rem 1.75rem) !important;\n      border-radius: 20px;\n      background: color-mix(in oklch, var(--st-color-text-strong) 5%, var(--st-color-surface));\n    }\n\n    :host([variant='accent']) {\n      background: var(--st-color-accent);\n      color: var(--st-color-on-solid);\n      /* Read by the st-menu-item links inside. */\n      --st-nav-color: var(--st-color-on-solid);\n      --st-nav-hover-bg: transparent;\n    }\n\n    .heading {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      margin: 0 0 0.75rem;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.35;\n      color: var(--st-color-text-strong);\n      text-decoration: none;\n    }\n\n    :host([variant='card']) .heading,\n    :host([variant='accent']) .heading {\n      font-size: 1.375rem;\n    }\n\n    :host([variant='accent']) .heading {\n      color: inherit;\n    }\n\n    a.heading:hover,\n    a.heading:focus-visible {\n      text-decoration: underline;\n      text-underline-offset: 4px;\n    }\n\n    .description {\n      margin: -0.25rem 0 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1.5;\n      color: var(--st-color-text-muted);\n    }\n\n    :host([variant='accent']) .description {\n      color: inherit;\n      opacity: 0.85;\n    }\n\n    .items {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    /* Nested groups stack with room between them (!important for the same page-reset reason). */\n    ::slotted(st-mega-menu-column:not(:first-child)) {\n      margin-top: 2rem !important;\n    }\n\n    .cta {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n      padding: 0.875rem 1.5rem;\n      border-radius: 9999px;\n      background: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n      font-size: 1rem;\n      font-weight: 500;\n      text-align: center;\n      text-decoration: none;\n      transition: box-shadow 0.2s ease;\n    }\n\n    .cta-spacer {\n      flex: 1;\n      min-height: 1.75rem;\n    }\n\n    .cta:hover,\n    .cta:focus-visible {\n      box-shadow: 0 0 0 2px currentColor;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .cta {\n        transition: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  heading = '';\n\n  /** Makes the heading a link (e.g. to the section's overview page). */\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** `plain` (default), `card` (tinted tile) or `accent` (solid accent tile, light text). */\n  @property({ type: String, reflect: true })\n  variant: 'plain' | 'card' | 'accent' = 'plain';\n\n  /** Text of a pill button at the bottom of the column; needs `cta-href`. */\n  @property({ type: String, attribute: 'cta-label' })\n  ctaLabel = '';\n\n  @property({ type: String, attribute: 'cta-href' })\n  ctaHref = '';\n\n  private select(event: MouseEvent, href: string): void {\n    if (href.startsWith('http')) return;\n    const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n      detail: { href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  }\n\n  private renderHeading() {\n    if (!this.heading) return nothing;\n    return this.href\n      ? html`<a part=\"heading\" class=\"heading\" href=${this.href} @click=${(event: MouseEvent) => this.select(event, this.href)}\n          >${this.heading}</a\n        >`\n      : html`<p part=\"heading\" class=\"heading\">${this.heading}</p>`;\n  }\n\n  private renderCta() {\n    if (!this.ctaLabel || !this.ctaHref) return nothing;\n    const external = this.ctaHref.startsWith('http');\n    return html`\n      <span class=\"cta-spacer\"></span>\n      <a\n        part=\"cta\"\n        class=\"cta\"\n        href=${this.ctaHref}\n        target=${external ? '_blank' : '_self'}\n        rel=${external ? 'noopener noreferrer' : nothing}\n        @click=${(event: MouseEvent) => this.select(event, this.ctaHref)}\n        >${this.ctaLabel} ${external ? arrowUpRightIcon(14) : nothing}</a\n      >\n    `;\n  }\n\n  render() {\n    return html`\n      ${this.renderHeading()}\n      ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n      <div part=\"items\" class=\"items\" role=\"group\" aria-label=${this.heading || nothing}><slot></slot></div>\n      ${this.renderCta()}\n    `;\n  }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * A promo card for the featured column of an `st-mega-menu` (`slot=\"featured\"`). The whole card\n * is one link. Two looks, after okta.com:\n *\n * - `story` (default): a rounded image on top, then the description and an underlined\n *   call-to-action line — a customer story or announcement.\n * - `overlay`: a tile with light text over `image-url` (darkened), or over an accent gradient when\n *   there is no image — an optional `logo-url` top left, the title and description at the bottom.\n *\n * An `http(s)` `href` opens in a new tab unless `target` says otherwise. Any other `href` fires a\n * *cancelable* `mega-menu-select` event (detail: `{ href }`) first; a host doing client-side\n * routing calls `event.preventDefault()` on it.\n *\n * @fires mega-menu-select - The card was clicked (cancelable; detail `{ href }`).\n * @csspart card - The card link.\n * @csspart image - The image (`story`).\n * @csspart logo - The logo (`overlay`).\n * @csspart eyebrow - The small label above the title.\n * @csspart title - The title.\n * @csspart description - The description.\n * @csspart cta - The call-to-action line.\n * @cssprop --st-mega-menu-feature-from - Start colour of the `overlay` gradient (default: the accent colour).\n * @cssprop --st-mega-menu-feature-to - End colour of the `overlay` gradient.\n */\n@customElement('st-mega-menu-feature')\nexport class MegaMenuFeature extends LitElement {\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key to it. */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n    }\n\n    .card {\n      display: flex;\n      flex-direction: column;\n      gap: 0.75rem;\n      box-sizing: border-box;\n      color: var(--st-color-text-strong);\n      text-decoration: none;\n    }\n\n    .image {\n      display: block;\n      width: 100%;\n      aspect-ratio: 9 / 8;\n      object-fit: cover;\n      border-radius: 20px;\n      transition: transform 0.3s ease;\n    }\n\n    .card:hover .image {\n      transform: scale(1.015);\n    }\n\n    .eyebrow {\n      font-size: 0.75rem;\n      font-weight: 600;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      color: var(--st-color-accent-text);\n    }\n\n    .title {\n      margin: 0;\n      font-size: 1.125rem;\n      font-weight: 500;\n      line-height: 1.3;\n    }\n\n    .description {\n      margin: 0;\n      font-size: 0.9375rem;\n      line-height: 1.5;\n    }\n\n    .cta {\n      align-self: flex-start;\n      margin-top: 0.75rem;\n      font-size: 0.9375rem;\n      font-weight: 500;\n      text-decoration: underline;\n      text-underline-offset: 5px;\n      text-decoration-thickness: 1px;\n    }\n\n    .card:hover .cta,\n    .card:focus-visible .cta {\n      text-decoration-thickness: 2px;\n    }\n\n    /* overlay */\n    :host([variant='overlay']) .card {\n      justify-content: flex-end;\n      gap: 0.5rem;\n      min-height: 15rem;\n      padding: 1.75rem;\n      border-radius: 20px;\n      color: #fff;\n      background-color: var(--st-color-accent);\n      background-image:\n        linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05)),\n        var(--st-mega-menu-feature-image, linear-gradient(160deg, var(--st-mega-menu-feature-from, var(--st-color-accent)), var(--st-mega-menu-feature-to, oklch(0.25 0.12 280))));\n      background-size: cover;\n      background-position: center;\n      transition: transform 0.2s ease;\n    }\n\n    :host([variant='overlay']) .card:hover {\n      transform: translateY(-2px);\n    }\n\n    :host([variant='overlay']) .logo {\n      height: 2.25rem;\n      width: auto;\n      max-width: 70%;\n      margin-bottom: auto;\n      align-self: flex-start;\n      object-fit: contain;\n    }\n\n    :host([variant='overlay']) .title {\n      font-size: 1.75rem;\n      font-weight: 400;\n    }\n\n    :host([variant='overlay']) .eyebrow,\n    :host([variant='overlay']) .cta {\n      color: inherit;\n    }\n\n    /* tip: a light-blue card with dark text, like a tip panel on a page. */\n    :host([variant='tip']) .card {\n      gap: 0.5rem;\n      padding: 1.25rem;\n      border-radius: var(--st-radius-md);\n      border: 1px solid var(--st-color-accent-border);\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-text);\n      transition: border-color 0.2s ease;\n    }\n\n    :host([variant='tip']) .card:hover {\n      border-color: var(--st-color-accent-muted);\n    }\n\n    :host([variant='tip']) .title {\n      font-size: var(--st-text-lg);\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n    }\n\n    :host([variant='tip']) .eyebrow,\n    :host([variant='tip']) .cta {\n      color: var(--st-color-accent-text);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .image,\n      :host([variant='overlay']) .card {\n        transition: none;\n      }\n    }\n  `;\n\n  /** `story` (default), `overlay` (dark, over an image or gradient) or `tip` (light blue, for a hint). */\n  @property({ type: String, reflect: true })\n  variant: 'story' | 'overlay' | 'tip' = 'story';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Small label above the title, e.g. \"New\" or \"Report\". */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  href = '';\n\n  /** `target` for the link. Defaults to `_blank` for an `http(s)` `href`, `_self` otherwise. */\n  @property({ type: String })\n  target = '';\n\n  /** Image on top (`story`) or behind the text (`overlay`). */\n  @property({ type: String, attribute: 'image-url' })\n  imageUrl = '';\n\n  @property({ type: String, attribute: 'image-alt' })\n  imageAlt = '';\n\n  /** Logo at the top of an `overlay` card. */\n  @property({ type: String, attribute: 'logo-url' })\n  logoUrl = '';\n\n  @property({ type: String, attribute: 'logo-alt' })\n  logoAlt = '';\n\n  /** Call-to-action text at the bottom of the card; empty hides it. */\n  @property({ type: String, attribute: 'cta-label' })\n  ctaLabel = '';\n\n  private get isExternal(): boolean {\n    return this.href.startsWith('http');\n  }\n\n  private onClick = (event: MouseEvent): void => {\n    if (this.isExternal) return;\n    const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n      detail: { href: this.href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(selectEvent);\n    if (selectEvent.defaultPrevented) event.preventDefault();\n  };\n\n  render() {\n    const target = this.target || (this.isExternal ? '_blank' : '_self');\n    const overlay = this.variant === 'overlay';\n    const style = overlay && this.imageUrl ? `--st-mega-menu-feature-image:url(${JSON.stringify(this.imageUrl)})` : '';\n    return html`\n      <a\n        part=\"card\"\n        class=\"card\"\n        style=${style}\n        href=${this.href || nothing}\n        target=${target}\n        rel=${target === '_blank' ? 'noopener noreferrer' : nothing}\n        @click=${this.onClick}\n      >\n        ${overlay && this.logoUrl ? html`<img part=\"logo\" class=\"logo\" src=${this.logoUrl} alt=${this.logoAlt} />` : nothing}\n        ${!overlay && this.imageUrl\n          ? html`<img part=\"image\" class=\"image\" src=${this.imageUrl} alt=${this.imageAlt} loading=\"lazy\" />`\n          : nothing}\n        ${this.eyebrow ? html`<span part=\"eyebrow\" class=\"eyebrow\">${this.eyebrow}</span>` : nothing}\n        ${this.title ? html`<p part=\"title\" class=\"title\">${this.title}</p>` : nothing}\n        ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n        ${this.ctaLabel ? html`<span part=\"cta\" class=\"cta\">${this.ctaLabel}</span>` : nothing}\n      </a>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,UAAU,aAAa;AAyBxC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AA2HL,mBAAU;AAIV,uBAAc;AAId,2BAAkB;AAIlB,mBAAU;AAED,SAAQ,cAAc;AACtB,SAAQ,gBAAgB;AACxB,SAAQ,cAAc;AAE/B,SAAQ,sBAAsB,CAAC,UAAuB;AACpD,WAAK,cAAc,KAAK,IAAI,GAAI,MAAM,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,MAAM;AAAA,IAC7G;AAEA,SAAQ,oBAAoB,CAAC,UAAuB;AAClD,WAAK,gBAAiB,MAAM,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,IACtG;AAEA,SAAQ,uBAAuB,CAAC,UAAuB;AACrD,WAAK,cAAe,MAAM,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,IACpG;AAAA;AAAA,EAEA,SAAS;AACP,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,OAAO,KAAK,KAAK,WAAW,CAAC;AACrF,UAAM,eAAe,CAAC,EAAE,KAAK,WAAW,KAAK;AAC7C,UAAM,WAAW,gBAAgB,KAAK;AACtC,UAAM,cAAc,KAAK,eAAe,CAAC,CAAC,KAAK;AAE/C,UAAM,SAAS,CAAC,WAAW,mBAAmB,IAAI,aAAa,OAAO,OAAO,cAAc,mBAAmB,EAAE,EAC7G,OAAO,OAAO,EACd,KAAK,GAAG;AACX,WAAO;AAAA;AAAA;AAAA;AAAA,uCAI4B,MAAM,2BAA2B,OAAO,8BAA8B,KAAK,IAAI,GAAG,OAAO,CAAC;AAAA;AAAA,kDAE/E,CAAC,QAAQ;AAAA,YAC/C,KAAK,UAAU,+CAA+C,KAAK,OAAO,SAAS,OAAO;AAAA,YAC1F,KAAK,cAAc,uDAAuD,KAAK,WAAW,SAAS,OAAO;AAAA,uDAC/D,eAAe,KAAK,SAAS,aAAa,CAAC,KAAK,aAAa;AAAA,6CACvE,KAAK,iBAAiB;AAAA;AAAA;AAAA,gEAGH,KAAK,mBAAmB;AAAA,wDAChC,CAAC,WAAW;AAAA,YACxD,KAAK,kBAAkB,2DAA2D,KAAK,eAAe,SAAS,OAAO;AAAA,0EACxD,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIjG;AACF;AAvLa,SACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoHtB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1Hf,SA2HX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Hf,SA+HX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB,CAAC;AAAA,GAlI9C,SAmIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtIf,SAuIX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GAzII,SAyIM;AACA;AAAA,EAAhB,MAAM;AAAA,GA1II,SA0IM;AACA;AAAA,EAAhB,MAAM;AAAA,GA3II,SA2IM;AA3IN,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;;;AC1Bb,SAAS,cAAAA,aAAY,OAAAC,MAAK,QAAAC,OAAM,WAAAC,gBAAe;AAC/C,SAAS,iBAAAC,gBAAe,YAAAC,iBAAgB;AA4BjC,IAAM,iBAAN,cAA6BC,YAAW;AAAA,EAAxC;AAAA;AAiHL,mBAAU;AAIV,gBAAO;AAGP,uBAAc;AAId,mBAAuC;AAIvC,oBAAW;AAGX,mBAAU;AAAA;AAAA,EAEF,OAAO,OAAmB,MAAoB;AACpD,QAAI,KAAK,WAAW,MAAM,EAAG;AAC7B,UAAM,cAAc,IAAI,YAAuC,oBAAoB;AAAA,MACjF,QAAQ,EAAE,KAAK;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IACd,CAAC;AACD,SAAK,cAAc,WAAW;AAC9B,QAAI,YAAY,iBAAkB,OAAM,eAAe;AAAA,EACzD;AAAA,EAEQ,gBAAgB;AACtB,QAAI,CAAC,KAAK,QAAS,QAAOC;AAC1B,WAAO,KAAK,OACRC,+CAA8C,KAAK,IAAI,WAAW,CAAC,UAAsB,KAAK,OAAO,OAAO,KAAK,IAAI,CAAC;AAAA,aACjH,KAAK,OAAO;AAAA,aAEjBA,0CAAyC,KAAK,OAAO;AAAA,EAC3D;AAAA,EAEQ,YAAY;AAClB,QAAI,CAAC,KAAK,YAAY,CAAC,KAAK,QAAS,QAAOD;AAC5C,UAAM,WAAW,KAAK,QAAQ,WAAW,MAAM;AAC/C,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKI,KAAK,OAAO;AAAA,iBACV,WAAW,WAAW,OAAO;AAAA,cAChC,WAAW,wBAAwBD,QAAO;AAAA,iBACvC,CAAC,UAAsB,KAAK,OAAO,OAAO,KAAK,OAAO,CAAC;AAAA,WAC7D,KAAK,QAAQ,IAAI,WAAW,iBAAiB,EAAE,IAAIA,QAAO;AAAA;AAAA;AAAA,EAGnE;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,QACH,KAAK,cAAc,CAAC;AAAA,QACpB,KAAK,cAAcA,kDAAiD,KAAK,WAAW,SAASD,QAAO;AAAA,gEAC5C,KAAK,WAAWA,QAAO;AAAA,QAC/E,KAAK,UAAU,CAAC;AAAA;AAAA,EAEtB;AACF;AAnLa,eACJ,SAASE;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwGtB;AAAA,EADCC,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhHf,eAiHX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApHf,eAqHX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvHf,eAwHX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3H9B,eA4HX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA/HvC,eAgIX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,CAAC;AAAA,GAlItC,eAmIX;AAnIW,iBAAN;AAAA,EADNC,eAAc,qBAAqB;AAAA,GACvB;;;AC7Bb,SAAS,cAAAC,aAAY,OAAAC,MAAK,QAAAC,OAAM,WAAAC,gBAAe;AAC/C,SAAS,iBAAAC,gBAAe,YAAAC,iBAAgB;AA8BjC,IAAM,kBAAN,cAA8BC,YAAW;AAAA,EAAzC;AAAA;AAkJL,mBAAuC;AAGvC,iBAAQ;AAGR,uBAAc;AAId,mBAAU;AAGV,gBAAO;AAIP,kBAAS;AAIT,oBAAW;AAGX,oBAAW;AAIX,mBAAU;AAGV,mBAAU;AAIV,oBAAW;AAMX,SAAQ,UAAU,CAAC,UAA4B;AAC7C,UAAI,KAAK,WAAY;AACrB,YAAM,cAAc,IAAI,YAAuC,oBAAoB;AAAA,QACjF,QAAQ,EAAE,MAAM,KAAK,KAAK;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MACd,CAAC;AACD,WAAK,cAAc,WAAW;AAC9B,UAAI,YAAY,iBAAkB,OAAM,eAAe;AAAA,IACzD;AAAA;AAAA,EAdA,IAAY,aAAsB;AAChC,WAAO,KAAK,KAAK,WAAW,MAAM;AAAA,EACpC;AAAA,EAcA,SAAS;AACP,UAAM,SAAS,KAAK,WAAW,KAAK,aAAa,WAAW;AAC5D,UAAM,UAAU,KAAK,YAAY;AACjC,UAAM,QAAQ,WAAW,KAAK,WAAW,oCAAoC,KAAK,UAAU,KAAK,QAAQ,CAAC,MAAM;AAChH,WAAOC;AAAA;AAAA;AAAA;AAAA,gBAIK,KAAK;AAAA,eACN,KAAK,QAAQC,QAAO;AAAA,iBAClB,MAAM;AAAA,cACT,WAAW,WAAW,wBAAwBA,QAAO;AAAA,iBAClD,KAAK,OAAO;AAAA;AAAA,UAEnB,WAAW,KAAK,UAAUD,0CAAyC,KAAK,OAAO,QAAQ,KAAK,OAAO,QAAQC,QAAO;AAAA,UAClH,CAAC,WAAW,KAAK,WACfD,4CAA2C,KAAK,QAAQ,QAAQ,KAAK,QAAQ,uBAC7EC,QAAO;AAAA,UACT,KAAK,UAAUD,6CAA4C,KAAK,OAAO,YAAYC,QAAO;AAAA,UAC1F,KAAK,QAAQD,sCAAqC,KAAK,KAAK,SAASC,QAAO;AAAA,UAC5E,KAAK,cAAcD,kDAAiD,KAAK,WAAW,SAASC,QAAO;AAAA,UACpG,KAAK,WAAWD,qCAAoC,KAAK,QAAQ,YAAYC,QAAO;AAAA;AAAA;AAAA,EAG5F;AACF;AAAA;AAhOa,gBAEJ,oBAAoB,EAAE,GAAGF,YAAW,mBAAmB,gBAAgB,KAAK;AAFxE,gBAIJ,SAASG;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyItB;AAAA,EADCC,UAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjJ9B,gBAkJX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApJf,gBAqJX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvJf,gBAwJX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3Jf,gBA4JX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Jf,gBA+JX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlKf,gBAmKX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAtKvC,gBAuKX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAzKvC,gBA0KX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,CAAC;AAAA,GA7KtC,gBA8KX;AAGA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,CAAC;AAAA,GAhLtC,gBAiLX;AAIA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GApLvC,gBAqLX;AArLW,kBAAN;AAAA,EADNC,eAAc,sBAAsB;AAAA,GACxB;","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement","LitElement","css","html","nothing","customElement","property","LitElement","html","nothing","css","property","customElement"]}

package/dist/index.js

@@ -3,7 +3,7 @@ import {
 } from "./chunk-DH53HZPB.js";
 import {
   Tooltip
-} from "./chunk-XCA3XFFG.js";
+} from "./chunk-FML6AG2V.js";
 import {
   PromoBanner
 } from "./chunk-VWS53WY4.js";
@@ -32,7 +32,7 @@ import {
   MegaMenu,
   MegaMenuColumn,
   MegaMenuFeature
-} from "./chunk-G3CF7MBO.js";
+} from "./chunk-J6EO4R73.js";
 import {
   MenuGrid
 } from "./chunk-SMLR736E.js";

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

@@ -113,8 +113,8 @@ declare class MegaMenuFeature extends LitElement {
         slotAssignment?: SlotAssignmentMode;
     };
     static styles: lit.CSSResult;
-    /** `story` (default) or `overlay` — see the element description. */
-    variant: 'story' | 'overlay';
+    /** `story` (default), `overlay` (dark, over an image or gradient) or `tip` (light blue, for a hint). */
+    variant: 'story' | 'overlay' | 'tip';
     title: string;
     description: string;
     /** Small label above the title, e.g. "New" or "Report". */

package/dist/mega-menu/index.js

@@ -2,7 +2,7 @@ import {
   MegaMenu,
   MegaMenuColumn,
   MegaMenuFeature
-} from "../chunk-G3CF7MBO.js";
+} from "../chunk-J6EO4R73.js";
 import "../chunk-WTD2YIAA.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";

package/dist/tooltip/index.d.ts

@@ -2,18 +2,30 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 /**
- * A small label that shows above a control on hover and on keyboard focus. Wrap the control (a button
- * or an icon button) in it and pass the same words as its accessible name in `text`. The bubble is
- * decorative (`aria-hidden`): the control's own `aria-label` is what a screen reader announces, so the
+ * A small label that shows above a control: after a short rest on hover, and at once on keyboard focus.
+ * Wrap the control (a button or an icon button) in it and pass the same words as its accessible name in
+ * `text`. The control is still the thing that's announced; the bubble is decorative (`aria-hidden`), so the
  * words aren't read twice.
  *
- * The bubble is positioned by the wrapper, so put the tooltip where it has room above: it's not
- * clipped by the wrapper's own box, but it is clipped by an ancestor with `overflow: hidden`.
+ * The bubble is `position: fixed` and placed from the wrapper's position when it shows, so a clipping
+ * ancestor (a card or panel with `overflow: hidden`) can't cut it off. It shows around a control that
+ * can't act right now too, as long as that control is focusable or hoverable (use `aria-disabled`, not
+ * the native `disabled`, which takes a control out of focus and pointer events).
  */
 declare class Tooltip extends LitElement {
     static styles: lit.CSSResult;
-    /** The words shown in the bubble: the same words as the control's accessible name. */
+    /** The words shown in the bubble: the same words as the control's accessible name, or the reason the
+     * control can't act right now. */
     text: string;
+    private bubble?;
+    private timer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private onPointerEnter;
+    private cancel;
+    private show;
+    private hide;
     render(): lit.TemplateResult<1>;
 }
 

package/dist/tooltip/index.js

@@ -1,6 +1,6 @@
 import {
   Tooltip
-} from "../chunk-XCA3XFFG.js";
+} from "../chunk-FML6AG2V.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyatronics/sankhya-cms",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "repository": {
     "type": "git",
     "url": "https://github.com/sankhyatronics/SankhyaCMS.git",

package/dist/chunk-XCA3XFFG.js

@@ -1,74 +0,0 @@
-import {
-  fontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
-import {
-  __decorateClass
-} from "./chunk-EUXUH3YW.js";
-
-// src/tooltip/Tooltip.ts
-import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-var Tooltip = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.text = "";
-  }
-  render() {
-    return html`<slot></slot><span class="bubble" part="bubble" aria-hidden="true">${this.text}</span>`;
-  }
-};
-Tooltip.styles = css`
-    ${fontFamilyStyles}
-
-    :host {
-      position: relative;
-      display: inline-flex;
-    }
-
-    .bubble {
-      position: absolute;
-      bottom: calc(100% + 6px);
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 20;
-      padding: var(--st-space-4) var(--st-space-8);
-      border-radius: var(--st-radius-xs);
-      background: var(--st-color-text-strong);
-      color: var(--st-color-on-solid);
-      font-size: var(--st-text-xs);
-      font-weight: var(--st-font-weight-medium);
-      line-height: 1.3;
-      white-space: nowrap;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.12s ease;
-    }
-
-    /* Hover waits a moment, so a passing pointer doesn't flash a label; keyboard focus shows it at once. */
-    :host(:hover) .bubble {
-      opacity: 1;
-      transition-delay: var(--st-tooltip-delay, 300ms);
-    }
-
-    :host(:focus-within) .bubble {
-      opacity: 1;
-      transition-delay: 0s;
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .bubble {
-        transition: none;
-      }
-    }
-  `;
-__decorateClass([
-  property({ type: String })
-], Tooltip.prototype, "text", 2);
-Tooltip = __decorateClass([
-  customElement("st-tooltip")
-], Tooltip);
-
-export {
-  Tooltip
-};
-//# sourceMappingURL=chunk-XCA3XFFG.js.map

package/dist/chunk-XCA3XFFG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tooltip/Tooltip.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A small label that shows above a control on hover and on keyboard focus. Wrap the control (a button\n * or an icon button) in it and pass the same words as its accessible name in `text`. The bubble is\n * decorative (`aria-hidden`): the control's own `aria-label` is what a screen reader announces, so the\n * words aren't read twice.\n *\n * The bubble is positioned by the wrapper, so put the tooltip where it has room above: it's not\n * clipped by the wrapper's own box, but it is clipped by an ancestor with `overflow: hidden`.\n */\n@customElement('st-tooltip')\nexport class Tooltip extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      position: relative;\n      display: inline-flex;\n    }\n\n    .bubble {\n      position: absolute;\n      bottom: calc(100% + 6px);\n      left: 50%;\n      transform: translateX(-50%);\n      z-index: 20;\n      padding: var(--st-space-4) var(--st-space-8);\n      border-radius: var(--st-radius-xs);\n      background: var(--st-color-text-strong);\n      color: var(--st-color-on-solid);\n      font-size: var(--st-text-xs);\n      font-weight: var(--st-font-weight-medium);\n      line-height: 1.3;\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 0.12s ease;\n    }\n\n    /* Hover waits a moment, so a passing pointer doesn't flash a label; keyboard focus shows it at once. */\n    :host(:hover) .bubble {\n      opacity: 1;\n      transition-delay: var(--st-tooltip-delay, 300ms);\n    }\n\n    :host(:focus-within) .bubble {\n      opacity: 1;\n      transition-delay: 0s;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .bubble {\n        transition: none;\n      }\n    }\n  `;\n\n  /** The words shown in the bubble: the same words as the control's accessible name. */\n  @property({ type: String })\n  text = '';\n\n  render() {\n    return html`<slot></slot><span class=\"bubble\" part=\"bubble\" aria-hidden=\"true\">${this.text}</span>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAcjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AAgDL,gBAAO;AAAA;AAAA,EAEP,SAAS;AACP,WAAO,0EAA0E,KAAK,IAAI;AAAA,EAC5F;AACF;AArDa,QACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CpB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA/Cf,QAgDX;AAhDW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}