@sankhyatronics/sankhya-cms 0.1.18 → 0.2.0
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.
- package/custom-elements.json +608 -15
- package/dist/bento-grid/index.d.ts +8 -1
- package/dist/bento-grid/index.js +2 -1
- package/dist/card/index.d.ts +3 -4
- package/dist/card/index.js +1 -1
- package/dist/{chunk-LEXZKGQX.js → chunk-2DXHPEB5.js} +1 -1
- package/dist/chunk-2DXHPEB5.js.map +1 -0
- package/dist/{chunk-R5G6KFTJ.js → chunk-2FJDNJ7R.js} +1 -1
- package/dist/chunk-2FJDNJ7R.js.map +1 -0
- package/dist/{chunk-ZN4LIKVG.js → chunk-3OEEOBHB.js} +1 -1
- package/dist/chunk-3OEEOBHB.js.map +1 -0
- package/dist/{chunk-BMHMNXIA.js → chunk-4AFOKKSU.js} +1 -1
- package/dist/chunk-4AFOKKSU.js.map +1 -0
- package/dist/{chunk-76AVBQUA.js → chunk-5C6C6K5U.js} +98 -4
- package/dist/chunk-5C6C6K5U.js.map +1 -0
- package/dist/{chunk-7NLZND6Q.js → chunk-5F5PTVWR.js} +27 -2
- package/dist/chunk-5F5PTVWR.js.map +1 -0
- package/dist/chunk-5MY6OWMK.js +125 -0
- package/dist/chunk-5MY6OWMK.js.map +1 -0
- package/dist/{chunk-FLY7TNRT.js → chunk-7NIWQWTA.js} +1 -1
- package/dist/chunk-7NIWQWTA.js.map +1 -0
- package/dist/{chunk-ALI26WOB.js → chunk-EE6PAN3B.js} +33 -2
- package/dist/chunk-EE6PAN3B.js.map +1 -0
- package/dist/{chunk-VWS53WY4.js → chunk-HMUZON6I.js} +49 -4
- package/dist/chunk-HMUZON6I.js.map +1 -0
- package/dist/chunk-O4FCRKDX.js +178 -0
- package/dist/chunk-O4FCRKDX.js.map +1 -0
- package/dist/{chunk-SMLR736E.js → chunk-OELI3IWC.js} +1 -1
- package/dist/chunk-OELI3IWC.js.map +1 -0
- package/dist/{chunk-JQY2G4QK.js → chunk-OLA35A2O.js} +1 -1
- package/dist/chunk-OLA35A2O.js.map +1 -0
- package/dist/{chunk-YQ42EBK5.js → chunk-PHEGSCOM.js} +1 -1
- package/dist/chunk-PHEGSCOM.js.map +1 -0
- package/dist/{chunk-5EBWMPJS.js → chunk-QLA4BH2B.js} +5 -5
- package/dist/chunk-QLA4BH2B.js.map +1 -0
- package/dist/{chunk-JKBWZLG4.js → chunk-SQ3OZO32.js} +141 -3
- package/dist/chunk-SQ3OZO32.js.map +1 -0
- package/dist/chunk-UAIUBPDN.js +11 -0
- package/dist/chunk-UAIUBPDN.js.map +1 -0
- package/dist/{chunk-XWB4CKDU.js → chunk-XUGEXERO.js} +6 -6
- package/dist/chunk-XUGEXERO.js.map +1 -0
- package/dist/chunk-ZRC5BVDX.js +219 -0
- package/dist/chunk-ZRC5BVDX.js.map +1 -0
- package/dist/cms-theme.css +7 -0
- package/dist/content-block/index.d.ts +2 -3
- package/dist/content-block/index.js +3 -2
- package/dist/dropdown/index.d.ts +8 -11
- package/dist/dropdown/index.js +1 -1
- package/dist/feature-split/index.js +2 -1
- package/dist/features-section/index.d.ts +4 -4
- package/dist/features-section/index.js +4 -3
- package/dist/flow/index.d.ts +35 -0
- package/dist/flow/index.js +9 -0
- package/dist/flow/index.js.map +1 -0
- package/dist/header/index.d.ts +8 -15
- package/dist/header/index.js +1 -1
- package/dist/hero/index.d.ts +18 -3
- package/dist/hero/index.js +1 -1
- package/dist/icon-button/index.d.ts +2 -4
- package/dist/icon-button/index.js +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.js +36 -23
- package/dist/items-accordion/index.d.ts +5 -0
- package/dist/items-accordion/index.js +2 -1
- package/dist/markdown/index.d.ts +1 -2
- package/dist/markdown/index.js +2 -1
- package/dist/menu-grid/index.d.ts +2 -3
- package/dist/menu-grid/index.js +1 -1
- package/dist/menu-grid-item/index.d.ts +6 -8
- package/dist/menu-grid-item/index.js +1 -1
- package/dist/menu-item/index.d.ts +5 -7
- package/dist/menu-item/index.js +1 -1
- package/dist/promo-banner/index.d.ts +14 -3
- package/dist/promo-banner/index.js +1 -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/section/index.d.ts +3 -0
- package/dist/section/index.js +1 -1
- package/dist/steps/index.d.ts +33 -0
- package/dist/steps/index.js +10 -0
- package/dist/steps/index.js.map +1 -0
- package/dist/tag-strip/index.d.ts +26 -0
- package/dist/tag-strip/index.js +9 -0
- package/dist/tag-strip/index.js.map +1 -0
- package/package.json +14 -2
- package/dist/chunk-5EBWMPJS.js.map +0 -1
- package/dist/chunk-76AVBQUA.js.map +0 -1
- package/dist/chunk-7NLZND6Q.js.map +0 -1
- package/dist/chunk-ALI26WOB.js.map +0 -1
- package/dist/chunk-BMHMNXIA.js.map +0 -1
- package/dist/chunk-FLY7TNRT.js.map +0 -1
- package/dist/chunk-JKBWZLG4.js.map +0 -1
- package/dist/chunk-JQY2G4QK.js.map +0 -1
- package/dist/chunk-LEXZKGQX.js.map +0 -1
- package/dist/chunk-R5G6KFTJ.js.map +0 -1
- package/dist/chunk-SMLR736E.js.map +0 -1
- package/dist/chunk-VWS53WY4.js.map +0 -1
- package/dist/chunk-XWB4CKDU.js.map +0 -1
- package/dist/chunk-YQ42EBK5.js.map +0 -1
- package/dist/chunk-ZN4LIKVG.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/menu-item/MenuItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { arrowUpRightIcon } from '../shared/icons';\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MenuItemSelectEventDetail } from './MenuItemEvents';\n\n/**\n * A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\n * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\n * port of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\n * markup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\n * hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\n * in. Colors come from the suite theme rather than per-item utility classes.\n *\n * Renders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\n * before navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\n * source used react-router's `Link` here; the suite apps have no router).\n *\n * @slot icon - The row's icon, sized to `icon-size` (16px, or 14px when `compact`).\n * @cssprop --st-menu-item-icon-size - Width and height of the slotted icon; `icon-size` sets it.\n */\n@customElement('st-menu-item')\nexport class MenuItem extends LitElement {\n /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n ${fontFamilyStyles}\n }\n\n @keyframes st-menu-item-badge-pop {\n from {\n transform: scale(0);\n }\n 70% {\n transform: scale(1.12);\n }\n to {\n transform: scale(1);\n }\n }\n\n @keyframes st-menu-item-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n .menu-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 16px;\n font-size: 0.875rem;\n text-decoration: none;\n /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\n color: var(--st-nav-color, var(--st-color-text));\n border-radius: 6px;\n /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits\n from a dropdown panel kept it unfocusable for a frame after the panel opened. */\n transition-property: background-color, color, padding, transform, border-color;\n transition-duration: 0.15s;\n transition-timing-function: ease;\n box-sizing: border-box;\n }\n\n /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would\n spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.\n Keyboard focus gets the same treatment as hover. */\n .menu-item:hover,\n .menu-item:focus-visible {\n background: var(--st-nav-hover-bg, var(--st-color-hover));\n color: var(--st-nav-color, var(--st-color-text-strong));\n padding-left: 20px;\n transition-duration: 0.1s;\n }\n\n .menu-item.compact:hover,\n .menu-item.compact:focus-visible {\n padding-left: 16px;\n }\n\n .menu-item:active {\n transform: scale(0.99);\n transition-duration: 0.1s;\n }\n\n .menu-item.active {\n background-color: var(--st-color-accent-subtle);\n color: var(--st-color-accent-text);\n border-left: 4px solid var(--st-color-accent);\n }\n\n .menu-item-icon {\n display: flex;\n flex-shrink: 0;\n margin-top: 2px;\n transition: transform 0.2s ease;\n }\n\n .menu-item-icon:hover {\n transform: rotate(5deg);\n }\n\n .menu-item-icon[hidden] {\n display: none;\n }\n\n .menu-item-icon ::slotted(*) {\n width: var(--st-menu-item-icon-size, 16px);\n height: var(--st-menu-item-icon-size, 16px);\n }\n\n .menu-item-content {\n flex: 1;\n min-width: 0;\n }\n\n .menu-item-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n }\n\n .menu-item-title {\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .menu-item-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n font-size: 0.75rem;\n font-weight: 500;\n border-radius: 9999px;\n flex-shrink: 0;\n background: var(--st-color-accent-subtle);\n color: var(--st-color-accent-text);\n animation: st-menu-item-badge-pop 0.35s ease-out;\n }\n\n .menu-item-description {\n display: -webkit-box;\n margin: 4px 0 0;\n font-size: 0.75rem;\n color: var(--st-color-text-muted);\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 1.4;\n animation: st-menu-item-fade-in 0.2s ease;\n }\n\n .menu-item.compact {\n padding: 8px 12px;\n gap: 8px;\n }\n\n .menu-item.compact .menu-item-icon ::slotted(*) {\n width: var(--st-menu-item-icon-size, 14px);\n height: var(--st-menu-item-icon-size, 14px);\n }\n\n .menu-item.compact .menu-item-title {\n font-size: 0.75rem;\n }\n\n .menu-item.compact .menu-item-description {\n font-size: 0.75rem;\n }\n\n /* link: a plain text link (okta.com mega-menu columns) — no box, no nudge, the badge right\n after the title, long titles wrap. */\n .menu-item.link {\n padding: 7px 0;\n gap: 10px;\n font-size: 0.9375rem;\n color: var(--st-nav-color, var(--st-color-text));\n }\n\n .menu-item.link:hover,\n .menu-item.link:focus-visible {\n padding-left: 0;\n background: transparent;\n color: var(--st-nav-color, var(--st-color-text-strong));\n }\n\n .menu-item.link:hover .menu-item-title,\n .menu-item.link:focus-visible .menu-item-title {\n text-decoration: underline;\n text-underline-offset: 4px;\n }\n\n .menu-item.link:active {\n transform: none;\n }\n\n .menu-item.link.active {\n border-left: 0;\n background: transparent;\n font-weight: 600;\n }\n\n .menu-item.link .menu-item-header {\n justify-content: flex-start;\n }\n\n .menu-item.link .menu-item-title {\n white-space: normal;\n font-weight: 400;\n }\n\n .menu-item.link .menu-item-description {\n margin-top: 2px;\n font-size: 0.8125rem;\n }\n\n /* bar: a top-level item in a header bar next to mega st-dropdowns (e.g. \"Dashboard\" beside\n \"Masters ▼\") — the same pill, size and active look as their triggers, so the row reads as\n one set. Wins over compact (declared after it). */\n .menu-item.bar {\n align-items: center;\n min-height: 40px;\n padding: 12px;\n gap: 8px;\n border-radius: 9999px;\n white-space: nowrap;\n }\n\n /* Hover fills like a mega trigger opening on hover. */\n .menu-item.bar:hover,\n .menu-item.bar:focus-visible {\n padding-left: 12px;\n background: var(--st-color-accent);\n color: var(--st-color-on-solid);\n }\n\n .menu-item.bar.active {\n border-left: 0;\n }\n\n .menu-item.bar .menu-item-icon {\n margin-top: 0;\n }\n\n .menu-item.bar .menu-item-title {\n font-size: 0.875rem;\n font-weight: 400;\n }\n\n .external {\n display: inline-flex;\n margin-left: 3px;\n vertical-align: 0.05em;\n }\n\n .menu-item.no-description {\n align-items: center;\n }\n\n .menu-item.no-description .menu-item-icon {\n margin-top: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .menu-item,\n .menu-item-icon {\n transition: none;\n }\n\n .menu-item:active,\n .menu-item-icon:hover {\n transform: none;\n }\n\n .menu-item-badge,\n .menu-item-description {\n animation: none;\n }\n }\n `;\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n href = '';\n\n @property({ type: String })\n description = '';\n\n /** Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none. */\n @property({ type: String })\n badge = '';\n\n /** Highlights this row as the current page (source: `isActive`). */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n @property({ type: Boolean, reflect: true })\n compact = false;\n\n /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\n @property({ type: Boolean, attribute: 'show-description' })\n showDescription = true;\n\n /** `target` for the `<a>` (source default `_self`). */\n @property({ type: String })\n target = '_self';\n\n /** `default` (a row with a hover box), `link` (a plain text link, as in `st-mega-menu-column`;\n * marked with an arrow when it opens a new tab) or `bar` (a top-level item in a header bar,\n * shaped like a mega `st-dropdown`'s trigger pill so it lines up with the dropdowns beside it). */\n @property({ type: String, reflect: true })\n variant: 'default' | 'link' | 'bar' = 'default';\n\n /** Size of the slotted icon, any CSS length (e.g. `36px`); empty keeps 16px (14px when `compact`). */\n @property({ type: String, attribute: 'icon-size' })\n iconSize = '';\n\n /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\n @state() private hasIcon = false;\n\n private onIconSlotChange = (event: Event): void => {\n this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n };\n\n private onClick = (event: MouseEvent): void => {\n const selectEvent = new CustomEvent<MenuItemSelectEventDetail>('menu-item-select', {\n detail: { href: this.href },\n bubbles: true,\n composed: true,\n cancelable: true\n });\n this.dispatchEvent(selectEvent);\n if (selectEvent.defaultPrevented) event.preventDefault();\n };\n\n render() {\n const showDescription = !!this.description && this.showDescription;\n const link = this.variant === 'link';\n const classes = [\n 'menu-item',\n link ? 'link' : '',\n this.variant === 'bar' ? 'bar' : '',\n this.active ? 'active' : '',\n this.compact ? 'compact' : '',\n showDescription ? '' : 'no-description'\n ]\n .filter(Boolean)\n .join(' ');\n const external = link && this.target === '_blank';\n return html`\n <a\n part=\"item\"\n class=${classes}\n href=${this.href}\n target=${this.target}\n rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\n @click=${this.onClick}\n >\n <span\n class=\"menu-item-icon\"\n part=\"icon\"\n ?hidden=${!this.hasIcon}\n style=${this.iconSize ? `--st-menu-item-icon-size: ${this.iconSize}` : nothing}\n ><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot\n ></span>\n <span class=\"menu-item-content\" part=\"content\">\n <span class=\"menu-item-header\" part=\"header\">\n <span part=\"title\" class=\"menu-item-title\"\n >${this.title}${external ? html`<span class=\"external\">${arrowUpRightIcon(11)}</span>` : nothing}</span\n >\n ${this.badge ? html`<span part=\"badge\" class=\"menu-item-badge\">${this.badge}</span>` : nothing}\n </span>\n ${showDescription ? html`<p part=\"description\" class=\"menu-item-description\">${this.description}</p>` : nothing}\n </span>\n </a>\n `;\n }\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/menu-grid/MenuGrid.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles } from '../shared/styles';\n\n/**\n * A responsive grid of `st-menu-grid-item`s — the \"rich\" nav-menu layout (icon + title +\n * description per entry, arranged in columns), typically slotted into `st-dropdown`'s default\n * slot. A 1:1 port of `SankhyaUI`'s React `MenuGrid` (`SankhyaCMS/SankhyaUI/src/components/Menu`):\n * same markup (`.menu-grid-container` > `.menu-grid.columns-N`), gap and breakpoints (768px: 2–4\n * columns → 2; 480px: everything → 1; a 1-column grid stays 1).\n */\n@customElement('st-menu-grid')\nexport class MenuGrid extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n }\n\n .menu-grid-container {\n width: 100%;\n }\n\n .menu-grid {\n display: grid;\n gap: 12px;\n }\n\n .menu-grid.columns-1 {\n grid-template-columns: repeat(1, 1fr);\n }\n\n .menu-grid.columns-2 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .menu-grid.columns-3 {\n grid-template-columns: repeat(3, 1fr);\n }\n\n .menu-grid.columns-4 {\n grid-template-columns: repeat(4, 1fr);\n }\n\n @media (max-width: 768px) {\n .menu-grid.columns-2,\n .menu-grid.columns-3,\n .menu-grid.columns-4 {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n @media (max-width: 480px) {\n .menu-grid.columns-1,\n .menu-grid.columns-2,\n .menu-grid.columns-3,\n .menu-grid.columns-4 {\n grid-template-columns: 1fr;\n }\n }\n `;\n\n /** Number of columns at full width (1–4, same as the source component's `columns-N` classes). */\n @property({ type: Number })\n columns = 3;\n\n /** Extra class(es) appended to the inner grid element — the source component's `gridClassName`.\n * Its outer `className` is the host element itself here: set a `class` attribute on `st-menu-grid`. */\n @property({ type: String, attribute: 'grid-class-name' })\n gridClassName = '';\n\n render() {\n const columns = Math.min(4, Math.max(1, Math.round(this.columns) || 1));\n return html`\n <div class=\"menu-grid-container\" part=\"container\">\n <div part=\"grid\" class=\"menu-grid columns-${columns} ${this.gridClassName}\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAYjC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAqDL,mBAAU;AAKV,yBAAgB;AAAA;AAAA,EAEhB,SAAS;AACP,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC;AACtE,WAAO;AAAA;AAAA,oDAEyC,OAAO,IAAI,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/E;AACF;AAtEa,SACJ,SAAS;AAAA,MACZ,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;AAmDrB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApDf,SAqDX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GAzD7C,SA0DX;AA1DW,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/promo-banner/PromoBanner.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { ctaLinkStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\nimport type { HeroActionEventDetail } from '../hero/HeroEvents';\n\n/**\n * Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a\n * background image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event\n * (detail `{ href }`, empty unless set) in place of `onAction`.\n *\n * @cssprop --st-promo-banner-margin - Overrides the banner's margin.\n * @cssprop --st-promo-banner-padding - Overrides the banner's padding.\n */\n@customElement('st-promo-banner')\nexport class PromoBanner extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n box-sizing: border-box;\n width: calc(100% - 48px);\n max-width: var(--st-cms-container-max);\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n margin/padding; override with --st-promo-banner-margin/-padding instead. */\n margin: var(--st-promo-banner-margin, var(--st-space-40) auto) !important;\n padding: var(--st-promo-banner-padding, 100px var(--st-space-24)) !important;\n border-radius: var(--st-space-24);\n background-color: var(--st-color-text-strong);\n background-size: cover;\n background-position: center;\n color: var(--st-color-on-solid);\n text-align: center;\n ${rootFontFamilyStyles}\n }\n\n :host([inverted]) {\n background-color: var(--st-color-subtle);\n color: var(--st-color-text-strong);\n }\n\n .container {\n max-width: 800px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--st-space-32);\n }\n\n .title {\n ${sectionTitleStyles}\n color: inherit;\n margin: 0;\n letter-spacing: -0.02em;\n }\n\n .subtitle {\n ${sectionSubtitleStyles}\n color: inherit;\n opacity: 0.8;\n margin: 0;\n }\n\n .actions {\n margin-top: var(--st-space-16);\n }\n\n .cta {\n ${buttonResetStyles}\n ${ctaLinkStyles}\n border: 1px solid currentColor;\n color: inherit;\n }\n\n .cta:hover {\n transform: scale(1.05);\n }\n\n @media (max-width: 768px) {\n :host {\n width: auto;\n margin: var(--st-promo-banner-margin, var(--st-space-24)) !important;\n padding: var(--st-promo-banner-padding, 60px var(--st-space-24)) !important;\n border-radius: var(--st-radius-lg);\n }\n .actions,\n .cta {\n width: 100%;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .cta {\n transition: none;\n }\n }\n `;\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n @property({ type: String, attribute: 'action-label' })\n actionLabel = '';\n\n @property({ type: String })\n href = '';\n\n @property({ type: String, attribute: 'image-src' })\n imageSrc = '';\n\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n protected willUpdate(): void {\n this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\n }\n\n private onAction = (): void => {\n this.dispatchEvent(\n new CustomEvent<HeroActionEventDetail>('action', { detail: { href: this.href }, bubbles: true, composed: true })\n );\n };\n\n render() {\n return html`\n <div class=\"container\" part=\"container\">\n <h2 class=\"title\" part=\"title\">${this.title}</h2>\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n <slot></slot>\n ${this.actionLabel\n ? html`<div class=\"actions\" part=\"actions\">\n <button class=\"cta\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>\n </div>`\n : nothing}\n </div>\n `;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAejC,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC;AAAA;AAsFL,iBAAQ;AAGR,oBAAW;AAGX,uBAAc;AAGd,gBAAO;AAGP,oBAAW;AAGX,oBAAW;AAMX,SAAQ,WAAW,MAAY;AAC7B,WAAK;AAAA,QACH,IAAI,YAAmC,UAAU,EAAE,QAAQ,EAAE,MAAM,KAAK,KAAK,GAAG,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,MACjH;AAAA,IACF;AAAA;AAAA,EARU,aAAmB;AAC3B,SAAK,MAAM,kBAAkB,KAAK,WAAW,OAAO,KAAK,UAAU,KAAK,QAAQ,CAAC,MAAM;AAAA,EACzF;AAAA,EAQA,SAAS;AACP,WAAO;AAAA;AAAA,yCAE8B,KAAK,KAAK;AAAA,UACzC,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA;AAAA,UAExF,KAAK,cACH;AAAA,uEAC2D,KAAK,QAAQ,IAAI,KAAK,WAAW;AAAA,sBAE5F,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA/Ha,YACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAiBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWrB,iBAAiB;AAAA,QACjB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BnB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,YAsFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxFf,YAyFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GA3F1C,YA4FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Ff,YA+FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAjGvC,YAkGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApG/B,YAqGX;AArGW,cAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chevronIcon, closeIcon, menuIcon } from '../shared/icons';\nimport { BREAKPOINT_TABLET, buttonResetStyles, controlBaseStyles, dropdownPanelStyles, rootFontFamilyStyles } from '../shared/styles';\nimport type { LanguageChangedEventDetail } from './HeaderEvents';\n\n/**\n * The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\n * for primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\n * middle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\n * from `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\n * package's Lit conventions and this workspace's actual needs — that source component takes an\n * `imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\n * `title` is the primary brand prop here and `brand-image-url` is optional, mirroring\n * `st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\n * deliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\n * props — pick whichever fits a given app's header).\n *\n * Layout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\n * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\n * source) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\n * toggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\n * `inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\n * (`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\n * `BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\n * root can only ever assign a given light-DOM child to the *first* slot of a given name.\n *\n * An optional `slot=\"brand-extra\"` sits right after the brand (e.g. an edition badge such as\n * \"🇮🇳 India Edition\"); unlike `menu`/`utility` it stays in the bar at every width.\n *\n * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\n * `language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\n * rebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\n * as a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\n * This component has no translation logic itself; the consuming app owns what a language `code`\n * means and which content it re-renders in response.\n *\n * @slot menu - Primary navigation.\n * @slot utility - Account, app-switcher and theme controls, after the divider.\n * @slot brand-extra - Shown right after the brand at every width (e.g. an edition badge).\n * @slot menu-icon - Replaces the hamburger on the narrow-screen toggle (the built-in glyph when empty).\n * @slot close-icon - Replaces the close (X) on the toggle while the menu is open (the built-in glyph when empty).\n * @cssprop --st-header-toggle-icon-size - Width and height of a slotted toggle icon (default 20px, the built-in glyph's size).\n */\n@customElement('st-header')\nexport class Header extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: flex;\n align-items: center;\n /* The containing block of an st-dropdown[mega] panel, which spans the bar. */\n position: relative;\n /* Spacing between brand, menu and utility controls is the rows' own margins (SankhyaUI's\n layout), not a flex gap. */\n gap: 0;\n /* !important on the box-model properties only: a shadow host's own :host rule always loses\n * to ANY rule the consuming page has for the same property on that element, regardless of\n * specificity (see st-footer's own padding/border-top for the same fix). Without\n * box-sizing: border-box pinned here, a page that also sets its own padding on this host\n * (e.g. a p-2 utility class) adds that padding on TOP of the fixed 64px height instead of\n * being absorbed inside it — which is exactly what happens in Template Hub, the one app that\n * doesn't load Tailwind Preflight (Preflight's own box-sizing: border-box reset is what\n * silently keeps every other app's header at the intended 64px). */\n box-sizing: border-box !important;\n padding: 0 2rem !important;\n height: 64px !important;\n background: var(--st-color-surface);\n border-bottom: 1px solid var(--st-color-border) !important;\n ${rootFontFamilyStyles}\n color: var(--st-color-text-strong);\n }\n\n :host([sticky]) {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n\n /* Toggle icons: a host's slotted icon, else the built-in glyph; only the current state's shows. */\n .toggle slot {\n display: contents;\n }\n\n .toggle slot[hidden] {\n display: none;\n }\n\n .toggle ::slotted(*) {\n flex: none;\n width: var(--st-header-toggle-icon-size, 20px);\n height: var(--st-header-toggle-icon-size, 20px);\n }\n\n :host([inverted]) {\n background: var(--st-color-text-strong);\n color: var(--st-color-on-solid);\n border-bottom-color: transparent;\n }\n\n :host([sticky]),\n :host([transparent]),\n :host([hide-on-scroll]) {\n transition:\n background-color 0.3s ease,\n color 0.3s ease,\n box-shadow 0.3s ease,\n border-color 0.3s ease,\n transform 0.3s ease;\n }\n\n /* Once the page has scrolled, a sticky/fixed header lifts off the content. */\n :host([scrolled][sticky]),\n :host([scrolled][transparent]),\n :host([scrolled][hide-on-scroll]) {\n box-shadow: 0 4px 16px var(--st-shadow-color-md);\n border-bottom-color: transparent !important;\n }\n\n /* transparent: fixed over the top of the page (e.g. a dark hero), see-through until scrolled. */\n :host([transparent]) {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 100;\n }\n\n :host([transparent]:not([scrolled]):not([mobile-open])) {\n background: transparent;\n border-bottom-color: transparent !important;\n color: var(--st-header-transparent-color, var(--st-color-on-solid));\n /* Read by st-menu-item / st-dropdown triggers in the bar (their panels reset them). */\n --st-nav-color: var(--st-header-transparent-color, var(--st-color-on-solid));\n --st-nav-hover-bg: color-mix(in oklch, currentColor 14%, transparent);\n }\n\n :host([transparent]:not([scrolled]):not([mobile-open])) .utility-row {\n border-left-color: color-mix(in oklch, currentColor 35%, transparent);\n }\n\n :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger {\n color: inherit;\n }\n\n :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger:hover,\n :host([transparent]:not([scrolled]):not([mobile-open])) .toggle:hover {\n background: color-mix(in oklch, currentColor 14%, transparent);\n }\n\n /* hide-on-scroll: slides away while scrolling down, back as soon as the user scrolls up. */\n :host([hide-on-scroll]:not([sticky]):not([transparent])) {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n\n :host([scroll-hidden]:not([mobile-open])) {\n transform: translateY(-100%);\n box-shadow: none;\n }\n\n .brand {\n display: flex;\n align-items: center;\n gap: var(--st-space-10);\n flex: none;\n text-decoration: none;\n color: inherit;\n }\n\n .brand-mark {\n width: var(--st-size-28);\n height: var(--st-size-28);\n border-radius: var(--st-radius-sm);\n flex: none;\n object-fit: contain;\n }\n\n .brand-title {\n font-size: var(--st-text-xl);\n font-weight: var(--st-font-weight-bold);\n letter-spacing: var(--st-tracking-tight);\n white-space: nowrap;\n }\n\n /* Optional slot=\"brand-extra\" (e.g. an edition badge) right after the brand. Outside the\n mobile panel, so it stays beside the logo at every width; no box at all when empty. */\n .brand-extra {\n display: flex;\n align-items: center;\n gap: var(--st-space-8);\n flex: none;\n margin-left: var(--st-space-10);\n white-space: nowrap;\n }\n\n .brand-extra.empty {\n display: none;\n }\n\n /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's\n own flex children. Mobile (see below) turns this into the actual overlay box. */\n .mobile-panel {\n display: contents;\n }\n\n /* Desktop layout from SankhyaUI's Header: the menu starts 4rem after the brand and takes the\n free width; the utility controls sit after a vertical divider. Between 901px and 1200px the\n gaps tighten so the menu still fits down to the 900px hamburger breakpoint. */\n .menu-row {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 1.5rem;\n min-width: 0;\n margin-left: 4rem;\n }\n\n .utility-row {\n flex: none;\n display: flex;\n align-items: center;\n gap: 1rem;\n margin-left: 1.5rem;\n padding-left: 1.5rem;\n border-left: 1px solid var(--st-color-border);\n }\n\n :host([inverted]) .utility-row {\n border-left-color: currentColor;\n }\n\n .utility-row.empty {\n display: none;\n }\n\n @media (max-width: 1200px) {\n :host {\n padding: 0 1rem !important;\n }\n\n .menu-row {\n margin-left: 0.5rem;\n }\n\n .utility-row {\n margin-left: 0.5rem;\n padding-left: 0.5rem;\n }\n }\n\n @keyframes st-header-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n .toggle {\n display: none;\n align-items: center;\n justify-content: center;\n flex: none;\n position: relative;\n z-index: 1002;\n width: var(--st-size-32);\n height: var(--st-size-32);\n margin-left: auto;\n padding: 0.5rem;\n border: 0;\n border-radius: var(--st-radius-sm);\n background: transparent;\n color: inherit;\n cursor: pointer;\n }\n\n .toggle:hover {\n background: var(--st-color-hover);\n }\n\n .lang-menu {\n position: relative;\n flex: none;\n }\n\n .lang-trigger {\n ${buttonResetStyles}\n display: flex;\n align-items: center;\n gap: var(--st-space-4);\n height: var(--st-size-32);\n padding: 0 var(--st-space-8);\n border-radius: var(--st-radius-sm);\n font-size: var(--st-text-base);\n font-weight: var(--st-font-weight-semibold);\n color: var(--st-color-text-muted);\n }\n\n .lang-trigger:hover {\n background: var(--st-color-hover);\n color: var(--st-color-text-strong);\n }\n\n .lang-dropdown {\n ${dropdownPanelStyles}\n min-width: 140px;\n }\n\n .lang-option {\n ${buttonResetStyles}\n display: block;\n width: 100%;\n padding: var(--st-space-10) var(--st-space-14);\n font-size: var(--st-text-base);\n font-weight: var(--st-font-weight-semibold);\n text-align: left;\n color: inherit;\n }\n\n .lang-option:hover {\n background: var(--st-color-hover);\n }\n\n .lang-option.active {\n color: var(--st-color-accent-text);\n }\n\n /* Hamburger layout from SankhyaUI's Header: a full-screen layer under the toggle, menu above\n the utility controls, the menu's dropdowns opening in the flow (see syncInlineDropdowns). */\n @media (max-width: ${BREAKPOINT_TABLET}px) {\n :host {\n padding: 0 1rem !important;\n }\n\n .mobile-panel {\n display: none;\n }\n\n .toggle {\n display: inline-flex;\n }\n\n :host([mobile-open]) .mobile-panel {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n position: fixed;\n inset: 0;\n background: var(--st-color-surface);\n padding: 5rem 1.5rem 2rem;\n overflow-y: auto;\n z-index: 1001;\n animation: st-header-fade-in 0.3s ease;\n }\n\n :host([mobile-open]) .menu-row,\n :host([mobile-open]) .utility-row {\n flex-direction: column;\n align-items: stretch;\n gap: 1.5rem;\n margin-left: 0;\n }\n\n :host([mobile-open]) .utility-row {\n padding: 1.5rem 0 0;\n border-left: 0;\n border-top: 1px solid var(--st-color-border);\n }\n\n /* Apps usually slot one flex-row wrapper per slot; stack its items as the source does. */\n :host([mobile-open]) ::slotted([slot='menu']),\n :host([mobile-open]) ::slotted([slot='utility']) {\n flex-direction: column !important;\n align-items: stretch !important;\n margin: 0 !important;\n }\n }\n\n /* The same collapsed layout, switched on by script when the menu no longer fits the bar at\n desktop width (see evaluateFit) — without it the menu spills over the utility controls. */\n :host([compact]) .mobile-panel {\n display: none;\n }\n\n :host([compact]) .toggle {\n display: inline-flex;\n }\n\n :host([compact][mobile-open]) .mobile-panel {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n position: fixed;\n inset: 0;\n background: var(--st-color-surface);\n padding: 5rem 1.5rem 2rem;\n overflow-y: auto;\n z-index: 1001;\n animation: st-header-fade-in 0.3s ease;\n }\n\n :host([compact][mobile-open]) .menu-row,\n :host([compact][mobile-open]) .utility-row {\n flex-direction: column;\n align-items: stretch;\n gap: 1.5rem;\n margin-left: 0;\n }\n\n :host([compact][mobile-open]) .utility-row {\n padding: 1.5rem 0 0;\n border-left: 0;\n border-top: 1px solid var(--st-color-border);\n }\n\n :host([compact][mobile-open]) ::slotted([slot='menu']),\n :host([compact][mobile-open]) ::slotted([slot='utility']) {\n flex-direction: column !important;\n align-items: stretch !important;\n margin: 0 !important;\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host,\n .mobile-panel {\n animation: none !important;\n transition: none !important;\n }\n }\n `;\n\n @property({ type: String })\n title = '';\n\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). */\n @property({ type: String, attribute: 'brand-image-url' })\n brandImageUrl = '';\n\n /** `alt` text for the brand image — matches the source component's `altText` (default `'Logo'`). */\n @property({ type: String, attribute: 'alt-text' })\n altText = 'Logo';\n\n /** Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise. */\n @property({ type: String })\n logoHref = '';\n\n /** `target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set. */\n @property({ type: String, attribute: 'logo-target' })\n logoTarget = '_self';\n\n /** Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`. */\n @property({ type: String, attribute: 'logo-class-name' })\n logoClassName = '';\n\n /** Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\n * source component's `inverted` (from its shared `BaseProps`). */\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n @property({ type: Boolean, reflect: true })\n sticky = false;\n\n /**\n * Fixes the header over the top of the page and makes it see-through, with light text\n * (`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\n * header laid over a dark hero. It then takes its normal background and a shadow. The page\n * content starts under it, so the first section should leave room for the 64px bar.\n */\n @property({ type: Boolean, reflect: true })\n transparent = false;\n\n /** Slides the header out of view while the page scrolls down and back in when it scrolls up. */\n @property({ type: Boolean, reflect: true, attribute: 'hide-on-scroll' })\n hideOnScroll = false;\n\n /** Scroll distance in px after which the header counts as `scrolled`. */\n @property({ type: Number, attribute: 'scroll-threshold' })\n scrollThreshold = 8;\n\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. */\n @property({ type: Boolean, reflect: true })\n scrolled = false;\n\n /** True while `hide-on-scroll` has slid the header away. Set by the header, never from outside. */\n @property({ type: Boolean, reflect: true, attribute: 'scroll-hidden' })\n scrollHidden = false;\n\n private lastScrollY = 0;\n private scrollFrame = 0;\n\n private onScroll = (): void => {\n if (this.scrollFrame) return;\n this.scrollFrame = requestAnimationFrame(() => {\n this.scrollFrame = 0;\n const y = Math.max(0, window.scrollY);\n this.scrolled = y > this.scrollThreshold;\n if (this.hideOnScroll) {\n const delta = y - this.lastScrollY;\n // Ignore tiny jitters; never hide while still at the top of the page or with the menu open.\n if (Math.abs(delta) > 4) this.scrollHidden = delta > 0 && y > this.offsetHeight && !this.mobileOpen;\n } else {\n this.scrollHidden = false;\n }\n this.lastScrollY = y;\n });\n };\n\n /**\n * Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\n * when empty or when only one language is offered (same convention as `st-app-header`'s\n * `languages`, which this reuses verbatim). This component has no translation logic itself —\n * selecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\n * what `code` actually means and which content it re-renders.\n */\n @property({ attribute: false })\n languages: { code: string; label: string }[] = [];\n\n @property({ type: String, attribute: 'current-language-code' })\n currentLanguageCode = '';\n\n @property({ type: String, attribute: 'language-menu-label' })\n languageMenuLabel = 'Language';\n\n /** Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\n * the `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\n * outside. */\n @property({ type: Boolean, reflect: true, attribute: 'mobile-open' })\n mobileOpen = false;\n\n /** True while the menu doesn't fit the bar at the current width: the header then shows the same\n * hamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside. */\n @property({ type: Boolean, reflect: true })\n compact = false;\n\n @state() private languageMenuOpen = false;\n\n /** Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden. */\n @state() private hasUtility = false;\n\n /** Whether `slot=\"brand-extra\"` has content — an empty one takes no room beside the brand. */\n @state() private hasBrandExtra = false;\n\n private resizeObserver?: ResizeObserver;\n\n /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */\n private narrowQuery?: MediaQueryList;\n\n /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's\n * own `inline` setting is left alone. */\n private inlinedDropdowns = new Set<HTMLElement & { inline: boolean; open: boolean }>();\n\n /** While the hamburger layout is on, the dropdowns in the header open in the flow of the\n * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */\n private syncInlineDropdowns = (): void => {\n const collapsed = this.compact || !!this.narrowQuery?.matches;\n const dropdowns = Array.from(this.querySelectorAll('st-dropdown')) as (HTMLElement & { inline: boolean; open: boolean })[];\n if (collapsed) {\n for (const dropdown of dropdowns) {\n if (dropdown.inline) continue;\n dropdown.inline = true;\n this.inlinedDropdowns.add(dropdown);\n }\n } else {\n for (const dropdown of this.inlinedDropdowns) dropdown.inline = false;\n this.inlinedDropdowns.clear();\n }\n };\n\n private onBrandExtraSlotChange = (event: Event): void => {\n this.hasBrandExtra = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n this.evaluateFit();\n };\n\n private onUtilitySlotChange = (event: Event): void => {\n this.hasUtility = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n this.evaluateFit();\n };\n\n private onMenuSlotChange = (): void => {\n this.evaluateFit();\n this.syncInlineDropdowns();\n };\n\n protected updated(changed: Map<string, unknown>): void {\n if (changed.has('compact')) this.syncInlineDropdowns();\n // A mega dropdown's drill-down panel would otherwise still cover the menu next time it opens.\n if (changed.has('mobileOpen') && !this.mobileOpen) {\n for (const dropdown of this.inlinedDropdowns) dropdown.open = false;\n }\n }\n\n /** The bar width at which the menu last overflowed — the bar only expands again once it is\n * clearly wider than this, so it can't flip back and forth right at the threshold. */\n private collapsedAtWidth = 0;\n\n /** Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\n * once there is room. The collapsed layout hides the menu, so the room it needs can't be\n * measured then; the width remembered when it collapsed stands in for it. */\n private evaluateFit = (): void => {\n const width = this.clientWidth;\n if (this.compact) {\n if (width > this.collapsedAtWidth + 24) {\n this.compact = false;\n this.mobileOpen = false;\n void this.updateComplete.then(this.evaluateFit);\n }\n return;\n }\n if (this.menuOverflows()) {\n this.collapsedAtWidth = width;\n this.compact = true;\n }\n };\n\n /** Whether the visible menu items reach past the right edge of the menu row. Measured from the\n * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\n * a closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\n * report overflow at any width. */\n private menuOverflows(): boolean {\n const row = this.renderRoot.querySelector<HTMLElement>('.menu-row');\n const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\n if (!row || !slot) return false;\n const limit = row.getBoundingClientRect().right + 1;\n let right = 0;\n for (const el of slot.assignedElements({ flatten: true })) {\n for (const box of [el, ...Array.from(el.children)]) {\n const rect = box.getBoundingClientRect();\n if (rect.width > 0) right = Math.max(right, rect.right);\n }\n }\n return right > limit;\n }\n\n protected firstUpdated(): void {\n this.resizeObserver = new ResizeObserver(this.evaluateFit);\n this.resizeObserver.observe(this);\n this.evaluateFit();\n this.syncInlineDropdowns();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n window.addEventListener('keydown', this.closeOnEscape);\n window.addEventListener('click', this.closeLanguageMenuOnOutsideClick);\n window.addEventListener('scroll', this.onScroll, { passive: true });\n this.onScroll();\n this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);\n this.narrowQuery.addEventListener('change', this.syncInlineDropdowns);\n // Menus often render their dropdowns after the header (e.g. once the user's role loads),\n // deeper than a slotchange reports.\n this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);\n this.lightDomObserver.observe(this, { childList: true, subtree: true });\n }\n\n private lightDomObserver?: MutationObserver;\n\n disconnectedCallback(): void {\n this.lightDomObserver?.disconnect();\n this.narrowQuery?.removeEventListener('change', this.syncInlineDropdowns);\n this.resizeObserver?.disconnect();\n window.removeEventListener('keydown', this.closeOnEscape);\n window.removeEventListener('click', this.closeLanguageMenuOnOutsideClick);\n window.removeEventListener('scroll', this.onScroll);\n if (this.scrollFrame) cancelAnimationFrame(this.scrollFrame);\n this.scrollFrame = 0;\n super.disconnectedCallback();\n }\n\n private closeOnEscape = (event: KeyboardEvent): void => {\n if (this.mobileOpen && event.key === 'Escape') this.mobileOpen = false;\n if (this.languageMenuOpen && event.key === 'Escape') this.languageMenuOpen = false;\n };\n\n private closeLanguageMenuOnOutsideClick = (event: Event): void => {\n if (this.languageMenuOpen && !event.composedPath().includes(this)) this.languageMenuOpen = false;\n };\n\n private renderLanguageMenu() {\n if (this.languages.length < 2) return nothing;\n const current = this.languages.find((lang) => lang.code === this.currentLanguageCode);\n return html`\n <div class=\"lang-menu\" part=\"language-menu\">\n <button\n part=\"language-menu-trigger\"\n type=\"button\"\n class=\"lang-trigger\"\n aria-label=${this.languageMenuLabel}\n aria-expanded=${this.languageMenuOpen}\n @click=${(event: Event) => {\n event.stopPropagation();\n this.languageMenuOpen = !this.languageMenuOpen;\n }}\n >\n <span part=\"language-menu-current\">${current?.label ?? this.languageMenuLabel}</span>\n ${chevronIcon('down', 10)}\n </button>\n ${this.languageMenuOpen\n ? html`\n <div part=\"language-dropdown\" class=\"lang-dropdown\">\n ${this.languages.map(\n (lang) => html`\n <button\n part=\"language-option\"\n type=\"button\"\n class=\"lang-option ${lang.code === this.currentLanguageCode ? 'active' : ''}\"\n aria-current=${lang.code === this.currentLanguageCode}\n @click=${() => this.onLanguageSelect(lang.code)}\n >\n ${lang.label}\n </button>\n `\n )}\n </div>\n `\n : nothing}\n </div>\n `;\n }\n\n private onLanguageSelect(code: string): void {\n this.languageMenuOpen = false;\n if (code === this.currentLanguageCode) return;\n this.dispatchEvent(new CustomEvent<LanguageChangedEventDetail>('language-change', { detail: { code }, bubbles: true, composed: true }));\n }\n\n private renderBrand() {\n const content = html`\n ${this.brandImageUrl ? html`<img part=\"brand-mark\" class=\"brand-mark\" src=${this.brandImageUrl} alt=${this.altText} /> ` : nothing}\n <span part=\"brand-title\" class=\"brand-title\">${this.title}</span>\n `;\n return this.logoHref\n ? html`<a part=\"brand\" class=\"brand ${this.logoClassName}\" href=${this.logoHref} target=${this.logoTarget}>${content}</a>`\n : html`<div part=\"brand\" class=\"brand ${this.logoClassName}\">${content}</div>`;\n }\n\n render() {\n return html`\n ${this.renderBrand()}\n <div class=\"brand-extra ${this.hasBrandExtra ? '' : 'empty'}\" part=\"brand-extra\"><slot name=\"brand-extra\" @slotchange=${this.onBrandExtraSlotChange}></slot></div>\n\n <div class=\"mobile-panel\" part=\"mobile-panel\" @click=${() => (this.mobileOpen = false)}>\n <div class=\"menu-row\" part=\"menu-row\"><slot name=\"menu\" @slotchange=${this.onMenuSlotChange}></slot></div>\n <div class=\"utility-row ${this.hasUtility || this.languages.length >= 2 ? '' : 'empty'}\" part=\"utility-row\">\n ${this.renderLanguageMenu()}<slot name=\"utility\" @slotchange=${this.onUtilitySlotChange}></slot>\n </div>\n </div>\n\n <button\n part=\"toggle\"\n type=\"button\"\n class=\"toggle\"\n aria-label=${this.mobileOpen ? 'Close menu' : 'Open menu'}\n aria-expanded=${this.mobileOpen}\n @click=${() => (this.mobileOpen = !this.mobileOpen)}\n >\n <slot name=\"menu-icon\" ?hidden=${this.mobileOpen}>${menuIcon()}</slot>\n <slot name=\"close-icon\" ?hidden=${!this.mobileOpen}>${closeIcon()}</slot>\n </button>\n `;\n }\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/icon-button/IconButton.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\n\n/**\n * A small, icon-only action button — ported from `SankhyaUI`'s React `IconButton` (a separate,\n * unrelated marketing-site project; that source takes an iconify string `icon` prop, this package\n * has no iconify dependency, so the icon is default-slotted content instead, same convention as\n * `st-dropdown`/`st-menu-grid-item`'s `slot=\"icon\"`).\n *\n * Fires a plain native `click` — no custom event, since a caller just wants an ordinary button.\n */\n@customElement('st-icon-button')\nexport class IconButton extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: inline-flex;\n ${rootFontFamilyStyles}\n }\n\n button {\n ${buttonResetStyles}\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--st-size-32);\n height: var(--st-size-32);\n border-radius: var(--st-radius-sm);\n color: var(--st-color-text-muted);\n }\n\n button:hover {\n background: var(--st-color-hover);\n color: var(--st-color-text-strong);\n }\n\n :host([disabled]) button {\n color: var(--st-color-text-muted);\n cursor: not-allowed;\n pointer-events: none;\n }\n `;\n\n /** Accessible name and tooltip — matches the source component's `ariaLabel` (renamed: modern\n * browsers already expose a native `ariaLabel` reflected property on every `Element`, so reusing\n * that exact name as a Lit reactive property would shadow it). Required for a control with no\n * visible text. */\n @property({ type: String })\n label = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n render() {\n return html`\n <button part=\"button\" type=\"button\" aria-label=${this.label} title=${this.label} ?disabled=${this.disabled}>\n <slot></slot>\n </button>\n `;\n }\n}\n"],"mappings":";;;;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAajC,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC;AAAA;AAqCL,iBAAQ;AAGR,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA,uDAC4C,KAAK,KAAK,UAAU,KAAK,KAAK,cAAc,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI9G;AACF;AAjDa,WACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,oBAAoB;AAAA;AAAA;AAAA;AAAA,QAIpB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApCf,WAqCX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvC/B,WAwCX;AAxCW,aAAN;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/card/Card.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, cardShellStyles, fontFamilyStyles } from '../shared/styles';\n\n/**\n * A surfaced container — content goes in the default slot. Ports `SankhyaUI`'s React `Card`\n * (`variant`, `padding`, `elevation`, `hoverable`, `inverted`); `onClick` is just a native `click`\n * listener on the element. `padding` takes `none | small | medium | large` (the source's\n * `sm|md|lg`, spelled like `paddingScaleStyles`); `elevation` takes `none | sm | md | lg`.\n */\n@customElement('st-card')\nexport class Card extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n ${fontFamilyStyles}\n ${cardShellStyles}\n border-radius: var(--st-radius-lg);\n overflow: hidden;\n position: relative;\n transition:\n transform 0.3s ease,\n box-shadow 0.3s ease,\n border-color 0.3s ease;\n }\n\n :host([variant='bordered']) {\n border-color: var(--st-color-border-strong);\n }\n\n :host([elevation='sm']) {\n box-shadow: 0 1px 2px var(--st-shadow-color-sm);\n }\n\n :host([elevation='md']) {\n box-shadow: 0 4px 6px -1px var(--st-shadow-color-md);\n }\n\n :host([elevation='lg']) {\n box-shadow: 0 10px 15px -3px var(--st-shadow-color-lg);\n }\n\n :host([hoverable]:hover) {\n transform: translateY(-4px);\n box-shadow: 0 20px 25px -5px var(--st-shadow-color-xl);\n border-color: var(--st-color-border-strong);\n }\n\n :host([inverted]) {\n background: var(--st-color-text-strong);\n color: var(--st-color-on-solid);\n border-color: var(--st-color-text-strong);\n }\n\n .body {\n padding: var(--st-space-24);\n }\n\n :host([padding='none']) .body {\n padding: 0;\n }\n\n :host([padding='small']) .body {\n padding: var(--st-space-16);\n }\n\n :host([padding='large']) .body {\n padding: var(--st-space-32);\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host {\n transition: none;\n }\n\n :host([hoverable]:hover) {\n transform: none;\n }\n }\n `;\n\n @property({ type: String, reflect: true })\n variant: 'default' | 'bordered' = 'default';\n\n @property({ type: String, reflect: true })\n padding: 'none' | 'small' | 'medium' | 'large' = 'medium';\n\n @property({ type: String, reflect: true })\n elevation: 'none' | 'sm' | 'md' | 'lg' = 'sm';\n\n @property({ type: Boolean, reflect: true })\n hoverable = false;\n\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n render() {\n return html`<div class=\"body\" part=\"body\"><slot></slot></div>`;\n }\n}\n"],"mappings":";;;;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAWjC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;AAyEL,mBAAkC;AAGlC,mBAAiD;AAGjD,qBAAyC;AAGzC,qBAAY;AAGZ,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA,EACT;AACF;AA1Fa,KACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA,QAChB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkErB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxE9B,KAyEX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3E9B,KA4EX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9E9B,KA+EX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjF/B,KAkFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApF/B,KAqFX;AArFW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}
|