npm - @sankhyatronics/sankhya-cms - Versions diffs - 0.1.2 → 0.1.4 - Mend

@sankhyatronics/sankhya-cms 0.1.2 → 0.1.4

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 (37) hide show

package/custom-elements.json +2160 -1301
package/dist/{chunk-PKTRYUGP.js → chunk-5KHI36M5.js} +7 -2
package/dist/chunk-5KHI36M5.js.map +1 -0
package/dist/{chunk-FWIG6GEZ.js → chunk-5MTPMXAQ.js} +171 -5
package/dist/chunk-5MTPMXAQ.js.map +1 -0
package/dist/{chunk-TH5NZXA7.js → chunk-KHPJ5FAJ.js} +80 -4
package/dist/chunk-KHPJ5FAJ.js.map +1 -0
package/dist/chunk-MLF6L3KM.js +605 -0
package/dist/chunk-MLF6L3KM.js.map +1 -0
package/dist/{chunk-3TCP25JG.js → chunk-PB7ZPPLP.js} +9 -1
package/dist/chunk-PB7ZPPLP.js.map +1 -0
package/dist/{chunk-5DNVCMOO.js → chunk-S4ARRDAI.js} +2 -2
package/dist/{chunk-5UFRGZWG.js → chunk-TLHG33MM.js} +2 -2
package/dist/dropdown/index.d.ts +30 -2
package/dist/dropdown/index.js +2 -1
package/dist/header/index.js +2 -2
package/dist/index.d.ts +1 -0
package/dist/index.js +36 -28
package/dist/mega-menu/index.d.ts +141 -0
package/dist/mega-menu/index.js +14 -0
package/dist/mega-menu/index.js.map +1 -0
package/dist/menu-item/index.d.ts +3 -0
package/dist/menu-item/index.js +2 -1
package/dist/schema/index.d.ts +3 -0
package/dist/schema/index.js +3 -0
package/dist/schema/index.js.map +1 -1
package/dist/select/index.js +2 -2
package/dist/shared/icons.d.ts +3 -1
package/dist/shared/icons.js +3 -1
package/dist/testimonials/index.js +2 -2
package/package.json +6 -2
package/dist/chunk-3TCP25JG.js.map +0 -1
package/dist/chunk-FWIG6GEZ.js.map +0 -1
package/dist/chunk-PKTRYUGP.js.map +0 -1
package/dist/chunk-TH5NZXA7.js.map +0 -1
/package/dist/{chunk-5DNVCMOO.js.map → chunk-S4ARRDAI.js.map} +0 -0
/package/dist/{chunk-5UFRGZWG.js.map → chunk-TLHG33MM.js.map} +0 -0

