@sankhyatronics/sankhya-cms 0.1.6 → 0.1.7

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 (12) hide show
  1. package/LICENSE +21 -0
  2. package/custom-elements.json +1056 -1036
  3. package/dist/{chunk-URC5XBTL.js → chunk-DQHMJZ6X.js} +4 -1
  4. package/dist/{chunk-URC5XBTL.js.map → chunk-DQHMJZ6X.js.map} +1 -1
  5. package/dist/{chunk-5MTPMXAQ.js → chunk-IQPW3CYZ.js} +11 -4
  6. package/dist/chunk-IQPW3CYZ.js.map +1 -0
  7. package/dist/dropdown/index.d.ts +3 -0
  8. package/dist/dropdown/index.js +1 -1
  9. package/dist/index.js +14 -14
  10. package/dist/menu-item/index.js +1 -1
  11. package/package.json +12 -14
  12. package/dist/chunk-5MTPMXAQ.js.map +0 -1
package/dist/{chunk-URC5XBTL.js → chunk-DQHMJZ6X.js} RENAMED
@@ -292,9 +292,12 @@ MenuItem.styles = css`
292
292
  white-space: nowrap;
293
293
  }
294
294
 
295
+ /* Hover fills like a mega trigger opening on hover. */
295
296
  .menu-item.bar:hover,
296
297
  .menu-item.bar:focus-visible {
297
298
  padding-left: 12px;
299
+ background: var(--st-color-accent);
300
+ color: var(--st-color-on-solid);
298
301
  }
299
302
 
300
303
  .menu-item.bar.active {
@@ -378,4 +381,4 @@ MenuItem = __decorateClass([
378
381
  export {
379
382
  MenuItem
380
383
  };
381
- //# sourceMappingURL=chunk-URC5XBTL.js.map
384
+ //# sourceMappingURL=chunk-DQHMJZ6X.js.map
package/dist/{chunk-URC5XBTL.js.map → chunk-DQHMJZ6X.js.map} RENAMED
@@ -1 +1 @@
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 /* bar: a top-level item in a header bar next to mega st-dropdowns (e.g. \"Dashboard\" beside\r\n \"Masters ▼\") — the same pill, size and active look as their triggers, so the row reads as\r\n one set. Wins over compact (declared after it). */\r\n .menu-item.bar {\r\n align-items: center;\r\n min-height: 40px;\r\n padding: 12px;\r\n gap: 8px;\r\n border-radius: 9999px;\r\n white-space: nowrap;\r\n }\r\n\r\n .menu-item.bar:hover,\r\n .menu-item.bar:focus-visible {\r\n padding-left: 12px;\r\n }\r\n\r\n .menu-item.bar.active {\r\n border-left: 0;\r\n }\r\n\r\n .menu-item.bar .menu-item-icon {\r\n margin-top: 0;\r\n }\r\n\r\n .menu-item.bar .menu-item-title {\r\n font-size: 0.875rem;\r\n font-weight: 400;\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), `link` (a plain text link, as in `st-mega-menu-column`;\r\n * marked with an arrow when it opens a new tab) or `bar` (a top-level item in a header bar,\r\n * shaped like a mega `st-dropdown`'s trigger pill so it lines up with the dropdowns beside it). */\r\n @property({ type: String, reflect: true })\r\n variant: 'default' | 'link' | 'bar' = '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.variant === 'bar' ? 'bar' : '',\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":[]}
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 /* bar: a top-level item in a header bar next to mega st-dropdowns (e.g. \"Dashboard\" beside\r\n \"Masters ▼\") — the same pill, size and active look as their triggers, so the row reads as\r\n one set. Wins over compact (declared after it). */\r\n .menu-item.bar {\r\n align-items: center;\r\n min-height: 40px;\r\n padding: 12px;\r\n gap: 8px;\r\n border-radius: 9999px;\r\n white-space: nowrap;\r\n }\r\n\r\n /* Hover fills like a mega trigger opening on hover. */\r\n .menu-item.bar:hover,\r\n .menu-item.bar:focus-visible {\r\n padding-left: 12px;\r\n background: var(--st-color-accent);\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .menu-item.bar.active {\r\n border-left: 0;\r\n }\r\n\r\n .menu-item.bar .menu-item-icon {\r\n margin-top: 0;\r\n }\r\n\r\n .menu-item.bar .menu-item-title {\r\n font-size: 0.875rem;\r\n font-weight: 400;\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), `link` (a plain text link, as in `st-mega-menu-column`;\r\n * marked with an arrow when it opens a new tab) or `bar` (a top-level item in a header bar,\r\n * shaped like a mega `st-dropdown`'s trigger pill so it lines up with the dropdowns beside it). */\r\n @property({ type: String, reflect: true })\r\n variant: 'default' | 'link' | 'bar' = '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.variant === 'bar' ? 'bar' : '',\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":";;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,UAAU,aAAa;AAmBxC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAkRL,iBAAQ;AAGR,gBAAO;AAGP,uBAAc;AAId,iBAAQ;AAIR,kBAAS;AAGT,mBAAU;AAIV,2BAAkB;AAIlB,kBAAS;AAMT,mBAAsC;AAG7B,SAAQ,UAAU;AAE3B,SAAQ,mBAAmB,CAAC,UAAuB;AACjD,WAAK,UAAW,MAAM,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,IAC7F;AAEA,SAAQ,UAAU,CAAC,UAA4B;AAC7C,YAAM,cAAc,IAAI,YAAuC,oBAAoB;AAAA,QACjF,QAAQ,EAAE,MAAM,KAAK,KAAK;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MACd,CAAC;AACD,WAAK,cAAc,WAAW;AAC9B,UAAI,YAAY,iBAAkB,OAAM,eAAe;AAAA,IACzD;AAAA;AAAA,EAEA,SAAS;AACP,UAAM,kBAAkB,CAAC,CAAC,KAAK,eAAe,KAAK;AACnD,UAAM,OAAO,KAAK,YAAY;AAC9B,UAAM,UAAU;AAAA,MACd;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,KAAK,YAAY,QAAQ,QAAQ;AAAA,MACjC,KAAK,SAAS,WAAW;AAAA,MACzB,KAAK,UAAU,YAAY;AAAA,MAC3B,kBAAkB,KAAK;AAAA,IACzB,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AACX,UAAM,WAAW,QAAQ,KAAK,WAAW;AACzC,WAAO;AAAA;AAAA;AAAA,gBAGK,OAAO;AAAA,eACR,KAAK,IAAI;AAAA,iBACP,KAAK,MAAM;AAAA,cACd,KAAK,WAAW,WAAW,wBAAwB,OAAO;AAAA,iBACvD,KAAK,OAAO;AAAA;AAAA,2DAE8B,CAAC,KAAK,OAAO,kCAAkC,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,iBAI9G,KAAK,KAAK,GAAG,WAAW,8BAA8B,iBAAiB,EAAE,CAAC,YAAY,OAAO;AAAA;AAAA,cAEhG,KAAK,QAAQ,kDAAkD,KAAK,KAAK,YAAY,OAAO;AAAA;AAAA,YAE9F,kBAAkB,2DAA2D,KAAK,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA,EAIvH;AACF;AAAA;AAzWa,SAEJ,oBAAoB,EAAE,GAAG,WAAW,mBAAmB,gBAAgB,KAAK;AAFxE,SAIJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyQtB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjRf,SAkRX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApRf,SAqRX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvRf,SAwRX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3Rf,SA4RX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA/R/B,SAgSX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlS/B,SAmSX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,mBAAmB,CAAC;AAAA,GAtS/C,SAuSX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1Sf,SA2SX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAhT9B,SAiTX;AAGiB;AAAA,EAAhB,MAAM;AAAA,GApTI,SAoTM;AApTN,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":[]}
package/dist/{chunk-5MTPMXAQ.js → chunk-IQPW3CYZ.js} RENAMED
@@ -31,6 +31,7 @@ var Dropdown = class extends LitElement {
31
31
  this.inline = false;
32
32
  this.open = false;
33
33
  this.mega = false;
34
+ this.bar = false;
34
35
  this.openOnHover = false;
35
36
  this.backLabel = "Back";
36
37
  this.hoverTimer = 0;
@@ -409,12 +410,15 @@ Dropdown.styles = css`
409
410
  box-shadow: 0 24px 48px var(--st-shadow-color-md);
