npm - @sankhyatronics/sankhya-cms - Versions diffs - 0.1.15 → 0.1.18 - Mend

@sankhyatronics/sankhya-cms 0.1.15 → 0.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/custom-elements.json +202 -166
package/dist/chunk-FML6AG2V.js +107 -0
package/dist/chunk-FML6AG2V.js.map +1 -0
package/dist/{chunk-G3CF7MBO.js → chunk-J6EO4R73.js} +27 -1
package/dist/{chunk-G3CF7MBO.js.map → chunk-J6EO4R73.js.map} +1 -1
package/dist/index.js +2 -2
package/dist/mega-menu/index.d.ts +2 -2
package/dist/mega-menu/index.js +1 -1
package/dist/tooltip/index.d.ts +18 -6
package/dist/tooltip/index.js +1 -1
package/package.json +1 -1
package/dist/chunk-HO44NKJ5.js +0 -68
package/dist/chunk-HO44NKJ5.js.map +0 -1

package/custom-elements.json CHANGED Viewed

@@ -1031,375 +1031,375 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/content-block/ContentBlock.ts",
+      "path": "src/cookie-consent/CookieConsent.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",
+          "description": "Fixed bottom consent bar. The source read/wrote consent through a React `UserContext`; here the\nelement persists the choice itself in localStorage (`storage-key`, default the source's\n`sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice\nexists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The\ndefault slot replaces the message text.",
+          "name": "CookieConsent",
           "cssProperties": [
             {
-              "description": "Overrides the block's padding.",
-              "name": "--st-content-block-padding"
+              "description": "Overrides the bar's padding.",
+              "name": "--st-cookie-consent-padding"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "title",
+              "name": "message",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "title"
+              "attribute": "message"
             },
             {
               "kind": "field",
-              "name": "subtitle",
+              "name": "acceptButtonText",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "attribute": "subtitle"
+              "default": "'Accept'",
+              "attribute": "accept-button-text"
             },
             {
               "kind": "field",
-              "name": "contentSrc",
+              "name": "refuseButtonText",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "URL of a Markdown file.",
-              "attribute": "content-src"
+              "default": "'Refuse'",
+              "attribute": "refuse-button-text"
             },
             {
               "kind": "field",
-              "name": "content",
+              "name": "privacyPolicyLink",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Inline Markdown, used when `content-src` is not set.",
-              "attribute": "content"
+              "attribute": "privacy-policy-link"
             },
             {
               "kind": "field",
-              "name": "imageSrc",
+              "name": "privacyPolicyText",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "attribute": "image-src"
+              "default": "'Privacy Policy'",
+              "attribute": "privacy-policy-text"
             },
             {
               "kind": "field",
-              "name": "imageAlt",
+              "name": "storageKey",
+              "default": "'sankhya_ui_cookie_consent'",
+              "attribute": "storage-key",
               "type": {
                 "text": "string"
-              },
-              "default": "''",
-              "attribute": "image-alt"
+              }
             },
             {
               "kind": "field",
-              "name": "imageCaption",
+              "name": "consent",
               "type": {
-                "text": "string"
+                "text": "CookieConsentStatus | null"
               },
-              "default": "''",
-              "attribute": "image-caption"
+              "privacy": "private",
+              "default": "null",
+              "description": "The stored choice, or `null` while undecided (the bar is only shown then)."
             },
             {
-              "kind": "field",
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "readStored",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "CookieConsentStatus | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "choose",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
+              "parameters": [
+                {
+                  "name": "status",
+                  "type": {
+                    "text": "CookieConsentStatus"
+                  }
+                }
+              ]
             }
           ],
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "title"
-            },
+          "events": [
             {
-              "name": "subtitle",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "subtitle"
-            },
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "name": "content-src",
+              "name": "message",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "URL of a Markdown file.",
-              "fieldName": "contentSrc"
+              "fieldName": "message"
             },
             {
-              "name": "content",
+              "name": "accept-button-text",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Inline Markdown, used when `content-src` is not set.",
-              "fieldName": "content"
+              "default": "'Accept'",
+              "fieldName": "acceptButtonText"
             },
             {
-              "name": "image-src",
+              "name": "refuse-button-text",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "fieldName": "imageSrc"
+              "default": "'Refuse'",
+              "fieldName": "refuseButtonText"
             },
             {
-              "name": "image-alt",
+              "name": "privacy-policy-link",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "imageAlt"
+              "fieldName": "privacyPolicyLink"
             },
             {
-              "name": "image-caption",
+              "name": "privacy-policy-text",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "fieldName": "imageCaption"
+              "default": "'Privacy Policy'",
+              "fieldName": "privacyPolicyText"
             },
             {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "inverted"
+              "name": "storage-key",
+              "default": "DEFAULT_STORAGE_KEY",
+              "fieldName": "storageKey"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "st-content-block",
+          "tagName": "st-cookie-consent",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ContentBlock",
+          "name": "CookieConsent",
           "declaration": {
-            "name": "ContentBlock",
-            "module": "src/content-block/ContentBlock.ts"
+            "name": "CookieConsent",
+            "module": "src/cookie-consent/CookieConsent.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "st-content-block",
+          "name": "st-cookie-consent",
           "declaration": {
-            "name": "ContentBlock",
-            "module": "src/content-block/ContentBlock.ts"
+            "name": "CookieConsent",
+            "module": "src/cookie-consent/CookieConsent.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/cookie-consent/CookieConsent.ts",
+      "path": "src/content-block/ContentBlock.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Fixed bottom consent bar. The source read/wrote consent through a React `UserContext`; here the\nelement persists the choice itself in localStorage (`storage-key`, default the source's\n`sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice\nexists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The\ndefault slot replaces the message text.",
-          "name": "CookieConsent",
+          "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 bar's padding.",
-              "name": "--st-cookie-consent-padding"
+              "description": "Overrides the block's padding.",
+              "name": "--st-content-block-padding"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "message",
+              "name": "title",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "message"
+              "attribute": "title"
             },
             {
               "kind": "field",
-              "name": "acceptButtonText",
+              "name": "subtitle",
               "type": {
                 "text": "string"
               },
-              "default": "'Accept'",
-              "attribute": "accept-button-text"
+              "default": "''",
+              "attribute": "subtitle"
             },
             {
               "kind": "field",
-              "name": "refuseButtonText",
+              "name": "contentSrc",
               "type": {
                 "text": "string"
               },
-              "default": "'Refuse'",
-              "attribute": "refuse-button-text"
+              "default": "''",
+              "description": "URL of a Markdown file.",
+              "attribute": "content-src"
             },
             {
               "kind": "field",
-              "name": "privacyPolicyLink",
+              "name": "content",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "privacy-policy-link"
+              "description": "Inline Markdown, used when `content-src` is not set.",
+              "attribute": "content"
             },
             {
               "kind": "field",
-              "name": "privacyPolicyText",
+              "name": "imageSrc",
               "type": {
                 "text": "string"
               },
-              "default": "'Privacy Policy'",
-              "attribute": "privacy-policy-text"
+              "default": "''",
+              "attribute": "image-src"
             },
             {
               "kind": "field",
-              "name": "storageKey",
-              "default": "'sankhya_ui_cookie_consent'",
-              "attribute": "storage-key",
+              "name": "imageAlt",
               "type": {
                 "text": "string"
-              }
+              },
+              "default": "''",
+              "attribute": "image-alt"
             },
             {
               "kind": "field",
-              "name": "consent",
+              "name": "imageCaption",
               "type": {
-                "text": "CookieConsentStatus | null"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "null",
-              "description": "The stored choice, or `null` while undecided (the bar is only shown then)."
-            },
-            {
-              "kind": "method",
-              "name": "readStored",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "CookieConsentStatus | null"
-                }
-              }
+              "default": "''",
+              "attribute": "image-caption"
             },
             {
-              "kind": "method",
-              "name": "choose",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "status",
-                  "type": {
-                    "text": "CookieConsentStatus"
-                  }
-                }
-              ]
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
             }
           ],
