@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.
Files changed (59) hide show
  1. package/custom-elements.json +525 -457
  2. package/dist/bento-grid/index.d.ts +5 -1
  3. package/dist/bento-grid/index.js +1 -1
  4. package/dist/{chunk-OEX5FDMR.js → chunk-2JGWWXEI.js} +4 -2
  5. package/dist/chunk-2JGWWXEI.js.map +1 -0
  6. package/dist/{chunk-USNFT4DU.js → chunk-6H262SG6.js} +8 -6
  7. package/dist/chunk-6H262SG6.js.map +1 -0
  8. package/dist/{chunk-E52WO7R7.js → chunk-BQTDFQ4V.js} +5 -3
  9. package/dist/chunk-BQTDFQ4V.js.map +1 -0
  10. package/dist/{chunk-74MILER4.js → chunk-EMVHNAID.js} +5 -3
  11. package/dist/chunk-EMVHNAID.js.map +1 -0
  12. package/dist/{chunk-3ERKQNZT.js → chunk-HGJT24UG.js} +7 -5
  13. package/dist/chunk-HGJT24UG.js.map +1 -0
  14. package/dist/{chunk-MLF6L3KM.js → chunk-HGTC3LCW.js} +6 -4
  15. package/dist/chunk-HGTC3LCW.js.map +1 -0
  16. package/dist/{chunk-S4ARRDAI.js → chunk-IDBEZY2O.js} +8 -6
  17. package/dist/chunk-IDBEZY2O.js.map +1 -0
  18. package/dist/{chunk-2VZFHTBC.js → chunk-MW43OS47.js} +5 -3
  19. package/dist/chunk-MW43OS47.js.map +1 -0
  20. package/dist/{chunk-N63TVWK3.js → chunk-NN3OCPDV.js} +23 -19
  21. package/dist/chunk-NN3OCPDV.js.map +1 -0
  22. package/dist/{chunk-IMACP7HN.js → chunk-UVNBZD7R.js} +5 -3
  23. package/dist/chunk-UVNBZD7R.js.map +1 -0
  24. package/dist/{chunk-5REZSZCK.js → chunk-VRRBMOUP.js} +5 -3
  25. package/dist/chunk-VRRBMOUP.js.map +1 -0
  26. package/dist/cms-theme.css +11 -0
  27. package/dist/content-block/index.d.ts +2 -0
  28. package/dist/content-block/index.js +1 -1
  29. package/dist/cookie-consent/index.d.ts +2 -0
  30. package/dist/cookie-consent/index.js +1 -1
  31. package/dist/feature-split/index.d.ts +5 -1
  32. package/dist/feature-split/index.js +1 -1
  33. package/dist/features-section/index.d.ts +2 -0
  34. package/dist/features-section/index.js +1 -1
  35. package/dist/index.js +32 -32
  36. package/dist/items-accordion/index.d.ts +5 -1
  37. package/dist/items-accordion/index.js +1 -1
  38. package/dist/mega-menu/index.d.ts +1 -0
  39. package/dist/mega-menu/index.js +1 -1
  40. package/dist/promo-banner/index.d.ts +3 -0
  41. package/dist/promo-banner/index.js +1 -1
  42. package/dist/section/index.d.ts +1 -0
  43. package/dist/section/index.js +1 -1
  44. package/dist/stats/index.d.ts +6 -1
  45. package/dist/stats/index.js +1 -1
  46. package/dist/testimonials/index.d.ts +1 -0
  47. package/dist/testimonials/index.js +2 -2
  48. package/package.json +4 -13
  49. package/dist/chunk-2VZFHTBC.js.map +0 -1
  50. package/dist/chunk-3ERKQNZT.js.map +0 -1
  51. package/dist/chunk-5REZSZCK.js.map +0 -1
  52. package/dist/chunk-74MILER4.js.map +0 -1
  53. package/dist/chunk-E52WO7R7.js.map +0 -1
  54. package/dist/chunk-IMACP7HN.js.map +0 -1
  55. package/dist/chunk-MLF6L3KM.js.map +0 -1
  56. package/dist/chunk-N63TVWK3.js.map +0 -1
  57. package/dist/chunk-OEX5FDMR.js.map +0 -1
  58. package/dist/chunk-S4ARRDAI.js.map +0 -1
  59. package/dist/chunk-USNFT4DU.js.map +0 -1
package/dist/bento-grid/index.d.ts CHANGED
@@ -13,7 +13,11 @@ interface BentoGridItem {
13
13
  /** Turns the card into a link. */
14
14
  href?: string;
15
15
  }
16
- /** A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property. */
16
+ /**
17
+ * A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property.
18
+ *
19
+ * @cssprop --st-bento-grid-padding - Overrides the block's padding.
20
+ */
17
21
  declare class BentoGrid extends LitElement {
18
22
  static styles: lit.CSSResult;
19
23
  inverted: boolean;
package/dist/bento-grid/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BentoGrid
3
- } from "../chunk-OEX5FDMR.js";
3
+ } from "../chunk-2JGWWXEI.js";
4
4
  import "../chunk-3VE6VFJ4.js";
5
5
  import "../chunk-RHAOQ6K4.js";
6
6
  import "../chunk-EUXUH3YW.js";
package/dist/{chunk-OEX5FDMR.js → chunk-2JGWWXEI.js} RENAMED
@@ -60,7 +60,9 @@ BentoGrid.styles = css`
60
60
 
61
61
  :host {
62
62
  display: block;
63
- padding: var(--st-cms-section-padding) var(--st-space-24);
63
+ /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
64
+ padding; override with --st-bento-grid-padding instead. */
65
+ padding: var(--st-bento-grid-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;
64
66
  background: var(--st-color-page);
65
67
  ${fontFamilyStyles}
66
68
  }
@@ -247,4 +249,4 @@ BentoGrid = __decorateClass([
247
249
  export {
248
250
  BentoGrid
249
251
  };
250
- //# sourceMappingURL=chunk-OEX5FDMR.js.map
252
+ //# sourceMappingURL=chunk-2JGWWXEI.js.map
package/dist/chunk-2JGWWXEI.js.map ADDED
@@ -0,0 +1 @@
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/**\r\n * A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property.\r\n *\r\n * @cssprop --st-bento-grid-padding - Overrides the block's padding.\r\n */\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 /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n padding; override with --st-bento-grid-padding instead. */\r\n padding: var(--st-bento-grid-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\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":";;;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AACxC,OAAO;AA8BA,IAAM,YAAN,cAAwB,WAAW;AAAA,EAAnC;AAAA;AAkLL,oBAAW;AAGX,iBAAQ;AAGR,oBAAW;AAGX,iBAAyB,CAAC;AAAA;AAAA,EAElB,WAAW,MAAqB;AACtC,UAAM,UAAU,YAAY,KAAK,WAAW,CAAC,QAAQ,KAAK,WAAW,CAAC,IAAI,KAAK,WAAW,cAAc,EAAE;AAC1G,UAAM,OAAO;AAAA,QACT,KAAK,WACH;AAAA,kDACwC,KAAK,QAAQ,QAAQ,KAAK,YAAY,KAAK,KAAK;AAAA,oBAExF,OAAO;AAAA;AAAA,UAEP,KAAK,OAAO,wDAAwD,KAAK,IAAI,2BAA2B,OAAO;AAAA;AAAA,qDAEpE,KAAK,KAAK;AAAA,YACnD,KAAK,cAAc,2DAA2D,KAAK,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA;AAItH,WAAO,KAAK,OACR,4BAA4B,OAAO,SAAS,KAAK,IAAI,IAAI,IAAI,SAC7D,8BAA8B,OAAO,IAAI,IAAI;AAAA,EACnD;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,UAED,KAAK,SAAS,KAAK,WACjB;AAAA,gBACI,KAAK,QAAQ,sCAAsC,KAAK,KAAK,UAAU,OAAO;AAAA,gBAC9E,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA,sBAE5F,OAAO;AAAA,wCACqB,KAAK,MAAM,IAAI,CAAC,SAAS,KAAK,WAAW,IAAI,CAAC,CAAC;AAAA;AAAA;AAAA,EAGrF;AACF;AA/Na,UACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAahB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA,QAIlB,qBAAqB;AAAA;AAAA;AAAA;AAAA,MAIvB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqEvB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAYd,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,MA0DjB,mBAAmB;AAAA;AAIvB;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjL/B,UAkLX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApLf,UAqLX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvLf,UAwLX;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GA1LnB,UA2LX;AA3LW,YAAN;AAAA,EADN,cAAc,eAAe;AAAA,GACjB;","names":[]}
package/dist/{chunk-USNFT4DU.js → chunk-6H262SG6.js} RENAMED
@@ -37,7 +37,9 @@ Stats.styles = css`
37
37
  :host {
38
38
  display: block;
39
39
  box-sizing: border-box;
40
- padding: var(--st-space-48) var(--st-space-24);
40
+ /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
41
+ padding; override with --st-stats-padding instead. */
42
+ padding: var(--st-stats-padding, var(--st-space-48) var(--st-space-24)) !important;
41
43
  background-color: var(--st-color-surface);
42
44
  border-top: 1px solid var(--st-color-divider);
43
45
  border-bottom: 1px solid var(--st-color-divider);
@@ -45,7 +47,7 @@ Stats.styles = css`
45
47
  }
46
48
 
47
49
  :host([inverted]) {
48
- background-color: var(--st-color-text-strong);
50
+ background-color: var(--st-cms-band-dark-bg);
49
51
  border-color: transparent;
50
52
  }
51
53
 
@@ -88,17 +90,17 @@ Stats.styles = css`
88
90
  }
