@sankhyatronics/sankhya-cms 0.1.4 → 0.1.6

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 (68) hide show
  1. package/custom-elements.json +997 -905
  2. package/dist/bento-grid/index.d.ts +5 -1
  3. package/dist/bento-grid/index.js +1 -1
  4. package/dist/carousel/index.d.ts +7 -2
  5. package/dist/carousel/index.js +1 -1
  6. package/dist/{chunk-OEX5FDMR.js → chunk-2JGWWXEI.js} +4 -2
  7. package/dist/chunk-2JGWWXEI.js.map +1 -0
  8. package/dist/{chunk-USNFT4DU.js → chunk-6H262SG6.js} +8 -6
  9. package/dist/chunk-6H262SG6.js.map +1 -0
  10. package/dist/{chunk-E52WO7R7.js → chunk-BQTDFQ4V.js} +5 -3
  11. package/dist/chunk-BQTDFQ4V.js.map +1 -0
  12. package/dist/{chunk-74MILER4.js → chunk-EMVHNAID.js} +5 -3
  13. package/dist/chunk-EMVHNAID.js.map +1 -0
  14. package/dist/{chunk-3ERKQNZT.js → chunk-HGJT24UG.js} +7 -5
  15. package/dist/chunk-HGJT24UG.js.map +1 -0
  16. package/dist/{chunk-MLF6L3KM.js → chunk-HGTC3LCW.js} +6 -4
  17. package/dist/chunk-HGTC3LCW.js.map +1 -0
  18. package/dist/{chunk-47RPYNFG.js → chunk-HPIQSECE.js} +10 -3
  19. package/dist/chunk-HPIQSECE.js.map +1 -0
  20. package/dist/{chunk-2VZFHTBC.js → chunk-MW43OS47.js} +5 -3
  21. package/dist/chunk-MW43OS47.js.map +1 -0
  22. package/dist/{chunk-N63TVWK3.js → chunk-NN3OCPDV.js} +23 -19
  23. package/dist/chunk-NN3OCPDV.js.map +1 -0
  24. package/dist/{chunk-KHPJ5FAJ.js → chunk-URC5XBTL.js} +32 -1
  25. package/dist/{chunk-KHPJ5FAJ.js.map → chunk-URC5XBTL.js.map} +1 -1
  26. package/dist/{chunk-IMACP7HN.js → chunk-UVNBZD7R.js} +5 -3
  27. package/dist/chunk-UVNBZD7R.js.map +1 -0
  28. package/dist/{chunk-5REZSZCK.js → chunk-VRRBMOUP.js} +5 -3
  29. package/dist/chunk-VRRBMOUP.js.map +1 -0
  30. package/dist/{chunk-S4ARRDAI.js → chunk-ZRXYWH6C.js} +5 -3
  31. package/dist/chunk-ZRXYWH6C.js.map +1 -0
  32. package/dist/cms-theme.css +11 -0
  33. package/dist/content-block/index.d.ts +2 -0
  34. package/dist/content-block/index.js +1 -1
  35. package/dist/cookie-consent/index.d.ts +2 -0
  36. package/dist/cookie-consent/index.js +1 -1
  37. package/dist/feature-split/index.d.ts +5 -1
  38. package/dist/feature-split/index.js +1 -1
  39. package/dist/features-section/index.d.ts +2 -0
  40. package/dist/features-section/index.js +1 -1
  41. package/dist/index.js +26 -26
  42. package/dist/items-accordion/index.d.ts +5 -1
  43. package/dist/items-accordion/index.js +1 -1
  44. package/dist/mega-menu/index.d.ts +1 -0
  45. package/dist/mega-menu/index.js +1 -1
  46. package/dist/menu-item/index.d.ts +4 -3
  47. package/dist/menu-item/index.js +1 -1
  48. package/dist/promo-banner/index.d.ts +3 -0
  49. package/dist/promo-banner/index.js +1 -1
  50. package/dist/section/index.d.ts +1 -0
  51. package/dist/section/index.js +1 -1
  52. package/dist/stats/index.d.ts +6 -1
  53. package/dist/stats/index.js +1 -1
  54. package/dist/testimonials/index.d.ts +1 -0
  55. package/dist/testimonials/index.js +1 -1
  56. package/package.json +4 -13
  57. package/dist/chunk-2VZFHTBC.js.map +0 -1
  58. package/dist/chunk-3ERKQNZT.js.map +0 -1
  59. package/dist/chunk-47RPYNFG.js.map +0 -1
  60. package/dist/chunk-5REZSZCK.js.map +0 -1
  61. package/dist/chunk-74MILER4.js.map +0 -1
  62. package/dist/chunk-E52WO7R7.js.map +0 -1
  63. package/dist/chunk-IMACP7HN.js.map +0 -1
  64. package/dist/chunk-MLF6L3KM.js.map +0 -1
  65. package/dist/chunk-N63TVWK3.js.map +0 -1
  66. package/dist/chunk-OEX5FDMR.js.map +0 -1
  67. package/dist/chunk-S4ARRDAI.js.map +0 -1
  68. package/dist/chunk-USNFT4DU.js.map +0 -1
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
package/dist/chunk-NN3OCPDV.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/section/Section.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\n\n/**\n * A page band that holds other content: sets the background, the spacing above and below, and\n * the content width, with an optional eyebrow/title/subtitle heading over its slotted children.\n * Use it to give a run of components one dark or tinted backdrop and a consistent vertical rhythm,\n * the way enterprise marketing pages stack full-width sections.\n *\n * @slot - The section's content.\n * @cssprop --st-section-bg - Overrides the background colour picked by `background`.\n * @cssprop --st-section-padding-inline - Overrides the left/right padding (not with `width=\"full\"`).\n * @csspart inner - The width-limited content box.\n * @csspart header - The heading block.\n */\n@customElement('st-section')\nexport class Section extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n --st-section-space-none: 0;\n --st-section-space-s: var(--st-space-24);\n --st-section-space-m: var(--st-space-48);\n --st-section-space-l: 4.5rem;\n --st-section-space-xl: 6rem;\n --st-section-space-xxl: 8rem;\n\n display: block;\n box-sizing: border-box;\n width: 100%;\n /* !important on every padding rule: a page-level reset (e.g. Tailwind Preflight) otherwise\n zeroes a shadow host's padding. Rescale it with the --st-section-space-* tokens. */\n padding: var(--st-section-space-m) var(--st-section-padding-inline, var(--st-space-24)) !important;\n background: var(--st-section-bg, var(--st-color-surface));\n color: var(--st-color-text-strong);\n ${rootFontFamilyStyles}\n }\n\n :host([background='subtle']) {\n background: var(--st-section-bg, var(--st-color-subtle));\n }\n\n :host([background='dark']) {\n background: var(--st-section-bg, var(--st-cms-band-dark-bg));\n color: var(--st-cms-band-dark-color);\n }\n\n :host([background='accent']) {\n background: var(--st-section-bg, var(--st-color-accent));\n color: var(--st-color-on-solid);\n }\n\n :host([background='transparent']) {\n background: var(--st-section-bg, transparent);\n }\n\n :host([spacing-above='none']) { padding-top: var(--st-section-space-none) !important; }\n :host([spacing-above='s']) { padding-top: var(--st-section-space-s) !important; }\n :host([spacing-above='l']) { padding-top: var(--st-section-space-l) !important; }\n :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl) !important; }\n :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl) !important; }\n\n :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none) !important; }\n :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s) !important; }\n :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l) !important; }\n :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl) !important; }\n :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl) !important; }\n\n :host([width='full']) {\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n\n .inner {\n max-width: var(--st-cms-container-max);\n margin: 0 auto;\n }\n\n :host([width='narrow']) .inner {\n max-width: 800px;\n }\n\n :host([width='full']) .inner {\n max-width: none;\n }\n\n .header {\n margin-bottom: var(--st-space-48);\n }\n\n :host([text-alignment='center']) .header {\n text-align: center;\n }\n\n :host([text-alignment='center']) .subtitle {\n margin-inline: auto;\n }\n\n :host([width='full']) .header {\n max-width: var(--st-cms-container-max);\n margin-inline: auto;\n padding-inline: var(--st-space-24);\n box-sizing: border-box;\n }\n\n .eyebrow {\n margin: 0 0 var(--st-space-12);\n font-size: var(--st-text-sm);\n font-weight: var(--st-font-weight-bold);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--st-color-text-muted);\n }\n\n .title {\n ${sectionTitleStyles}\n color: inherit;\n letter-spacing: -0.02em;\n max-width: 24ch;\n }\n\n :host([text-alignment='center']) .title {\n margin-inline: auto;\n }\n\n .subtitle {\n ${sectionSubtitleStyles}\n max-width: 60ch;\n margin-bottom: 0;\n }\n\n :host([background='dark']) .eyebrow,\n :host([background='dark']) .subtitle {\n color: color-mix(in oklch, var(--st-cms-band-dark-color) 80%, transparent);\n }\n\n :host([background='accent']) .eyebrow,\n :host([background='accent']) .subtitle {\n color: color-mix(in oklch, var(--st-color-on-solid) 80%, transparent);\n }\n\n @media (max-width: 768px) {\n :host {\n --st-section-space-l: 3.5rem;\n --st-section-space-xl: 4.5rem;\n --st-section-space-xxl: 5.5rem;\n --st-section-padding-inline: var(--st-space-20);\n }\n }\n `;\n\n @property({ type: String })\n eyebrow = '';\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n /** `default` (page surface), `subtle`, `dark`, `accent` or `transparent`. */\n @property({ type: String, reflect: true })\n background: 'default' | 'subtle' | 'dark' | 'accent' | 'transparent' = 'default';\n\n /** Space above the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n @property({ type: String, reflect: true, attribute: 'spacing-above' })\n spacingAbove: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n /** Space below the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n @property({ type: String, reflect: true, attribute: 'spacing-below' })\n spacingBelow: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n /** `contained` (default, the page container width), `narrow` (reading width) or `full` (edge to edge). */\n @property({ type: String, reflect: true })\n width: 'contained' | 'narrow' | 'full' = 'contained';\n\n /** Alignment of the heading. */\n @property({ type: String, reflect: true, attribute: 'text-alignment' })\n textAlignment: 'left' | 'center' = 'left';\n\n render() {\n const heading = this.eyebrow || this.title || this.subtitle;\n return html`\n <div class=\"inner\" part=\"inner\">\n ${heading\n ? html`<div class=\"header\" part=\"header\">\n ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n </div>`\n : nothing}\n <slot></slot>\n </div>\n `;\n }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAkBjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AAyIL,mBAAU;AAGV,iBAAQ;AAGR,oBAAW;AAIX,sBAAuE;AAIvE,wBAAwD;AAIxD,wBAAwD;AAIxD,iBAAyC;AAIzC,yBAAmC;AAAA;AAAA,EAEnC,SAAS;AACP,UAAM,UAAU,KAAK,WAAW,KAAK,SAAS,KAAK;AACnD,WAAO;AAAA;AAAA,UAED,UACE;AAAA,gBACI,KAAK,UAAU,yCAAyC,KAAK,OAAO,SAAS,OAAO;AAAA,gBACpF,KAAK,QAAQ,sCAAsC,KAAK,KAAK,UAAU,OAAO;AAAA,gBAC9E,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA,sBAE5F,OAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AApLa,QACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgFpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0B3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxIf,QAyIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3If,QA4IX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9If,QA+IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlJ9B,QAmJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GAtJ1D,QAuJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GA1J1D,QA2JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9J9B,QA+JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GAlK3D,QAmKX;AAnKW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}
package/dist/{chunk-KHPJ5FAJ.js → chunk-URC5XBTL.js} RENAMED
@@ -45,6 +45,7 @@ var MenuItem = class extends LitElement {
45
45
  const classes = [
46
46
  "menu-item",
47
47
  link ? "link" : "",
48
+ this.variant === "bar" ? "bar" : "",
48
49
  this.active ? "active" : "",
49
50
  this.compact ? "compact" : "",
50
51
  showDescription ? "" : "no-description"
@@ -279,6 +280,36 @@ MenuItem.styles = css`
279
280
  font-size: 0.8125rem;
280
281
  }
281
282
 
283
+ /* bar: a top-level item in a header bar next to mega st-dropdowns (e.g. "Dashboard" beside
284
+ "Masters ▼") — the same pill, size and active look as their triggers, so the row reads as
285
+ one set. Wins over compact (declared after it). */
286
+ .menu-item.bar {
287
+ align-items: center;
288
+ min-height: 40px;
289
+ padding: 12px;
290
+ gap: 8px;
291
+ border-radius: 9999px;
292
+ white-space: nowrap;
293
+ }
294
+
295
+ .menu-item.bar:hover,
296
+ .menu-item.bar:focus-visible {
297
+ padding-left: 12px;
298
+ }
299
+
300
+ .menu-item.bar.active {
301
+ border-left: 0;
302
+ }
303
+
304
+ .menu-item.bar .menu-item-icon {
305
+ margin-top: 0;
306
+ }
307
+
308
+ .menu-item.bar .menu-item-title {
309
+ font-size: 0.875rem;
310
+ font-weight: 400;
311
+ }
312
+
282
313
  .external {
283
314
  display: inline-flex;
284
315
  margin-left: 3px;
@@ -347,4 +378,4 @@ MenuItem = __decorateClass([
347
378
  export {
348
379
  MenuItem
349
380
  };
350
- //# sourceMappingURL=chunk-KHPJ5FAJ.js.map
381
+ //# sourceMappingURL=chunk-URC5XBTL.js.map
package/dist/{chunk-KHPJ5FAJ.js.map → chunk-URC5XBTL.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/menu-item/MenuItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { arrowUpRightIcon } from '../shared/icons';\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { MenuItemSelectEventDetail } from './MenuItemEvents';\r\n\r\n/**\r\n * A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\r\n * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\r\n * port of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\r\n * markup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\r\n * hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\r\n * in. Colors come from the suite theme rather than per-item utility classes.\r\n *\r\n * Renders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\r\n * before navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\r\n * source used react-router's `Link` here; the suite apps have no router).\r\n */\r\n@customElement('st-menu-item')\r\nexport class MenuItem extends LitElement {\r\n /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\r\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\r\n\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n }\r\n\r\n @keyframes st-menu-item-badge-pop {\r\n from {\r\n transform: scale(0);\r\n }\r\n 70% {\r\n transform: scale(1.12);\r\n }\r\n to {\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n @keyframes st-menu-item-fade-in {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .menu-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n padding: 12px 16px;\r\n font-size: 0.875rem;\r\n text-decoration: none;\r\n /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\r\n color: var(--st-nav-color, var(--st-color-text));\r\n border-radius: 6px;\r\n /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits\r\n from a dropdown panel kept it unfocusable for a frame after the panel opened. */\r\n transition-property: background-color, color, padding, transform, border-color;\r\n transition-duration: 0.15s;\r\n transition-timing-function: ease;\r\n box-sizing: border-box;\r\n }\r\n\r\n /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would\r\n spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.\r\n Keyboard focus gets the same treatment as hover. */\r\n .menu-item:hover,\r\n .menu-item:focus-visible {\r\n background: var(--st-nav-hover-bg, var(--st-color-hover));\r\n color: var(--st-nav-color, var(--st-color-text-strong));\r\n padding-left: 20px;\r\n transition-duration: 0.1s;\r\n }\r\n\r\n .menu-item.compact:hover,\r\n .menu-item.compact:focus-visible {\r\n padding-left: 16px;\r\n }\r\n\r\n .menu-item:active {\r\n transform: scale(0.99);\r\n transition-duration: 0.1s;\r\n }\r\n\r\n .menu-item.active {\r\n background-color: var(--st-color-accent-subtle);\r\n color: var(--st-color-accent-text);\r\n border-left: 4px solid var(--st-color-accent);\r\n }\r\n\r\n .menu-item-icon {\r\n display: flex;\r\n flex-shrink: 0;\r\n margin-top: 2px;\r\n transition: transform 0.2s ease;\r\n }\r\n\r\n .menu-item-icon:hover {\r\n transform: rotate(5deg);\r\n }\r\n\r\n .menu-item-icon[hidden] {\r\n display: none;\r\n }\r\n\r\n .menu-item-icon ::slotted(*) {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .menu-item-content {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .menu-item-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 8px;\r\n }\r\n\r\n .menu-item-title {\r\n font-weight: 500;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .menu-item-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 20px;\r\n height: 20px;\r\n padding: 0 6px;\r\n font-size: 0.75rem;\r\n font-weight: 500;\r\n border-radius: 9999px;\r\n flex-shrink: 0;\r\n background: var(--st-color-accent-subtle);\r\n color: var(--st-color-accent-text);\r\n animation: st-menu-item-badge-pop 0.35s ease-out;\r\n }\r\n\r\n .menu-item-description {\r\n display: -webkit-box;\r\n margin: 4px 0 0;\r\n font-size: 0.75rem;\r\n color: var(--st-color-text-muted);\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n line-height: 1.4;\r\n animation: st-menu-item-fade-in 0.2s ease;\r\n }\r\n\r\n .menu-item.compact {\r\n padding: 8px 12px;\r\n gap: 8px;\r\n }\r\n\r\n .menu-item.compact .menu-item-icon ::slotted(*) {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n\r\n .menu-item.compact .menu-item-title {\r\n font-size: 0.75rem;\r\n }\r\n\r\n .menu-item.compact .menu-item-description {\r\n font-size: 0.75rem;\r\n }\r\n\r\n /* link: a plain text link (okta.com mega-menu columns) — no box, no nudge, the badge right\r\n after the title, long titles wrap. */\r\n .menu-item.link {\r\n padding: 7px 0;\r\n gap: 10px;\r\n font-size: 0.9375rem;\r\n color: var(--st-nav-color, var(--st-color-text));\r\n }\r\n\r\n .menu-item.link:hover,\r\n .menu-item.link:focus-visible {\r\n padding-left: 0;\r\n background: transparent;\r\n color: var(--st-nav-color, var(--st-color-text-strong));\r\n }\r\n\r\n .menu-item.link:hover .menu-item-title,\r\n .menu-item.link:focus-visible .menu-item-title {\r\n text-decoration: underline;\r\n text-underline-offset: 4px;\r\n }\r\n\r\n .menu-item.link:active {\r\n transform: none;\r\n }\r\n\r\n .menu-item.link.active {\r\n border-left: 0;\r\n background: transparent;\r\n font-weight: 600;\r\n }\r\n\r\n .menu-item.link .menu-item-header {\r\n justify-content: flex-start;\r\n }\r\n\r\n .menu-item.link .menu-item-title {\r\n white-space: normal;\r\n font-weight: 400;\r\n }\r\n\r\n .menu-item.link .menu-item-description {\r\n margin-top: 2px;\r\n font-size: 0.8125rem;\r\n }\r\n\r\n .external {\r\n display: inline-flex;\r\n margin-left: 3px;\r\n vertical-align: 0.05em;\r\n }\r\n\r\n .menu-item.no-description {\r\n align-items: center;\r\n }\r\n\r\n .menu-item.no-description .menu-item-icon {\r\n margin-top: 0;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .menu-item,\r\n .menu-item-icon {\r\n transition: none;\r\n }\r\n\r\n .menu-item:active,\r\n .menu-item-icon:hover {\r\n transform: none;\r\n }\r\n\r\n .menu-item-badge,\r\n .menu-item-description {\r\n animation: none;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n href = '';\r\n\r\n @property({ type: String })\r\n description = '';\r\n\r\n /** Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none. */\r\n @property({ type: String })\r\n badge = '';\r\n\r\n /** Highlights this row as the current page (source: `isActive`). */\r\n @property({ type: Boolean, reflect: true })\r\n active = false;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n compact = false;\r\n\r\n /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\r\n @property({ type: Boolean, attribute: 'show-description' })\r\n showDescription = true;\r\n\r\n /** `target` for the `<a>` (source default `_self`). */\r\n @property({ type: String })\r\n target = '_self';\r\n\r\n /** `default` (a row with a hover box) or `link` (a plain text link, as in `st-mega-menu-column`;\r\n * marked with an arrow when it opens a new tab). */\r\n @property({ type: String, reflect: true })\r\n variant: 'default' | 'link' = 'default';\r\n\r\n /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\r\n @state() private hasIcon = false;\r\n\r\n private onIconSlotChange = (event: Event): void => {\r\n this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n };\r\n\r\n private onClick = (event: MouseEvent): void => {\r\n const selectEvent = new CustomEvent<MenuItemSelectEventDetail>('menu-item-select', {\r\n detail: { href: this.href },\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true\r\n });\r\n this.dispatchEvent(selectEvent);\r\n if (selectEvent.defaultPrevented) event.preventDefault();\r\n };\r\n\r\n render() {\r\n const showDescription = !!this.description && this.showDescription;\r\n const link = this.variant === 'link';\r\n const classes = [\r\n 'menu-item',\r\n link ? 'link' : '',\r\n this.active ? 'active' : '',\r\n this.compact ? 'compact' : '',\r\n showDescription ? '' : 'no-description'\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n const external = link && this.target === '_blank';\r\n return html`\r\n <a\r\n part=\"item\"\r\n class=${classes}\r\n href=${this.href}\r\n target=${this.target}\r\n rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\r\n @click=${this.onClick}\r\n >\r\n <span class=\"menu-item-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\r\n <span class=\"menu-item-content\" part=\"content\">\r\n <span class=\"menu-item-header\" part=\"header\">\r\n <span part=\"title\" class=\"menu-item-title\"\r\n >${this.title}${external ? html`<span class=\"external\">${arrowUpRightIcon(11)}</span>` : nothing}</span\r\n >\r\n ${this.badge ? html`<span part=\"badge\" class=\"menu-item-badge\">${this.badge}</span>` : nothing}\r\n </span>\r\n ${showDescription ? html`<p part=\"description\" class=\"menu-item-description\">${this.description}</p>` : nothing}\r\n </span>\r\n </a>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/menu-item/MenuItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { arrowUpRightIcon } from '../shared/icons';\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { MenuItemSelectEventDetail } from './MenuItemEvents';\r\n\r\n/**\r\n * A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\r\n * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\r\n * port of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\r\n * markup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\r\n * hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\r\n * in. Colors come from the suite theme rather than per-item utility classes.\r\n *\r\n * Renders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\r\n * before navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\r\n * source used react-router's `Link` here; the suite apps have no router).\r\n */\r\n@customElement('st-menu-item')\r\nexport class MenuItem extends LitElement {\r\n /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\r\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\r\n\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n }\r\n\r\n @keyframes st-menu-item-badge-pop {\r\n from {\r\n transform: scale(0);\r\n }\r\n 70% {\r\n transform: scale(1.12);\r\n }\r\n to {\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n @keyframes st-menu-item-fade-in {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .menu-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n padding: 12px 16px;\r\n font-size: 0.875rem;\r\n text-decoration: none;\r\n /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\r\n color: var(--st-nav-color, var(--st-color-text));\r\n border-radius: 6px;\r\n /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits\r\n from a dropdown panel kept it unfocusable for a frame after the panel opened. */\r\n transition-property: background-color, color, padding, transform, border-color;\r\n transition-duration: 0.15s;\r\n transition-timing-function: ease;\r\n box-sizing: border-box;\r\n }\r\n\r\n /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would\r\n spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.\r\n Keyboard focus gets the same treatment as hover. */\r\n .menu-item:hover,\r\n .menu-item:focus-visible {\r\n background: var(--st-nav-hover-bg, var(--st-color-hover));\r\n color: var(--st-nav-color, var(--st-color-text-strong));\r\n padding-left: 20px;\r\n transition-duration: 0.1s;\r\n }\r\n\r\n .menu-item.compact:hover,\r\n .menu-item.compact:focus-visible {\r\n padding-left: 16px;\r\n }\r\n\r\n .menu-item:active {\r\n transform: scale(0.99);\r\n transition-duration: 0.1s;\r\n }\r\n\r\n .menu-item.active {\r\n background-color: var(--st-color-accent-subtle);\r\n color: var(--st-color-accent-text);\r\n border-left: 4px solid var(--st-color-accent);\r\n }\r\n\r\n .menu-item-icon {\r\n display: flex;\r\n flex-shrink: 0;\r\n margin-top: 2px;\r\n transition: transform 0.2s ease;\r\n }\r\n\r\n .menu-item-icon:hover {\r\n transform: rotate(5deg);\r\n }\r\n\r\n .menu-item-icon[hidden] {\r\n display: none;\r\n }\r\n\r\n .menu-item-icon ::slotted(*) {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .menu-item-content {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .menu-item-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 8px;\r\n }\r\n\r\n .menu-item-title {\r\n font-weight: 500;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n }\r\n\r\n .menu-item-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 20px;\r\n height: 20px;\r\n padding: 0 6px;\r\n font-size: 0.75rem;\r\n font-weight: 500;\r\n border-radius: 9999px;\r\n flex-shrink: 0;\r\n background: var(--st-color-accent-subtle);\r\n color: var(--st-color-accent-text);\r\n animation: st-menu-item-badge-pop 0.35s ease-out;\r\n }\r\n\r\n .menu-item-description {\r\n display: -webkit-box;\r\n margin: 4px 0 0;\r\n font-size: 0.75rem;\r\n color: var(--st-color-text-muted);\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n line-height: 1.4;\r\n animation: st-menu-item-fade-in 0.2s ease;\r\n }\r\n\r\n .menu-item.compact {\r\n padding: 8px 12px;\r\n gap: 8px;\r\n }\r\n\r\n .menu-item.compact .menu-item-icon ::slotted(*) {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n\r\n .menu-item.compact .menu-item-title {\r\n font-size: 0.75rem;\r\n }\r\n\r\n .menu-item.compact .menu-item-description {\r\n font-size: 0.75rem;\r\n }\r\n\r\n /* link: a plain text link (okta.com mega-menu columns) — no box, no nudge, the badge right\r\n after the title, long titles wrap. */\r\n .menu-item.link {\r\n padding: 7px 0;\r\n gap: 10px;\r\n font-size: 0.9375rem;\r\n color: var(--st-nav-color, var(--st-color-text));\r\n }\r\n\r\n .menu-item.link:hover,\r\n .menu-item.link:focus-visible {\r\n padding-left: 0;\r\n background: transparent;\r\n color: var(--st-nav-color, var(--st-color-text-strong));\r\n }\r\n\r\n .menu-item.link:hover .menu-item-title,\r\n .menu-item.link:focus-visible .menu-item-title {\r\n text-decoration: underline;\r\n text-underline-offset: 4px;\r\n }\r\n\r\n .menu-item.link:active {\r\n transform: none;\r\n }\r\n\r\n .menu-item.link.active {\r\n border-left: 0;\r\n background: transparent;\r\n font-weight: 600;\r\n }\r\n\r\n .menu-item.link .menu-item-header {\r\n justify-content: flex-start;\r\n }\r\n\r\n .menu-item.link .menu-item-title {\r\n white-space: normal;\r\n font-weight: 400;\r\n }\r\n\r\n .menu-item.link .menu-item-description {\r\n margin-top: 2px;\r\n font-size: 0.8125rem;\r\n }\r\n\r\n /* bar: a top-level item in a header bar next to mega st-dropdowns (e.g. \"Dashboard\" beside\r\n \"Masters ▼\") — the same pill, size and active look as their triggers, so the row reads as\r\n one set. Wins over compact (declared after it). */\r\n .menu-item.bar {\r\n align-items: center;\r\n min-height: 40px;\r\n padding: 12px;\r\n gap: 8px;\r\n border-radius: 9999px;\r\n white-space: nowrap;\r\n }\r\n\r\n .menu-item.bar:hover,\r\n .menu-item.bar:focus-visible {\r\n padding-left: 12px;\r\n }\r\n\r\n .menu-item.bar.active {\r\n border-left: 0;\r\n }\r\n\r\n .menu-item.bar .menu-item-icon {\r\n margin-top: 0;\r\n }\r\n\r\n .menu-item.bar .menu-item-title {\r\n font-size: 0.875rem;\r\n font-weight: 400;\r\n }\r\n\r\n .external {\r\n display: inline-flex;\r\n margin-left: 3px;\r\n vertical-align: 0.05em;\r\n }\r\n\r\n .menu-item.no-description {\r\n align-items: center;\r\n }\r\n\r\n .menu-item.no-description .menu-item-icon {\r\n margin-top: 0;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .menu-item,\r\n .menu-item-icon {\r\n transition: none;\r\n }\r\n\r\n .menu-item:active,\r\n .menu-item-icon:hover {\r\n transform: none;\r\n }\r\n\r\n .menu-item-badge,\r\n .menu-item-description {\r\n animation: none;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n href = '';\r\n\r\n @property({ type: String })\r\n description = '';\r\n\r\n /** Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none. */\r\n @property({ type: String })\r\n badge = '';\r\n\r\n /** Highlights this row as the current page (source: `isActive`). */\r\n @property({ type: Boolean, reflect: true })\r\n active = false;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n compact = false;\r\n\r\n /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\r\n @property({ type: Boolean, attribute: 'show-description' })\r\n showDescription = true;\r\n\r\n /** `target` for the `<a>` (source default `_self`). */\r\n @property({ type: String })\r\n target = '_self';\r\n\r\n /** `default` (a row with a hover box), `link` (a plain text link, as in `st-mega-menu-column`;\r\n * marked with an arrow when it opens a new tab) or `bar` (a top-level item in a header bar,\r\n * shaped like a mega `st-dropdown`'s trigger pill so it lines up with the dropdowns beside it). */\r\n @property({ type: String, reflect: true })\r\n variant: 'default' | 'link' | 'bar' = 'default';\r\n\r\n /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\r\n @state() private hasIcon = false;\r\n\r\n private onIconSlotChange = (event: Event): void => {\r\n this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n };\r\n\r\n private onClick = (event: MouseEvent): void => {\r\n const selectEvent = new CustomEvent<MenuItemSelectEventDetail>('menu-item-select', {\r\n detail: { href: this.href },\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true\r\n });\r\n this.dispatchEvent(selectEvent);\r\n if (selectEvent.defaultPrevented) event.preventDefault();\r\n };\r\n\r\n render() {\r\n const showDescription = !!this.description && this.showDescription;\r\n const link = this.variant === 'link';\r\n const classes = [\r\n 'menu-item',\r\n link ? 'link' : '',\r\n this.variant === 'bar' ? 'bar' : '',\r\n this.active ? 'active' : '',\r\n this.compact ? 'compact' : '',\r\n showDescription ? '' : 'no-description'\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n const external = link && this.target === '_blank';\r\n return html`\r\n <a\r\n part=\"item\"\r\n class=${classes}\r\n href=${this.href}\r\n target=${this.target}\r\n rel=${this.target === '_blank' ? 'noopener noreferrer' : nothing}\r\n @click=${this.onClick}\r\n >\r\n <span class=\"menu-item-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\r\n <span class=\"menu-item-content\" part=\"content\">\r\n <span class=\"menu-item-header\" part=\"header\">\r\n <span part=\"title\" class=\"menu-item-title\"\r\n >${this.title}${external ? html`<span class=\"external\">${arrowUpRightIcon(11)}</span>` : nothing}</span\r\n >\r\n ${this.badge ? html`<span part=\"badge\" class=\"menu-item-badge\">${this.badge}</span>` : nothing}\r\n </span>\r\n ${showDescription ? html`<p part=\"description\" class=\"menu-item-description\">${this.description}</p>` : nothing}\r\n </span>\r\n </a>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
package/dist/{chunk-IMACP7HN.js → chunk-UVNBZD7R.js} RENAMED
@@ -50,7 +50,9 @@ ContentBlock.styles = css`
50
50
  :host {
51
51
  display: block;
52
52
  ${fontFamilyStyles}
53
- padding: var(--st-space-24);
53
+ /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
54
+ padding; override with --st-content-block-padding instead. */
55
+ padding: var(--st-content-block-padding, var(--st-space-24)) !important;
54
56
  background: var(--st-color-surface);
55
57
  color: var(--st-color-text-strong);
56
58
  }
@@ -114,7 +116,7 @@ ContentBlock.styles = css`
114
116
 
115
117
  @media (max-width: 768px) {
116
118
  :host {
117
- padding: var(--st-space-48) var(--st-space-24);
119
+ padding: var(--st-content-block-padding, var(--st-space-48) var(--st-space-24)) !important;
118
120
  }
119
121
 
120
122
  .container {
@@ -153,4 +155,4 @@ ContentBlock = __decorateClass([
153
155
  export {
154
156
  ContentBlock
155
157
  };
156
- //# sourceMappingURL=chunk-IMACP7HN.js.map
158
+ //# sourceMappingURL=chunk-UVNBZD7R.js.map
package/dist/chunk-UVNBZD7R.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/content-block/ContentBlock.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\r\nimport '../markdown';\r\n\r\n/**\r\n * A long-form article section: centered title/subtitle, an optional featured image with caption,\r\n * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\r\n * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\r\n * block works without a fetch); `content-src` wins when both are set.\r\n *\r\n * @cssprop --st-content-block-padding - Overrides the block's padding.\r\n */\r\n@customElement('st-content-block')\r\nexport class ContentBlock extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n padding; override with --st-content-block-padding instead. */\r\n padding: var(--st-content-block-padding, var(--st-space-24)) !important;\r\n background: var(--st-color-surface);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .container {\r\n max-width: var(--st-cms-container-max);\r\n padding: 0 var(--st-space-48);\r\n margin: 0 auto;\r\n }\r\n\r\n .header {\r\n ${sectionHeaderStyles}\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n line-height: 1.1;\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .subtitle {\r\n color: inherit;\r\n }\r\n\r\n .featured-image {\r\n margin: 0 0 var(--st-space-48);\r\n border-radius: var(--st-radius-lg);\r\n overflow: hidden;\r\n }\r\n\r\n .featured-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n }\r\n\r\n figcaption {\r\n padding: var(--st-space-12);\r\n text-align: center;\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-xs);\r\n }\r\n\r\n st-markdown {\r\n color: var(--st-color-text);\r\n font-size: var(--st-text-xl);\r\n }\r\n\r\n :host([inverted]) st-markdown {\r\n color: inherit;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-content-block-padding, var(--st-space-48) var(--st-space-24)) !important;\r\n }\r\n\r\n .container {\r\n padding: 0;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n /** URL of a Markdown file. */\r\n @property({ type: String, attribute: 'content-src' })\r\n contentSrc = '';\r\n\r\n /** Inline Markdown, used when `content-src` is not set. */\r\n @property({ type: String })\r\n content = '';\r\n\r\n @property({ type: String, attribute: 'image-src' })\r\n imageSrc = '';\r\n\r\n @property({ type: String, attribute: 'image-alt' })\r\n imageAlt = '';\r\n\r\n @property({ type: String, attribute: 'image-caption' })\r\n imageCaption = '';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n render() {\r\n return html`\r\n <section class=\"container\" part=\"container\">\r\n <div class=\"header\" part=\"header\">\r\n ${this.title ? html`<div class=\"title\" part=\"title\">${this.title}</div>` : nothing}\r\n ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\r\n </div>\r\n ${this.imageSrc\r\n ? html`\r\n <figure class=\"featured-image\" part=\"image\">\r\n <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}\r\n </figure>\r\n `\r\n : nothing}\r\n <st-markdown part=\"body\" .src=${this.contentSrc} .content=${this.content}></st-markdown>\r\n </section>\r\n `;\r\n }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAejC,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAmFL,iBAAQ;AAGR,oBAAW;AAIX,sBAAa;AAIb,mBAAU;AAGV,oBAAW;AAGX,oBAAW;AAGX,wBAAe;AAGf,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,YAGC,KAAK,QAAQ,uCAAuC,KAAK,KAAK,WAAW,OAAO;AAAA,YAChF,KAAK,WAAW,6CAA6C,KAAK,QAAQ,WAAW,OAAO;AAAA;AAAA,UAE9F,KAAK,WACH;AAAA;AAAA,2BAEe,KAAK,QAAQ,QAAQ,KAAK,YAAY,KAAK,KAAK;AAAA,kBACzD,KAAK,eAAe,mBAAmB,KAAK,YAAY,kBAAkB,OAAO;AAAA;AAAA,gBAGvF,OAAO;AAAA,wCACqB,KAAK,UAAU,aAAa,KAAK,OAAO;AAAA;AAAA;AAAA,EAG9E;AACF;AA/Ha,aACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAoBhB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgD3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlFf,aAmFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,aAsFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAzFzC,aA0FX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Ff,aA8FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAhGvC,aAiGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAnGvC,aAoGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAtG3C,aAuGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzG/B,aA0GX;AA1GW,eAAN;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB;","names":[]}
package/dist/{chunk-5REZSZCK.js → chunk-VRRBMOUP.js} RENAMED
@@ -74,7 +74,9 @@ FeatureSplit.styles = css`
74
74
 
75
75
  :host {
76
76
  display: block;
77
- padding: var(--st-space-24);
77
+ /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
78
+ padding; override with --st-feature-split-padding instead. */
79
+ padding: var(--st-feature-split-padding, var(--st-space-24)) !important;
78
80
  background: var(--st-color-page);
79
81
  ${fontFamilyStyles}
80
82
  }
@@ -213,7 +215,7 @@ FeatureSplit.styles = css`
213
215
 
214
216
  @media (max-width: 768px) {
215
217
  :host {
216
- padding: var(--st-space-48) var(--st-space-24);
218
+ padding: var(--st-feature-split-padding, var(--st-space-48) var(--st-space-24)) !important;
217
219
  }
218
220
 
219
221
  .container {
@@ -263,4 +265,4 @@ FeatureSplit = __decorateClass([
263
265
  export {
264
266
  FeatureSplit
265
267
  };
266
- //# sourceMappingURL=chunk-5REZSZCK.js.map
268
+ //# sourceMappingURL=chunk-VRRBMOUP.js.map
package/dist/chunk-VRRBMOUP.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/feature-split/FeatureSplit.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, ctaButtonStyles, fontFamilyStyles } from '../shared/styles';\r\nimport '../markdown';\r\nimport {\r\n cardTitleStyles,\r\n iconTileStyles,\r\n reducedMotionStyles,\r\n sectionTitleStyles,\r\n} from '../shared/section-styles';\r\nimport type { FeatureSplitActionEventDetail } from './FeatureSplitEvents';\r\n\r\nexport interface FeatureSplitItem {\r\n /** Iconify icon name, e.g. `mdi:check`. */\r\n icon?: string;\r\n title: string;\r\n /** Markdown. */\r\n description: string;\r\n}\r\n\r\nexport type FeatureSplitImagePosition = 'left' | 'right' | 'top';\r\n\r\n/**\r\n * A title/markdown-subtitle/feature-list block beside (or under) an image.\r\n *\r\n * @cssprop --st-feature-split-padding - Overrides the block's padding.\r\n */\r\n@customElement('st-feature-split')\r\nexport class FeatureSplit 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-feature-split-padding instead. */\r\n padding: var(--st-feature-split-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 display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: var(--st-space-48);\r\n align-items: center;\r\n }\r\n\r\n :host([image-position='left']) .container {\r\n direction: rtl;\r\n }\r\n\r\n :host([image-position='left']) .content {\r\n direction: ltr;\r\n }\r\n\r\n :host([image-position='top']) .container {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n }\r\n\r\n :host([image-position='top']) .content {\r\n align-items: center;\r\n }\r\n\r\n :host([image-position='top']) .image-wrapper {\r\n order: -1;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .content {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-32);\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n margin: 0;\r\n }\r\n\r\n .subtitle {\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-base);\r\n line-height: 1.6;\r\n }\r\n\r\n .list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-24);\r\n margin-top: var(--st-space-16);\r\n }\r\n\r\n .item {\r\n display: flex;\r\n gap: var(--st-space-16);\r\n align-items: flex-start;\r\n text-align: left;\r\n }\r\n\r\n .icon {\r\n ${iconTileStyles}\r\n width: var(--st-space-48);\r\n height: var(--st-space-48);\r\n font-size: 24px;\r\n }\r\n\r\n .item-title {\r\n ${cardTitleStyles}\r\n }\r\n\r\n .item-description {\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-sm);\r\n line-height: 1.5;\r\n }\r\n\r\n .action {\r\n ${ctaButtonStyles}\r\n justify-self: start;\r\n padding: var(--st-space-16);\r\n border-radius: var(--st-radius-lg);\r\n }\r\n\r\n .image-wrapper {\r\n width: 100%;\r\n height: 100%;\r\n min-height: 400px;\r\n border-radius: var(--st-space-24);\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px -12px var(--st-shadow-color-md);\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 .image:hover {\r\n transform: scale(1.02);\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .item-title {\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n :host([inverted]) .subtitle,\r\n :host([inverted]) .item-description {\r\n color: var(--st-color-border);\r\n }\r\n\r\n :host([inverted]) .icon {\r\n background: var(--st-color-text);\r\n color: var(--st-color-border);\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .container {\r\n gap: var(--st-space-40);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-feature-split-padding, var(--st-space-48) var(--st-space-24)) !important;\r\n }\r\n\r\n .container {\r\n grid-template-columns: 1fr;\r\n direction: ltr !important;\r\n }\r\n\r\n .image-wrapper {\r\n min-height: 300px;\r\n order: -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 /** Markdown. */\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n @property({ attribute: false })\r\n items: FeatureSplitItem[] = [];\r\n\r\n @property({ type: String, attribute: 'image-src' })\r\n imageSrc = '';\r\n\r\n @property({ type: String, attribute: 'image-alt' })\r\n imageAlt = '';\r\n\r\n @property({ type: String, attribute: 'image-position', reflect: true })\r\n imagePosition: FeatureSplitImagePosition = 'right';\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 private onAction() {\r\n const event = new CustomEvent<FeatureSplitActionEventDetail>('feature-split-action', {\r\n detail: { href: this.href },\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n });\r\n if (this.dispatchEvent(event)) window.location.href = this.href;\r\n }\r\n\r\n render() {\r\n return html`\r\n <div class=\"container\" part=\"container\">\r\n <div class=\"content\" part=\"content\">\r\n <h2 class=\"title\" part=\"title\">${this.title}</h2>\r\n ${this.subtitle\r\n ? html`<div class=\"subtitle\" part=\"subtitle\"><st-markdown .content=${this.subtitle}></st-markdown></div>`\r\n : nothing}\r\n ${this.items.length > 0\r\n ? html`<div class=\"list\" part=\"list\">\r\n ${this.items.map(\r\n (item) => html`\r\n <div class=\"item\" part=\"item\">\r\n ${item.icon\r\n ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>`\r\n : nothing}\r\n <div>\r\n <h3 class=\"item-title\" part=\"item-title\">${item.title}</h3>\r\n <div class=\"item-description\" part=\"item-description\">\r\n <st-markdown .content=${item.description}></st-markdown>\r\n </div>\r\n </div>\r\n </div>\r\n `,\r\n )}\r\n </div>`\r\n : nothing}\r\n ${this.actionLabel && this.href\r\n ? html`<button class=\"action\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>`\r\n : nothing}\r\n </div>\r\n <div class=\"image-wrapper\" part=\"image-wrapper\">\r\n <img class=\"image\" part=\"image\" src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
package/dist/{chunk-S4ARRDAI.js → chunk-ZRXYWH6C.js} RENAMED
@@ -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-ZRXYWH6C.js.map
package/dist/chunk-ZRXYWH6C.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/cms-theme.css CHANGED
@@ -12,4 +12,15 @@
12
12
  --st-cms-text-lg: 1.125rem;
13
13
  --st-cms-section-padding: 4rem;
14
14
  --st-cms-container-max: 1200px;
15
+
16
+ /* A dark band (st-section background="dark", st-stats inverted) and the text on it. Kept apart
17
+ from --st-color-text-strong / --st-color-on-solid, which swap in the dark theme, so the band
18
+ stays dark there too. */
19
+ --st-cms-band-dark-bg: var(--st-color-text-strong);
20
+ --st-cms-band-dark-color: var(--st-color-on-solid);
21
+ }
22
+
23
+ :root.dark {
24
+ --st-cms-band-dark-bg: var(--st-neutral-100);
25
+ --st-cms-band-dark-color: var(--st-neutral-950);
15
26
  }
package/dist/content-block/index.d.ts CHANGED
@@ -6,6 +6,8 @@ import { LitElement } from 'lit';
6
6
  * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from
7
7
  * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the
8
8
  * block works without a fetch); `content-src` wins when both are set.
9
+ *
10
+ * @cssprop --st-content-block-padding - Overrides the block's padding.
9
11
  */
10
12
  declare class ContentBlock extends LitElement {
11
13
  static styles: lit.CSSResult;
package/dist/content-block/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  ContentBlock
3
- } from "../chunk-IMACP7HN.js";
3
+ } from "../chunk-UVNBZD7R.js";
4
4
  import "../chunk-3JU3R22O.js";
5
5
  import "../chunk-3VE6VFJ4.js";
6
6
  import "../chunk-RHAOQ6K4.js";
package/dist/cookie-consent/index.d.ts CHANGED
@@ -7,6 +7,8 @@ import { LitElement, nothing } from 'lit';
7
7
  * `sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice
8
8
  * exists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The
9
9
  * default slot replaces the message text.
10
+ *
11
+ * @cssprop --st-cookie-consent-padding - Overrides the bar's padding.
10
12
  */
11
13
  declare class CookieConsent extends LitElement {
12
14
  static styles: lit.CSSResult;
package/dist/cookie-consent/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  CookieConsent
3
- } from "../chunk-2VZFHTBC.js";
3
+ } from "../chunk-MW43OS47.js";
4
4
  import "../chunk-RHAOQ6K4.js";
5
5
  import "../chunk-EUXUH3YW.js";
6
6
  export {
package/dist/feature-split/index.d.ts CHANGED
@@ -9,7 +9,11 @@ interface FeatureSplitItem {
9
9
  description: string;
10
10
  }
11
11
  type FeatureSplitImagePosition = 'left' | 'right' | 'top';
12
- /** A title/markdown-subtitle/feature-list block beside (or under) an image. */
12
+ /**
13
+ * A title/markdown-subtitle/feature-list block beside (or under) an image.
14
+ *
15
+ * @cssprop --st-feature-split-padding - Overrides the block's padding.
16
+ */
13
17
  declare class FeatureSplit extends LitElement {
14
18
  static styles: lit.CSSResult;
15
19
  inverted: boolean;
package/dist/feature-split/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  FeatureSplit
3
- } from "../chunk-5REZSZCK.js";
3
+ } from "../chunk-VRRBMOUP.js";
4
4
  import "../chunk-3JU3R22O.js";
5
5
  import "../chunk-3VE6VFJ4.js";
6
6
  import "../chunk-RHAOQ6K4.js";
package/dist/features-section/index.d.ts CHANGED
@@ -33,6 +33,8 @@ interface FeatureItemData {
33
33
  * `items` property, from slotted `st-feature-item` elements (the source's `children`), or both
34
34
  * (slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`
35
35
  * is passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.
36
+ *
37
+ * @cssprop --st-features-section-padding - Overrides the section's padding.
36
38
  */
37
39
  declare class FeaturesSection extends LitElement {
38
40
  static styles: lit.CSSResult;
package/dist/features-section/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  FeatureItem,
3
3
  FeaturesSection
4
- } from "../chunk-E52WO7R7.js";
4
+ } from "../chunk-BQTDFQ4V.js";
5
5
  import "../chunk-7PSYCTEN.js";
6
6
  import "../chunk-3JU3R22O.js";
7
7
  import "../chunk-3VE6VFJ4.js";
package/dist/index.js CHANGED
@@ -1,73 +1,73 @@
1
1
  import {
2
2
  Stats
3
- } from "./chunk-USNFT4DU.js";
3
+ } from "./chunk-6H262SG6.js";
4
4
  import {
5
5
  Testimonials
6
- } from "./chunk-S4ARRDAI.js";
7
- import {
8
- MenuGridItem
9
- } from "./chunk-4HKSA5UT.js";
6
+ } from "./chunk-ZRXYWH6C.js";
10
7
  import {
11
8
  MenuGrid
12
9
  } from "./chunk-VYON56QO.js";
10
+ import {
11
+ MenuGridItem
12
+ } from "./chunk-4HKSA5UT.js";
13
13
  import {
14
14
  MenuItem
15
- } from "./chunk-KHPJ5FAJ.js";
15
+ } from "./chunk-URC5XBTL.js";
16
16
  import {
17
17
  PromoBanner
18
- } from "./chunk-3ERKQNZT.js";
18
+ } from "./chunk-HGJT24UG.js";
19
+ import {
20
+ Section
21
+ } from "./chunk-NN3OCPDV.js";
19
22
  import {
20
23
  Select
21
24
  } from "./chunk-TLHG33MM.js";
22
25
  import {
23
- Section
24
- } from "./chunk-N63TVWK3.js";
26
+ Footer
27
+ } from "./chunk-CDC4P77V.js";
25
28
  import {
26
29
  FeatureItem,
27
30
  FeaturesSection
28
- } from "./chunk-E52WO7R7.js";
31
+ } from "./chunk-BQTDFQ4V.js";
29
32
  import {
30
- Footer
31
- } from "./chunk-CDC4P77V.js";
33
+ Header
34
+ } from "./chunk-5KHI36M5.js";
32
35
  import {
33
36
  IconButton
34
37
  } from "./chunk-XXPBFHWR.js";