package/dist/{chunk-PKTRYUGP.js → chunk-5KHI36M5.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import {
   chevronIcon,
   closeIcon,
   menuIcon
-} from "./chunk-3TCP25JG.js";
+} from "./chunk-PB7ZPPLP.js";
 import {
   BREAKPOINT_TABLET,
   buttonResetStyles,
@@ -115,6 +115,9 @@ var Header = class extends LitElement {
   }
   updated(changed) {
     if (changed.has("compact")) this.syncInlineDropdowns();
+    if (changed.has("mobileOpen") && !this.mobileOpen) {
+      for (const dropdown of this.inlinedDropdowns) dropdown.open = false;
+    }
   }
   /** Whether the visible menu items reach past the right edge of the menu row. Measured from the
    * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:
@@ -243,6 +246,8 @@ Header.styles = css`
     :host {
       display: flex;
       align-items: center;
+      /* The containing block of an st-dropdown[mega] panel, which spans the bar. */
+      position: relative;
       /* Spacing between brand, menu and utility controls is the rows' own margins (SankhyaUI's
          layout), not a flex gap. */
       gap: 0;
@@ -660,4 +665,4 @@ Header = __decorateClass([
 export {
   Header
 };
-//# sourceMappingURL=chunk-PKTRYUGP.js.map
+//# sourceMappingURL=chunk-5KHI36M5.js.map

package/dist/chunk-5KHI36M5.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { chevronIcon, closeIcon, menuIcon } from '../shared/icons';\r\nimport { BREAKPOINT_TABLET, buttonResetStyles, controlBaseStyles, dropdownPanelStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { LanguageChangedEventDetail } from './HeaderEvents';\r\n\r\n/**\r\n * The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\r\n * for primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\r\n * middle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\r\n * from `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\r\n * package's Lit conventions and this workspace's actual needs — that source component takes an\r\n * `imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\r\n * `title` is the primary brand prop here and `brand-image-url` is optional, mirroring\r\n * `st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\r\n * deliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\r\n * props — pick whichever fits a given app's header).\r\n *\r\n * Layout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\r\n * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\r\n * source) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\r\n * toggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\r\n * `inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\r\n * (`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\r\n * `BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\r\n * root can only ever assign a given light-DOM child to the *first* slot of a given name.\r\n *\r\n * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\r\n * `language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\r\n * rebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\r\n * as a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\r\n * This component has no translation logic itself; the consuming app owns what a language `code`\r\n * means and which content it re-renders in response.\r\n */\r\n@customElement('st-header')\r\nexport class Header extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: flex;\r\n align-items: center;\r\n /* The containing block of an st-dropdown[mega] panel, which spans the bar. */\r\n position: relative;\r\n /* Spacing between brand, menu and utility controls is the rows' own margins (SankhyaUI's\r\n layout), not a flex gap. */\r\n gap: 0;\r\n /* !important on the box-model properties only: a shadow host's own :host rule always loses\r\n * to ANY rule the consuming page has for the same property on that element, regardless of\r\n * specificity (see st-footer's own padding/border-top for the same fix). Without\r\n * box-sizing: border-box pinned here, a page that also sets its own padding on this host\r\n * (e.g. a p-2 utility class) adds that padding on TOP of the fixed 64px height instead of\r\n * being absorbed inside it — which is exactly what happens in Template Hub, the one app that\r\n * doesn't load Tailwind Preflight (Preflight's own box-sizing: border-box reset is what\r\n * silently keeps every other app's header at the intended 64px). */\r\n box-sizing: border-box !important;\r\n padding: 0 2rem !important;\r\n height: 64px !important;\r\n background: var(--st-color-surface);\r\n border-bottom: 1px solid var(--st-color-border) !important;\r\n ${rootFontFamilyStyles}\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n :host([sticky]) {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n color: var(--st-color-on-solid);\r\n border-bottom-color: transparent;\r\n }\r\n\r\n :host([sticky]),\r\n :host([transparent]),\r\n :host([hide-on-scroll]) {\r\n transition:\r\n background-color 0.3s ease,\r\n color 0.3s ease,\r\n box-shadow 0.3s ease,\r\n border-color 0.3s ease,\r\n transform 0.3s ease;\r\n }\r\n\r\n /* Once the page has scrolled, a sticky/fixed header lifts off the content. */\r\n :host([scrolled][sticky]),\r\n :host([scrolled][transparent]),\r\n :host([scrolled][hide-on-scroll]) {\r\n box-shadow: 0 4px 16px var(--st-shadow-color-md);\r\n border-bottom-color: transparent !important;\r\n }\r\n\r\n /* transparent: fixed over the top of the page (e.g. a dark hero), see-through until scrolled. */\r\n :host([transparent]) {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) {\r\n background: transparent;\r\n border-bottom-color: transparent !important;\r\n color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n /* Read by st-menu-item / st-dropdown triggers in the bar (their panels reset them). */\r\n --st-nav-color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n --st-nav-hover-bg: color-mix(in oklch, currentColor 14%, transparent);\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .utility-row {\r\n border-left-color: color-mix(in oklch, currentColor 35%, transparent);\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger {\r\n color: inherit;\r\n }\r\n\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger:hover,\r\n :host([transparent]:not([scrolled]):not([mobile-open])) .toggle:hover {\r\n background: color-mix(in oklch, currentColor 14%, transparent);\r\n }\r\n\r\n /* hide-on-scroll: slides away while scrolling down, back as soon as the user scrolls up. */\r\n :host([hide-on-scroll]:not([sticky]):not([transparent])) {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n :host([scroll-hidden]:not([mobile-open])) {\r\n transform: translateY(-100%);\r\n box-shadow: none;\r\n }\r\n\r\n .brand {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-10);\r\n flex: none;\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n .brand-mark {\r\n width: var(--st-size-28);\r\n height: var(--st-size-28);\r\n border-radius: var(--st-radius-sm);\r\n flex: none;\r\n object-fit: contain;\r\n }\r\n\r\n .brand-title {\r\n font-size: var(--st-text-xl);\r\n font-weight: var(--st-font-weight-bold);\r\n letter-spacing: var(--st-tracking-tight);\r\n white-space: nowrap;\r\n }\r\n\r\n /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's\r\n own flex children. Mobile (see below) turns this into the actual overlay box. */\r\n .mobile-panel {\r\n display: contents;\r\n }\r\n\r\n /* Desktop layout from SankhyaUI's Header: the menu starts 4rem after the brand and takes the\r\n free width; the utility controls sit after a vertical divider. Between 901px and 1200px the\r\n gaps tighten so the menu still fits down to the 900px hamburger breakpoint. */\r\n .menu-row {\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n gap: 1.5rem;\r\n min-width: 0;\r\n margin-left: 4rem;\r\n }\r\n\r\n .utility-row {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-left: 1.5rem;\r\n padding-left: 1.5rem;\r\n border-left: 1px solid var(--st-color-border);\r\n }\r\n\r\n :host([inverted]) .utility-row {\r\n border-left-color: currentColor;\r\n }\r\n\r\n .utility-row.empty {\r\n display: none;\r\n }\r\n\r\n @media (max-width: 1200px) {\r\n :host {\r\n padding: 0 1rem !important;\r\n }\r\n\r\n .menu-row {\r\n margin-left: 0.5rem;\r\n }\r\n\r\n .utility-row {\r\n margin-left: 0.5rem;\r\n padding-left: 0.5rem;\r\n }\r\n }\r\n\r\n @keyframes st-header-fade-in {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .toggle {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n flex: none;\r\n position: relative;\r\n z-index: 1002;\r\n width: var(--st-size-32);\r\n height: var(--st-size-32);\r\n margin-left: auto;\r\n padding: 0.5rem;\r\n border: 0;\r\n border-radius: var(--st-radius-sm);\r\n background: transparent;\r\n color: inherit;\r\n cursor: pointer;\r\n }\r\n\r\n .toggle:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n .lang-menu {\r\n position: relative;\r\n flex: none;\r\n }\r\n\r\n .lang-trigger {\r\n ${buttonResetStyles}\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-4);\r\n height: var(--st-size-32);\r\n padding: 0 var(--st-space-8);\r\n border-radius: var(--st-radius-sm);\r\n font-size: var(--st-text-base);\r\n font-weight: var(--st-font-weight-semibold);\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n .lang-trigger:hover {\r\n background: var(--st-color-hover);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n .lang-dropdown {\r\n ${dropdownPanelStyles}\r\n min-width: 140px;\r\n }\r\n\r\n .lang-option {\r\n ${buttonResetStyles}\r\n display: block;\r\n width: 100%;\r\n padding: var(--st-space-10) var(--st-space-14);\r\n font-size: var(--st-text-base);\r\n font-weight: var(--st-font-weight-semibold);\r\n text-align: left;\r\n color: inherit;\r\n }\r\n\r\n .lang-option:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n .lang-option.active {\r\n color: var(--st-color-accent-text);\r\n }\r\n\r\n /* Hamburger layout from SankhyaUI's Header: a full-screen layer under the toggle, menu above\r\n the utility controls, the menu's dropdowns opening in the flow (see syncInlineDropdowns). */\r\n @media (max-width: ${BREAKPOINT_TABLET}px) {\r\n :host {\r\n padding: 0 1rem !important;\r\n }\r\n\r\n .mobile-panel {\r\n display: none;\r\n }\r\n\r\n .toggle {\r\n display: inline-flex;\r\n }\r\n\r\n :host([mobile-open]) .mobile-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n position: fixed;\r\n inset: 0;\r\n background: var(--st-color-surface);\r\n padding: 5rem 1.5rem 2rem;\r\n overflow-y: auto;\r\n z-index: 1001;\r\n animation: st-header-fade-in 0.3s ease;\r\n }\r\n\r\n :host([mobile-open]) .menu-row,\r\n :host([mobile-open]) .utility-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 1.5rem;\r\n margin-left: 0;\r\n }\r\n\r\n :host([mobile-open]) .utility-row {\r\n padding: 1.5rem 0 0;\r\n border-left: 0;\r\n border-top: 1px solid var(--st-color-border);\r\n }\r\n\r\n /* Apps usually slot one flex-row wrapper per slot; stack its items as the source does. */\r\n :host([mobile-open]) ::slotted([slot='menu']),\r\n :host([mobile-open]) ::slotted([slot='utility']) {\r\n flex-direction: column !important;\r\n align-items: stretch !important;\r\n margin: 0 !important;\r\n }\r\n }\r\n\r\n /* The same collapsed layout, switched on by script when the menu no longer fits the bar at\r\n desktop width (see evaluateFit) — without it the menu spills over the utility controls. */\r\n :host([compact]) .mobile-panel {\r\n display: none;\r\n }\r\n\r\n :host([compact]) .toggle {\r\n display: inline-flex;\r\n }\r\n\r\n :host([compact][mobile-open]) .mobile-panel {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2rem;\r\n position: fixed;\r\n inset: 0;\r\n background: var(--st-color-surface);\r\n padding: 5rem 1.5rem 2rem;\r\n overflow-y: auto;\r\n z-index: 1001;\r\n animation: st-header-fade-in 0.3s ease;\r\n }\r\n\r\n :host([compact][mobile-open]) .menu-row,\r\n :host([compact][mobile-open]) .utility-row {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 1.5rem;\r\n margin-left: 0;\r\n }\r\n\r\n :host([compact][mobile-open]) .utility-row {\r\n padding: 1.5rem 0 0;\r\n border-left: 0;\r\n border-top: 1px solid var(--st-color-border);\r\n }\r\n\r\n :host([compact][mobile-open]) ::slotted([slot='menu']),\r\n :host([compact][mobile-open]) ::slotted([slot='utility']) {\r\n flex-direction: column !important;\r\n align-items: stretch !important;\r\n margin: 0 !important;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n :host,\r\n .mobile-panel {\r\n animation: none !important;\r\n transition: none !important;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n /** Optional logo image URL, shown before `title`. Omitted entirely when empty — none of this suite's apps has one today. Matches the source component's `imageSrc` (renamed here to pair with `title`/`logoHref`, since this component's only image use is the brand mark). */\r\n @property({ type: String, attribute: 'brand-image-url' })\r\n brandImageUrl = '';\r\n\r\n /** `alt` text for the brand image — matches the source component's `altText` (default `'Logo'`). */\r\n @property({ type: String, attribute: 'alt-text' })\r\n altText = 'Logo';\r\n\r\n /** Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise. */\r\n @property({ type: String })\r\n logoHref = '';\r\n\r\n /** `target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set. */\r\n @property({ type: String, attribute: 'logo-target' })\r\n logoTarget = '_self';\r\n\r\n /** Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`. */\r\n @property({ type: String, attribute: 'logo-class-name' })\r\n logoClassName = '';\r\n\r\n /** Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\r\n * source component's `inverted` (from its shared `BaseProps`). */\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n sticky = false;\r\n\r\n /**\r\n * Fixes the header over the top of the page and makes it see-through, with light text\r\n * (`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\r\n * header laid over a dark hero. It then takes its normal background and a shadow. The page\r\n * content starts under it, so the first section should leave room for the 64px bar.\r\n */\r\n @property({ type: Boolean, reflect: true })\r\n transparent = false;\r\n\r\n /** Slides the header out of view while the page scrolls down and back in when it scrolls up. */\r\n @property({ type: Boolean, reflect: true, attribute: 'hide-on-scroll' })\r\n hideOnScroll = false;\r\n\r\n /** Scroll distance in px after which the header counts as `scrolled`. */\r\n @property({ type: Number, attribute: 'scroll-threshold' })\r\n scrollThreshold = 8;\r\n\r\n /** True once the page has scrolled past `scroll-threshold`; reflected so pages can style `st-header[scrolled]`. Set by the header, never from outside. */\r\n @property({ type: Boolean, reflect: true })\r\n scrolled = false;\r\n\r\n /** True while `hide-on-scroll` has slid the header away. Set by the header, never from outside. */\r\n @property({ type: Boolean, reflect: true, attribute: 'scroll-hidden' })\r\n scrollHidden = false;\r\n\r\n private lastScrollY = 0;\r\n private scrollFrame = 0;\r\n\r\n private onScroll = (): void => {\r\n if (this.scrollFrame) return;\r\n this.scrollFrame = requestAnimationFrame(() => {\r\n this.scrollFrame = 0;\r\n const y = Math.max(0, window.scrollY);\r\n this.scrolled = y > this.scrollThreshold;\r\n if (this.hideOnScroll) {\r\n const delta = y - this.lastScrollY;\r\n // Ignore tiny jitters; never hide while still at the top of the page or with the menu open.\r\n if (Math.abs(delta) > 4) this.scrollHidden = delta > 0 && y > this.offsetHeight && !this.mobileOpen;\r\n } else {\r\n this.scrollHidden = false;\r\n }\r\n this.lastScrollY = y;\r\n });\r\n };\r\n\r\n /**\r\n * Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\r\n * when empty or when only one language is offered (same convention as `st-app-header`'s\r\n * `languages`, which this reuses verbatim). This component has no translation logic itself —\r\n * selecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\r\n * what `code` actually means and which content it re-renders.\r\n */\r\n @property({ attribute: false })\r\n languages: { code: string; label: string }[] = [];\r\n\r\n @property({ type: String, attribute: 'current-language-code' })\r\n currentLanguageCode = '';\r\n\r\n @property({ type: String, attribute: 'language-menu-label' })\r\n languageMenuLabel = 'Language';\r\n\r\n /** Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\n * the `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\n * outside. */\r\n @property({ type: Boolean, reflect: true, attribute: 'mobile-open' })\r\n mobileOpen = false;\r\n\r\n /** True while the menu doesn't fit the bar at the current width: the header then shows the same\r\n * hamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside. */\r\n @property({ type: Boolean, reflect: true })\r\n compact = false;\r\n\r\n @state() private languageMenuOpen = false;\r\n\r\n /** Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden. */\r\n @state() private hasUtility = false;\r\n\r\n private resizeObserver?: ResizeObserver;\r\n\r\n /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */\r\n private narrowQuery?: MediaQueryList;\r\n\r\n /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's\r\n * own `inline` setting is left alone. */\r\n private inlinedDropdowns = new Set<HTMLElement & { inline: boolean; open: boolean }>();\r\n\r\n /** While the hamburger layout is on, the dropdowns in the header open in the flow of the\r\n * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */\r\n private syncInlineDropdowns = (): void => {\r\n const collapsed = this.compact || !!this.narrowQuery?.matches;\r\n const dropdowns = Array.from(this.querySelectorAll('st-dropdown')) as (HTMLElement & { inline: boolean; open: boolean })[];\r\n if (collapsed) {\r\n for (const dropdown of dropdowns) {\r\n if (dropdown.inline) continue;\r\n dropdown.inline = true;\r\n this.inlinedDropdowns.add(dropdown);\r\n }\r\n } else {\r\n for (const dropdown of this.inlinedDropdowns) dropdown.inline = false;\r\n this.inlinedDropdowns.clear();\r\n }\r\n };\r\n\r\n private onUtilitySlotChange = (event: Event): void => {\r\n this.hasUtility = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\r\n this.evaluateFit();\r\n };\r\n\r\n private onMenuSlotChange = (): void => {\r\n this.evaluateFit();\r\n this.syncInlineDropdowns();\r\n };\r\n\r\n protected updated(changed: Map<string, unknown>): void {\r\n if (changed.has('compact')) this.syncInlineDropdowns();\r\n // A mega dropdown's drill-down panel would otherwise still cover the menu next time it opens.\r\n if (changed.has('mobileOpen') && !this.mobileOpen) {\r\n for (const dropdown of this.inlinedDropdowns) dropdown.open = false;\r\n }\r\n }\r\n\r\n /** The bar width at which the menu last overflowed — the bar only expands again once it is\r\n * clearly wider than this, so it can't flip back and forth right at the threshold. */\r\n private collapsedAtWidth = 0;\r\n\r\n /** Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\r\n * once there is room. The collapsed layout hides the menu, so the room it needs can't be\r\n * measured then; the width remembered when it collapsed stands in for it. */\r\n private evaluateFit = (): void => {\r\n const width = this.clientWidth;\r\n if (this.compact) {\r\n if (width > this.collapsedAtWidth + 24) {\r\n this.compact = false;\r\n this.mobileOpen = false;\r\n void this.updateComplete.then(this.evaluateFit);\r\n }\r\n return;\r\n }\r\n if (this.menuOverflows()) {\r\n this.collapsedAtWidth = width;\r\n this.compact = true;\r\n }\r\n };\r\n\r\n /** Whether the visible menu items reach past the right edge of the menu row. Measured from the\r\n * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\r\n * a closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\r\n * report overflow at any width. */\r\n private menuOverflows(): boolean {\r\n const row = this.renderRoot.querySelector<HTMLElement>('.menu-row');\r\n const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\r\n if (!row || !slot) return false;\r\n const limit = row.getBoundingClientRect().right + 1;\r\n let right = 0;\r\n for (const el of slot.assignedElements({ flatten: true })) {\r\n for (const box of [el, ...Array.from(el.children)]) {\r\n const rect = box.getBoundingClientRect();\r\n if (rect.width > 0) right = Math.max(right, rect.right);\r\n }\r\n }\r\n return right > limit;\r\n }\r\n\r\n protected firstUpdated(): void {\r\n this.resizeObserver = new ResizeObserver(this.evaluateFit);\r\n this.resizeObserver.observe(this);\r\n this.evaluateFit();\r\n this.syncInlineDropdowns();\r\n }\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n window.addEventListener('keydown', this.closeOnEscape);\r\n window.addEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n window.addEventListener('scroll', this.onScroll, { passive: true });\r\n this.onScroll();\r\n this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);\r\n this.narrowQuery.addEventListener('change', this.syncInlineDropdowns);\r\n // Menus often render their dropdowns after the header (e.g. once the user's role loads),\r\n // deeper than a slotchange reports.\r\n this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);\r\n this.lightDomObserver.observe(this, { childList: true, subtree: true });\r\n }\r\n\r\n private lightDomObserver?: MutationObserver;\r\n\r\n disconnectedCallback(): void {\r\n this.lightDomObserver?.disconnect();\r\n this.narrowQuery?.removeEventListener('change', this.syncInlineDropdowns);\r\n this.resizeObserver?.disconnect();\r\n window.removeEventListener('keydown', this.closeOnEscape);\r\n window.removeEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n window.removeEventListener('scroll', this.onScroll);\r\n if (this.scrollFrame) cancelAnimationFrame(this.scrollFrame);\r\n this.scrollFrame = 0;\r\n super.disconnectedCallback();\r\n }\r\n\r\n private closeOnEscape = (event: KeyboardEvent): void => {\r\n if (this.mobileOpen && event.key === 'Escape') this.mobileOpen = false;\r\n if (this.languageMenuOpen && event.key === 'Escape') this.languageMenuOpen = false;\r\n };\r\n\r\n private closeLanguageMenuOnOutsideClick = (event: Event): void => {\r\n if (this.languageMenuOpen && !event.composedPath().includes(this)) this.languageMenuOpen = false;\r\n };\r\n\r\n private renderLanguageMenu() {\r\n if (this.languages.length < 2) return nothing;\r\n const current = this.languages.find((lang) => lang.code === this.currentLanguageCode);\r\n return html`\r\n <div class=\"lang-menu\" part=\"language-menu\">\r\n <button\r\n part=\"language-menu-trigger\"\r\n type=\"button\"\r\n class=\"lang-trigger\"\r\n aria-label=${this.languageMenuLabel}\r\n aria-expanded=${this.languageMenuOpen}\r\n @click=${(event: Event) => {\r\n event.stopPropagation();\r\n this.languageMenuOpen = !this.languageMenuOpen;\r\n }}\r\n >\r\n <span part=\"language-menu-current\">${current?.label ?? this.languageMenuLabel}</span>\r\n ${chevronIcon('down', 10)}\r\n </button>\r\n ${this.languageMenuOpen\r\n ? html`\r\n <div part=\"language-dropdown\" class=\"lang-dropdown\">\r\n ${this.languages.map(\r\n (lang) => html`\r\n <button\r\n part=\"language-option\"\r\n type=\"button\"\r\n class=\"lang-option ${lang.code === this.currentLanguageCode ? 'active' : ''}\"\r\n aria-current=${lang.code === this.currentLanguageCode}\r\n @click=${() => this.onLanguageSelect(lang.code)}\r\n >\r\n ${lang.label}\r\n </button>\r\n `\r\n )}\r\n </div>\r\n `\r\n : nothing}\r\n </div>\r\n `;\r\n }\r\n\r\n private onLanguageSelect(code: string): void {\r\n this.languageMenuOpen = false;\r\n if (code === this.currentLanguageCode) return;\r\n this.dispatchEvent(new CustomEvent<LanguageChangedEventDetail>('language-change', { detail: { code }, bubbles: true, composed: true }));\r\n }\r\n\r\n private renderBrand() {\r\n const content = html`\r\n ${this.brandImageUrl ? html`<img part=\"brand-mark\" class=\"brand-mark\" src=${this.brandImageUrl} alt=${this.altText} /> ` : nothing}\r\n <span part=\"brand-title\" class=\"brand-title\">${this.title}</span>\r\n `;\r\n return this.logoHref\r\n ? html`<a part=\"brand\" class=\"brand ${this.logoClassName}\" href=${this.logoHref} target=${this.logoTarget}>${content}</a>`\r\n : html`<div part=\"brand\" class=\"brand ${this.logoClassName}\">${content}</div>`;\r\n }\r\n\r\n render() {\r\n return html`\r\n ${this.renderBrand()}\r\n\r\n <div class=\"mobile-panel\" part=\"mobile-panel\" @click=${() => (this.mobileOpen = false)}>\r\n <div class=\"menu-row\" part=\"menu-row\"><slot name=\"menu\" @slotchange=${this.onMenuSlotChange}></slot></div>\r\n <div class=\"utility-row ${this.hasUtility || this.languages.length >= 2 ? '' : 'empty'}\" part=\"utility-row\">\r\n ${this.renderLanguageMenu()}<slot name=\"utility\" @slotchange=${this.onUtilitySlotChange}></slot>\r\n </div>\r\n </div>\r\n\r\n <button\r\n part=\"toggle\"\r\n type=\"button\"\r\n class=\"toggle\"\r\n aria-label=${this.mobileOpen ? 'Close menu' : 'Open menu'}\r\n aria-expanded=${this.mobileOpen}\r\n @click=${() => (this.mobileOpen = !this.mobileOpen)}\r\n >\r\n ${this.mobileOpen ? closeIcon() : menuIcon()}\r\n </button>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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iB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAuBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA8LpB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBjB,mBAAmB;A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","names":[]}

package/dist/{chunk-FWIG6GEZ.js → chunk-5MTPMXAQ.js} RENAMED Viewed

@@ -1,3 +1,6 @@
+import {
+  chevronIcon
+} from "./chunk-PB7ZPPLP.js";
 import {
   buttonResetStyles,
   controlBaseStyles,
@@ -27,8 +30,33 @@ var Dropdown = class extends LitElement {
     this.active = false;
     this.inline = false;
     this.open = false;
+    this.mega = false;
+    this.openOnHover = false;
+    this.backLabel = "Back";
+    this.hoverTimer = 0;
+    /** When hover last opened the panel — a click right after that keeps it open instead of toggling it shut. */
+    this.hoverOpenedAt = 0;
     this.hasContent = false;
     this.hasIcon = false;
+    /** Short delays so a pointer crossing the gap between trigger and panel doesn't close it. */
+    this.onPointerEnter = (event) => {
+      if (!this.hovers(event)) return;
+      clearTimeout(this.hoverTimer);
+      this.hoverTimer = window.setTimeout(() => {
+        if (!this.open) this.hoverOpenedAt = Date.now();
+        this.setOpen(true);
+      }, 80);
+    };
+    this.onPointerLeave = (event) => {
+      if (!this.hovers(event)) return;
+      clearTimeout(this.hoverTimer);
+      this.hoverTimer = window.setTimeout(() => this.setOpen(false), 200);
+    };
+    this.onBackClick = (event) => {
+      event.stopPropagation();
+      this.setOpen(false);
+      this.trigger()?.focus();
+    };
     this.closeOnOutsideMouseDown = (event) => {
       if (this.open && !event.composedPath().includes(this)) this.setOpen(false);
     };
@@ -74,10 +102,18 @@ var Dropdown = class extends LitElement {
       event.stopPropagation();
       if (!this.hasContent) return;
       event.preventDefault();
+      clearTimeout(this.hoverTimer);
+      if (this.open && Date.now() - this.hoverOpenedAt < 400) return;
       this.setOpen(!this.open);
     };
-    /** A click anywhere inside the panel closes it, as in the source. */
-    this.onPanelClick = () => {
+    /** A click anywhere inside the panel closes it, as in the source — for `mega`, only a click on a
+     * link: a big panel has headings and gaps, and a click there shouldn't also close st-header's
+     * hamburger layer. */
+    this.onPanelClick = (event) => {
+      if (this.mega && !event.composedPath().some((node) => node instanceof HTMLAnchorElement)) {
+        event.stopPropagation();
+        return;
+      }
       this.setOpen(false);
     };
     this.onContentSlotChange = (event) => {
@@ -93,10 +129,15 @@ var Dropdown = class extends LitElement {
     super.connectedCallback();
     document.addEventListener("mousedown", this.closeOnOutsideMouseDown);
     window.addEventListener("keydown", this.closeOnEscape);
+    this.addEventListener("pointerenter", this.onPointerEnter);
+    this.addEventListener("pointerleave", this.onPointerLeave);
   }
   disconnectedCallback() {
     document.removeEventListener("mousedown", this.closeOnOutsideMouseDown);
     window.removeEventListener("keydown", this.closeOnEscape);
+    this.removeEventListener("pointerenter", this.onPointerEnter);
+    this.removeEventListener("pointerleave", this.onPointerLeave);
+    clearTimeout(this.hoverTimer);
     if (Dropdown.openDropdown === this) Dropdown.openDropdown = null;
     super.disconnectedCallback();
   }
@@ -115,6 +156,9 @@ var Dropdown = class extends LitElement {
     this.open = open;
     this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open }, bubbles: true, composed: true }));
   }
+  hovers(event) {
+    return this.openOnHover && !this.inline && !this.disabled && this.hasContent && event.pointerType === "mouse";
+  }
   trigger() {
     return this.renderRoot.querySelector(".menu-title");
   }
@@ -123,7 +167,7 @@ var Dropdown = class extends LitElement {
   panelItems() {
     const slot = this.renderRoot.querySelector(".menu-dropdown slot");
     if (!slot) return [];
-    const selector = 'st-menu-item, st-menu-grid-item, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const selector = 'st-menu-item, st-menu-grid-item, st-mega-menu-feature, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])';
     const items = [];
     for (const el of slot.assignedElements({ flatten: true })) {
       if (el.matches(selector)) items.push(el);
@@ -186,6 +230,14 @@ var Dropdown = class extends LitElement {
           @click=${this.onPanelClick}
           @keydown=${this.onPanelKeyDown}
         >
+          ${this.mega ? html`
+                <div class="mega-back-bar" part="back-bar">
+                  <button type="button" class="mega-back" part="back" @click=${this.onBackClick}>
+                    ${chevronIcon("left", 16)} ${this.backLabel}
+                  </button>
+                </div>
+                ${this.label ? html`<p class="mega-heading" part="mobile-heading">${this.label}</p>` : nothing}
+              ` : nothing}
           <slot @slotchange=${this.onContentSlotChange}></slot>
         </div>
       </div>
@@ -336,9 +388,114 @@ Dropdown.styles = css`
       pointer-events: auto;
     }
+    /* Mega (okta.com): the panel is a large rounded card floating under the whole bar, centred on
+       the nearest positioned ancestor (st-header) instead of hanging off the trigger — the host
+       stops being the panel's containing block. */
+    :host([mega]:not([inline])) {
+      position: static;
+    }
+    :host([mega]:not([inline])) .menu-dropdown {
+      top: calc(100% + var(--st-mega-menu-gap, 12px));
+      left: var(--st-mega-menu-inset, 1rem);
+      right: var(--st-mega-menu-inset, 1rem);
+      max-width: var(--st-mega-menu-max-width, 1400px);
+      margin: 0 auto;
+      padding: 0;
+      max-height: calc(100dvh - var(--st-mega-menu-offset, 96px));
+      overflow-y: auto;
+      border: 0;
+      border-radius: var(--st-mega-menu-radius, 24px);
+      box-shadow: 0 24px 48px var(--st-shadow-color-md);
+    }
+    /* The open section's trigger becomes an accent pill. */
+    :host([mega]:not([inline])) .menu-title {
+      border-radius: 9999px;
+    }
+    :host([mega]:not([inline])) .menu-title[aria-expanded='true'] {
+      background: var(--st-color-accent);
+      color: var(--st-color-on-solid);
+    }
+    .mega-back-bar,
+    .mega-heading {
+      display: none;
+    }
+    /* Mega in st-header's hamburger panel: rather than an accordion, the panel slides in over the
+       whole screen with a Back button (okta.com's phone menu). Fixed to the viewport, stacked
+       inside the header's own full-screen layer, so the header's close toggle stays on top. */
+    :host([mega][inline]) .menu-dropdown {
+      display: block;
+      position: fixed;
+      inset: 0;
+      z-index: 1;
+      padding: 0 1.5rem 2rem;
+      overflow-y: auto;
+      border: 0;
+      border-radius: 0;
+      visibility: hidden;
+      transform: translateX(100%);
+      transition:
+        transform 0.3s ease,
+        visibility 0s linear 0.3s;
+    }
+    :host([mega][inline]) .menu-dropdown.show {
+      visibility: visible;
+      transform: none;
+      transition-delay: 0s;
+    }
+    :host([mega][inline]) .mega-back-bar {
+      display: flex;
+      align-items: center;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      height: 64px;
+      margin: 0 -1.5rem;
+      padding: 0 1rem;
+      background: inherit;
+      border-bottom: 1px solid var(--st-color-border);
+    }
+    .mega-back {
+      ${buttonResetStyles}
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      height: 40px;
+      padding: 0 12px 0 6px;
+      border-radius: var(--st-radius-sm);
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--st-color-text-strong);
+    }
+    .mega-back:hover {
+      background: var(--st-color-hover);
+    }
+    :host([mega][inline]) .mega-heading {
+      display: block;
+      margin: 1.25rem 0 0.75rem;
+      font-size: 1.375rem;
+      font-weight: 600;
+      color: var(--st-color-text-strong);
+    }
+    /* The drill-down replaces the trigger's open state, so the caret points the way it goes. */
+    :host([mega][inline]) .arrow {
+      transform: rotate(-90deg);
+    }
     @media (prefers-reduced-motion: reduce) {
       .menu-dropdown,
-      .arrow {
+      .arrow,
+      :host([mega][inline]) .menu-dropdown {
         transition: none;
       }
     }
@@ -385,6 +542,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Dropdown.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Dropdown.prototype, "mega", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "open-on-hover" })
+], Dropdown.prototype, "openOnHover", 2);
+__decorateClass([
+  property({ type: String, attribute: "back-label" })
+], Dropdown.prototype, "backLabel", 2);
 __decorateClass([
   state()
 ], Dropdown.prototype, "hasContent", 2);
@@ -398,4 +564,4 @@ Dropdown = __decorateClass([
 export {
   Dropdown
 };
-//# sourceMappingURL=chunk-FWIG6GEZ.js.map
+//# sourceMappingURL=chunk-5MTPMXAQ.js.map

package/dist/chunk-5MTPMXAQ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { chevronIcon } from '../shared/icons';\r\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { DropdownToggleEventDetail } from './DropdownEvents';\r\n\r\n/**\r\n * A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\r\n * action menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\r\n * React `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\r\n * (`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\r\n *\r\n * - only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\r\n * provider element is needed);\r\n * - a mousedown outside, Escape, or a click inside the panel closes it;\r\n * - an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\r\n * - `inline` opens the panel in the flow, the source's `.touch-device` layout.\r\n *\r\n * Colors and the panel's surface come from the suite theme (the source left those to the\r\n * consumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\r\n * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\r\n * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\r\n * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\r\n * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event — plus\r\n * `mega` and `open-on-hover` for an okta.com-style mega menu (see `st-mega-menu`).\r\n *\r\n * @cssprop --st-mega-menu-max-width - Maximum width of a `mega` panel (default `1400px`).\r\n * @cssprop --st-mega-menu-inset - Minimum space between a `mega` panel and the header's sides (default `1rem`).\r\n * @cssprop --st-mega-menu-gap - Space between the header and a `mega` panel (default `12px`).\r\n * @cssprop --st-mega-menu-radius - Corner radius of a `mega` panel (default `24px`).\r\n */\r\n@customElement('st-dropdown')\r\nexport class Dropdown extends LitElement {\r\n /** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */\r\n private static openDropdown: Dropdown | null = null;\r\n\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: inline-block;\r\n position: relative;\r\n ${fontFamilyStyles}\r\n }\r\n\r\n .menu-title {\r\n ${buttonResetStyles}\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n min-height: 40px;\r\n padding: 12px;\r\n gap: 8px;\r\n text-align: center;\r\n width: fit-content;\r\n border-radius: var(--st-radius-sm);\r\n /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\r\n color: var(--st-nav-color, var(--st-color-text));\r\n font-size: 0.875rem;\r\n text-decoration: none;\r\n white-space: nowrap;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .menu-title:hover,\r\n .menu-title[aria-expanded='true'] {\r\n background: var(--st-nav-hover-bg, var(--st-color-hover));\r\n color: var(--st-nav-color, var(--st-color-text-strong));\r\n }\r\n\r\n :host([active]) .menu-title {\r\n background: var(--st-color-accent-subtle);\r\n color: var(--st-color-accent-text);\r\n }\r\n\r\n :host([disabled]) .menu-title {\r\n color: var(--st-color-text-muted);\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n\r\n .icon {\r\n display: inline-flex;\r\n flex: none;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .icon[hidden] {\r\n display: none;\r\n }\r\n\r\n .arrow {\r\n display: inline-block;\r\n margin-left: 8px;\r\n font-size: 0.75rem;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .menu-title[aria-expanded='true'] .arrow {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .menu-dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n z-index: 100;\r\n padding: 16px;\r\n background: var(--st-color-surface);\r\n color: var(--st-color-text);\r\n /* The panel has its own surface: items in it never take the bar's nav colours. */\r\n --st-nav-color: initial;\r\n --st-nav-hover-bg: initial;\r\n border: 1px solid var(--st-color-border);\r\n border-radius: var(--st-radius-sm);\r\n box-shadow: 0 4px 16px var(--st-shadow-color-sm);\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateY(-10px);\r\n /* visibility flips at once on open (so keyboard focus can move into the panel on the same\r\n frame) and only after the 0.3s fade on close. */\r\n transition:\r\n opacity 0.3s ease,\r\n transform 0.3s ease,\r\n visibility 0s linear 0.3s;\r\n pointer-events: none;\r\n }\r\n\r\n .menu-dropdown.align-right {\r\n left: auto;\r\n right: 0;\r\n }\r\n\r\n .menu-dropdown.show {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n pointer-events: auto;\r\n transition-delay: 0s;\r\n }\r\n\r\n /* Inline: the panel opens in the flow under its trigger and pushes what follows down, instead\r\n of floating — the source's .touch-device layout. st-header turns this on for its menu while\r\n the hamburger panel is showing. */\r\n :host([inline]) {\r\n display: block;\r\n }\r\n\r\n :host([inline]) .menu-title {\r\n width: 100%;\r\n justify-content: flex-start;\r\n }\r\n\r\n :host([inline]) .arrow {\r\n margin-left: auto;\r\n }\r\n\r\n :host([inline]) .menu-dropdown {\r\n display: none;\r\n position: relative;\r\n top: auto;\r\n left: auto;\r\n right: auto;\r\n width: 100%;\r\n box-sizing: border-box;\r\n box-shadow: none;\r\n opacity: 1;\r\n visibility: visible;\r\n transform: none;\r\n }\r\n\r\n :host([inline]) .menu-dropdown.show {\r\n display: block;\r\n pointer-events: auto;\r\n }\r\n\r\n /* Mega (okta.com): the panel is a large rounded card floating under the whole bar, centred on\r\n the nearest positioned ancestor (st-header) instead of hanging off the trigger — the host\r\n stops being the panel's containing block. */\r\n :host([mega]:not([inline])) {\r\n position: static;\r\n }\r\n\r\n :host([mega]:not([inline])) .menu-dropdown {\r\n top: calc(100% + var(--st-mega-menu-gap, 12px));\r\n left: var(--st-mega-menu-inset, 1rem);\r\n right: var(--st-mega-menu-inset, 1rem);\r\n max-width: var(--st-mega-menu-max-width, 1400px);\r\n margin: 0 auto;\r\n padding: 0;\r\n max-height: calc(100dvh - var(--st-mega-menu-offset, 96px));\r\n overflow-y: auto;\r\n border: 0;\r\n border-radius: var(--st-mega-menu-radius, 24px);\r\n box-shadow: 0 24px 48px var(--st-shadow-color-md);\r\n }\r\n\r\n /* The open section's trigger becomes an accent pill. */\r\n :host([mega]:not([inline])) .menu-title {\r\n border-radius: 9999px;\r\n }\r\n\r\n :host([mega]:not([inline])) .menu-title[aria-expanded='true'] {\r\n background: var(--st-color-accent);\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .mega-back-bar,\r\n .mega-heading {\r\n display: none;\r\n }\r\n\r\n /* Mega in st-header's hamburger panel: rather than an accordion, the panel slides in over the\r\n whole screen with a Back button (okta.com's phone menu). Fixed to the viewport, stacked\r\n inside the header's own full-screen layer, so the header's close toggle stays on top. */\r\n :host([mega][inline]) .menu-dropdown {\r\n display: block;\r\n position: fixed;\r\n inset: 0;\r\n z-index: 1;\r\n padding: 0 1.5rem 2rem;\r\n overflow-y: auto;\r\n border: 0;\r\n border-radius: 0;\r\n visibility: hidden;\r\n transform: translateX(100%);\r\n transition:\r\n transform 0.3s ease,\r\n visibility 0s linear 0.3s;\r\n }\r\n\r\n :host([mega][inline]) .menu-dropdown.show {\r\n visibility: visible;\r\n transform: none;\r\n transition-delay: 0s;\r\n }\r\n\r\n :host([mega][inline]) .mega-back-bar {\r\n display: flex;\r\n align-items: center;\r\n position: sticky;\r\n top: 0;\r\n z-index: 1;\r\n height: 64px;\r\n margin: 0 -1.5rem;\r\n padding: 0 1rem;\r\n background: inherit;\r\n border-bottom: 1px solid var(--st-color-border);\r\n }\r\n\r\n .mega-back {\r\n ${buttonResetStyles}\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n height: 40px;\r\n padding: 0 12px 0 6px;\r\n border-radius: var(--st-radius-sm);\r\n font-size: 0.875rem;\r\n font-weight: 600;\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n .mega-back:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n :host([mega][inline]) .mega-heading {\r\n display: block;\r\n margin: 1.25rem 0 0.75rem;\r\n font-size: 1.375rem;\r\n font-weight: 600;\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n /* The drill-down replaces the trigger's open state, so the caret points the way it goes. */\r\n :host([mega][inline]) .arrow {\r\n transform: rotate(-90deg);\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .menu-dropdown,\r\n .arrow,\r\n :host([mega][inline]) .menu-dropdown {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** Trigger label text (source: `title`, renamed because `title` is the native tooltip\r\n * attribute). Leave empty to show only `slot=\"icon\"`. */\r\n @property({ type: String })\r\n label = '';\r\n\r\n /** Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in\r\n * the source); with none it navigates. */\r\n @property({ type: String })\r\n href = '';\r\n\r\n @property({ type: String, attribute: 'icon-position' })\r\n iconPosition: 'left' | 'right' = 'left';\r\n\r\n /** Inline `width`/`height` of the `slot=\"icon\"` wrapper (source: `iconSize`, default `1.2rem`). */\r\n @property({ type: String, attribute: 'icon-size' })\r\n iconSize = '1.2rem';\r\n\r\n /** Inline `color` of the `slot=\"icon\"` wrapper (source: `iconColor`). */\r\n @property({ type: String, attribute: 'icon-color' })\r\n iconColor = 'currentColor';\r\n\r\n /** Which edge of the trigger the panel lines up with. */\r\n @property({ type: String })\r\n align: 'left' | 'right' = 'left';\r\n\r\n /** `target` of an `href` trigger (source default `_self`). */\r\n @property({ type: String })\r\n target = '_self';\r\n\r\n /** Extra class(es) on the trigger (source: `className`; a `class` on `st-dropdown` styles the host). */\r\n @property({ type: String, attribute: 'trigger-class-name' })\r\n triggerClassName = '';\r\n\r\n /** Extra class(es) on the panel (source: `itemGroupClassName`). */\r\n @property({ type: String, attribute: 'item-group-class-name' })\r\n itemGroupClassName = '';\r\n\r\n /** Unused, as in the source (`itemClassName` is never read there); kept for prop parity. */\r\n @property({ type: String, attribute: 'item-class-name' })\r\n itemClassName = '';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n disabled = false;\r\n\r\n /** Highlights the trigger as the current section (e.g. the current page is one of its items). */\r\n @property({ type: Boolean, reflect: true })\r\n active = false;\r\n\r\n /** Opens the panel in the flow under the trigger instead of floating over the page (see the\r\n * styles). `st-header` sets this on its own menu's dropdowns while its hamburger panel shows. */\r\n @property({ type: Boolean, reflect: true })\r\n inline = false;\r\n\r\n /** Whether the panel is showing. Follows user toggles; may also be set from outside. */\r\n @property({ type: Boolean, reflect: true })\r\n open = false;\r\n\r\n /**\r\n * Mega-menu panel (okta.com style), typically holding an `st-mega-menu`: the panel spans the\r\n * full width of the nearest positioned ancestor — `st-header` — right under it, instead of\r\n * hanging off the trigger. In `st-header`'s hamburger layout (`inline`) it slides in over the\r\n * screen with a Back button rather than opening as an accordion. A click inside the panel only\r\n * closes it when it lands on a link.\r\n */\r\n @property({ type: Boolean, reflect: true })\r\n mega = false;\r\n\r\n /** Opens the panel while a mouse hovers the trigger or panel (touch and keyboard still click). Off while `inline`. */\r\n @property({ type: Boolean, attribute: 'open-on-hover' })\r\n openOnHover = false;\r\n\r\n /** Text of the Back button in the `mega` + `inline` drill-down panel. */\r\n @property({ type: String, attribute: 'back-label' })\r\n backLabel = 'Back';\r\n\r\n private hoverTimer = 0;\r\n\r\n /** When hover last opened the panel — a click right after that keeps it open instead of toggling it shut. */\r\n private hoverOpenedAt = 0;\r\n\r\n /** Whether the default slot has content — the source's `children` check. */\r\n @state() private hasContent = false;\r\n\r\n /** Whether `slot=\"icon\"` has content. */\r\n @state() private hasIcon = false;\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n document.addEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n window.addEventListener('keydown', this.closeOnEscape);\r\n this.addEventListener('pointerenter', this.onPointerEnter);\r\n this.addEventListener('pointerleave', this.onPointerLeave);\r\n }\r\n\r\n disconnectedCallback(): void {\r\n document.removeEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n window.removeEventListener('keydown', this.closeOnEscape);\r\n this.removeEventListener('pointerenter', this.onPointerEnter);\r\n this.removeEventListener('pointerleave', this.onPointerLeave);\r\n clearTimeout(this.hoverTimer);\r\n if (Dropdown.openDropdown === this) Dropdown.openDropdown = null;\r\n super.disconnectedCallback();\r\n }\r\n\r\n protected updated(changed: Map<string, unknown>): void {\r\n if (!changed.has('open')) return;\r\n if (this.open) {\r\n const previous = Dropdown.openDropdown;\r\n Dropdown.openDropdown = this;\r\n if (previous && previous !== this) previous.setOpen(false);\r\n } else if (Dropdown.openDropdown === this) {\r\n Dropdown.openDropdown = null;\r\n }\r\n }\r\n\r\n private setOpen(open: boolean): void {\r\n if (this.open === open) return;\r\n this.open = open;\r\n this.dispatchEvent(new CustomEvent<DropdownToggleEventDetail>('dropdown-toggle', { detail: { open }, bubbles: true, composed: true }));\r\n }\r\n\r\n private hovers(event: PointerEvent): boolean {\r\n return this.openOnHover && !this.inline && !this.disabled && this.hasContent && event.pointerType === 'mouse';\r\n }\r\n\r\n /** Short delays so a pointer crossing the gap between trigger and panel doesn't close it. */\r\n private onPointerEnter = (event: PointerEvent): void => {\r\n if (!this.hovers(event)) return;\r\n clearTimeout(this.hoverTimer);\r\n this.hoverTimer = window.setTimeout(() => {\r\n if (!this.open) this.hoverOpenedAt = Date.now();\r\n this.setOpen(true);\r\n }, 80);\r\n };\r\n\r\n private onPointerLeave = (event: PointerEvent): void => {\r\n if (!this.hovers(event)) return;\r\n clearTimeout(this.hoverTimer);\r\n this.hoverTimer = window.setTimeout(() => this.setOpen(false), 200);\r\n };\r\n\r\n private onBackClick = (event: Event): void => {\r\n event.stopPropagation();\r\n this.setOpen(false);\r\n this.trigger()?.focus();\r\n };\r\n\r\n private closeOnOutsideMouseDown = (event: Event): void => {\r\n if (this.open && !event.composedPath().includes(this)) this.setOpen(false);\r\n };\r\n\r\n private closeOnEscape = (event: KeyboardEvent): void => {\r\n if (!this.open || event.key !== 'Escape') return;\r\n const focusWasInside = event.composedPath().includes(this);\r\n this.setOpen(false);\r\n if (focusWasInside) this.trigger()?.focus();\r\n };\r\n\r\n private trigger(): HTMLElement | null {\r\n return this.renderRoot.querySelector<HTMLElement>('.menu-title');\r\n }\r\n\r\n /** Keyboard-reachable entries in the panel, in order: menu items (they delegate focus to their\r\n * own link) plus any plain links/buttons/tabbable elements a caller slots in. */\r\n private panelItems(): HTMLElement[] {\r\n const slot = this.renderRoot.querySelector<HTMLSlotElement>('.menu-dropdown slot');\r\n if (!slot) return [];\r\n const selector =\r\n 'st-menu-item, st-menu-grid-item, st-mega-menu-feature, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\r\n const items: HTMLElement[] = [];\r\n for (const el of slot.assignedElements({ flatten: true })) {\r\n if (el.matches(selector)) items.push(el as HTMLElement);\r\n items.push(...Array.from(el.querySelectorAll<HTMLElement>(selector)));\r\n }\r\n return items;\r\n }\r\n\r\n /** Moves focus into the panel once it has become visible (it is `visibility: hidden` until the\r\n * `show` class lands, and hidden elements can't take focus). */\r\n private focusItem(pick: (items: HTMLElement[]) => HTMLElement | undefined): void {\r\n void this.updateComplete.then(() => pick(this.panelItems())?.focus());\r\n }\r\n\r\n /** Enter/Space/ArrowDown open the panel and focus its first entry; ArrowUp its last. */\r\n private onTitleKeyDown = (event: KeyboardEvent): void => {\r\n if (!this.hasContent || this.disabled) return;\r\n if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.setOpen(true);\r\n this.focusItem((items) => items[0]);\r\n } else if (event.key === 'ArrowUp') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.setOpen(true);\r\n this.focusItem((items) => items[items.length - 1]);\r\n }\r\n };\r\n\r\n /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */\r\n private onPanelKeyDown = (event: KeyboardEvent): void => {\r\n if (event.key === 'Tab') {\r\n this.setOpen(false);\r\n return;\r\n }\r\n if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\r\n const items = this.panelItems();\r\n if (items.length === 0) return;\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const path = event.composedPath();\r\n const current = items.findIndex((item) => path.includes(item));\r\n const last = items.length - 1;\r\n const next =\r\n event.key === 'Home'\r\n ? 0\r\n : event.key === 'End'\r\n ? last\r\n : event.key === 'ArrowDown'\r\n ? current < 0 || current === last ? 0 : current + 1\r\n : current <= 0 ? last : current - 1;\r\n items[next].focus();\r\n };\r\n\r\n private onTitleClick = (event: Event): void => {\r\n event.stopPropagation();\r\n if (!this.hasContent) return;\r\n event.preventDefault();\r\n clearTimeout(this.hoverTimer);\r\n if (this.open && Date.now() - this.hoverOpenedAt < 400) return;\r\n this.setOpen(!this.open);\r\n };\r\n\r\n /** A click anywhere inside the panel closes it, as in the source — for `mega`, only a click on a\r\n * link: a big panel has headings and gaps, and a click there shouldn't also close st-header's\r\n * hamburger layer. */\r\n private onPanelClick = (event: Event): void => {\r\n if (this.mega && !event.composedPath().some((node) => node instanceof HTMLAnchorElement)) {\r\n event.stopPropagation();\r\n return;\r\n }\r\n this.setOpen(false);\r\n };\r\n\r\n private onContentSlotChange = (event: Event): void => {\r\n this.hasContent = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).some(\r\n (node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim()\r\n );\r\n };\r\n\r\n private onIconSlotChange = (event: Event): void => {\r\n this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n };\r\n\r\n render() {\r\n const icon = html`<span\r\n class=\"icon ${this.iconPosition === 'left' ? 'icon-left' : 'icon-right'}\"\r\n ?hidden=${!this.hasIcon}\r\n style=\"width:${this.iconSize};height:${this.iconSize};color:${this.iconColor}\"\r\n ><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot\r\n ></span>`;\r\n const titleContent = html`\r\n ${this.iconPosition === 'left' ? icon : nothing} ${this.label ? html`<span part=\"label\">${this.label}</span>` : nothing}\r\n ${this.iconPosition === 'right' ? icon : nothing}\r\n ${this.hasContent ? html`<span class=\"arrow\" part=\"caret\" aria-hidden=\"true\">▼</span>` : nothing}\r\n `;\r\n const titleClass = `menu-title ${this.triggerClassName} ${this.open ? 'active' : ''}`;\r\n\r\n return html`\r\n <div class=\"menu\" part=\"menu\">\r\n ${this.href\r\n ? html`\r\n <a\r\n part=\"trigger\"\r\n class=${titleClass}\r\n href=${this.href}\r\n target=${this.target}\r\n aria-haspopup=${this.hasContent ? 'true' : 'false'}\r\n aria-expanded=${this.open}\r\n aria-disabled=${this.disabled ? 'true' : nothing}\r\n @click=${this.onTitleClick}\r\n @keydown=${this.onTitleKeyDown}\r\n >\r\n ${titleContent}\r\n </a>\r\n `\r\n : html`\r\n <button\r\n part=\"trigger\"\r\n class=${titleClass}\r\n type=\"button\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=${this.open}\r\n ?disabled=${this.disabled}\r\n @click=${this.onTitleClick}\r\n @keydown=${this.onTitleKeyDown}\r\n >\r\n ${titleContent}\r\n </button>\r\n `}\r\n <div\r\n part=\"panel\"\r\n class=\"menu-dropdown align-${this.align} ${this.itemGroupClassName} ${this.open ? 'show' : ''}\"\r\n role=\"menu\"\r\n @click=${this.onPanelClick}\r\n @keydown=${this.onPanelKeyDown}\r\n >\r\n ${this.mega\r\n ? html`\r\n <div class=\"mega-back-bar\" part=\"back-bar\">\r\n <button type=\"button\" class=\"mega-back\" part=\"back\" @click=${this.onBackClick}>\r\n ${chevronIcon('left', 16)} ${this.backLabel}\r\n </button>\r\n </div>\r\n ${this.label ? html`<p class=\"mega-heading\" part=\"mobile-heading\">${this.label}</p>` : nothing}\r\n `\r\n : nothing}\r\n <slot @slotchange=${this.onContentSlotChange}></slot>\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/{chunk-TH5NZXA7.js → chunk-KHPJ5FAJ.js} RENAMED Viewed

@@ -1,3 +1,6 @@
+import {
+  arrowUpRightIcon
+} from "./chunk-PB7ZPPLP.js";
 import {
   controlBaseStyles,
   fontFamilyStyles
@@ -20,6 +23,7 @@ var MenuItem = class extends LitElement {
     this.compact = false;
     this.showDescription = true;
     this.target = "_self";
+    this.variant = "default";
     this.hasIcon = false;
     this.onIconSlotChange = (event) => {
       this.hasIcon = event.target.assignedNodes({ flatten: true }).length > 0;
@@ -37,13 +41,30 @@ var MenuItem = class extends LitElement {
   }
   render() {
     const showDescription = !!this.description && this.showDescription;
-    const classes = ["menu-item", this.active ? "active" : "", this.compact ? "compact" : "", showDescription ? "" : "no-description"].filter(Boolean).join(" ");
+    const link = this.variant === "link";
+    const classes = [
+      "menu-item",
+      link ? "link" : "",
+      this.active ? "active" : "",
+      this.compact ? "compact" : "",
+      showDescription ? "" : "no-description"
+    ].filter(Boolean).join(" ");
+    const external = link && this.target === "_blank";
     return html`
-      <a part="item" class=${classes} href=${this.href} target=${this.target} @click=${this.onClick}>
+      <a
+        part="item"
+        class=${classes}
+        href=${this.href}
+        target=${this.target}
+        rel=${this.target === "_blank" ? "noopener noreferrer" : nothing}
+        @click=${this.onClick}
+      >
         <span class="menu-item-icon" part="icon" ?hidden=${!this.hasIcon}><slot name="icon" @slotchange=${this.onIconSlotChange}></slot></span>
         <span class="menu-item-content" part="content">
           <span class="menu-item-header" part="header">
-            <span part="title" class="menu-item-title">${this.title}</span>
+            <span part="title" class="menu-item-title"
+              >${this.title}${external ? html`<span class="external">${arrowUpRightIcon(11)}</span>` : nothing}</span
+            >
             ${this.badge ? html`<span part="badge" class="menu-item-badge">${this.badge}</span>` : nothing}
           </span>
           ${showDescription ? html`<p part="description" class="menu-item-description">${this.description}</p>` : nothing}
@@ -212,6 +233,58 @@ MenuItem.styles = css`
       font-size: 0.75rem;
     }
+    /* link: a plain text link (okta.com mega-menu columns) — no box, no nudge, the badge right
+       after the title, long titles wrap. */
+    .menu-item.link {
+      padding: 7px 0;
+      gap: 10px;
+      font-size: 0.9375rem;
+      color: var(--st-nav-color, var(--st-color-text));
+    }
+    .menu-item.link:hover,
+    .menu-item.link:focus-visible {
+      padding-left: 0;
+      background: transparent;
+      color: var(--st-nav-color, var(--st-color-text-strong));
+    }
+    .menu-item.link:hover .menu-item-title,
+    .menu-item.link:focus-visible .menu-item-title {
+      text-decoration: underline;
+      text-underline-offset: 4px;
+    }
+    .menu-item.link:active {
+      transform: none;
+    }
+    .menu-item.link.active {
+      border-left: 0;
+      background: transparent;
+      font-weight: 600;
+    }
+    .menu-item.link .menu-item-header {
+      justify-content: flex-start;
+    }
+    .menu-item.link .menu-item-title {
+      white-space: normal;
+      font-weight: 400;
+    }
+    .menu-item.link .menu-item-description {
+      margin-top: 2px;
+      font-size: 0.8125rem;
+    }
+    .external {
+      display: inline-flex;
+      margin-left: 3px;
+      vertical-align: 0.05em;
+    }
     .menu-item.no-description {
       align-items: center;
     }
@@ -261,6 +334,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], MenuItem.prototype, "target", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], MenuItem.prototype, "variant", 2);
 __decorateClass([
   state()
 ], MenuItem.prototype, "hasIcon", 2);
@@ -271,4 +347,4 @@ MenuItem = __decorateClass([
 export {
   MenuItem
 };
-//# sourceMappingURL=chunk-TH5NZXA7.js.map
+//# sourceMappingURL=chunk-KHPJ5FAJ.js.map

package/dist/chunk-KHPJ5FAJ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/menu-item/MenuItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { arrowUpRightIcon } from '../shared/icons';\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { MenuItemSelectEventDetail } from './MenuItemEvents';\r\n\r\n/**\r\n * A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\r\n * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\r\n * port of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\r\n * markup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\r\n * hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\r\n * in. Colors come from the suite theme rather than per-item utility classes.\r\n *\r\n * Renders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\r\n * before navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\r\n * source used react-router's `Link` here; the suite apps have no router).\r\n */\r\n@customElement('st-menu-item')\r\nexport class MenuItem extends LitElement {\r\n /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\r\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\r\n\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n }\r\n\r\n @keyframes st-menu-item-badge-pop {\r\n from {\r\n transform: scale(0);\r\n }\r\n 70% {\r\n transform: scale(1.12);\r\n }\r\n to {\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n @keyframes st-menu-item-fade-in {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .menu-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n padding: 12px 16px;\r\n font-size: 0.875rem;\r\n text-decoration: none;\r\n /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\r\n color: var(--st-nav-color, var(--st-color-text));\r\n border-radius: 6px;\r\n /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits\r\n from a dropdown panel kept it unfocusable for a frame after the panel opened. */\r\n transition-property: background-color, color, padding, transform, border-color;\r\n transition-duration: 0.15s;\r\n transition-timing-function: ease;\r\n box-sizing: border-box;\r\n }\r\n\r\n /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would\r\n spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.\r\n Keyboard focus gets the same treatment as hover. */\r\n .menu-item:hover,\r\n .menu-item:focus-visible {\r\n background: var(--st-nav-hover-bg, var(--st-color-hover));\r\n color: var(--st-nav-color, var(--st-color-text-strong));\r\n padding-left: 20px;\r\n transition-duration: 0.1s;\r\n }\r\n\r\n .menu-item.compact:hover,\r\n .menu-item.compact:focus-visible {\r\n padding-left: 16px;\r\n }\r\n\r\n .menu-item:active {\r\n transform: scale(0.99);\r\n transition-duration: 0.1s;\r\n }\r\n\r\n .menu-item.active {\r\n background-color: var(--st-color-accent-subtle);\r\n color: var(--st-color-accent-text);\r\n border-left: 4px solid var(--st-color-accent);\r\n }\r\n\r\n .menu-item-icon {\r\n display: flex;\r\n flex-shrink: 0;\r\n margin-top: 2px;\r\n transition: transform 0.2s ease;\r\n }\r\n\r\n .menu-item-icon:hover {\r\n transform: rotate(5deg);\r\n }\r\n\r\n .menu-item-icon[hidden] {\r\n display: none;\r\n }\r\n\r\n .menu-item-icon ::slotted(*) {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .menu-item-content {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .menu-item-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 8px;\r\n }\r\n\r\n .menu-item-title {\r\n font-weight: 500;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .menu-item-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 20px;\r\n height: 20px;\r\n padding: 0 6px;\r\n font-size: 0.75rem;\r\n font-weight: 500;\r\n border-radius: 9999px;\r\n flex-shrink: 0;\r\n background: var(--st-color-accent-subtle);\r\n color: var(--st-color-accent-text);\r\n animation: st-menu-item-badge-pop 0.35s ease-out;\r\n }\r\n\r\n .menu-item-description {\r\n display: -webkit-box;\r\n margin: 4px 0 0;\r\n font-size: 0.75rem;\r\n color: var(--st-color-text-muted);\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n line-height: 1.4;\r\n animation: st-menu-item-fade-in 0.2s ease;\r\n }\r\n\r\n .menu-item.compact {\r\n padding: 8px 12px;\r\n gap: 8px;\r\n }\r\n\r\n .menu-item.compact .menu-item-icon ::slotted(*) {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n\r\n .menu-item.compact .menu-item-title {\r\n font-size: 0.75rem;\r\n }\r\n\r\n .menu-item.compact .menu-item-description {\r\n font-size: 0.75rem;\r\n }\r\n\r\n /* link: a plain text link (okta.com mega-menu columns) — no box, no nudge, the badge right\r\n after the title, long titles wrap. */\r\n .menu-item.link {\r\n padding: 7px 0;\r\n gap: 10px;\r\n font-size: 0.9375rem;\r\n color: var(--st-nav-color, var(--st-color-text));\r\n }\r\n\r\n .menu-item.link:hover,\r\n .menu-item.link:focus-visible {\r\n padding-left: 0;\r\n background: transparent;\r\n color: var(--st-nav-color, var(--st-color-text-strong));\r\n }\r\n\r\n .menu-item.link:hover .menu-item-title,\r\n .menu-item.link:focus-visible .menu-item-title {\r\n text-decoration: underline;\r\n text-underline-offset: 4px;\r\n }\r\n\r\n .menu-item.link:active {\r\n transform: none;\r\n }\r\n\r\n .menu-item.link.active {\r\n border-left: 0;\r\n background: transparent;\r\n font-weight: 600;\r\n }\r\n\r\n .menu-item.link .menu-item-header {\r\n justify-content: flex-start;\r\n }\r\n\r\n .menu-item.link .menu-item-title {\r\n white-space: normal;\r\n font-weight: 400;\r\n }\r\n\r\n .menu-item.link .menu-item-description {\r\n margin-top: 2px;\r\n font-size: 0.8125rem;\r\n }\r\n\r\n .external {\r\n display: inline-flex;\r\n margin-left: 3px;\r\n vertical-align: 0.05em;\r\n }\r\n\r\n .menu-item.no-description {\r\n align-items: center;\r\n }\r\n\r\n .menu-item.no-description .menu-item-icon {\r\n margin-top: 0;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .menu-item,\r\n .menu-item-icon {\r\n transition: none;\r\n }\r\n\r\n .menu-item:active,\r\n .menu-item-icon:hover {\r\n transform: none;\r\n }\r\n\r\n .menu-item-badge,\r\n .menu-item-description {\r\n animation: none;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n href = '';\r\n\r\n @property({ type: String })\r\n description = '';\r\n\r\n /** Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none. */\r\n @property({ type: String })\r\n badge = '';\r\n\r\n /** Highlights this row as the current page (source: `isActive`). */\r\n @property({ type: Boolean, reflect: true })\r\n active = false;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n compact = false;\r\n\r\n /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\r\n @property({ type: Boolean, attribute: 'show-description' })\r\n showDescription = true;\r\n\r\n /** `target` for the `<a>` (source default `_self`). */\r\n @property({ type: String })\r\n target = '_self';\r\n\r\n /** `default` (a row with a hover box) or `link` (a plain text link, as in `st-mega-menu-column`;\r\n * marked with an arrow when it opens a new tab). */\r\n @property({ type: String, reflect: true })\r\n variant: 'default' | 'link' = 'default';\r\n\r\n /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\r\n @state() private hasIcon = false;\r\n\r\n private onIconSlotChange = (event: Event): void => {\r\n this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n };\r\n\r\n private onClick = (event: MouseEvent): void => {\r\n const selectEvent = new CustomEvent<MenuItemSelectEventDetail>('menu-item-select', {\r\n detail: { href: this.href },\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true\r\n });\r\n this.dispatchEvent(selectEvent);\r\n if (selectEvent.defaultPrevented) event.preventDefault();\r\n };\r\n\r\n render() {\r\n const showDescription = !!this.description && this.showDescription;\r\n const link = this.variant === 'link';\r\n const classes = [\r\n 'menu-item',\r\n link ? 'link' : '',\r\n this.active ? 'active' : '',\r\n this.compact ? 'compact' : '',\r\n showDescription ? '' : 'no-description'\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n const external = link && this.target === '_blank';\r\n return html`\r\n <a\r\n part=\"item\"\r\n class=${classes}\r\n href=${this.href}\r\n target=${this.target}\r\n rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\r\n @click=${this.onClick}\r\n >\r\n <span class=\"menu-item-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\r\n <span class=\"menu-item-content\" part=\"content\">\r\n <span class=\"menu-item-header\" part=\"header\">\r\n <span part=\"title\" class=\"menu-item-title\"\r\n >${this.title}${external ? html`<span class=\"external\">${arrowUpRightIcon(11)}</span>` : nothing}</span\r\n >\r\n ${this.badge ? html`<span part=\"badge\" class=\"menu-item-badge\">${this.badge}</span>` : nothing}\r\n </span>\r\n ${showDescription ? html`<p part=\"description\" class=\"menu-item-description\">${this.description}</p>` : nothing}\r\n </span>\r\n </a>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}