89
91
 
90
92
  :host([inverted]) .value {
91
- color: var(--st-color-on-solid);
93
+ color: var(--st-cms-band-dark-color);
92
94
  }
93
95
 
94
96
  :host([inverted]) .label,
95
97
  :host([inverted]) .description {
96
- color: var(--st-color-border);
98
+ color: color-mix(in oklch, var(--st-cms-band-dark-color) 75%, transparent);
97
99
  }
98
100
 
99
101
  @media (max-width: 768px) {
100
102
  :host {
101
- padding: var(--st-space-40) var(--st-space-24);
103
+ padding: var(--st-stats-padding, var(--st-space-40) var(--st-space-24)) !important;
102
104
  }
103
105
  .grid {
104
106
  grid-template-columns: repeat(2, 1fr);
@@ -122,4 +124,4 @@ Stats = __decorateClass([
122
124
  export {
123
125
  Stats
124
126
  };
125
- //# sourceMappingURL=chunk-USNFT4DU.js.map
127
+ //# sourceMappingURL=chunk-6H262SG6.js.map
package/dist/chunk-6H262SG6.js.map ADDED
@@ -0,0 +1 @@
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/**\r\n * Responsive grid of headline numbers with a label and optional description. Port of React `Stats`.\r\n * `inverted` puts it on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.\r\n *\r\n * @cssprop --st-stats-padding - Overrides the block's padding.\r\n */\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 /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n padding; override with --st-stats-padding instead. */\r\n padding: var(--st-stats-padding, var(--st-space-48) var(--st-space-24)) !important;\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-cms-band-dark-bg);\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-cms-band-dark-color);\r\n }\r\n\r\n :host([inverted]) .label,\r\n :host([inverted]) .description {\r\n color: color-mix(in oklch, var(--st-cms-band-dark-color) 75%, transparent);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-stats-padding, var(--st-space-40) var(--st-space-24)) !important;\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;AAiBjC,IAAM,QAAN,cAAoB,WAAW;AAAA,EAA/B;AAAA;AAmFL,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;AAvGa,MACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWf,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,GAlFnB,MAmFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArF/B,MAsFX;AAtFW,QAAN;AAAA,EADN,cAAc,UAAU;AAAA,GACZ;","names":[]}
package/dist/{chunk-E52WO7R7.js → chunk-BQTDFQ4V.js} RENAMED
@@ -202,7 +202,9 @@ FeaturesSection.styles = css2`
202
202
  :host {
203
203
  display: block;
204
204
  ${fontFamilyStyles}
205
- padding: var(--st-cms-section-padding) var(--st-space-24);
205
+ /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
206
+ padding; override with --st-features-section-padding instead. */
207
+ padding: var(--st-features-section-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;
206
208
  background: var(--st-color-surface);
207
209
  }
208
210
 
@@ -242,7 +244,7 @@ FeaturesSection.styles = css2`
242
244
 
243
245
  @media (max-width: 768px) {
244
246
  :host {
245
- padding: var(--st-space-48) var(--st-space-16);
247
+ padding: var(--st-features-section-padding, var(--st-space-48) var(--st-space-16)) !important;
246
248
  }
247
249
 
248
250
  .grid {
@@ -276,4 +278,4 @@ export {
276
278
  FeatureItem,
277
279
  FeaturesSection
278
280
  };
279
- //# sourceMappingURL=chunk-E52WO7R7.js.map
281
+ //# sourceMappingURL=chunk-BQTDFQ4V.js.map
package/dist/chunk-BQTDFQ4V.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/features-section/FeaturesSection.ts","../src/features-section/FeatureItem.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 './FeatureItem';\r\n\r\n/** Data for one tile when using the `items` property (mirrors `st-feature-item`'s properties). */\r\nexport interface FeatureItemData {\r\n icon?: string;\r\n title: string;\r\n description: string;\r\n href?: string;\r\n}\r\n\r\n/**\r\n * A titled grid of feature tiles. Ports `SankhyaUI`'s React `FeaturesSection`: tiles come from the\r\n * `items` property, from slotted `st-feature-item` elements (the source's `children`), or both\r\n * (slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`\r\n * is passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.\r\n *\r\n * @cssprop --st-features-section-padding - Overrides the section's padding.\r\n */\r\n@customElement('st-features-section')\r\nexport class FeaturesSection extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n padding; override with --st-features-section-padding instead. */\r\n padding: var(--st-features-section-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\r\n background: var(--st-color-surface);\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 margin: 0;\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n margin: 0 auto;\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .subtitle {\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .grid {\r\n display: grid;\r\n grid-template-columns: repeat(var(--features-columns, 2), 1fr);\r\n gap: var(--st-space-32);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-features-section-padding, var(--st-space-48) var(--st-space-16)) !important;\r\n }\r\n\r\n .grid {\r\n grid-template-columns: 1fr;\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 /** Applied to every tile built from `items`. */\r\n @property({ type: String, attribute: 'action-label' })\r\n actionLabel = 'Learn more';\r\n\r\n @property({ type: Number })\r\n columns = 0;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n /** Tiles to render (property only). */\r\n @property({ attribute: false })\r\n items: FeatureItemData[] = [];\r\n\r\n render() {\r\n const gridStyle = this.columns ? `--features-columns: ${this.columns}` : nothing;\r\n return html`\r\n <section class=\"container\" part=\"container\">\r\n <div class=\"header\" part=\"header\">\r\n <div class=\"title\" part=\"title\">${this.title}</div>\r\n ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\r\n </div>\r\n <div class=\"grid\" part=\"grid\" style=${gridStyle}>\r\n <slot></slot>\r\n ${this.items.map(\r\n (item) => html`\r\n <st-feature-item\r\n .icon=${item.icon ?? ''}\r\n .title=${item.title}\r\n .description=${item.description}\r\n .href=${item.href ?? ''}\r\n .actionLabel=${this.actionLabel}\r\n ?inverted=${this.inverted}\r\n ></st-feature-item>\r\n `\r\n )}\r\n </div>\r\n </section>\r\n `;\r\n }\r\n}\r\n","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 { cardDescriptionStyles, cardTitleStyles } from '../shared/section-styles';\r\nimport '../card';\r\nimport '../markdown';\r\n\r\n/**\r\n * One feature tile for `st-features-section`: optional icon, title, Markdown description and an\r\n * optional \"Learn more\" link, rendered on an `st-card`. `icon` is an Iconify name (e.g.\r\n * `mdi:rocket`). The link is a plain `<a>` (the source used react-router's `Link` for non-http\r\n * hrefs; there is no Lit equivalent). The click is composed, so an SPA router can intercept it\r\n * (e.g. via `event.composedPath()`) and navigate client-side; `http(s)` links open in a new tab.\r\n */\r\n@customElement('st-feature-item')\r\nexport class FeatureItem extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n }\r\n\r\n st-card {\r\n height: 100%;\r\n }\r\n\r\n .content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--st-space-16);\r\n height: 100%;\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 48px;\r\n height: 48px;\r\n border-radius: var(--st-radius-lg);\r\n background: var(--st-color-subtle);\r\n color: var(--st-color-text-strong);\r\n margin-bottom: var(--st-space-8);\r\n font-size: 24px;\r\n }\r\n\r\n :host([inverted]) .icon {\r\n background: var(--st-color-text-muted);\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .title {\r\n ${cardTitleStyles}\r\n margin: 0;\r\n }\r\n\r\n .description {\r\n ${cardDescriptionStyles}\r\n margin: 0;\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .description {\r\n color: inherit;\r\n }\r\n\r\n .link {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-4);\r\n margin-top: auto;\r\n color: var(--st-color-text-muted);\r\n font-weight: var(--st-font-weight-medium);\r\n font-size: var(--st-text-md);\r\n text-decoration: none;\r\n transition: color 0.2s ease;\r\n }\r\n\r\n .link:hover {\r\n color: var(--st-color-text-strong);\r\n text-decoration: underline;\r\n }\r\n\r\n :host([inverted]) .link,\r\n :host([inverted]) .link:hover {\r\n color: inherit;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .link {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** Iconify icon name, e.g. `mdi:rocket`. */\r\n @property({ type: String })\r\n icon = '';\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n /** Markdown. */\r\n @property({ type: String })\r\n description = '';\r\n\r\n @property({ type: String })\r\n href = '';\r\n\r\n @property({ type: String, attribute: 'action-label' })\r\n actionLabel = 'Learn more';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n render() {\r\n const external = this.href.startsWith('http');\r\n return html`\r\n <st-card hoverable elevation=\"sm\" ?inverted=${this.inverted} part=\"card\">\r\n <div class=\"content\" part=\"content\">\r\n ${this.icon\r\n ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${this.icon}></iconify-icon></div>`\r\n : nothing}\r\n <h3 class=\"title\" part=\"title\">${this.title}</h3>\r\n <st-markdown class=\"description\" part=\"description\" .content=${this.description}></st-markdown>\r\n ${this.href\r\n ? html`\r\n <a\r\n class=\"link\"\r\n part=\"link\"\r\n href=${this.href}\r\n target=${external ? '_blank' : '_self'}\r\n rel=${external ? 'noopener noreferrer' : nothing}\r\n >\r\n ${this.actionLabel} <span>&rarr;</span>\r\n </a>\r\n `\r\n : nothing}\r\n </div>\r\n </st-card>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement"]}
package/dist/{chunk-74MILER4.js → chunk-EMVHNAID.js} RENAMED
@@ -81,7 +81,9 @@ ItemsAccordion.styles = css`
81
81
 
82
82
  :host {
83
83
  display: block;
84
- padding: var(--st-cms-section-padding) var(--st-space-24);
84
+ /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
85
+ padding; override with --st-items-accordion-padding instead. */
86
+ padding: var(--st-items-accordion-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;
85
87
  background: var(--st-color-page);
86
88
  ${fontFamilyStyles}
87
89
  }
@@ -180,7 +182,7 @@ ItemsAccordion.styles = css`
180
182
 
181
183
  @media (max-width: 768px) {
182
184
  :host {
183
- padding: var(--st-space-48) var(--st-space-20);
185
+ padding: var(--st-items-accordion-padding, var(--st-space-48) var(--st-space-20)) !important;
184
186
  }
185
187
 
186
188
  .title {
@@ -212,4 +214,4 @@ ItemsAccordion = __decorateClass([
212
214
  export {
213
215
  ItemsAccordion
214
216
  };
215
- //# sourceMappingURL=chunk-74MILER4.js.map
217
+ //# sourceMappingURL=chunk-EMVHNAID.js.map
package/dist/chunk-EMVHNAID.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/items-accordion/ItemsAccordion.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport {\r\n reducedMotionStyles,\r\n sectionHeaderStyles,\r\n sectionSubtitleStyles,\r\n sectionTitleStyles,\r\n} from '../shared/section-styles';\r\nimport type { AccordionToggleEventDetail } from './ItemsAccordionEvents';\r\n\r\nexport interface AccordionItem {\r\n id: string;\r\n title: string;\r\n content: string;\r\n}\r\n\r\n/**\r\n * A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.\r\n *\r\n * @cssprop --st-items-accordion-padding - Overrides the block's padding.\r\n */\r\n@customElement('st-items-accordion')\r\nexport class ItemsAccordion extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n padding; override with --st-items-accordion-padding instead. */\r\n padding: var(--st-items-accordion-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\r\n background: var(--st-color-page);\r\n ${fontFamilyStyles}\r\n }\r\n\r\n .container {\r\n max-width: 800px;\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 font-size: var(--st-text-2xl);\r\n margin-bottom: var(--st-space-12);\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n font-size: var(--st-text-base);\r\n margin: 0;\r\n }\r\n\r\n .list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-16);\r\n }\r\n\r\n .item {\r\n border: 1px solid var(--st-color-border);\r\n border-radius: var(--st-radius-lg);\r\n background: var(--st-color-surface);\r\n overflow: hidden;\r\n transition:\r\n border-color 0.2s ease,\r\n box-shadow 0.2s ease;\r\n }\r\n\r\n .item.open {\r\n border-color: var(--st-color-border-strong);\r\n box-shadow: 0 4px 6px -1px var(--st-shadow-color-sm);\r\n }\r\n\r\n .trigger {\r\n ${buttonResetStyles}\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: var(--st-space-24);\r\n text-align: left;\r\n font-size: var(--st-text-lg);\r\n font-weight: var(--st-font-weight-semibold);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n .trigger:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n .chevron {\r\n flex-shrink: 0;\r\n margin-left: var(--st-space-16);\r\n font-size: 24px;\r\n color: var(--st-color-text-faint);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .open .chevron {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .content {\r\n display: grid;\r\n grid-template-rows: 0fr;\r\n transition: grid-template-rows 0.3s ease;\r\n }\r\n\r\n .open .content {\r\n grid-template-rows: 1fr;\r\n }\r\n\r\n .content-clip {\r\n overflow: hidden;\r\n min-height: 0;\r\n }\r\n\r\n .content-inner {\r\n padding: 0 var(--st-space-24) var(--st-space-24);\r\n color: var(--st-color-text);\r\n line-height: 1.6;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-items-accordion-padding, var(--st-space-48) var(--st-space-20)) !important;\r\n }\r\n\r\n .title {\r\n font-size: var(--st-text-xl);\r\n }\r\n }\r\n\r\n ${reducedMotionStyles}\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 @property({ attribute: false })\r\n items: AccordionItem[] = [];\r\n\r\n @property({ type: Boolean, attribute: 'allow-multiple' })\r\n allowMultiple = false;\r\n\r\n @state() private openIds = new Set<string>();\r\n\r\n private toggle(id: string) {\r\n const wasOpen = this.openIds.has(id);\r\n const next = new Set(this.allowMultiple ? this.openIds : []);\r\n if (wasOpen) next.delete(id);\r\n else next.add(id);\r\n this.openIds = next;\r\n this.dispatchEvent(\r\n new CustomEvent<AccordionToggleEventDetail>('accordion-toggle', {\r\n detail: { id, open: !wasOpen },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\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=\"list\" part=\"list\">\r\n ${this.items.map((item) => {\r\n const open = this.openIds.has(item.id);\r\n return html`\r\n <div class=\"item ${open ? 'open' : ''}\" part=\"item\">\r\n <button\r\n class=\"trigger\"\r\n part=\"trigger\"\r\n type=\"button\"\r\n aria-expanded=${open ? 'true' : 'false'}\r\n aria-controls=\"content-${item.id}\"\r\n @click=${() => this.toggle(item.id)}\r\n >\r\n <span>${item.title}</span>\r\n <iconify-icon class=\"chevron\" icon=\"mdi:chevron-down\"></iconify-icon>\r\n </button>\r\n <div class=\"content\" id=\"content-${item.id}\" part=\"content\" role=\"region\" ?inert=${!open}>\r\n <div class=\"content-clip\">\r\n <div class=\"content-inner\">${item.content}</div>\r\n </div>\r\n </div>\r\n </div>\r\n `;\r\n })}\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
package/dist/{chunk-3ERKQNZT.js → chunk-HGJT24UG.js} RENAMED
@@ -54,8 +54,10 @@ PromoBanner.styles = css`
54
54
  box-sizing: border-box;
55
55
  width: calc(100% - 48px);
56
56
  max-width: var(--st-cms-container-max);
57
- margin: var(--st-space-40) auto;
58
- padding: 100px var(--st-space-24);
57
+ /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
58
+ margin/padding; override with --st-promo-banner-margin/-padding instead. */
59
+ margin: var(--st-promo-banner-margin, var(--st-space-40) auto) !important;
60
+ padding: var(--st-promo-banner-padding, 100px var(--st-space-24)) !important;
59
61
  border-radius: var(--st-space-24);
60
62
  background-color: var(--st-color-text-strong);
61
63
  background-size: cover;
@@ -111,8 +113,8 @@ PromoBanner.styles = css`
111
113
  @media (max-width: 768px) {
112
114
  :host {
113
115
  width: auto;
114
- margin: var(--st-space-24);
115
- padding: 60px var(--st-space-24);
116
+ margin: var(--st-promo-banner-margin, var(--st-space-24)) !important;
117
+ padding: var(--st-promo-banner-padding, 60px var(--st-space-24)) !important;
116
118
  border-radius: var(--st-radius-lg);
117
119
  }
118
120
  .actions,
@@ -152,4 +154,4 @@ PromoBanner = __decorateClass([
152
154
  export {
153
155
  PromoBanner
154
156
  };
155
- //# sourceMappingURL=chunk-3ERKQNZT.js.map
157
+ //# sourceMappingURL=chunk-HGJT24UG.js.map
package/dist/chunk-HGJT24UG.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/promo-banner/PromoBanner.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport { ctaLinkStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\r\nimport type { HeroActionEventDetail } from '../hero/HeroEvents';\r\n\r\n/**\r\n * Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a\r\n * background image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event\r\n * (detail `{ href }`, empty unless set) in place of `onAction`.\r\n *\r\n * @cssprop --st-promo-banner-margin - Overrides the banner's margin.\r\n * @cssprop --st-promo-banner-padding - Overrides the banner's padding.\r\n */\r\n@customElement('st-promo-banner')\r\nexport class PromoBanner 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 width: calc(100% - 48px);\r\n max-width: var(--st-cms-container-max);\r\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n margin/padding; override with --st-promo-banner-margin/-padding instead. */\r\n margin: var(--st-promo-banner-margin, var(--st-space-40) auto) !important;\r\n padding: var(--st-promo-banner-padding, 100px var(--st-space-24)) !important;\r\n border-radius: var(--st-space-24);\r\n background-color: var(--st-color-text-strong);\r\n background-size: cover;\r\n background-position: center;\r\n color: var(--st-color-on-solid);\r\n text-align: center;\r\n ${rootFontFamilyStyles}\r\n }\r\n\r\n :host([inverted]) {\r\n background-color: var(--st-color-subtle);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n .container {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--st-space-32);\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n color: inherit;\r\n margin: 0;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n color: inherit;\r\n opacity: 0.8;\r\n margin: 0;\r\n }\r\n\r\n .actions {\r\n margin-top: var(--st-space-16);\r\n }\r\n\r\n .cta {\r\n ${buttonResetStyles}\r\n ${ctaLinkStyles}\r\n border: 1px solid currentColor;\r\n color: inherit;\r\n }\r\n\r\n .cta:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n width: auto;\r\n margin: var(--st-promo-banner-margin, var(--st-space-24)) !important;\r\n padding: var(--st-promo-banner-padding, 60px var(--st-space-24)) !important;\r\n border-radius: var(--st-radius-lg);\r\n }\r\n .actions,\r\n .cta {\r\n width: 100%;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .cta {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n @property({ type: String, attribute: 'action-label' })\r\n actionLabel = '';\r\n\r\n @property({ type: String })\r\n href = '';\r\n\r\n @property({ type: String, attribute: 'image-src' })\r\n imageSrc = '';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n protected willUpdate(): void {\r\n this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\r\n }\r\n\r\n private onAction = (): void => {\r\n this.dispatchEvent(\r\n new CustomEvent<HeroActionEventDetail>('action', { detail: { href: this.href }, bubbles: true, composed: true })\r\n );\r\n };\r\n\r\n render() {\r\n return html`\r\n <div class=\"container\" part=\"container\">\r\n <h2 class=\"title\" part=\"title\">${this.title}</h2>\r\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n <slot></slot>\r\n ${this.actionLabel\r\n ? html`<div class=\"actions\" part=\"actions\">\r\n <button class=\"cta\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>\r\n </div>`\r\n : nothing}\r\n </div>\r\n `;\r\n }\r\n}\r\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":[]}
package/dist/{chunk-MLF6L3KM.js → chunk-HGTC3LCW.js} RENAMED
@@ -272,7 +272,9 @@ MegaMenuColumn.styles = css2`
272
272
 
273
273
  :host([variant='card']),
274
274
  :host([variant='accent']) {
275
- padding: 2rem 1.75rem 1.75rem;
275
+ /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
276
+ padding; override with --st-mega-menu-column-padding instead. */
277
+ padding: var(--st-mega-menu-column-padding, 2rem 1.75rem 1.75rem) !important;
276
278
  border-radius: 20px;
277
279
  background: color-mix(in oklch, var(--st-color-text-strong) 5%, var(--st-color-surface));
278
280
  }
@@ -330,9 +332,9 @@ MegaMenuColumn.styles = css2`
330
332
  gap: 2px;
331
333
  }
332
334
 
333
- /* Nested groups stack with room between them. */
335
+ /* Nested groups stack with room between them (!important for the same page-reset reason). */
334
336
  ::slotted(st-mega-menu-column:not(:first-child)) {
335
- margin-top: 2rem;
337
+ margin-top: 2rem !important;
336
338
  }
337
339
 
338
340
  .cta {
@@ -602,4 +604,4 @@ export {
602
604
  MegaMenuColumn,
603
605
  MegaMenuFeature
604
606
  };
605
- //# sourceMappingURL=chunk-MLF6L3KM.js.map
607
+ //# sourceMappingURL=chunk-HGTC3LCW.js.map
package/dist/chunk-HGTC3LCW.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/mega-menu/MegaMenu.ts","../src/mega-menu/MegaMenuColumn.ts","../src/mega-menu/MegaMenuFeature.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\n\n/**\n * The rich layout of a mega-menu panel, after okta.com: an optional intro column on the left (a\n * large `heading`, a `description` and, under a divider, quick links in `slot=\"intro\"`), then the\n * link columns side by side (`st-mega-menu-column`s in the default slot), then an optional\n * featured column on the right (`featured-heading` over the `st-mega-menu-feature` cards in\n * `slot=\"featured\"`). Slot it into an `st-dropdown` with `mega` set.\n *\n * The layout follows the width it is given, not the viewport (a container query): side by side\n * when there is room; intro and featured column above/below two link columns on a medium panel;\n * everything stacked in the narrow drill-down panel `st-header` shows on a phone (where the intro\n * heading is left out — the drill-down already shows the section's name).\n *\n * @slot - The link columns (`st-mega-menu-column`s, or any blocks).\n * @slot intro - Quick links under the intro text, e.g. `st-menu-item`s with an icon.\n * @slot featured - Promo cards (`st-mega-menu-feature`s), stacked.\n * @csspart inner - The grid holding every area.\n * @csspart intro - The intro column.\n * @csspart columns - The grid holding the link columns.\n * @csspart featured - The featured column.\n */\n@customElement('st-mega-menu')\nexport class MegaMenu extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n container-type: inline-size;\n ${fontFamilyStyles}\n }\n\n .inner {\n display: grid;\n gap: 3rem;\n padding: 3rem 3.5rem;\n box-sizing: border-box;\n }\n\n .columns {\n display: grid;\n grid-template-columns: repeat(var(--st-mega-menu-columns, 3), minmax(0, 1fr));\n gap: 3rem;\n align-items: stretch;\n }\n\n .intro,\n .featured {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n\n .intro-heading {\n margin: 0 0 1rem;\n font-size: 2rem;\n font-weight: 400;\n line-height: 1.15;\n color: var(--st-color-text-strong);\n }\n\n .intro-description {\n margin: 0;\n font-size: 1rem;\n line-height: 1.55;\n color: var(--st-color-text);\n }\n\n .intro-links {\n display: flex;\n flex-direction: column;\n gap: 2px;\n margin-top: 2.5rem;\n padding-top: 2rem;\n border-top: 1px solid var(--st-color-border);\n }\n\n .intro-links.no-text {\n margin-top: 0;\n padding-top: 0;\n border-top: 0;\n }\n\n .featured-heading {\n margin: 0 0 1rem;\n font-size: 1.125rem;\n font-weight: 500;\n line-height: 1.35;\n color: var(--st-color-text-strong);\n }\n\n .featured-items {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n }\n\n [hidden] {\n display: none !important;\n }\n\n /* Medium panel: intro on top, two link columns, featured cards side by side underneath. */\n @container (max-width: 960px) {\n .inner {\n grid-template-columns: minmax(0, 1fr) !important;\n gap: 2rem;\n padding: 2rem;\n }\n\n .columns {\n grid-template-columns: repeat(var(--st-mega-menu-columns-md, 2), minmax(0, 1fr));\n gap: 2rem;\n }\n\n .intro-links {\n margin-top: 1.5rem;\n padding-top: 1.5rem;\n }\n\n .featured-items {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n }\n }\n\n /* Narrow panel (the phone drill-down): everything stacked. */\n @container (max-width: 560px) {\n .inner {\n gap: 1.75rem;\n padding: 0.5rem 0 1.5rem;\n }\n\n .columns {\n grid-template-columns: minmax(0, 1fr);\n gap: 1.75rem;\n }\n\n .intro-heading {\n display: none;\n }\n }\n `;\n\n /** Large title of the intro column. */\n @property({ type: String })\n heading = '';\n\n /** Text under the intro title. */\n @property({ type: String })\n description = '';\n\n /** Heading over the featured cards. */\n @property({ type: String, attribute: 'featured-heading' })\n featuredHeading = '';\n\n /** Number of link columns side by side at full width. `0` (the default) uses one per slotted column. */\n @property({ type: Number })\n columns = 0;\n\n @state() private columnCount = 1;\n @state() private hasIntroLinks = false;\n @state() private hasFeatured = false;\n\n private onColumnsSlotChange = (event: Event): void => {\n this.columnCount = Math.max(1, (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length);\n };\n\n private onIntroSlotChange = (event: Event): void => {\n this.hasIntroLinks = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n };\n\n private onFeaturedSlotChange = (event: Event): void => {\n this.hasFeatured = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n };\n\n render() {\n const columns = Math.min(6, Math.max(1, Math.round(this.columns) || this.columnCount));\n const hasIntroText = !!(this.heading || this.description);\n const hasIntro = hasIntroText || this.hasIntroLinks;\n const hasFeatured = this.hasFeatured || !!this.featuredHeading;\n // Every column — intro, each link column, featured — gets the same share of the width.\n const tracks = [hasIntro ? 'minmax(0, 1fr)' : '', `minmax(0, ${columns}fr)`, hasFeatured ? 'minmax(0, 1fr)' : '']\n .filter(Boolean)\n .join(' ');\n return html`\n <div\n part=\"inner\"\n class=\"inner\"\n style=\"grid-template-columns:${tracks};--st-mega-menu-columns:${columns};--st-mega-menu-columns-md:${Math.min(2, columns)}\"\n >\n <div part=\"intro\" class=\"intro\" ?hidden=${!hasIntro}>\n ${this.heading ? html`<p part=\"heading\" class=\"intro-heading\">${this.heading}</p>` : nothing}\n ${this.description ? html`<p part=\"description\" class=\"intro-description\">${this.description}</p>` : nothing}\n <div part=\"intro-links\" class=\"intro-links ${hasIntroText ? '' : 'no-text'}\" ?hidden=${!this.hasIntroLinks}>\n <slot name=\"intro\" @slotchange=${this.onIntroSlotChange}></slot>\n </div>\n </div>\n <div part=\"columns\" class=\"columns\"><slot @slotchange=${this.onColumnsSlotChange}></slot></div>\n <div part=\"featured\" class=\"featured\" ?hidden=${!hasFeatured}>\n ${this.featuredHeading ? html`<p part=\"featured-heading\" class=\"featured-heading\">${this.featuredHeading}</p>` : nothing}\n <div class=\"featured-items\"><slot name=\"featured\" @slotchange=${this.onFeaturedSlotChange}></slot></div>\n </div>\n </div>\n `;\n }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { arrowUpRightIcon } from '../shared/icons';\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * One column (or one group within a column) of an `st-mega-menu`: a heading, an optional line of\n * description, then its links stacked — usually `st-menu-item`s with `variant=\"link\"`. Nest\n * columns to stack several headed groups in one column, as okta.com does.\n *\n * `variant=\"card\"` puts the column on a tinted rounded tile and `variant=\"accent\"` on a solid\n * accent tile with light text; both suit a row of equal columns without intro or featured area.\n * `cta-label` + `cta-href` add a pill button at the bottom of the column.\n *\n * The heading (when `href` is set) and the button fire a *cancelable* `mega-menu-select` event\n * (detail: `{ href }`) before navigating; a host doing client-side routing calls\n * `event.preventDefault()` on it.\n *\n * @slot - The column's links, or nested `st-mega-menu-column` groups.\n * @fires mega-menu-select - The heading link or the button was clicked (cancelable; detail `{ href }`).\n * @csspart heading - The heading text or link.\n * @csspart description - The line under the heading.\n * @csspart items - The box holding the links.\n * @csspart cta - The pill button.\n * @cssprop --st-mega-menu-column-padding - Overrides the padding of a `card`/`accent` column.\n */\n@customElement('st-mega-menu-column')\nexport class MegaMenuColumn extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: flex;\n flex-direction: column;\n min-width: 0;\n box-sizing: border-box;\n ${fontFamilyStyles}\n }\n\n :host([variant='card']),\n :host([variant='accent']) {\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n padding; override with --st-mega-menu-column-padding instead. */\n padding: var(--st-mega-menu-column-padding, 2rem 1.75rem 1.75rem) !important;\n border-radius: 20px;\n background: color-mix(in oklch, var(--st-color-text-strong) 5%, var(--st-color-surface));\n }\n\n :host([variant='accent']) {\n background: var(--st-color-accent);\n color: var(--st-color-on-solid);\n /* Read by the st-menu-item links inside. */\n --st-nav-color: var(--st-color-on-solid);\n --st-nav-hover-bg: transparent;\n }\n\n .heading {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n margin: 0 0 0.75rem;\n font-size: 1.125rem;\n font-weight: 500;\n line-height: 1.35;\n color: var(--st-color-text-strong);\n text-decoration: none;\n }\n\n :host([variant='card']) .heading,\n :host([variant='accent']) .heading {\n font-size: 1.375rem;\n }\n\n :host([variant='accent']) .heading {\n color: inherit;\n }\n\n a.heading:hover,\n a.heading:focus-visible {\n text-decoration: underline;\n text-underline-offset: 4px;\n }\n\n .description {\n margin: -0.25rem 0 0.75rem;\n font-size: 0.875rem;\n line-height: 1.5;\n color: var(--st-color-text-muted);\n }\n\n :host([variant='accent']) .description {\n color: inherit;\n opacity: 0.85;\n }\n\n .items {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n /* Nested groups stack with room between them (!important for the same page-reset reason). */\n ::slotted(st-mega-menu-column:not(:first-child)) {\n margin-top: 2rem !important;\n }\n\n .cta {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 0.875rem 1.5rem;\n border-radius: 9999px;\n background: var(--st-color-surface);\n color: var(--st-color-text-strong);\n font-size: 1rem;\n font-weight: 500;\n text-align: center;\n text-decoration: none;\n transition: box-shadow 0.2s ease;\n }\n\n .cta-spacer {\n flex: 1;\n min-height: 1.75rem;\n }\n\n .cta:hover,\n .cta:focus-visible {\n box-shadow: 0 0 0 2px currentColor;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .cta {\n transition: none;\n }\n }\n `;\n\n @property({ type: String })\n heading = '';\n\n /** Makes the heading a link (e.g. to the section's overview page). */\n @property({ type: String })\n href = '';\n\n @property({ type: String })\n description = '';\n\n /** `plain` (default), `card` (tinted tile) or `accent` (solid accent tile, light text). */\n @property({ type: String, reflect: true })\n variant: 'plain' | 'card' | 'accent' = 'plain';\n\n /** Text of a pill button at the bottom of the column; needs `cta-href`. */\n @property({ type: String, attribute: 'cta-label' })\n ctaLabel = '';\n\n @property({ type: String, attribute: 'cta-href' })\n ctaHref = '';\n\n private select(event: MouseEvent, href: string): void {\n if (href.startsWith('http')) return;\n const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n detail: { href },\n bubbles: true,\n composed: true,\n cancelable: true\n });\n this.dispatchEvent(selectEvent);\n if (selectEvent.defaultPrevented) event.preventDefault();\n }\n\n private renderHeading() {\n if (!this.heading) return nothing;\n return this.href\n ? html`<a part=\"heading\" class=\"heading\" href=${this.href} @click=${(event: MouseEvent) => this.select(event, this.href)}\n >${this.heading}</a\n >`\n : html`<p part=\"heading\" class=\"heading\">${this.heading}</p>`;\n }\n\n private renderCta() {\n if (!this.ctaLabel || !this.ctaHref) return nothing;\n const external = this.ctaHref.startsWith('http');\n return html`\n <span class=\"cta-spacer\"></span>\n <a\n part=\"cta\"\n class=\"cta\"\n href=${this.ctaHref}\n target=${external ? '_blank' : '_self'}\n rel=${external ? 'noopener noreferrer' : nothing}\n @click=${(event: MouseEvent) => this.select(event, this.ctaHref)}\n >${this.ctaLabel} ${external ? arrowUpRightIcon(14) : nothing}</a\n >\n `;\n }\n\n render() {\n return html`\n ${this.renderHeading()}\n ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n <div part=\"items\" class=\"items\" role=\"group\" aria-label=${this.heading || nothing}><slot></slot></div>\n ${this.renderCta()}\n `;\n }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MegaMenuSelectEventDetail } from './MegaMenuEvents';\n\n/**\n * A promo card for the featured column of an `st-mega-menu` (`slot=\"featured\"`). The whole card\n * is one link. Two looks, after okta.com:\n *\n * - `story` (default): a rounded image on top, then the description and an underlined\n * call-to-action line — a customer story or announcement.\n * - `overlay`: a tile with light text over `image-url` (darkened), or over an accent gradient when\n * there is no image — an optional `logo-url` top left, the title and description at the bottom.\n *\n * An `http(s)` `href` opens in a new tab unless `target` says otherwise. Any other `href` fires a\n * *cancelable* `mega-menu-select` event (detail: `{ href }`) first; a host doing client-side\n * routing calls `event.preventDefault()` on it.\n *\n * @fires mega-menu-select - The card was clicked (cancelable; detail `{ href }`).\n * @csspart card - The card link.\n * @csspart image - The image (`story`).\n * @csspart logo - The logo (`overlay`).\n * @csspart eyebrow - The small label above the title.\n * @csspart title - The title.\n * @csspart description - The description.\n * @csspart cta - The call-to-action line.\n * @cssprop --st-mega-menu-feature-from - Start colour of the `overlay` gradient (default: the accent colour).\n * @cssprop --st-mega-menu-feature-to - End colour of the `overlay` gradient.\n */\n@customElement('st-mega-menu-feature')\nexport class MegaMenuFeature extends LitElement {\n /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key to it. */\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n ${fontFamilyStyles}\n }\n\n .card {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n box-sizing: border-box;\n color: var(--st-color-text-strong);\n text-decoration: none;\n }\n\n .image {\n display: block;\n width: 100%;\n aspect-ratio: 9 / 8;\n object-fit: cover;\n border-radius: 20px;\n transition: transform 0.3s ease;\n }\n\n .card:hover .image {\n transform: scale(1.015);\n }\n\n .eyebrow {\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--st-color-accent-text);\n }\n\n .title {\n margin: 0;\n font-size: 1.125rem;\n font-weight: 500;\n line-height: 1.3;\n }\n\n .description {\n margin: 0;\n font-size: 0.9375rem;\n line-height: 1.5;\n }\n\n .cta {\n align-self: flex-start;\n margin-top: 0.75rem;\n font-size: 0.9375rem;\n font-weight: 500;\n text-decoration: underline;\n text-underline-offset: 5px;\n text-decoration-thickness: 1px;\n }\n\n .card:hover .cta,\n .card:focus-visible .cta {\n text-decoration-thickness: 2px;\n }\n\n /* overlay */\n :host([variant='overlay']) .card {\n justify-content: flex-end;\n gap: 0.5rem;\n min-height: 15rem;\n padding: 1.75rem;\n border-radius: 20px;\n color: #fff;\n background-color: var(--st-color-accent);\n background-image:\n linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.05)),\n var(--st-mega-menu-feature-image, linear-gradient(160deg, var(--st-mega-menu-feature-from, var(--st-color-accent)), var(--st-mega-menu-feature-to, oklch(0.25 0.12 280))));\n background-size: cover;\n background-position: center;\n transition: transform 0.2s ease;\n }\n\n :host([variant='overlay']) .card:hover {\n transform: translateY(-2px);\n }\n\n :host([variant='overlay']) .logo {\n height: 2.25rem;\n width: auto;\n max-width: 70%;\n margin-bottom: auto;\n align-self: flex-start;\n object-fit: contain;\n }\n\n :host([variant='overlay']) .title {\n font-size: 1.75rem;\n font-weight: 400;\n }\n\n :host([variant='overlay']) .eyebrow,\n :host([variant='overlay']) .cta {\n color: inherit;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .image,\n :host([variant='overlay']) .card {\n transition: none;\n }\n }\n `;\n\n /** `story` (default) or `overlay` — see the element description. */\n @property({ type: String, reflect: true })\n variant: 'story' | 'overlay' = 'story';\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n description = '';\n\n /** Small label above the title, e.g. \"New\" or \"Report\". */\n @property({ type: String })\n eyebrow = '';\n\n @property({ type: String })\n href = '';\n\n /** `target` for the link. Defaults to `_blank` for an `http(s)` `href`, `_self` otherwise. */\n @property({ type: String })\n target = '';\n\n /** Image on top (`story`) or behind the text (`overlay`). */\n @property({ type: String, attribute: 'image-url' })\n imageUrl = '';\n\n @property({ type: String, attribute: 'image-alt' })\n imageAlt = '';\n\n /** Logo at the top of an `overlay` card. */\n @property({ type: String, attribute: 'logo-url' })\n logoUrl = '';\n\n @property({ type: String, attribute: 'logo-alt' })\n logoAlt = '';\n\n /** Call-to-action text at the bottom of the card; empty hides it. */\n @property({ type: String, attribute: 'cta-label' })\n ctaLabel = '';\n\n private get isExternal(): boolean {\n return this.href.startsWith('http');\n }\n\n private onClick = (event: MouseEvent): void => {\n if (this.isExternal) return;\n const selectEvent = new CustomEvent<MegaMenuSelectEventDetail>('mega-menu-select', {\n detail: { href: this.href },\n bubbles: true,\n composed: true,\n cancelable: true\n });\n this.dispatchEvent(selectEvent);\n if (selectEvent.defaultPrevented) event.preventDefault();\n };\n\n render() {\n const target = this.target || (this.isExternal ? '_blank' : '_self');\n const overlay = this.variant === 'overlay';\n const style = overlay && this.imageUrl ? `--st-mega-menu-feature-image:url(${JSON.stringify(this.imageUrl)})` : '';\n return html`\n <a\n part=\"card\"\n class=\"card\"\n style=${style}\n href=${this.href || nothing}\n target=${target}\n rel=${target === '_blank' ? 'noopener noreferrer' : nothing}\n @click=${this.onClick}\n >\n ${overlay && this.logoUrl ? html`<img part=\"logo\" class=\"logo\" src=${this.logoUrl} alt=${this.logoAlt} />` : nothing}\n ${!overlay && this.imageUrl\n ? html`<img part=\"image\" class=\"image\" src=${this.imageUrl} alt=${this.imageAlt} loading=\"lazy\" />`\n : nothing}\n ${this.eyebrow ? html`<span part=\"eyebrow\" class=\"eyebrow\">${this.eyebrow}</span>` : nothing}\n ${this.title ? html`<p part=\"title\" class=\"title\">${this.title}</p>` : nothing}\n ${this.description ? html`<p part=\"description\" class=\"description\">${this.description}</p>` : nothing}\n ${this.ctaLabel ? html`<span part=\"cta\" class=\"cta\">${this.ctaLabel}</span>` : nothing}\n </a>\n `;\n }\n}\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement","LitElement","css","html","nothing","customElement","property","LitElement","html","nothing","css","property","customElement"]}
package/dist/{chunk-S4ARRDAI.js → chunk-IDBEZY2O.js} RENAMED
@@ -1,6 +1,3 @@
1
- import {
2
- chevronIcon
3
- } from "./chunk-PB7ZPPLP.js";
4
1
  import {
5
2
  invertedSectionTextStyles,
6
3
  reducedMotionStyles,
@@ -8,6 +5,9 @@ import {
8
5
  sectionSubtitleStyles,
9
6
  sectionTitleStyles
10
7
  } from "./chunk-3VE6VFJ4.js";
8
+ import {
9
+ chevronIcon
10
+ } from "./chunk-PB7ZPPLP.js";
11
11
  import {
12
12
  buttonResetStyles,
13
13
  cardShellStyles,
@@ -145,7 +145,9 @@ Testimonials.styles = css`
145
145
  :host {
146
146
  display: block;
147
147
  box-sizing: border-box;
148
- padding: var(--st-space-48) var(--st-space-24);
148
+ /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
149
+ padding; override with --st-testimonials-padding instead. */
150
+ padding: var(--st-testimonials-padding, var(--st-space-48) var(--st-space-24)) !important;
149
151
  background-color: var(--st-color-subtle);
150
152
  ${rootFontFamilyStyles}
151
153
  }
@@ -444,7 +446,7 @@ Testimonials.styles = css`
444
446
 
445
447
  @media (max-width: 768px) {
446
448
  :host {
447
- padding: var(--st-space-40) var(--st-space-20);
449
+ padding: var(--st-testimonials-padding, var(--st-space-40) var(--st-space-20)) !important;
448
450
  }
449
451
  .grid {
450
452
  grid-template-columns: 1fr;
@@ -506,4 +508,4 @@ Testimonials = __decorateClass([
506
508
  export {
507
509
  Testimonials
508
510
  };
509
- //# sourceMappingURL=chunk-S4ARRDAI.js.map
511
+ //# sourceMappingURL=chunk-IDBEZY2O.js.map
package/dist/chunk-IDBEZY2O.js.map ADDED
@@ -0,0 +1 @@
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 * @cssprop --st-testimonials-padding - Overrides the section's padding.\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 /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n padding; override with --st-testimonials-padding instead. */\n padding: var(--st-testimonials-padding, var(--st-space-48) var(--st-space-24)) !important;\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-testimonials-padding, var(--st-space-40) var(--st-space-20)) !important;\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;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,GA9Uf,aA+UX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjVf,aAkVX;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GApVnB,aAqVX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvV/B,aAwVX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3V9B,aA4VX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GA/VxC,aAgWX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAnW1C,aAoWX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAtWzC,aAuWX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GAzWI,aAyWM;AACA;AAAA,EAAhB,MAAM;AAAA,GA1WI,aA0WM;AA1WN,eAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}
package/dist/{chunk-2VZFHTBC.js → chunk-MW43OS47.js} RENAMED
@@ -88,7 +88,9 @@ CookieConsent.styles = css`
88
88
  display: flex;
89
89
  flex-direction: column;
90
90
  gap: var(--st-space-16);
91
- padding: var(--st-space-24);
91
+ /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
92
+ padding; override with --st-cookie-consent-padding instead. */
93
+ padding: var(--st-cookie-consent-padding, var(--st-space-24)) !important;
92
94
  background: var(--st-color-surface);
93
95
  color: var(--st-color-text);
94
96
  border-top: 1px solid var(--st-color-border);
@@ -159,7 +161,7 @@ CookieConsent.styles = css`
159
161
  flex-direction: row;
160
162
  align-items: center;
161
163
  justify-content: space-between;
162
- padding: var(--st-space-16) var(--st-space-32);
164
+ padding: var(--st-cookie-consent-padding, var(--st-space-16) var(--st-space-32)) !important;
163
165
  }
164
166
  }
165
167
 
@@ -200,4 +202,4 @@ CookieConsent = __decorateClass([
200
202
  export {
201
203
  CookieConsent
202
204
  };
203
- //# sourceMappingURL=chunk-2VZFHTBC.js.map
205
+ //# sourceMappingURL=chunk-MW43OS47.js.map
package/dist/chunk-MW43OS47.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/cookie-consent/CookieConsent.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { CookieConsentEventDetail, CookieConsentStatus } from './CookieConsentEvents';\r\n\r\nconst DEFAULT_STORAGE_KEY = 'sankhya_ui_cookie_consent';\r\n\r\n/**\r\n * Fixed bottom consent bar. The source read/wrote consent through a React `UserContext`; here the\r\n * element persists the choice itself in localStorage (`storage-key`, default the source's\r\n * `sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice\r\n * exists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The\r\n * default slot replaces the message text.\r\n *\r\n * @cssprop --st-cookie-consent-padding - Overrides the bar's padding.\r\n */\r\n@customElement('st-cookie-consent')\r\nexport class CookieConsent extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n @keyframes st-cookie-slide-up {\r\n from {\r\n transform: translateY(100%);\r\n }\r\n to {\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n :host {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n box-sizing: border-box;\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-16);\r\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n padding; override with --st-cookie-consent-padding instead. */\r\n padding: var(--st-cookie-consent-padding, var(--st-space-24)) !important;\r\n background: var(--st-color-surface);\r\n color: var(--st-color-text);\r\n border-top: 1px solid var(--st-color-border);\r\n box-shadow: 0 -4px 10px var(--st-shadow-color-sm);\r\n animation: st-cookie-slide-up 0.3s ease-out;\r\n ${rootFontFamilyStyles}\r\n }\r\n\r\n .content {\r\n flex: 1;\r\n }\r\n\r\n .message {\r\n margin: 0;\r\n font-size: var(--st-text-md);\r\n line-height: 1.5;\r\n }\r\n\r\n .link {\r\n color: var(--st-color-accent-text);\r\n text-decoration: underline;\r\n margin-left: var(--st-space-4);\r\n }\r\n\r\n .link:hover {\r\n text-decoration: none;\r\n }\r\n\r\n .actions {\r\n display: flex;\r\n gap: var(--st-space-12);\r\n flex-shrink: 0;\r\n }\r\n\r\n .btn {\r\n ${buttonResetStyles}\r\n padding: var(--st-space-8) var(--st-space-16);\r\n border: 1px solid transparent;\r\n border-radius: var(--st-radius-xs);\r\n font-weight: var(--st-font-weight-medium);\r\n font-size: var(--st-text-md);\r\n transition:\r\n background-color 0.2s ease,\r\n color 0.2s ease;\r\n }\r\n\r\n .accept {\r\n background: var(--st-button-primary-bg);\r\n color: var(--st-button-primary-color);\r\n }\r\n\r\n .accept:hover {\r\n opacity: 0.9;\r\n }\r\n\r\n .refuse {\r\n border-color: var(--st-color-border);\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n .refuse:hover {\r\n background: var(--st-color-hover);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n @media (min-width: 768px) {\r\n :host {\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: var(--st-cookie-consent-padding, var(--st-space-16) var(--st-space-32)) !important;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n :host {\r\n animation: none;\r\n }\r\n .btn {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n message = '';\r\n\r\n @property({ type: String, attribute: 'accept-button-text' })\r\n acceptButtonText = 'Accept';\r\n\r\n @property({ type: String, attribute: 'refuse-button-text' })\r\n refuseButtonText = 'Refuse';\r\n\r\n @property({ type: String, attribute: 'privacy-policy-link' })\r\n privacyPolicyLink = '';\r\n\r\n @property({ type: String, attribute: 'privacy-policy-text' })\r\n privacyPolicyText = 'Privacy Policy';\r\n\r\n @property({ type: String, attribute: 'storage-key' })\r\n storageKey = DEFAULT_STORAGE_KEY;\r\n\r\n /** The stored choice, or `null` while undecided (the bar is only shown then). */\r\n @state() private consent: CookieConsentStatus | null = null;\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n this.consent = this.readStored();\r\n }\r\n\r\n private readStored(): CookieConsentStatus | null {\r\n try {\r\n const saved = localStorage.getItem(this.storageKey);\r\n return saved === 'accepted' || saved === 'refused' ? saved : null;\r\n } catch {\r\n return null;\r\n }\r\n }\r\n\r\n private choose(status: CookieConsentStatus): void {\r\n this.consent = status;\r\n try {\r\n localStorage.setItem(this.storageKey, status);\r\n } catch {\r\n // Storage unavailable (private mode, blocked): the choice just doesn't persist.\r\n }\r\n this.dispatchEvent(\r\n new CustomEvent<CookieConsentEventDetail>(status === 'accepted' ? 'cookie-consent-accept' : 'cookie-consent-refuse', {\r\n detail: { status },\r\n bubbles: true,\r\n composed: true\r\n })\r\n );\r\n }\r\n\r\n render() {\r\n if (this.consent !== null) return nothing;\r\n return html`\r\n <div class=\"content\" part=\"content\">\r\n <p class=\"message\" part=\"message\">\r\n <slot>\r\n ${this.message || 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.'}\r\n ${this.privacyPolicyLink\r\n ? html`<a class=\"link\" part=\"link\" href=${this.privacyPolicyLink} target=\"_blank\" rel=\"noopener noreferrer\">${this.privacyPolicyText}</a>`\r\n : nothing}\r\n </slot>\r\n </p>\r\n </div>\r\n <div class=\"actions\" part=\"actions\">\r\n <button class=\"btn refuse\" part=\"refuse\" type=\"button\" @click=${() => this.choose('refused')}>${this.refuseButtonText}</button>\r\n <button class=\"btn accept\" part=\"accept\" type=\"button\" @click=${() => this.choose('accepted')}>${this.acceptButtonText}</button>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
package/dist/{chunk-N63TVWK3.js → chunk-NN3OCPDV.js} RENAMED
@@ -53,7 +53,9 @@ Section.styles = css`
53
53
  display: block;
54
54
  box-sizing: border-box;
55
55
  width: 100%;
56
- padding: var(--st-section-space-m) var(--st-space-24);
56
+ /* !important on every padding rule: a page-level reset (e.g. Tailwind Preflight) otherwise
57
+ zeroes a shadow host's padding. Rescale it with the --st-section-space-* tokens. */
58
+ padding: var(--st-section-space-m) var(--st-section-padding-inline, var(--st-space-24)) !important;
57
59
  background: var(--st-section-bg, var(--st-color-surface));
58
60
  color: var(--st-color-text-strong);
59
61
  ${rootFontFamilyStyles}
@@ -64,8 +66,8 @@ Section.styles = css`
64
66
  }
65
67
 
66
68
  :host([background='dark']) {
67
- background: var(--st-section-bg, var(--st-color-text-strong));
68
- color: var(--st-color-on-solid);
69
+ background: var(--st-section-bg, var(--st-cms-band-dark-bg));
70
+ color: var(--st-cms-band-dark-color);
69
71
  }
70
72
 
71
73
  :host([background='accent']) {
@@ -77,21 +79,21 @@ Section.styles = css`
77
79
  background: var(--st-section-bg, transparent);
78
80
  }
79
81
 
80
- :host([spacing-above='none']) { padding-top: var(--st-section-space-none); }
81
- :host([spacing-above='s']) { padding-top: var(--st-section-space-s); }
82
- :host([spacing-above='l']) { padding-top: var(--st-section-space-l); }
83
- :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl); }
84
- :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl); }
82
+ :host([spacing-above='none']) { padding-top: var(--st-section-space-none) !important; }
83
+ :host([spacing-above='s']) { padding-top: var(--st-section-space-s) !important; }
84
+ :host([spacing-above='l']) { padding-top: var(--st-section-space-l) !important; }
85
+ :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl) !important; }
86
+ :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl) !important; }
85
87
 
86
- :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none); }
87
- :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s); }
88
- :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l); }
89
- :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl); }
90
- :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl); }
88
+ :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none) !important; }
89
+ :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s) !important; }
90
+ :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l) !important; }
91
+ :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl) !important; }
92
+ :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl) !important; }
91
93
 
92
94
  :host([width='full']) {
93
- padding-left: 0;
94
- padding-right: 0;
95
+ padding-left: 0 !important;
96
+ padding-right: 0 !important;
95
97
  }
96
98
 
97
99
  .inner {
@@ -153,7 +155,10 @@ Section.styles = css`
153
155
  }
154
156
 
155
157
  :host([background='dark']) .eyebrow,
156
- :host([background='dark']) .subtitle,
158
+ :host([background='dark']) .subtitle {
159
+ color: color-mix(in oklch, var(--st-cms-band-dark-color) 80%, transparent);
160
+ }
161
+
157
162
  :host([background='accent']) .eyebrow,
158
163
  :host([background='accent']) .subtitle {
159
164
  color: color-mix(in oklch, var(--st-color-on-solid) 80%, transparent);
@@ -164,8 +169,7 @@ Section.styles = css`
164
169
  --st-section-space-l: 3.5rem;
165
170
  --st-section-space-xl: 4.5rem;
166
171
  --st-section-space-xxl: 5.5rem;
167
- padding-left: var(--st-space-20);
168
- padding-right: var(--st-space-20);
172
+ --st-section-padding-inline: var(--st-space-20);
169
173
  }
170
174
  }
171
175
  `;
@@ -200,4 +204,4 @@ Section = __decorateClass([
200
204
  export {
201
205
  Section
202
206
  };
203
- //# sourceMappingURL=chunk-N63TVWK3.js.map
207
+ //# sourceMappingURL=chunk-NN3OCPDV.js.map