410
411
  }
411
412
 
412
- /* The open section's trigger becomes an accent pill. */
413
- :host([mega]:not([inline])) .menu-title {
413
+ /* The open section's trigger becomes an accent pill — also for a plain dropdown marked \`bar\`,
414
+ so it matches the mega triggers (and st-menu-item variant="bar") beside it. */
415
+ :host([mega]:not([inline])) .menu-title,
416
+ :host([bar]:not([inline])) .menu-title {
414
417
  border-radius: 9999px;
415
418
  }
416
419
 
417
- :host([mega]:not([inline])) .menu-title[aria-expanded='true'] {
420
+ :host([mega]:not([inline])) .menu-title[aria-expanded='true'],
421
+ :host([bar]:not([inline])) .menu-title[aria-expanded='true'] {
418
422
  background: var(--st-color-accent);
419
423
  color: var(--st-color-on-solid);
420
424
  }
@@ -545,6 +549,9 @@ __decorateClass([
545
549
  __decorateClass([
546
550
  property({ type: Boolean, reflect: true })
547
551
  ], Dropdown.prototype, "mega", 2);
552
+ __decorateClass([
553
+ property({ type: Boolean, reflect: true })
554
+ ], Dropdown.prototype, "bar", 2);
548
555
  __decorateClass([
549
556
  property({ type: Boolean, attribute: "open-on-hover" })
550
557
  ], Dropdown.prototype, "openOnHover", 2);
@@ -564,4 +571,4 @@ Dropdown = __decorateClass([
564
571
  export {
565
572
  Dropdown
566
573
  };
567
- //# sourceMappingURL=chunk-5MTPMXAQ.js.map
574
+ //# sourceMappingURL=chunk-IQPW3CYZ.js.map
package/dist/chunk-IQPW3CYZ.js.map ADDED
@@ -0,0 +1 @@
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 — also for a plain dropdown marked \\`bar\\`,\r\n so it matches the mega triggers (and st-menu-item variant=\"bar\") beside it. */\r\n :host([mega]:not([inline])) .menu-title,\r\n :host([bar]: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 :host([bar]: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 /** Styles a non-`mega` trigger like a mega one — a pill that turns solid accent while open — so\r\n * a plain dropdown (e.g. \"+ New\") lines up with mega triggers in the same header bar. */\r\n @property({ type: Boolean, reflect: true })\r\n bar = 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/dropdown/index.d.ts CHANGED
@@ -67,6 +67,9 @@ declare class Dropdown extends LitElement {
67
67
  * closes it when it lands on a link.
68
68
  */
69
69
  mega: boolean;
70
+ /** Styles a non-`mega` trigger like a mega one — a pill that turns solid accent while open — so
71
+ * a plain dropdown (e.g. "+ New") lines up with mega triggers in the same header bar. */
72
+ bar: boolean;
70
73
  /** Opens the panel while a mouse hovers the trigger or panel (touch and keyboard still click). Off while `inline`. */
71
74
  openOnHover: boolean;
72
75
  /** Text of the Back button in the `mega` + `inline` drill-down panel. */
package/dist/dropdown/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Dropdown
3
- } from "../chunk-5MTPMXAQ.js";
3
+ } from "../chunk-IQPW3CYZ.js";
4
4
  import "../chunk-PB7ZPPLP.js";
5
5
  import "../chunk-RHAOQ6K4.js";
6
6
  import "../chunk-EUXUH3YW.js";
package/dist/index.js CHANGED
@@ -1,34 +1,31 @@
1
+ import {
2
+ Testimonials
3
+ } from "./chunk-ZRXYWH6C.js";
1
4
  import {
2
5
  Stats
3
6
  } from "./chunk-6H262SG6.js";
4
7
  import {
5
- Testimonials
6
- } from "./chunk-ZRXYWH6C.js";
8
+ MenuItem
9
+ } from "./chunk-DQHMJZ6X.js";
7
10
  import {
8
11
  MenuGrid
9
12
  } from "./chunk-VYON56QO.js";
10
- import {
11
- MenuGridItem
12
- } from "./chunk-4HKSA5UT.js";
13
- import {
14
- MenuItem
15
- } from "./chunk-URC5XBTL.js";
16
13
  import {
17
14
  PromoBanner
18
15
  } from "./chunk-HGJT24UG.js";
19
- import {
20
- Section
21
- } from "./chunk-NN3OCPDV.js";
22
16
  import {
23
17
  Select
24
18
  } from "./chunk-TLHG33MM.js";
25
19
  import {
26
- Footer
27
- } from "./chunk-CDC4P77V.js";
20
+ Section
21
+ } from "./chunk-NN3OCPDV.js";
28
22
  import {
29
23
  FeatureItem,
30
24
  FeaturesSection
31
25
  } from "./chunk-BQTDFQ4V.js";
26
+ import {
27
+ Footer
28
+ } from "./chunk-CDC4P77V.js";
32
29
  import {
33
30
  Header
34
31
  } from "./chunk-5KHI36M5.js";
@@ -46,6 +43,9 @@ import {
46
43
  MegaMenuColumn,
47
44
  MegaMenuFeature
48
45
  } from "./chunk-HGTC3LCW.js";
46
+ import {
47
+ MenuGridItem
48
+ } from "./chunk-4HKSA5UT.js";
49
49
  import {
50
50
  BentoGrid
51
51
  } from "./chunk-2JGWWXEI.js";
@@ -63,7 +63,7 @@ import {
63
63
  } from "./chunk-MW43OS47.js";
64
64
  import {
65
65
  Dropdown
66
- } from "./chunk-5MTPMXAQ.js";
66
+ } from "./chunk-IQPW3CYZ.js";
67
67
  import "./chunk-PB7ZPPLP.js";
68
68
  import {
69
69
  FeatureSplit
package/dist/menu-item/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  MenuItem
3
- } from "../chunk-URC5XBTL.js";
3
+ } from "../chunk-DQHMJZ6X.js";
4
4
  import "../chunk-PB7ZPPLP.js";
5
5
  import "../chunk-RHAOQ6K4.js";
6
6
  import "../chunk-EUXUH3YW.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sankhyatronics/sankhya-cms",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/sankhyatronics/SankhyaCMS.git",
@@ -134,18 +134,6 @@
134
134
  "custom-elements.json"
135
135
  ],
136
136
  "sideEffects": true,
137
- "scripts": {
138
- "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.ts src/bento-grid/index.ts src/card/index.ts src/carousel/index.ts src/content-block/index.ts src/cookie-consent/index.ts src/dropdown/index.ts src/feature-split/index.ts src/features-section/index.ts src/footer/index.ts src/header/index.ts src/hero/index.ts src/icon-button/index.ts src/items-accordion/index.ts src/markdown/index.ts src/mega-menu/index.ts src/menu-grid/index.ts src/menu-grid-item/index.ts src/menu-item/index.ts src/promo-banner/index.ts src/section/index.ts src/select/index.ts src/stats/index.ts src/testimonials/index.ts --format esm --dts --sourcemap --clean && node scripts/copy-theme.mjs && cem analyze",
139
- "dev": "tsup src/index.ts --watch --format esm --dts",
140
- "typecheck": "tsc --noEmit",
141
- "lint": "oxlint",
142
- "clean": "rimraf dist",
143
- "test": "vitest run",
144
- "migrate-json": "node scripts/migrate-json.mjs",
145
- "analyze": "cem analyze",
146
- "prepack": "node ../../scripts/resolve-workspace-deps.mjs",
147
- "postpack": "node ../../scripts/resolve-workspace-deps.mjs --restore"
148
- },
149
137
  "dependencies": {
150
138
  "dompurify": "^3.4.16",
151
139
  "iconify-icon": "^3.0.3",
@@ -161,5 +149,15 @@
161
149
  "customElements": "custom-elements.json",
162
150
  "publishConfig": {
163
151
  "access": "public"
152
+ },
153
+ "scripts": {
154
+ "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.ts src/bento-grid/index.ts src/card/index.ts src/carousel/index.ts src/content-block/index.ts src/cookie-consent/index.ts src/dropdown/index.ts src/feature-split/index.ts src/features-section/index.ts src/footer/index.ts src/header/index.ts src/hero/index.ts src/icon-button/index.ts src/items-accordion/index.ts src/markdown/index.ts src/mega-menu/index.ts src/menu-grid/index.ts src/menu-grid-item/index.ts src/menu-item/index.ts src/promo-banner/index.ts src/section/index.ts src/select/index.ts src/stats/index.ts src/testimonials/index.ts --format esm --dts --sourcemap --clean && node scripts/copy-theme.mjs && cem analyze",
155
+ "dev": "tsup src/index.ts --watch --format esm --dts",
156
+ "typecheck": "tsc --noEmit",
157
+ "lint": "oxlint",
158
+ "clean": "rimraf dist",
159
+ "test": "vitest run",
160
+ "migrate-json": "node scripts/migrate-json.mjs",
161
+ "analyze": "cem analyze"
164
162
  }
165
- }
163
+ }
package/dist/chunk-5MTPMXAQ.js.map DELETED
@@ -1 +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":";;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,UAAU,aAAa;AAgCxC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAsQL,iBAAQ;AAKR,gBAAO;AAGP,wBAAiC;AAIjC,oBAAW;AAIX,qBAAY;AAIZ,iBAA0B;AAI1B,kBAAS;AAIT,4BAAmB;AAInB,8BAAqB;AAIrB,yBAAgB;AAGhB,oBAAW;AAIX,kBAAS;AAKT,kBAAS;AAIT,gBAAO;AAUP,gBAAO;AAIP,uBAAc;AAId,qBAAY;AAEZ,SAAQ,aAAa;AAGrB;AAAA,SAAQ,gBAAgB;AAGf,SAAQ,aAAa;AAGrB,SAAQ,UAAU;AA0C3B;AAAA,SAAQ,iBAAiB,CAAC,UAA8B;AACtD,UAAI,CAAC,KAAK,OAAO,KAAK,EAAG;AACzB,mBAAa,KAAK,UAAU;AAC5B,WAAK,aAAa,OAAO,WAAW,MAAM;AACxC,YAAI,CAAC,KAAK,KAAM,MAAK,gBAAgB,KAAK,IAAI;AAC9C,aAAK,QAAQ,IAAI;AAAA,MACnB,GAAG,EAAE;AAAA,IACP;AAEA,SAAQ,iBAAiB,CAAC,UAA8B;AACtD,UAAI,CAAC,KAAK,OAAO,KAAK,EAAG;AACzB,mBAAa,KAAK,UAAU;AAC5B,WAAK,aAAa,OAAO,WAAW,MAAM,KAAK,QAAQ,KAAK,GAAG,GAAG;AAAA,IACpE;AAEA,SAAQ,cAAc,CAAC,UAAuB;AAC5C,YAAM,gBAAgB;AACtB,WAAK,QAAQ,KAAK;AAClB,WAAK,QAAQ,GAAG,MAAM;AAAA,IACxB;AAEA,SAAQ,0BAA0B,CAAC,UAAuB;AACxD,UAAI,KAAK,QAAQ,CAAC,MAAM,aAAa,EAAE,SAAS,IAAI,EAAG,MAAK,QAAQ,KAAK;AAAA,IAC3E;AAEA,SAAQ,gBAAgB,CAAC,UAA+B;AACtD,UAAI,CAAC,KAAK,QAAQ,MAAM,QAAQ,SAAU;AAC1C,YAAM,iBAAiB,MAAM,aAAa,EAAE,SAAS,IAAI;AACzD,WAAK,QAAQ,KAAK;AAClB,UAAI,eAAgB,MAAK,QAAQ,GAAG,MAAM;AAAA,IAC5C;AA4BA;AAAA,SAAQ,iBAAiB,CAAC,UAA+B;AACvD,UAAI,CAAC,KAAK,cAAc,KAAK,SAAU;AACvC,UAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC3E,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,aAAK,QAAQ,IAAI;AACjB,aAAK,UAAU,CAAC,UAAU,MAAM,CAAC,CAAC;AAAA,MACpC,WAAW,MAAM,QAAQ,WAAW;AAClC,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,aAAK,QAAQ,IAAI;AACjB,aAAK,UAAU,CAAC,UAAU,MAAM,MAAM,SAAS,CAAC,CAAC;AAAA,MACnD;AAAA,IACF;AAGA;AAAA,SAAQ,iBAAiB,CAAC,UAA+B;AACvD,UAAI,MAAM,QAAQ,OAAO;AACvB,aAAK,QAAQ,KAAK;AAClB;AAAA,MACF;AACA,UAAI,CAAC,CAAC,aAAa,WAAW,QAAQ,KAAK,EAAE,SAAS,MAAM,GAAG,EAAG;AAClE,YAAM,QAAQ,KAAK,WAAW;AAC9B,UAAI,MAAM,WAAW,EAAG;AACxB,YAAM,eAAe;AACrB,YAAM,gBAAgB;AACtB,YAAM,OAAO,MAAM,aAAa;AAChC,YAAM,UAAU,MAAM,UAAU,CAAC,SAAS,KAAK,SAAS,IAAI,CAAC;AAC7D,YAAM,OAAO,MAAM,SAAS;AAC5B,YAAM,OACJ,MAAM,QAAQ,SACV,IACA,MAAM,QAAQ,QACZ,OACA,MAAM,QAAQ,cACZ,UAAU,KAAK,YAAY,OAAO,IAAI,UAAU,IAChD,WAAW,IAAI,OAAO,UAAU;AAC1C,YAAM,IAAI,EAAE,MAAM;AAAA,IACpB;AAEA,SAAQ,eAAe,CAAC,UAAuB;AAC7C,YAAM,gBAAgB;AACtB,UAAI,CAAC,KAAK,WAAY;AACtB,YAAM,eAAe;AACrB,mBAAa,KAAK,UAAU;AAC5B,UAAI,KAAK,QAAQ,KAAK,IAAI,IAAI,KAAK,gBAAgB,IAAK;AACxD,WAAK,QAAQ,CAAC,KAAK,IAAI;AAAA,IACzB;AAKA;AAAA;AAAA;AAAA,SAAQ,eAAe,CAAC,UAAuB;AAC7C,UAAI,KAAK,QAAQ,CAAC,MAAM,aAAa,EAAE,KAAK,CAAC,SAAS,gBAAgB,iBAAiB,GAAG;AACxF,cAAM,gBAAgB;AACtB;AAAA,MACF;AACA,WAAK,QAAQ,KAAK;AAAA,IACpB;AAEA,SAAQ,sBAAsB,CAAC,UAAuB;AACpD,WAAK,aAAc,MAAM,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE;AAAA,QACnF,CAAC,SAAS,KAAK,aAAa,KAAK,gBAAgB,CAAC,CAAC,KAAK,aAAa,KAAK;AAAA,MAC5E;AAAA,IACF;AAEA,SAAQ,mBAAmB,CAAC,UAAuB;AACjD,WAAK,UAAW,MAAM,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,IAC7F;AAAA;AAAA,EAtKA,oBAA0B;AACxB,UAAM,kBAAkB;AACxB,aAAS,iBAAiB,aAAa,KAAK,uBAAuB;AACnE,WAAO,iBAAiB,WAAW,KAAK,aAAa;AACrD,SAAK,iBAAiB,gBAAgB,KAAK,cAAc;AACzD,SAAK,iBAAiB,gBAAgB,KAAK,cAAc;AAAA,EAC3D;AAAA,EAEA,uBAA6B;AAC3B,aAAS,oBAAoB,aAAa,KAAK,uBAAuB;AACtE,WAAO,oBAAoB,WAAW,KAAK,aAAa;AACxD,SAAK,oBAAoB,gBAAgB,KAAK,cAAc;AAC5D,SAAK,oBAAoB,gBAAgB,KAAK,cAAc;AAC5D,iBAAa,KAAK,UAAU;AAC5B,QAAI,SAAS,iBAAiB,KAAM,UAAS,eAAe;AAC5D,UAAM,qBAAqB;AAAA,EAC7B;AAAA,EAEU,QAAQ,SAAqC;AACrD,QAAI,CAAC,QAAQ,IAAI,MAAM,EAAG;AAC1B,QAAI,KAAK,MAAM;AACb,YAAM,WAAW,SAAS;AAC1B,eAAS,eAAe;AACxB,UAAI,YAAY,aAAa,KAAM,UAAS,QAAQ,KAAK;AAAA,IAC3D,WAAW,SAAS,iBAAiB,MAAM;AACzC,eAAS,eAAe;AAAA,IAC1B;AAAA,EACF;AAAA,EAEQ,QAAQ,MAAqB;AACnC,QAAI,KAAK,SAAS,KAAM;AACxB,SAAK,OAAO;AACZ,SAAK,cAAc,IAAI,YAAuC,mBAAmB,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,MAAM,UAAU,KAAK,CAAC,CAAC;AAAA,EACvI;AAAA,EAEQ,OAAO,OAA8B;AAC3C,WAAO,KAAK,eAAe,CAAC,KAAK,UAAU,CAAC,KAAK,YAAY,KAAK,cAAc,MAAM,gBAAgB;AAAA,EACxG;AAAA,EAmCQ,UAA8B;AACpC,WAAO,KAAK,WAAW,cAA2B,aAAa;AAAA,EACjE;AAAA;AAAA;AAAA,EAIQ,aAA4B;AAClC,UAAM,OAAO,KAAK,WAAW,cAA+B,qBAAqB;AACjF,QAAI,CAAC,KAAM,QAAO,CAAC;AACnB,UAAM,WACJ;AACF,UAAM,QAAuB,CAAC;AAC9B,eAAW,MAAM,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAAC,GAAG;AACzD,UAAI,GAAG,QAAQ,QAAQ,EAAG,OAAM,KAAK,EAAiB;AACtD,YAAM,KAAK,GAAG,MAAM,KAAK,GAAG,iBAA8B,QAAQ,CAAC,CAAC;AAAA,IACtE;AACA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA,EAIQ,UAAU,MAA+D;AAC/E,SAAK,KAAK,eAAe,KAAK,MAAM,KAAK,KAAK,WAAW,CAAC,GAAG,MAAM,CAAC;AAAA,EACtE;AAAA,EAyEA,SAAS;AACP,UAAM,OAAO;AAAA,oBACG,KAAK,iBAAiB,SAAS,cAAc,YAAY;AAAA,gBAC7D,CAAC,KAAK,OAAO;AAAA,qBACR,KAAK,QAAQ,WAAW,KAAK,QAAQ,UAAU,KAAK,SAAS;AAAA,uCAC3C,KAAK,gBAAgB;AAAA;AAExD,UAAM,eAAe;AAAA,QACjB,KAAK,iBAAiB,SAAS,OAAO,OAAO,IAAI,KAAK,QAAQ,0BAA0B,KAAK,KAAK,YAAY,OAAO;AAAA,QACrH,KAAK,iBAAiB,UAAU,OAAO,OAAO;AAAA,QAC9C,KAAK,aAAa,qEAAqE,OAAO;AAAA;AAElG,UAAM,aAAa,cAAc,KAAK,gBAAgB,IAAI,KAAK,OAAO,WAAW,EAAE;AAEnF,WAAO;AAAA;AAAA,UAED,KAAK,OACH;AAAA;AAAA;AAAA,wBAGY,UAAU;AAAA,uBACX,KAAK,IAAI;AAAA,yBACP,KAAK,MAAM;AAAA,gCACJ,KAAK,aAAa,SAAS,OAAO;AAAA,gCAClC,KAAK,IAAI;AAAA,gCACT,KAAK,WAAW,SAAS,OAAO;AAAA,yBACvC,KAAK,YAAY;AAAA,2BACf,KAAK,cAAc;AAAA;AAAA,kBAE5B,YAAY;AAAA;AAAA,gBAGlB;AAAA;AAAA;AAAA,wBAGY,UAAU;AAAA;AAAA;AAAA,gCAGF,KAAK,IAAI;AAAA,4BACb,KAAK,QAAQ;AAAA,yBAChB,KAAK,YAAY;AAAA,2BACf,KAAK,cAAc;AAAA;AAAA,kBAE5B,YAAY;AAAA;AAAA,aAEjB;AAAA;AAAA;AAAA,uCAG0B,KAAK,KAAK,IAAI,KAAK,kBAAkB,IAAI,KAAK,OAAO,SAAS,EAAE;AAAA;AAAA,mBAEpF,KAAK,YAAY;AAAA,qBACf,KAAK,cAAc;AAAA;AAAA,YAE5B,KAAK,OACH;AAAA;AAAA,+EAEiE,KAAK,WAAW;AAAA,sBACzE,YAAY,QAAQ,EAAE,CAAC,IAAI,KAAK,SAAS;AAAA;AAAA;AAAA,kBAG7C,KAAK,QAAQ,qDAAqD,KAAK,KAAK,SAAS,OAAO;AAAA,kBAEhG,OAAO;AAAA,8BACS,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAIpD;AACF;AAAA;AArkBa,SAEI,eAAgC;AAFpC,SAIJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKf,gBAAgB;AAAA;AAAA;AAAA;AAAA,QAIhB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA+MjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArQf,SAsQX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1Qf,SA2QX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GA7Q3C,SA8QX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAjRvC,SAkRX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GArRxC,SAsRX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAzRf,SA0RX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Rf,SA8RX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,qBAAqB,CAAC;AAAA,GAjShD,SAkSX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,wBAAwB,CAAC;AAAA,GArSnD,SAsSX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GAzS7C,SA0SX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA5S/B,SA6SX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAhT/B,SAiTX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArT/B,SAsTX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzT/B,SA0TX;AAUA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAnU/B,SAoUX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,gBAAgB,CAAC;AAAA,GAvU5C,SAwUX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GA3UxC,SA4UX;AAQiB;AAAA,EAAhB,MAAM;AAAA,GApVI,SAoVM;AAGA;AAAA,EAAhB,MAAM;AAAA,GAvVI,SAuVM;AAvVN,WAAN;AAAA,EADN,cAAc,aAAa;AAAA,GACf;","names":[]}