35
38
  import {
36
39
  Hero
37
40
  } from "./chunk-K4ZICRZL.js";
38
- import {
39
- Header
40
- } from "./chunk-5KHI36M5.js";
41
41
  import {
42
42
  ItemsAccordion
43
- } from "./chunk-74MILER4.js";
43
+ } from "./chunk-EMVHNAID.js";
44
44
  import {
45
45
  MegaMenu,
46
46
  MegaMenuColumn,
47
47
  MegaMenuFeature
48
- } from "./chunk-MLF6L3KM.js";
48
+ } from "./chunk-HGTC3LCW.js";
49
+ import {
50
+ BentoGrid
51
+ } from "./chunk-2JGWWXEI.js";
49
52
  import {
50
53
  Card
51
54
  } from "./chunk-7PSYCTEN.js";
52
- import {
53
- BentoGrid
54
- } from "./chunk-OEX5FDMR.js";
55
55
  import {
56
56
  Carousel
57
- } from "./chunk-47RPYNFG.js";
58
- import {
59
- CookieConsent
60
- } from "./chunk-2VZFHTBC.js";
57
+ } from "./chunk-HPIQSECE.js";
61
58
  import {
62
59
  ContentBlock
63
- } from "./chunk-IMACP7HN.js";
60
+ } from "./chunk-UVNBZD7R.js";
61
+ import {
62
+ CookieConsent
63
+ } from "./chunk-MW43OS47.js";
64
64
  import {
65
65
  Dropdown
66
66
  } from "./chunk-5MTPMXAQ.js";
67
67
  import "./chunk-PB7ZPPLP.js";
68
68
  import {
69
69
  FeatureSplit
70
- } from "./chunk-5REZSZCK.js";
70
+ } from "./chunk-VRRBMOUP.js";
71
71
  import {
72
72
  Markdown
73
73
  } from "./chunk-3JU3R22O.js";
package/dist/items-accordion/index.d.ts CHANGED
@@ -6,7 +6,11 @@ interface AccordionItem {
6
6
  title: string;
7
7
  content: string;
8
8
  }
9
- /** A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`. */
9
+ /**
10
+ * A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.
11
+ *
12
+ * @cssprop --st-items-accordion-padding - Overrides the block's padding.
13
+ */
10
14
  declare class ItemsAccordion extends LitElement {
11
15
  static styles: lit.CSSResult;
12
16
  title: string;