-          "events": [
+          "attributes": [
             {
+              "name": "title",
               "type": {
-                "text": "CustomEvent"
-              }
-            }
-          ],
-          "attributes": [
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "title"
+            },
             {
-              "name": "message",
+              "name": "subtitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "message"
+              "fieldName": "subtitle"
             },
             {
-              "name": "accept-button-text",
+              "name": "content-src",
               "type": {
                 "text": "string"
               },
-              "default": "'Accept'",
-              "fieldName": "acceptButtonText"
+              "default": "''",
+              "description": "URL of a Markdown file.",
+              "fieldName": "contentSrc"
             },
             {
-              "name": "refuse-button-text",
+              "name": "content",
               "type": {
                 "text": "string"
               },
-              "default": "'Refuse'",
-              "fieldName": "refuseButtonText"
+              "default": "''",
+              "description": "Inline Markdown, used when `content-src` is not set.",
+              "fieldName": "content"
             },
             {
-              "name": "privacy-policy-link",
+              "name": "image-src",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "privacyPolicyLink"
+              "fieldName": "imageSrc"
             },
             {
-              "name": "privacy-policy-text",
+              "name": "image-alt",
               "type": {
                 "text": "string"
               },
-              "default": "'Privacy Policy'",
-              "fieldName": "privacyPolicyText"
+              "default": "''",
+              "fieldName": "imageAlt"
             },
             {
-              "name": "storage-key",
-              "default": "DEFAULT_STORAGE_KEY",
-              "fieldName": "storageKey"
+              "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-cookie-consent",
+          "tagName": "st-content-block",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "CookieConsent",
+          "name": "ContentBlock",
           "declaration": {
-            "name": "CookieConsent",
-            "module": "src/cookie-consent/CookieConsent.ts"
+            "name": "ContentBlock",
+            "module": "src/content-block/ContentBlock.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "st-cookie-consent",
+          "name": "st-content-block",
           "declaration": {
-            "name": "CookieConsent",
-            "module": "src/cookie-consent/CookieConsent.ts"
+            "name": "ContentBlock",
+            "module": "src/content-block/ContentBlock.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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

	@@ -1 +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":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement","LitElement","css","html","nothing","customElement","property","LitElement","html","nothing","css","property","customElement"]}
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 / tip: a light-blue card with dark text, like a tip panel on a page. /\n :host([variant='tip']) .card {\n gap: 0.5rem;\n padding: 1.25rem;\n border-radius: var(--st-radius-md);\n border: 1px solid var(--st-color-accent-border);\n background: var(--st-color-accent-subtle);\n color: var(--st-color-text);\n transition: border-color 0.2s ease;\n }\n\n :host([variant='tip']) .card:hover {\n border-color: var(--st-color-accent-muted);\n }\n\n :host([variant='tip']) .title {\n font-size: var(--st-text-lg);\n font-weight: var(--st-font-weight-semibold);\n color: var(--st-color-text-strong);\n }\n\n :host([variant='tip']) .eyebrow,\n :host([variant='tip']) .cta {\n color: var(--st-color-accent-text);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .image,\n :host([variant='overlay']) .card {\n transition: none;\n }\n }\n `;\n\n /* `story` (default), `overlay` (dark, over an image or gradient) or `tip` (light blue, for a hint). /\n @property({ type: String, reflect: true })\n variant: 'story' \| 'overlay' \| 'tip' = 'story';\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n description = '';\n\n /* Small label above the title, e.g. \"New\" or \"Report\". /\n @property({ type: String })\n eyebrow = '';\n\n @property({ type: String })\n href = '';\n\n /* `target` for the link. Defaults to `_blank` for an `http(s)` `href`, `_self` otherwise. /\n @property({ type: String })\n target = '';\n\n /* Image on top (`story`) or behind the text (`overlay`). /\n @property({ type: String, attribute: 'image-url' })\n imageUrl = '';\n\n @property({ type: String, attribute: 'image-alt' })\n imageAlt = '';\n\n /* Logo at the top of an `overlay` card. /\n @property({ type: String, attribute: 'logo-url' })\n logoUrl = '';\n\n @property({ type: String, attribute: 'logo-alt' })\n logoAlt = '';\n\n /* Call-to-action text at the bottom of the card; empty hides it. */\n @property({ type: String, attribute: 'cta-label' })\n ctaLabel = '';\n\n private get isExternal(): boolean {\n return this.href.startsWith('http');\n }\n\n private onClick = (event: MouseEvent): void => {\n if (this.isExternal) return;\n const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n detail: { href: this.href },\n bubbles: true,\n composed: true,\n cancelable: true\n });\n this.dispatchEvent(selectEvent);\n if (selectEvent.defaultPrevented) event.preventDefault();\n };\n\n render() {\n const target = this.target \|\| (this.isExternal ? '_blank' : '_self');\n const overlay = this.variant === 'overlay';\n const style = overlay && this.imageUrl ? `--st-mega-menu-feature-image:url(${JSON.stringify(this.imageUrl)})` : '';\n return html`\n <a\n part=\"card\"\n class=\"card\"\n style=${style}\n href=${this.href \|\| nothing}\n target=${target}\n rel=${target === '_blank' ? 'noopener noreferrer' : nothing}\n @click=${this.onClick}\n >\n ${overlay && this.logoUrl ? html`<img part=\"logo\" class=\"logo\" src=${this.logoUrl} alt=${this.logoAlt} />` : nothing}\n ${!overlay && this.imageUrl\n ? html`<img part=\"image\" class=\"image\" src=${this.imageUrl} alt=${this.imageAlt} loading=\"lazy\" />`\n : nothing}\n ${this.eyebrow ? html`<span part=\"eyebrow\" class=\"eyebrow\">${this.eyebrow}</span>` : nothing}\n ${this.title ? html`<p part=\"title\" class=\"title\">${this.title}</p>` : nothing}\n ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n ${this.ctaLabel ? html`<span part=\"cta\" class=\"cta\">${this.ctaLabel}</span>` : nothing}\n </a>\n `;\n }\n}\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement","LitElement","css","html","nothing","customElement","property","LitElement","html","nothing","css","property","customElement"]}

package/dist/index.js CHANGED Viewed

@@ -3,7 +3,7 @@ import {
 } from "./chunk-DH53HZPB.js";
 import {
   Tooltip
-} from "./chunk-HO44NKJ5.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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/package.json CHANGED Viewed

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

package/dist/chunk-HO44NKJ5.js DELETED Viewed

@@ -1,68 +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;
-    }
-    :host(:hover) .bubble,
-    :host(:focus-within) .bubble {
-      opacity: 1;
-    }
-    @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-HO44NKJ5.js.map

package/dist/chunk-HO44NKJ5.js.map DELETED Viewed

@@ -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 :host(:hover) .bubble,\n :host(:focus-within) .bubble {\n opacity: 1;\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;AA0CL,gBAAO;AAAA;AAAA,EAEP,SAAS;AACP,WAAO,0EAA0E,KAAK,IAAI;AAAA,EAC5F;AACF;AA/Ca,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;AAwCpB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAzCf,QA0CX;AA1CW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}