@sankhyatronics/sankhya-cms 0.1.4 → 0.1.5
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 +525 -457
- package/dist/bento-grid/index.d.ts +5 -1
- package/dist/bento-grid/index.js +1 -1
- package/dist/{chunk-OEX5FDMR.js → chunk-2JGWWXEI.js} +4 -2
- package/dist/chunk-2JGWWXEI.js.map +1 -0
- package/dist/{chunk-USNFT4DU.js → chunk-6H262SG6.js} +8 -6
- package/dist/chunk-6H262SG6.js.map +1 -0
- package/dist/{chunk-E52WO7R7.js → chunk-BQTDFQ4V.js} +5 -3
- package/dist/chunk-BQTDFQ4V.js.map +1 -0
- package/dist/{chunk-74MILER4.js → chunk-EMVHNAID.js} +5 -3
- package/dist/chunk-EMVHNAID.js.map +1 -0
- package/dist/{chunk-3ERKQNZT.js → chunk-HGJT24UG.js} +7 -5
- package/dist/chunk-HGJT24UG.js.map +1 -0
- package/dist/{chunk-MLF6L3KM.js → chunk-HGTC3LCW.js} +6 -4
- package/dist/chunk-HGTC3LCW.js.map +1 -0
- package/dist/{chunk-S4ARRDAI.js → chunk-IDBEZY2O.js} +8 -6
- package/dist/chunk-IDBEZY2O.js.map +1 -0
- package/dist/{chunk-2VZFHTBC.js → chunk-MW43OS47.js} +5 -3
- package/dist/chunk-MW43OS47.js.map +1 -0
- package/dist/{chunk-N63TVWK3.js → chunk-NN3OCPDV.js} +23 -19
- package/dist/chunk-NN3OCPDV.js.map +1 -0
- package/dist/{chunk-IMACP7HN.js → chunk-UVNBZD7R.js} +5 -3
- package/dist/chunk-UVNBZD7R.js.map +1 -0
- package/dist/{chunk-5REZSZCK.js → chunk-VRRBMOUP.js} +5 -3
- package/dist/chunk-VRRBMOUP.js.map +1 -0
- package/dist/cms-theme.css +11 -0
- package/dist/content-block/index.d.ts +2 -0
- package/dist/content-block/index.js +1 -1
- package/dist/cookie-consent/index.d.ts +2 -0
- package/dist/cookie-consent/index.js +1 -1
- package/dist/feature-split/index.d.ts +5 -1
- package/dist/feature-split/index.js +1 -1
- package/dist/features-section/index.d.ts +2 -0
- package/dist/features-section/index.js +1 -1
- package/dist/index.js +32 -32
- package/dist/items-accordion/index.d.ts +5 -1
- package/dist/items-accordion/index.js +1 -1
- package/dist/mega-menu/index.d.ts +1 -0
- package/dist/mega-menu/index.js +1 -1
- package/dist/promo-banner/index.d.ts +3 -0
- package/dist/promo-banner/index.js +1 -1
- package/dist/section/index.d.ts +1 -0
- package/dist/section/index.js +1 -1
- package/dist/stats/index.d.ts +6 -1
- package/dist/stats/index.js +1 -1
- package/dist/testimonials/index.d.ts +1 -0
- package/dist/testimonials/index.js +2 -2
- package/package.json +4 -13
- package/dist/chunk-2VZFHTBC.js.map +0 -1
- package/dist/chunk-3ERKQNZT.js.map +0 -1
- package/dist/chunk-5REZSZCK.js.map +0 -1
- package/dist/chunk-74MILER4.js.map +0 -1
- package/dist/chunk-E52WO7R7.js.map +0 -1
- package/dist/chunk-IMACP7HN.js.map +0 -1
- package/dist/chunk-MLF6L3KM.js.map +0 -1
- package/dist/chunk-N63TVWK3.js.map +0 -1
- package/dist/chunk-OEX5FDMR.js.map +0 -1
- package/dist/chunk-S4ARRDAI.js.map +0 -1
- package/dist/chunk-USNFT4DU.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/content-block/ContentBlock.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\r\nimport '../markdown';\r\n\r\n/**\r\n * A long-form article section: centered title/subtitle, an optional featured image with caption,\r\n * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\r\n * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\r\n * block works without a fetch); `content-src` wins when both are set.\r\n */\r\n@customElement('st-content-block')\r\nexport class ContentBlock extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n padding: var(--st-space-24);\r\n background: var(--st-color-surface);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .container {\r\n max-width: var(--st-cms-container-max);\r\n padding: 0 var(--st-space-48);\r\n margin: 0 auto;\r\n }\r\n\r\n .header {\r\n ${sectionHeaderStyles}\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n line-height: 1.1;\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .subtitle {\r\n color: inherit;\r\n }\r\n\r\n .featured-image {\r\n margin: 0 0 var(--st-space-48);\r\n border-radius: var(--st-radius-lg);\r\n overflow: hidden;\r\n }\r\n\r\n .featured-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n }\r\n\r\n figcaption {\r\n padding: var(--st-space-12);\r\n text-align: center;\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-xs);\r\n }\r\n\r\n st-markdown {\r\n color: var(--st-color-text);\r\n font-size: var(--st-text-xl);\r\n }\r\n\r\n :host([inverted]) st-markdown {\r\n color: inherit;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-space-48) var(--st-space-24);\r\n }\r\n\r\n .container {\r\n padding: 0;\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 subtitle = '';\r\n\r\n /** URL of a Markdown file. */\r\n @property({ type: String, attribute: 'content-src' })\r\n contentSrc = '';\r\n\r\n /** Inline Markdown, used when `content-src` is not set. */\r\n @property({ type: String })\r\n content = '';\r\n\r\n @property({ type: String, attribute: 'image-src' })\r\n imageSrc = '';\r\n\r\n @property({ type: String, attribute: 'image-alt' })\r\n imageAlt = '';\r\n\r\n @property({ type: String, attribute: 'image-caption' })\r\n imageCaption = '';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n render() {\r\n return html`\r\n <section class=\"container\" part=\"container\">\r\n <div class=\"header\" part=\"header\">\r\n ${this.title ? html`<div class=\"title\" part=\"title\">${this.title}</div>` : nothing}\r\n ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\r\n </div>\r\n ${this.imageSrc\r\n ? html`\r\n <figure class=\"featured-image\" part=\"image\">\r\n <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}\r\n </figure>\r\n `\r\n : nothing}\r\n <st-markdown part=\"body\" .src=${this.contentSrc} .content=${this.content}></st-markdown>\r\n </section>\r\n `;\r\n }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAajC,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAiFL,iBAAQ;AAGR,oBAAW;AAIX,sBAAa;AAIb,mBAAU;AAGV,oBAAW;AAGX,oBAAW;AAGX,wBAAe;AAGf,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,YAGC,KAAK,QAAQ,uCAAuC,KAAK,KAAK,WAAW,OAAO;AAAA,YAChF,KAAK,WAAW,6CAA6C,KAAK,QAAQ,WAAW,OAAO;AAAA;AAAA,UAE9F,KAAK,WACH;AAAA;AAAA,2BAEe,KAAK,QAAQ,QAAQ,KAAK,YAAY,KAAK,KAAK;AAAA,kBACzD,KAAK,eAAe,mBAAmB,KAAK,YAAY,kBAAkB,OAAO;AAAA;AAAA,gBAGvF,OAAO;AAAA,wCACqB,KAAK,UAAU,aAAa,KAAK,OAAO;AAAA;AAAA;AAAA,EAG9E;AACF;AA7Ha,aACJ,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,QAkBhB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgD3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhFf,aAiFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAnFf,aAoFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAvFzC,aAwFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3Ff,aA4FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA9FvC,aA+FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAjGvC,aAkGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GApG3C,aAqGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvG/B,aAwGX;AAxGW,eAAN;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/mega-menu/MegaMenu.ts","../src/mega-menu/MegaMenuColumn.ts","../src/mega-menu/MegaMenuFeature.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\n\n/**\n * The rich layout of a mega-menu panel, after okta.com: an optional intro column on the left (a\n * large `heading`, a `description` and, under a divider, quick links in `slot=\"intro\"`), then the\n * link columns side by side (`st-mega-menu-column`s in the default slot), then an optional\n * featured column on the right (`featured-heading` over the `st-mega-menu-feature` cards in\n * `slot=\"featured\"`). Slot it into an `st-dropdown` with `mega` set.\n *\n * The layout follows the width it is given, not the viewport (a container query): side by side\n * when there is room; intro and featured column above/below two link columns on a medium panel;\n * everything stacked in the narrow drill-down panel `st-header` shows on a phone (where the intro\n * heading is left out — the drill-down already shows the section's name).\n *\n * @slot - The link columns (`st-mega-menu-column`s, or any blocks).\n * @slot intro - Quick links under the intro text, e.g. `st-menu-item`s with an icon.\n * @slot featured - Promo cards (`st-mega-menu-feature`s), stacked.\n * @csspart inner - The grid holding every area.\n * @csspart intro - The intro column.\n * @csspart columns - The grid holding the link columns.\n * @csspart featured - The featured column.\n */\n@customElement('st-mega-menu')\nexport class MegaMenu extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n container-type: inline-size;\n ${fontFamilyStyles}\n }\n\n .inner {\n display: grid;\n gap: 3rem;\n padding: 3rem 3.5rem;\n box-sizing: border-box;\n }\n\n .columns {\n display: grid;\n grid-template-columns: repeat(var(--st-mega-menu-columns, 3), minmax(0, 1fr));\n gap: 3rem;\n align-items: stretch;\n }\n\n .intro,\n .featured {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n\n .intro-heading {\n margin: 0 0 1rem;\n font-size: 2rem;\n font-weight: 400;\n line-height: 1.15;\n color: var(--st-color-text-strong);\n }\n\n .intro-description {\n margin: 0;\n font-size: 1rem;\n line-height: 1.55;\n color: var(--st-color-text);\n }\n\n .intro-links {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: 2.5rem;\n padding-top: 2rem;\n border-top: 1px solid var(--st-color-border);\n }\n\n .intro-links.no-text {\n margin-top: 0;\n padding-top: 0;\n border-top: 0;\n }\n\n .featured-heading {\n margin: 0 0 1rem;\n font-size: 1.125rem;\n font-weight: 500;\n line-height: 1.35;\n color: var(--st-color-text-strong);\n }\n\n .featured-items {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n\n [hidden] {\n display: none !important;\n }\n\n /* Medium panel: intro on top, two link columns, featured cards side by side underneath. */\n @container (max-width: 960px) {\n .inner {\n grid-template-columns: minmax(0, 1fr) !important;\n gap: 2rem;\n padding: 2rem;\n }\n\n .columns {\n grid-template-columns: repeat(var(--st-mega-menu-columns-md, 2), minmax(0, 1fr));\n gap: 2rem;\n }\n\n .intro-links {\n margin-top: 1.5rem;\n padding-top: 1.5rem;\n }\n\n .featured-items {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n }\n }\n\n /* Narrow panel (the phone drill-down): everything stacked. */\n @container (max-width: 560px) {\n .inner {\n gap: 1.75rem;\n padding: 0.5rem 0 1.5rem;\n }\n\n .columns {\n grid-template-columns: minmax(0, 1fr);\n gap: 1.75rem;\n }\n\n .intro-heading {\n display: none;\n }\n }\n `;\n\n /** Large title of the intro column. */\n @property({ type: String })\n heading = '';\n\n /** Text under the intro title. */\n @property({ type: String })\n description = '';\n\n /** Heading over the featured cards. */\n @property({ type: String, attribute: 'featured-heading' })\n featuredHeading = '';\n\n /** Number of link columns side by side at full width. `0` (the default) uses one per slotted column. */\n @property({ type: Number })\n columns = 0;\n\n @state() private columnCount = 1;\n @state() private hasIntroLinks = false;\n @state() private hasFeatured = false;\n\n private onColumnsSlotChange = (event: Event): void => {\n this.columnCount = Math.max(1, (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length);\n };\n\n private onIntroSlotChange = (event: Event): void => {\n this.hasIntroLinks = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n };\n\n private onFeaturedSlotChange = (event: Event): void => {\n this.hasFeatured = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n };\n\n render() {\n const columns = Math.min(6, Math.max(1, Math.round(this.columns) || this.columnCount));\n const hasIntroText = !!(this.heading || this.description);\n const hasIntro = hasIntroText || this.hasIntroLinks;\n const hasFeatured = this.hasFeatured || !!this.featuredHeading;\n // Every column — intro, each link column, featured — gets the same share of the width.\n const tracks = [hasIntro ? 'minmax(0, 1fr)' : '', `minmax(0, ${columns}fr)`, hasFeatured ? 'minmax(0, 1fr)' : '']\n .filter(Boolean)\n .join(' ');\n return html`\n <div\n part=\"inner\"\n class=\"inner\"\n style=\"grid-template-columns:${tracks};--st-mega-menu-columns:${columns};--st-mega-menu-columns-md:${Math.min(2, columns)}\"\n >\n <div part=\"intro\" class=\"intro\" ?hidden=${!hasIntro}>\n ${this.heading ? html`<p part=\"heading\" class=\"intro-heading\">${this.heading}</p>` : nothing}\n ${this.description ? html`<p part=\"description\" class=\"intro-description\">${this.description}</p>` : nothing}\n <div part=\"intro-links\" class=\"intro-links ${hasIntroText ? '' : 'no-text'}\" ?hidden=${!this.hasIntroLinks}>\n <slot name=\"intro\" @slotchange=${this.onIntroSlotChange}></slot>\n </div>\n </div>\n <div part=\"columns\" class=\"columns\"><slot @slotchange=${this.onColumnsSlotChange}></slot></div>\n <div part=\"featured\" class=\"featured\" ?hidden=${!hasFeatured}>\n ${this.featuredHeading ? html`<p part=\"featured-heading\" class=\"featured-heading\">${this.featuredHeading}</p>` : nothing}\n <div class=\"featured-items\"><slot name=\"featured\" @slotchange=${this.onFeaturedSlotChange}></slot></div>\n </div>\n </div>\n `;\n }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { arrowUpRightIcon } from '../shared/icons';\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * One column (or one group within a column) of an `st-mega-menu`: a heading, an optional line of\n * description, then its links stacked — usually `st-menu-item`s with `variant=\"link\"`. Nest\n * columns to stack several headed groups in one column, as okta.com does.\n *\n * `variant=\"card\"` puts the column on a tinted rounded tile and `variant=\"accent\"` on a solid\n * accent tile with light text; both suit a row of equal columns without intro or featured area.\n * `cta-label` + `cta-href` add a pill button at the bottom of the column.\n *\n * The heading (when `href` is set) and the button fire a *cancelable* `mega-menu-select` event\n * (detail: `{ href }`) before navigating; a host doing client-side routing calls\n * `event.preventDefault()` on it.\n *\n * @slot - The column's links, or nested `st-mega-menu-column` groups.\n * @fires mega-menu-select - The heading link or the button was clicked (cancelable; detail `{ href }`).\n * @csspart heading - The heading text or link.\n * @csspart description - The line under the heading.\n * @csspart items - The box holding the links.\n * @csspart cta - The pill button.\n */\n@customElement('st-mega-menu-column')\nexport class MegaMenuColumn extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: flex;\n flex-direction: column;\n min-width: 0;\n box-sizing: border-box;\n ${fontFamilyStyles}\n }\n\n :host([variant='card']),\n :host([variant='accent']) {\n padding: 2rem 1.75rem 1.75rem;\n border-radius: 20px;\n background: color-mix(in oklch, var(--st-color-text-strong) 5%, var(--st-color-surface));\n }\n\n :host([variant='accent']) {\n background: var(--st-color-accent);\n color: var(--st-color-on-solid);\n /* Read by the st-menu-item links inside. */\n --st-nav-color: var(--st-color-on-solid);\n --st-nav-hover-bg: transparent;\n }\n\n .heading {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n margin: 0 0 0.75rem;\n font-size: 1.125rem;\n font-weight: 500;\n line-height: 1.35;\n color: var(--st-color-text-strong);\n text-decoration: none;\n }\n\n :host([variant='card']) .heading,\n :host([variant='accent']) .heading {\n font-size: 1.375rem;\n }\n\n :host([variant='accent']) .heading {\n color: inherit;\n }\n\n a.heading:hover,\n a.heading:focus-visible {\n text-decoration: underline;\n text-underline-offset: 4px;\n }\n\n .description {\n margin: -0.25rem 0 0.75rem;\n font-size: 0.875rem;\n line-height: 1.5;\n color: var(--st-color-text-muted);\n }\n\n :host([variant='accent']) .description {\n color: inherit;\n opacity: 0.85;\n }\n\n .items {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n /* Nested groups stack with room between them. */\n ::slotted(st-mega-menu-column:not(:first-child)) {\n margin-top: 2rem;\n }\n\n .cta {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 0.875rem 1.5rem;\n border-radius: 9999px;\n background: var(--st-color-surface);\n color: var(--st-color-text-strong);\n font-size: 1rem;\n font-weight: 500;\n text-align: center;\n text-decoration: none;\n transition: box-shadow 0.2s ease;\n }\n\n .cta-spacer {\n flex: 1;\n min-height: 1.75rem;\n }\n\n .cta:hover,\n .cta:focus-visible {\n box-shadow: 0 0 0 2px currentColor;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .cta {\n transition: none;\n }\n }\n `;\n\n @property({ type: String })\n heading = '';\n\n /** Makes the heading a link (e.g. to the section's overview page). */\n @property({ type: String })\n href = '';\n\n @property({ type: String })\n description = '';\n\n /** `plain` (default), `card` (tinted tile) or `accent` (solid accent tile, light text). */\n @property({ type: String, reflect: true })\n variant: 'plain' | 'card' | 'accent' = 'plain';\n\n /** Text of a pill button at the bottom of the column; needs `cta-href`. */\n @property({ type: String, attribute: 'cta-label' })\n ctaLabel = '';\n\n @property({ type: String, attribute: 'cta-href' })\n ctaHref = '';\n\n private select(event: MouseEvent, href: string): void {\n if (href.startsWith('http')) return;\n const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n detail: { href },\n bubbles: true,\n composed: true,\n cancelable: true\n });\n this.dispatchEvent(selectEvent);\n if (selectEvent.defaultPrevented) event.preventDefault();\n }\n\n private renderHeading() {\n if (!this.heading) return nothing;\n return this.href\n ? html`<a part=\"heading\" class=\"heading\" href=${this.href} @click=${(event: MouseEvent) => this.select(event, this.href)}\n >${this.heading}</a\n >`\n : html`<p part=\"heading\" class=\"heading\">${this.heading}</p>`;\n }\n\n private renderCta() {\n if (!this.ctaLabel || !this.ctaHref) return nothing;\n const external = this.ctaHref.startsWith('http');\n return html`\n <span class=\"cta-spacer\"></span>\n <a\n part=\"cta\"\n class=\"cta\"\n href=${this.ctaHref}\n target=${external ? '_blank' : '_self'}\n rel=${external ? 'noopener noreferrer' : nothing}\n @click=${(event: MouseEvent) => this.select(event, this.ctaHref)}\n >${this.ctaLabel} ${external ? arrowUpRightIcon(14) : nothing}</a\n >\n `;\n }\n\n render() {\n return html`\n ${this.renderHeading()}\n ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n <div part=\"items\" class=\"items\" role=\"group\" aria-label=${this.heading || nothing}><slot></slot></div>\n ${this.renderCta()}\n `;\n }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * A promo card for the featured column of an `st-mega-menu` (`slot=\"featured\"`). The whole card\n * is one link. Two looks, after okta.com:\n *\n * - `story` (default): a rounded image on top, then the description and an underlined\n * call-to-action line — a customer story or announcement.\n * - `overlay`: a tile with light text over `image-url` (darkened), or over an accent gradient when\n * there is no image — an optional `logo-url` top left, the title and description at the bottom.\n *\n * An `http(s)` `href` opens in a new tab unless `target` says otherwise. Any other `href` fires a\n * *cancelable* `mega-menu-select` event (detail: `{ href }`) first; a host doing client-side\n * routing calls `event.preventDefault()` on it.\n *\n * @fires mega-menu-select - The card was clicked (cancelable; detail `{ href }`).\n * @csspart card - The card link.\n * @csspart image - The image (`story`).\n * @csspart logo - The logo (`overlay`).\n * @csspart eyebrow - The small label above the title.\n * @csspart title - The title.\n * @csspart description - The description.\n * @csspart cta - The call-to-action line.\n * @cssprop --st-mega-menu-feature-from - Start colour of the `overlay` gradient (default: the accent colour).\n * @cssprop --st-mega-menu-feature-to - End colour of the `overlay` gradient.\n */\n@customElement('st-mega-menu-feature')\nexport class MegaMenuFeature extends LitElement {\n /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key to it. */\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n ${fontFamilyStyles}\n }\n\n .card {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n box-sizing: border-box;\n color: var(--st-color-text-strong);\n text-decoration: none;\n }\n\n .image {\n display: block;\n width: 100%;\n aspect-ratio: 9 / 8;\n object-fit: cover;\n border-radius: 20px;\n transition: transform 0.3s ease;\n }\n\n .card:hover .image {\n transform: scale(1.015);\n }\n\n .eyebrow {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--st-color-accent-text);\n }\n\n .title {\n margin: 0;\n font-size: 1.125rem;\n font-weight: 500;\n line-height: 1.3;\n }\n\n .description {\n margin: 0;\n font-size: 0.9375rem;\n line-height: 1.5;\n }\n\n .cta {\n align-self: flex-start;\n margin-top: 0.75rem;\n font-size: 0.9375rem;\n font-weight: 500;\n text-decoration: underline;\n text-underline-offset: 5px;\n text-decoration-thickness: 1px;\n }\n\n .card:hover .cta,\n .card:focus-visible .cta {\n text-decoration-thickness: 2px;\n }\n\n /* overlay */\n :host([variant='overlay']) .card {\n justify-content: flex-end;\n gap: 0.5rem;\n min-height: 15rem;\n padding: 1.75rem;\n border-radius: 20px;\n color: #fff;\n background-color: var(--st-color-accent);\n background-image:\n linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05)),\n var(--st-mega-menu-feature-image, linear-gradient(160deg, var(--st-mega-menu-feature-from, var(--st-color-accent)), var(--st-mega-menu-feature-to, oklch(0.25 0.12 280))));\n background-size: cover;\n background-position: center;\n transition: transform 0.2s ease;\n }\n\n :host([variant='overlay']) .card:hover {\n transform: translateY(-2px);\n }\n\n :host([variant='overlay']) .logo {\n height: 2.25rem;\n width: auto;\n max-width: 70%;\n margin-bottom: auto;\n align-self: flex-start;\n object-fit: contain;\n }\n\n :host([variant='overlay']) .title {\n font-size: 1.75rem;\n font-weight: 400;\n }\n\n :host([variant='overlay']) .eyebrow,\n :host([variant='overlay']) .cta {\n color: inherit;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .image,\n :host([variant='overlay']) .card {\n transition: none;\n }\n }\n `;\n\n /** `story` (default) or `overlay` — see the element description. */\n @property({ type: String, reflect: true })\n variant: 'story' | 'overlay' = 'story';\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n description = '';\n\n /** Small label above the title, e.g. \"New\" or \"Report\". */\n @property({ type: String })\n eyebrow = '';\n\n @property({ type: String })\n href = '';\n\n /** `target` for the link. Defaults to `_blank` for an `http(s)` `href`, `_self` otherwise. */\n @property({ type: String })\n target = '';\n\n /** Image on top (`story`) or behind the text (`overlay`). */\n @property({ type: String, attribute: 'image-url' })\n imageUrl = '';\n\n @property({ type: String, attribute: 'image-alt' })\n imageAlt = '';\n\n /** Logo at the top of an `overlay` card. */\n @property({ type: String, attribute: 'logo-url' })\n logoUrl = '';\n\n @property({ type: String, attribute: 'logo-alt' })\n logoAlt = '';\n\n /** Call-to-action text at the bottom of the card; empty hides it. */\n @property({ type: String, attribute: 'cta-label' })\n ctaLabel = '';\n\n private get isExternal(): boolean {\n return this.href.startsWith('http');\n }\n\n private onClick = (event: MouseEvent): void => {\n if (this.isExternal) return;\n const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n detail: { href: this.href },\n bubbles: true,\n composed: true,\n cancelable: true\n });\n this.dispatchEvent(selectEvent);\n if (selectEvent.defaultPrevented) event.preventDefault();\n };\n\n render() {\n const target = this.target || (this.isExternal ? '_blank' : '_self');\n const overlay = this.variant === 'overlay';\n const style = overlay && this.imageUrl ? `--st-mega-menu-feature-image:url(${JSON.stringify(this.imageUrl)})` : '';\n return html`\n <a\n part=\"card\"\n class=\"card\"\n style=${style}\n href=${this.href || nothing}\n target=${target}\n rel=${target === '_blank' ? 'noopener noreferrer' : nothing}\n @click=${this.onClick}\n >\n ${overlay && this.logoUrl ? html`<img part=\"logo\" class=\"logo\" src=${this.logoUrl} alt=${this.logoAlt} />` : nothing}\n ${!overlay && this.imageUrl\n ? html`<img part=\"image\" class=\"image\" src=${this.imageUrl} alt=${this.imageAlt} loading=\"lazy\" />`\n : nothing}\n ${this.eyebrow ? html`<span part=\"eyebrow\" class=\"eyebrow\">${this.eyebrow}</span>` : nothing}\n ${this.title ? html`<p part=\"title\" class=\"title\">${this.title}</p>` : nothing}\n ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n ${this.ctaLabel ? html`<span part=\"cta\" class=\"cta\">${this.ctaLabel}</span>` : nothing}\n </a>\n `;\n }\n}\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement","LitElement","css","html","nothing","customElement","property","LitElement","html","nothing","css","property","customElement"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/section/Section.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\n\n/**\n * A page band that holds other content: sets the background, the spacing above and below, and\n * the content width, with an optional eyebrow/title/subtitle heading over its slotted children.\n * Use it to give a run of components one dark or tinted backdrop and a consistent vertical rhythm,\n * the way enterprise marketing pages stack full-width sections.\n *\n * @slot - The section's content.\n * @cssprop --st-section-bg - Overrides the background colour picked by `background`.\n * @csspart inner - The width-limited content box.\n * @csspart header - The heading block.\n */\n@customElement('st-section')\nexport class Section extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n --st-section-space-none: 0;\n --st-section-space-s: var(--st-space-24);\n --st-section-space-m: var(--st-space-48);\n --st-section-space-l: 4.5rem;\n --st-section-space-xl: 6rem;\n --st-section-space-xxl: 8rem;\n\n display: block;\n box-sizing: border-box;\n width: 100%;\n padding: var(--st-section-space-m) var(--st-space-24);\n background: var(--st-section-bg, var(--st-color-surface));\n color: var(--st-color-text-strong);\n ${rootFontFamilyStyles}\n }\n\n :host([background='subtle']) {\n background: var(--st-section-bg, var(--st-color-subtle));\n }\n\n :host([background='dark']) {\n background: var(--st-section-bg, var(--st-color-text-strong));\n color: var(--st-color-on-solid);\n }\n\n :host([background='accent']) {\n background: var(--st-section-bg, var(--st-color-accent));\n color: var(--st-color-on-solid);\n }\n\n :host([background='transparent']) {\n background: var(--st-section-bg, transparent);\n }\n\n :host([spacing-above='none']) { padding-top: var(--st-section-space-none); }\n :host([spacing-above='s']) { padding-top: var(--st-section-space-s); }\n :host([spacing-above='l']) { padding-top: var(--st-section-space-l); }\n :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl); }\n :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl); }\n\n :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none); }\n :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s); }\n :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l); }\n :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl); }\n :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl); }\n\n :host([width='full']) {\n padding-left: 0;\n padding-right: 0;\n }\n\n .inner {\n max-width: var(--st-cms-container-max);\n margin: 0 auto;\n }\n\n :host([width='narrow']) .inner {\n max-width: 800px;\n }\n\n :host([width='full']) .inner {\n max-width: none;\n }\n\n .header {\n margin-bottom: var(--st-space-48);\n }\n\n :host([text-alignment='center']) .header {\n text-align: center;\n }\n\n :host([text-alignment='center']) .subtitle {\n margin-inline: auto;\n }\n\n :host([width='full']) .header {\n max-width: var(--st-cms-container-max);\n margin-inline: auto;\n padding-inline: var(--st-space-24);\n box-sizing: border-box;\n }\n\n .eyebrow {\n margin: 0 0 var(--st-space-12);\n font-size: var(--st-text-sm);\n font-weight: var(--st-font-weight-bold);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--st-color-text-muted);\n }\n\n .title {\n ${sectionTitleStyles}\n color: inherit;\n letter-spacing: -0.02em;\n max-width: 24ch;\n }\n\n :host([text-alignment='center']) .title {\n margin-inline: auto;\n }\n\n .subtitle {\n ${sectionSubtitleStyles}\n max-width: 60ch;\n margin-bottom: 0;\n }\n\n :host([background='dark']) .eyebrow,\n :host([background='dark']) .subtitle,\n :host([background='accent']) .eyebrow,\n :host([background='accent']) .subtitle {\n color: color-mix(in oklch, var(--st-color-on-solid) 80%, transparent);\n }\n\n @media (max-width: 768px) {\n :host {\n --st-section-space-l: 3.5rem;\n --st-section-space-xl: 4.5rem;\n --st-section-space-xxl: 5.5rem;\n padding-left: var(--st-space-20);\n padding-right: var(--st-space-20);\n }\n }\n `;\n\n @property({ type: String })\n eyebrow = '';\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n /** `default` (page surface), `subtle`, `dark`, `accent` or `transparent`. */\n @property({ type: String, reflect: true })\n background: 'default' | 'subtle' | 'dark' | 'accent' | 'transparent' = 'default';\n\n /** Space above the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n @property({ type: String, reflect: true, attribute: 'spacing-above' })\n spacingAbove: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n /** Space below the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n @property({ type: String, reflect: true, attribute: 'spacing-below' })\n spacingBelow: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n /** `contained` (default, the page container width), `narrow` (reading width) or `full` (edge to edge). */\n @property({ type: String, reflect: true })\n width: 'contained' | 'narrow' | 'full' = 'contained';\n\n /** Alignment of the heading. */\n @property({ type: String, reflect: true, attribute: 'text-alignment' })\n textAlignment: 'left' | 'center' = 'left';\n\n render() {\n const heading = this.eyebrow || this.title || this.subtitle;\n return html`\n <div class=\"inner\" part=\"inner\">\n ${heading\n ? html`<div class=\"header\" part=\"header\">\n ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n </div>`\n : nothing}\n <slot></slot>\n </div>\n `;\n }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAiBjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AAqIL,mBAAU;AAGV,iBAAQ;AAGR,oBAAW;AAIX,sBAAuE;AAIvE,wBAAwD;AAIxD,wBAAwD;AAIxD,iBAAyC;AAIzC,yBAAmC;AAAA;AAAA,EAEnC,SAAS;AACP,UAAM,UAAU,KAAK,WAAW,KAAK,SAAS,KAAK;AACnD,WAAO;AAAA;AAAA,UAED,UACE;AAAA,gBACI,KAAK,UAAU,yCAAyC,KAAK,OAAO,SAAS,OAAO;AAAA,gBACpF,KAAK,QAAQ,sCAAsC,KAAK,KAAK,UAAU,OAAO;AAAA,gBAC9E,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA,sBAE5F,OAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AAhLa,QACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgFpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwB3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApIf,QAqIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvIf,QAwIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1If,QA2IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9I9B,QA+IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GAlJ1D,QAmJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GAtJ1D,QAuJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1J9B,QA2JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GA9J3D,QA+JX;AA/JW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/bento-grid/BentoGrid.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport {\r\n cardTitleStyles,\r\n iconTileStyles,\r\n reducedMotionStyles,\r\n sectionHeaderStyles,\r\n sectionSubtitleStyles,\r\n sectionTitleStyles, invertedSectionTextStyles } from '../shared/section-styles';\r\n\r\nexport interface BentoGridItem {\r\n title: string;\r\n description?: string;\r\n /** Iconify icon name, e.g. `mdi:home`. */\r\n icon?: string;\r\n imageSrc?: string;\r\n imageAlt?: string;\r\n colSpan?: 1 | 2 | 3 | 4;\r\n rowSpan?: 1 | 2;\r\n /** Turns the card into a link. */\r\n href?: string;\r\n}\r\n\r\n/** A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property. */\r\n@customElement('st-bento-grid')\r\nexport class BentoGrid extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n padding: var(--st-cms-section-padding) var(--st-space-24);\r\n background: var(--st-color-page);\r\n ${fontFamilyStyles}\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n }\r\n\r\n .container {\r\n max-width: var(--st-cms-container-max);\r\n margin: 0 auto;\r\n }\r\n\r\n .header {\r\n ${sectionHeaderStyles}\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n margin-bottom: 0;\r\n }\r\n\r\n ${invertedSectionTextStyles}\r\n\r\n .grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n grid-auto-rows: minmax(240px, auto);\r\n gap: var(--st-space-24);\r\n }\r\n\r\n .card {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n border: 1px solid var(--st-color-border);\r\n border-radius: var(--st-space-24);\r\n background: var(--st-color-surface);\r\n color: inherit;\r\n text-decoration: none;\r\n transition:\r\n transform 0.3s ease,\r\n box-shadow 0.3s ease;\r\n }\r\n\r\n :host([inverted]) .card {\r\n background: var(--st-color-text-strong);\r\n border-color: var(--st-color-text);\r\n }\r\n\r\n .card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 24px -10px var(--st-shadow-color-lg);\r\n z-index: 1;\r\n }\r\n\r\n .image-wrapper {\r\n position: absolute;\r\n inset: 0;\r\n }\r\n\r\n .image-wrapper::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to bottom, transparent 0%, var(--st-shadow-color-xl) 100%);\r\n }\r\n\r\n .image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .card:hover .image {\r\n transform: scale(1.05);\r\n }\r\n\r\n .content {\r\n position: relative;\r\n z-index: 1;\r\n margin-top: auto;\r\n padding: var(--st-space-24);\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-16);\r\n }\r\n\r\n .icon {\r\n ${iconTileStyles}\r\n width: var(--st-size-40);\r\n height: var(--st-size-40);\r\n font-size: 24px;\r\n }\r\n\r\n .text {\r\n padding: var(--st-space-16);\r\n border-radius: var(--st-radius-md);\r\n }\r\n\r\n .card-title {\r\n ${cardTitleStyles}\r\n font-size: var(--st-text-lg);\r\n }\r\n\r\n .card-description {\r\n margin: 0;\r\n font-size: var(--st-text-md);\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n :host([inverted]) .card-title {\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n :host([inverted]) .card-description {\r\n color: var(--st-color-border);\r\n }\r\n\r\n .card.has-image .card-title,\r\n .card.has-image .card-description {\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .card.has-image .icon {\r\n background: var(--st-shadow-color-lg);\r\n color: var(--st-color-on-solid);\r\n backdrop-filter: blur(4px);\r\n }\r\n\r\n .col-1 { grid-column: span 1; }\r\n .col-2 { grid-column: span 2; }\r\n .col-3 { grid-column: span 3; }\r\n .col-4 { grid-column: span 4; }\r\n .row-1 { grid-row: span 1; }\r\n .row-2 { grid-row: span 2; }\r\n\r\n @media (max-width: 1024px) {\r\n .grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n .col-3,\r\n .col-4 {\r\n grid-column: span 2;\r\n }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .col-1,\r\n .col-2,\r\n .col-3,\r\n .col-4 {\r\n grid-column: span 1;\r\n }\r\n }\r\n\r\n ${reducedMotionStyles}\r\n `;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n @property({ attribute: false })\r\n items: BentoGridItem[] = [];\r\n\r\n private renderCard(item: BentoGridItem) {\r\n const classes = `card col-${item.colSpan ?? 1} row-${item.rowSpan ?? 1} ${item.imageSrc ? 'has-image' : ''}`;\r\n const body = html`\r\n ${item.imageSrc\r\n ? html`<div class=\"image-wrapper\" part=\"image-wrapper\">\r\n <img class=\"image\" part=\"image\" src=${item.imageSrc} alt=${item.imageAlt ?? item.title} />\r\n </div>`\r\n : nothing}\r\n <div class=\"content\" part=\"content\">\r\n ${item.icon ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>` : nothing}\r\n <div class=\"text\">\r\n <h3 class=\"card-title\" part=\"card-title\">${item.title}</h3>\r\n ${item.description ? html`<p class=\"card-description\" part=\"card-description\">${item.description}</p>` : nothing}\r\n </div>\r\n </div>\r\n `;\r\n return item.href\r\n ? html`<a part=\"card\" class=${classes} href=${item.href}>${body}</a>`\r\n : html`<div part=\"card\" class=${classes}>${body}</div>`;\r\n }\r\n\r\n render() {\r\n return html`\r\n <div class=\"container\" part=\"container\">\r\n ${this.title || this.subtitle\r\n ? html`<div class=\"header\" part=\"header\">\r\n ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\r\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n </div>`\r\n : nothing}\r\n <div class=\"grid\" part=\"grid\">${this.items.map((item) => this.renderCard(item))}</div>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/testimonials/Testimonials.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { chevronIcon } from '../shared/icons';\nimport { buttonResetStyles, cardShellStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles, invertedSectionTextStyles, sectionHeaderStyles, reducedMotionStyles } from '../shared/section-styles';\nimport type { TestimonialsLinkEventDetail } from './TestimonialsEvents';\n\nexport interface TestimonialMetric {\n /** The figure, e.g. `100M` or `85%`. */\n value: string;\n label: string;\n}\n\nexport interface TestimonialItem {\n id?: string;\n name?: string;\n role?: string;\n company?: string;\n /** Author photo. */\n imageSrc?: string;\n quote?: string;\n /** Number of stars. Default: 5 for a plain quote card; no stars on a story card (one with a `headline` or `logoSrc`). `0` hides them. */\n rating?: number;\n /** Customer logo, shown at the top of the card body. */\n logoSrc?: string;\n /** Wide image across the top of the card. */\n mediaSrc?: string;\n /** Story headline, e.g. \"Acme gives 100 million users a seamless sign-in\". */\n headline?: string;\n /** Key results, shown as large figures. */\n metrics?: TestimonialMetric[];\n /** Link to the full story. */\n href?: string;\n /** Text of the story link; defaults to the section's `link-label`. */\n linkLabel?: string;\n}\n\n/**\n * Section heading plus customer quotes or stories. Port of React `Testimonials`.\n *\n * Each card shows whatever its item has: a cover image, the customer logo, a story headline, a\n * quote with star rating, result metrics, the author and a \"See full story\" link. `layout=\"grid\"`\n * (default) lays the cards out in a grid; `layout=\"carousel\"` puts them on one horizontally\n * scrolling, snapping row with previous/next buttons next to the heading — the customer-story\n * carousel of enterprise marketing pages. `action-label`/`action-href` add a section-level link\n * (e.g. \"Explore customer stories\").\n *\n * @fires testimonials-link - Cancelable, before following a story or section link. Detail `{ href }`.\n */\n@customElement('st-testimonials')\nexport class Testimonials extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n box-sizing: border-box;\n padding: var(--st-space-48) var(--st-space-24);\n background-color: var(--st-color-subtle);\n ${rootFontFamilyStyles}\n }\n\n :host([inverted]) {\n background-color: var(--st-color-text-strong);\n }\n\n .container {\n max-width: var(--st-cms-container-max);\n margin: 0 auto;\n }\n\n .header {\n ${sectionHeaderStyles}\n }\n\n .title {\n ${sectionTitleStyles}\n margin-bottom: var(--st-space-16);\n letter-spacing: -0.02em;\n }\n\n .subtitle {\n ${sectionSubtitleStyles}\n margin: 0 auto;\n }\n\n ${invertedSectionTextStyles}\n\n .grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: var(--st-space-32);\n }\n\n .card {\n ${cardShellStyles}\n display: flex;\n flex-direction: column;\n margin: 0;\n overflow: hidden;\n box-shadow: 0 1px 3px var(--st-shadow-color-sm);\n }\n\n .media {\n aspect-ratio: 16 / 9;\n background: var(--st-color-divider);\n }\n\n .media img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.4s ease;\n }\n\n .card:hover .media img {\n transform: scale(1.03);\n }\n\n .body {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--st-space-24);\n padding: var(--st-space-24);\n }\n\n .logo {\n display: block;\n height: 32px;\n width: auto;\n max-width: 60%;\n object-fit: contain;\n object-position: left center;\n }\n\n .headline {\n margin: 0;\n font-size: var(--st-text-xl);\n font-weight: var(--st-font-weight-semibold);\n line-height: 1.35;\n color: var(--st-color-text-strong);\n }\n\n .stars {\n display: flex;\n gap: var(--st-space-4);\n color: var(--st-favorite-accent);\n font-size: var(--st-size-20);\n }\n\n .quote {\n font-size: var(--st-text-md);\n line-height: 1.6;\n color: var(--st-color-text);\n font-style: italic;\n margin: 0;\n }\n\n .metrics {\n display: flex;\n flex-wrap: wrap;\n gap: var(--st-space-16) var(--st-space-32);\n margin: 0;\n padding-top: var(--st-space-16);\n border-top: 1px solid var(--st-color-border);\n }\n\n .metric {\n display: flex;\n flex-direction: column-reverse;\n min-width: 6rem;\n }\n\n .metric dt {\n font-size: var(--st-text-sm);\n color: var(--st-color-text-muted);\n line-height: 1.4;\n }\n\n .metric dd {\n margin: 0;\n font-size: var(--st-cms-text-4xl);\n font-weight: var(--st-font-weight-bold);\n letter-spacing: -0.02em;\n line-height: 1.1;\n color: var(--st-color-text-strong);\n }\n\n .author {\n display: flex;\n align-items: center;\n gap: var(--st-space-12);\n margin-top: auto;\n }\n\n .avatar {\n width: var(--st-space-48);\n height: var(--st-space-48);\n border-radius: var(--st-radius-circle);\n object-fit: cover;\n background-color: var(--st-color-divider);\n flex-shrink: 0;\n }\n\n .avatar-placeholder {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--st-color-text-muted);\n font-weight: var(--st-font-weight-semibold);\n font-size: var(--st-text-xl);\n }\n\n .author-info {\n display: flex;\n flex-direction: column;\n }\n\n .name {\n font-weight: var(--st-font-weight-semibold);\n color: var(--st-color-text-strong);\n font-size: var(--st-text-xl);\n }\n\n .role {\n font-size: var(--st-text-sm);\n color: var(--st-color-text-faint);\n }\n\n .link {\n display: inline-flex;\n align-items: center;\n gap: var(--st-space-8);\n margin-top: auto;\n font-weight: var(--st-font-weight-semibold);\n color: var(--st-color-text-strong);\n text-decoration: none;\n }\n\n .author + .link {\n margin-top: 0;\n }\n\n .link:hover {\n text-decoration: underline;\n text-underline-offset: 3px;\n }\n\n .link svg {\n transition: transform 0.2s ease;\n }\n\n .link:hover svg {\n transform: translateX(3px);\n }\n\n /* ---- layout=\"carousel\" ---- */\n\n :host([layout='carousel']) .header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--st-space-24);\n text-align: left;\n margin-bottom: var(--st-space-32);\n }\n\n :host([layout='carousel']) .subtitle {\n margin: 0;\n }\n\n .controls {\n display: flex;\n align-items: center;\n gap: var(--st-space-12);\n flex: none;\n }\n\n .section-link {\n margin-right: var(--st-space-12);\n }\n\n :host([inverted]) .section-link {\n color: var(--st-color-on-solid);\n }\n\n .arrow {\n ${buttonResetStyles}\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--st-size-40);\n height: var(--st-size-40);\n border-radius: var(--st-radius-circle);\n border: 1px solid var(--st-color-border-strong);\n color: var(--st-color-text-strong);\n background: var(--st-color-surface);\n transition:\n background 0.2s ease,\n opacity 0.2s ease;\n }\n\n .arrow:hover:not(:disabled) {\n background: var(--st-color-hover);\n }\n\n .arrow:disabled {\n opacity: 0.4;\n cursor: default;\n }\n\n .track {\n display: flex;\n gap: var(--st-space-24);\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n scrollbar-width: none;\n /* Room for the cards' shadow and focus rings. */\n padding: var(--st-space-4) var(--st-space-4) var(--st-space-12);\n margin: calc(-1 * var(--st-space-4));\n }\n\n .track::-webkit-scrollbar {\n display: none;\n }\n\n .track > .card {\n flex: 0 0 min(380px, 85%);\n scroll-snap-align: start;\n }\n\n /* The section link sits under the grid; in the carousel it is next to the arrows instead, and\n only drops below the row on a narrow screen. */\n .section-footer {\n margin-top: var(--st-space-32);\n text-align: center;\n }\n\n :host([inverted]) .section-footer .link {\n color: var(--st-color-on-solid);\n }\n\n :host([layout='carousel']) .section-footer {\n margin-top: 0;\n text-align: left;\n }\n\n .footer-link {\n display: none;\n }\n\n @media (max-width: 768px) {\n :host {\n padding: var(--st-space-40) var(--st-space-20);\n }\n .grid {\n grid-template-columns: 1fr;\n }\n :host([layout='carousel']) .header {\n flex-direction: column;\n align-items: flex-start;\n }\n .section-link {\n display: none;\n }\n .footer-link {\n display: inline-flex;\n margin-top: var(--st-space-24);\n }\n }\n\n ${reducedMotionStyles}\n @media (prefers-reduced-motion: reduce) {\n .track {\n scroll-behavior: auto;\n }\n }\n `;\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n @property({ attribute: false })\n items: TestimonialItem[] = [];\n\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n /** `grid` (default) or `carousel`: one scrolling row with previous/next buttons. */\n @property({ type: String, reflect: true })\n layout: 'grid' | 'carousel' = 'grid';\n\n /** Default text of each card's story link. */\n @property({ type: String, attribute: 'link-label' })\n linkLabel = 'See full story';\n\n /** Section-level link text, e.g. \"Explore customer stories\". */\n @property({ type: String, attribute: 'action-label' })\n actionLabel = '';\n\n @property({ type: String, attribute: 'action-href' })\n actionHref = '';\n\n @state() private atStart = true;\n @state() private atEnd = false;\n\n private get track(): HTMLElement | null {\n return this.renderRoot.querySelector('.track');\n }\n\n private resizeObserver?: ResizeObserver;\n\n protected updated(changed: Map<string, unknown>): void {\n if (changed.has('layout') || changed.has('items')) {\n this.resizeObserver?.disconnect();\n const track = this.track;\n if (track) {\n this.resizeObserver = new ResizeObserver(this.syncArrows);\n this.resizeObserver.observe(track);\n }\n this.syncArrows();\n }\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n super.disconnectedCallback();\n }\n\n private syncArrows = (): void => {\n const track = this.track;\n if (!track) return;\n this.atStart = track.scrollLeft <= 1;\n this.atEnd = track.scrollLeft + track.clientWidth >= track.scrollWidth - 1;\n };\n\n private scrollByCard(direction: 1 | -1): void {\n const track = this.track;\n const card = track?.querySelector<HTMLElement>('.card');\n if (!track || !card) return;\n const gap = parseFloat(getComputedStyle(track).columnGap) || 0;\n track.scrollBy({ left: direction * (card.offsetWidth + gap) });\n }\n\n private onLinkClick(event: MouseEvent, href: string): void {\n const link = new CustomEvent<TestimonialsLinkEventDetail>('testimonials-link', {\n detail: { href },\n bubbles: true,\n composed: true,\n cancelable: true\n });\n this.dispatchEvent(link);\n if (link.defaultPrevented) event.preventDefault();\n }\n\n private renderLink(label: string, href: string, className: string, part: string) {\n return html`<a class=\"link ${className}\" part=${part} href=${href} @click=${(event: MouseEvent) => this.onLinkClick(event, href)}>\n ${label} ${chevronIcon('right', 14)}\n </a>`;\n }\n\n private renderItem(item: TestimonialItem) {\n const story = !!(item.headline || item.logoSrc);\n const rating = item.rating ?? (item.quote && !story ? 5 : 0);\n const metrics = item.metrics ?? [];\n return html`\n <article class=\"card\" part=\"card\">\n ${item.mediaSrc ? html`<div class=\"media\" part=\"media\"><img src=${item.mediaSrc} alt=\"\" loading=\"lazy\" /></div>` : nothing}\n <div class=\"body\" part=\"body\">\n ${item.logoSrc ? html`<img class=\"logo\" part=\"logo\" src=${item.logoSrc} alt=${item.company || item.name || ''} />` : nothing}\n ${item.headline ? html`<h3 class=\"headline\" part=\"headline\">${item.headline}</h3>` : nothing}\n ${rating > 0\n ? html`<div class=\"stars\" part=\"stars\" role=\"img\" aria-label=\"${rating} / 5\">\n ${Array.from({ length: rating }, () => html`<iconify-icon icon=\"mdi:star\"></iconify-icon>`)}\n </div>`\n : nothing}\n ${item.quote ? html`<blockquote class=\"quote\" part=\"quote\">\"${item.quote}\"</blockquote>` : nothing}\n ${metrics.length\n ? html`<dl class=\"metrics\" part=\"metrics\">\n ${metrics.map(metric => html`<div class=\"metric\"><dt>${metric.label}</dt><dd>${metric.value}</dd></div>`)}\n </dl>`\n : nothing}\n ${item.name\n ? html`<div class=\"author\" part=\"author\">\n ${item.imageSrc\n ? html`<img class=\"avatar\" part=\"avatar\" src=${item.imageSrc} alt=${item.name} />`\n : html`<div class=\"avatar avatar-placeholder\" part=\"avatar\">${item.name.charAt(0)}</div>`}\n <span class=\"author-info\">\n <span class=\"name\" part=\"name\">${item.name}</span>\n ${item.role || item.company\n ? html`<span class=\"role\" part=\"role\">${[item.role, item.company].filter(Boolean).join(' at ')}</span>`\n : nothing}\n </span>\n </div>`\n : nothing}\n ${item.href ? this.renderLink(item.linkLabel || this.linkLabel, item.href, '', 'link') : nothing}\n </div>\n </article>\n `;\n }\n\n render() {\n const carousel = this.layout === 'carousel';\n const sectionLink = this.actionLabel && this.actionHref;\n return html`\n <div class=\"container\" part=\"container\">\n <div class=\"header\" part=\"header\">\n <div>\n <h2 class=\"title\" part=\"title\">${this.title}</h2>\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n </div>\n ${carousel\n ? html`<div class=\"controls\" part=\"controls\">\n ${sectionLink ? this.renderLink(this.actionLabel, this.actionHref, 'section-link', 'action') : nothing}\n <button class=\"arrow\" part=\"arrow prev\" type=\"button\" aria-label=\"Previous\" ?disabled=${this.atStart} @click=${() => this.scrollByCard(-1)}>\n ${chevronIcon('left', 16)}\n </button>\n <button class=\"arrow\" part=\"arrow next\" type=\"button\" aria-label=\"Next\" ?disabled=${this.atEnd} @click=${() => this.scrollByCard(1)}>\n ${chevronIcon('right', 16)}\n </button>\n </div>`\n : nothing}\n </div>\n ${carousel\n ? html`<div class=\"track\" part=\"track\" role=\"region\" aria-label=${this.title || 'Stories'} tabindex=\"0\" @scroll=${this.syncArrows}>\n ${this.items.map(item => this.renderItem(item))}\n </div>`\n : html`<div class=\"grid\" part=\"grid\">${this.items.map(item => this.renderItem(item))}</div>`}\n ${sectionLink\n ? html`<div class=\"section-footer\">${this.renderLink(this.actionLabel, this.actionHref, carousel ? 'footer-link' : '', 'action')}</div>`\n : nothing}\n </div>\n `;\n }\n}\n"],"mappings":"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AAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkMf,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,MAqFnB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5Uf,aA6UX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA/Uf,aAgVX;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAlVnB,aAmVX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArV/B,aAsVX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAzV9B,aA0VX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GA7VxC,aA8VX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAjW1C,aAkWX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GApWzC,aAqWX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GAvWI,aAuWM;AACA;AAAA,EAAhB,MAAM;AAAA,GAxWI,aAwWM;AAxWN,eAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/stats/Stats.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\n\r\nexport interface StatItem {\r\n value: string;\r\n label: string;\r\n description?: string;\r\n}\r\n\r\n/** Responsive grid of headline numbers with a label and optional description. Port of React `Stats`. */\r\n@customElement('st-stats')\r\nexport class Stats extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n box-sizing: border-box;\r\n padding: var(--st-space-48) var(--st-space-24);\r\n background-color: var(--st-color-surface);\r\n border-top: 1px solid var(--st-color-divider);\r\n border-bottom: 1px solid var(--st-color-divider);\r\n ${rootFontFamilyStyles}\r\n }\r\n\r\n :host([inverted]) {\r\n background-color: var(--st-color-text-strong);\r\n border-color: transparent;\r\n }\r\n\r\n .grid {\r\n max-width: var(--st-cms-container-max);\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: var(--st-space-40);\r\n }\r\n\r\n .item {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: var(--st-space-8);\r\n }\r\n\r\n .value {\r\n font-size: var(--st-cms-text-3xl);\r\n font-weight: var(--st-font-weight-bold);\r\n color: var(--st-color-text-strong);\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .label {\r\n font-size: var(--st-text-xl);\r\n font-weight: var(--st-font-weight-semibold);\r\n color: var(--st-color-text-muted);\r\n text-transform: uppercase;\r\n letter-spacing: var(--st-tracking-wide);\r\n }\r\n\r\n .description {\r\n font-size: var(--st-text-sm);\r\n color: var(--st-color-text-faint);\r\n max-width: 200px;\r\n }\r\n\r\n :host([inverted]) .value {\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n :host([inverted]) .label,\r\n :host([inverted]) .description {\r\n color: var(--st-color-border);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-space-40) var(--st-space-24);\r\n }\r\n .grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: var(--st-space-24);\r\n }\r\n .value {\r\n font-size: var(--st-cms-text-xl);\r\n }\r\n }\r\n `;\r\n\r\n @property({ attribute: false })\r\n items: StatItem[] = [];\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n render() {\r\n return html`\r\n <div class=\"grid\" part=\"grid\">\r\n ${this.items.map(\r\n (stat) => html`\r\n <div class=\"item\" part=\"item\">\r\n <span class=\"value\" part=\"value\">${stat.value}</span>\r\n <span class=\"label\" part=\"label\">${stat.label}</span>\r\n ${stat.description ? html`<span class=\"description\" part=\"description\">${stat.description}</span>` : nothing}\r\n </div>\r\n `\r\n )}\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAYjC,IAAM,QAAN,cAAoB,WAAW;AAAA,EAA/B;AAAA;AAiFL,iBAAoB,CAAC;AAGrB,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA;AAAA,UAED,KAAK,MAAM;AAAA,MACX,CAAC,SAAS;AAAA;AAAA,iDAE6B,KAAK,KAAK;AAAA,iDACV,KAAK,KAAK;AAAA,gBAC3C,KAAK,cAAc,oDAAoD,KAAK,WAAW,YAAY,OAAO;AAAA;AAAA;AAAA,IAGlH,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;AArGa,MACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsE1B;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAhFnB,MAiFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAnF/B,MAoFX;AApFW,QAAN;AAAA,EADN,cAAc,UAAU;AAAA,GACZ;","names":[]}
|