@sankhyatronics/sankhya-cms 0.1.4 → 0.1.5

package/dist/chunk-NN3OCPDV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/section/Section.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\n\n/**\n * A page band that holds other content: sets the background, the spacing above and below, and\n * the content width, with an optional eyebrow/title/subtitle heading over its slotted children.\n * Use it to give a run of components one dark or tinted backdrop and a consistent vertical rhythm,\n * the way enterprise marketing pages stack full-width sections.\n *\n * @slot - The section's content.\n * @cssprop --st-section-bg - Overrides the background colour picked by `background`.\n * @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-IMACP7HN.js → chunk-UVNBZD7R.js}

@@ -50,7 +50,9 @@ ContentBlock.styles = css`
     :host {
       display: block;
       ${fontFamilyStyles}
-      padding: var(--st-space-24);
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-content-block-padding instead. */
+      padding: var(--st-content-block-padding, var(--st-space-24)) !important;
       background: var(--st-color-surface);
       color: var(--st-color-text-strong);
     }
@@ -114,7 +116,7 @@ ContentBlock.styles = css`
 
     @media (max-width: 768px) {
       :host {
-        padding: var(--st-space-48) var(--st-space-24);
+        padding: var(--st-content-block-padding, var(--st-space-48) var(--st-space-24)) !important;
       }
 
       .container {
@@ -153,4 +155,4 @@ ContentBlock = __decorateClass([
 export {
   ContentBlock
 };
-//# sourceMappingURL=chunk-IMACP7HN.js.map
+//# sourceMappingURL=chunk-UVNBZD7R.js.map

package/dist/chunk-UVNBZD7R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/content-block/ContentBlock.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\r\nimport '../markdown';\r\n\r\n/**\r\n * A long-form article section: centered title/subtitle, an optional featured image with caption,\r\n * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\r\n * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\r\n * block works without a fetch); `content-src` wins when both are set.\r\n *\r\n * @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}

@@ -74,7 +74,9 @@ FeatureSplit.styles = css`
 
     :host {
       display: block;
-      padding: var(--st-space-24);
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-feature-split-padding instead. */
+      padding: var(--st-feature-split-padding, var(--st-space-24)) !important;
       background: var(--st-color-page);
       ${fontFamilyStyles}
     }
@@ -213,7 +215,7 @@ FeatureSplit.styles = css`
 
     @media (max-width: 768px) {
       :host {
-        padding: var(--st-space-48) var(--st-space-24);
+        padding: var(--st-feature-split-padding, var(--st-space-48) var(--st-space-24)) !important;
       }
 
       .container {
@@ -263,4 +265,4 @@ FeatureSplit = __decorateClass([
 export {
   FeatureSplit
 };
-//# sourceMappingURL=chunk-5REZSZCK.js.map
+//# sourceMappingURL=chunk-VRRBMOUP.js.map

package/dist/chunk-VRRBMOUP.js.map

@@ -0,0 +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/cms-theme.css

@@ -12,4 +12,15 @@
   --st-cms-text-lg: 1.125rem;
   --st-cms-section-padding: 4rem;
   --st-cms-container-max: 1200px;
+
+  /* A dark band (st-section background="dark", st-stats inverted) and the text on it. Kept apart
+     from --st-color-text-strong / --st-color-on-solid, which swap in the dark theme, so the band
+     stays dark there too. */
+  --st-cms-band-dark-bg: var(--st-color-text-strong);
+  --st-cms-band-dark-color: var(--st-color-on-solid);
+}
+
+:root.dark {
+  --st-cms-band-dark-bg: var(--st-neutral-100);
+  --st-cms-band-dark-color: var(--st-neutral-950);
 }

package/dist/content-block/index.d.ts

@@ -6,6 +6,8 @@ import { LitElement } from 'lit';
  * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from
  * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the
  * block works without a fetch); `content-src` wins when both are set.
+ *
+ * @cssprop --st-content-block-padding - Overrides the block's padding.
  */
 declare class ContentBlock extends LitElement {
     static styles: lit.CSSResult;

package/dist/content-block/index.js

@@ -1,6 +1,6 @@
 import {
   ContentBlock
-} from "../chunk-IMACP7HN.js";
+} from "../chunk-UVNBZD7R.js";
 import "../chunk-3JU3R22O.js";
 import "../chunk-3VE6VFJ4.js";
 import "../chunk-RHAOQ6K4.js";

package/dist/cookie-consent/index.d.ts

@@ -7,6 +7,8 @@ import { LitElement, nothing } from 'lit';
  * `sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice
  * exists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The
  * default slot replaces the message text.
+ *
+ * @cssprop --st-cookie-consent-padding - Overrides the bar's padding.
  */
 declare class CookieConsent extends LitElement {
     static styles: lit.CSSResult;

package/dist/cookie-consent/index.js

@@ -1,6 +1,6 @@
 import {
   CookieConsent
-} from "../chunk-2VZFHTBC.js";
+} from "../chunk-MW43OS47.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/feature-split/index.d.ts

@@ -9,7 +9,11 @@ interface FeatureSplitItem {
     description: string;
 }
 type FeatureSplitImagePosition = 'left' | 'right' | 'top';
-/** A title/markdown-subtitle/feature-list block beside (or under) an image. */
+/**
+ * A title/markdown-subtitle/feature-list block beside (or under) an image.
+ *
+ * @cssprop --st-feature-split-padding - Overrides the block's padding.
+ */
 declare class FeatureSplit extends LitElement {
     static styles: lit.CSSResult;
     inverted: boolean;

package/dist/feature-split/index.js

@@ -1,6 +1,6 @@
 import {
   FeatureSplit
-} from "../chunk-5REZSZCK.js";
+} from "../chunk-VRRBMOUP.js";
 import "../chunk-3JU3R22O.js";
 import "../chunk-3VE6VFJ4.js";
 import "../chunk-RHAOQ6K4.js";

package/dist/features-section/index.d.ts

@@ -33,6 +33,8 @@ interface FeatureItemData {
  * `items` property, from slotted `st-feature-item` elements (the source's `children`), or both
  * (slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`
  * is passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.
+ *
+ * @cssprop --st-features-section-padding - Overrides the section's padding.
  */
 declare class FeaturesSection extends LitElement {
     static styles: lit.CSSResult;

package/dist/features-section/index.js

@@ -1,7 +1,7 @@
 import {
   FeatureItem,
   FeaturesSection
-} from "../chunk-E52WO7R7.js";
+} from "../chunk-BQTDFQ4V.js";
 import "../chunk-7PSYCTEN.js";
 import "../chunk-3JU3R22O.js";
 import "../chunk-3VE6VFJ4.js";

package/dist/index.js

@@ -1,77 +1,77 @@
 import {
   Stats
-} from "./chunk-USNFT4DU.js";
+} from "./chunk-6H262SG6.js";
 import {
   Testimonials
-} from "./chunk-S4ARRDAI.js";
-import {
-  MenuGridItem
-} from "./chunk-4HKSA5UT.js";
+} from "./chunk-IDBEZY2O.js";
 import {
   MenuGrid
 } from "./chunk-VYON56QO.js";
+import {
+  MenuGridItem
+} from "./chunk-4HKSA5UT.js";
 import {
   MenuItem
 } from "./chunk-KHPJ5FAJ.js";
 import {
   PromoBanner
-} from "./chunk-3ERKQNZT.js";
+} from "./chunk-HGJT24UG.js";
+import {
+  Section
+} from "./chunk-NN3OCPDV.js";
 import {
   Select
 } from "./chunk-TLHG33MM.js";
-import {
-  Section
-} from "./chunk-N63TVWK3.js";
 import {
   FeatureItem,
   FeaturesSection
-} from "./chunk-E52WO7R7.js";
+} from "./chunk-BQTDFQ4V.js";
 import {
-  Footer
-} from "./chunk-CDC4P77V.js";
+  Header
+} from "./chunk-5KHI36M5.js";
 import {
-  IconButton
-} from "./chunk-XXPBFHWR.js";
+  FeatureSplit
+} from "./chunk-VRRBMOUP.js";
 import {
   Hero
 } from "./chunk-K4ZICRZL.js";
 import {
-  Header
-} from "./chunk-5KHI36M5.js";
+  IconButton
+} from "./chunk-XXPBFHWR.js";
 import {
   ItemsAccordion
-} from "./chunk-74MILER4.js";
+} from "./chunk-EMVHNAID.js";
 import {
   MegaMenu,
   MegaMenuColumn,
   MegaMenuFeature
-} from "./chunk-MLF6L3KM.js";
+} from "./chunk-HGTC3LCW.js";
+import {
+  Carousel
+} from "./chunk-47RPYNFG.js";
+import {
+  BentoGrid
+} from "./chunk-2JGWWXEI.js";
 import {
   Card
 } from "./chunk-7PSYCTEN.js";
 import {
-  BentoGrid
-} from "./chunk-OEX5FDMR.js";
+  ContentBlock
+} from "./chunk-UVNBZD7R.js";
 import {
-  Carousel
-} from "./chunk-47RPYNFG.js";
+  Markdown
+} from "./chunk-3JU3R22O.js";
+import "./chunk-3VE6VFJ4.js";
 import {
   CookieConsent
-} from "./chunk-2VZFHTBC.js";
-import {
-  ContentBlock
-} from "./chunk-IMACP7HN.js";
+} from "./chunk-MW43OS47.js";
 import {
   Dropdown
 } from "./chunk-5MTPMXAQ.js";
 import "./chunk-PB7ZPPLP.js";
 import {
-  FeatureSplit
-} from "./chunk-5REZSZCK.js";
-import {
-  Markdown
-} from "./chunk-3JU3R22O.js";
-import "./chunk-3VE6VFJ4.js";
+  Footer
+} from "./chunk-CDC4P77V.js";
 import "./chunk-RHAOQ6K4.js";
 import "./chunk-EUXUH3YW.js";
 export {

package/dist/items-accordion/index.d.ts

@@ -6,7 +6,11 @@ interface AccordionItem {
     title: string;
     content: string;
 }
-/** A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`. */
+/**
+ * A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.
+ *
+ * @cssprop --st-items-accordion-padding - Overrides the block's padding.
+ */
 declare class ItemsAccordion extends LitElement {
     static styles: lit.CSSResult;
     title: string;

package/dist/items-accordion/index.js

@@ -1,6 +1,6 @@
 import {
   ItemsAccordion
-} from "../chunk-74MILER4.js";
+} from "../chunk-EMVHNAID.js";
 import "../chunk-3VE6VFJ4.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";

package/dist/mega-menu/index.d.ts

@@ -59,6 +59,7 @@ declare class MegaMenu extends LitElement {
  * @csspart description - The line under the heading.
  * @csspart items - The box holding the links.
  * @csspart cta - The pill button.
+ * @cssprop --st-mega-menu-column-padding - Overrides the padding of a `card`/`accent` column.
  */
 declare class MegaMenuColumn extends LitElement {
     static styles: lit.CSSResult;

package/dist/mega-menu/index.js

@@ -2,7 +2,7 @@ import {
   MegaMenu,
   MegaMenuColumn,
   MegaMenuFeature
-} from "../chunk-MLF6L3KM.js";
+} from "../chunk-HGTC3LCW.js";
 import "../chunk-PB7ZPPLP.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";

package/dist/promo-banner/index.d.ts

@@ -5,6 +5,9 @@ import { LitElement } from 'lit';
  * Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a
  * background image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event
  * (detail `{ href }`, empty unless set) in place of `onAction`.
+ *
+ * @cssprop --st-promo-banner-margin - Overrides the banner's margin.
+ * @cssprop --st-promo-banner-padding - Overrides the banner's padding.
  */
 declare class PromoBanner extends LitElement {
     static styles: lit.CSSResult;

package/dist/promo-banner/index.js

@@ -1,6 +1,6 @@
 import {
   PromoBanner
-} from "../chunk-3ERKQNZT.js";
+} from "../chunk-HGJT24UG.js";
 import "../chunk-3VE6VFJ4.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";

package/dist/section/index.d.ts

@@ -9,6 +9,7 @@ import { LitElement } from 'lit';
  *
  * @slot - The section's content.
  * @cssprop --st-section-bg - Overrides the background colour picked by `background`.
+ * @cssprop --st-section-padding-inline - Overrides the left/right padding (not with `width="full"`).
  * @csspart inner - The width-limited content box.
  * @csspart header - The heading block.
  */

package/dist/section/index.js

@@ -1,6 +1,6 @@
 import {
   Section
-} from "../chunk-N63TVWK3.js";
+} from "../chunk-NN3OCPDV.js";
 import "../chunk-3VE6VFJ4.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";

package/dist/stats/index.d.ts

@@ -6,7 +6,12 @@ interface StatItem {
     label: string;
     description?: string;
 }
-/** Responsive grid of headline numbers with a label and optional description. Port of React `Stats`. */
+/**
+ * Responsive grid of headline numbers with a label and optional description. Port of React `Stats`.
+ * `inverted` puts it on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.
+ *
+ * @cssprop --st-stats-padding - Overrides the block's padding.
+ */
 declare class Stats extends LitElement {
     static styles: lit.CSSResult;
     items: StatItem[];

package/dist/stats/index.js

@@ -1,6 +1,6 @@
 import {
   Stats
-} from "../chunk-USNFT4DU.js";
+} from "../chunk-6H262SG6.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/testimonials/index.d.ts

@@ -40,6 +40,7 @@ interface TestimonialItem {
  * (e.g. "Explore customer stories").
  *
  * @fires testimonials-link - Cancelable, before following a story or section link. Detail `{ href }`.
+ * @cssprop --st-testimonials-padding - Overrides the section's padding.
  */
 declare class Testimonials extends LitElement {
     static styles: lit.CSSResult;

package/dist/testimonials/index.js

@@ -1,8 +1,8 @@
 import {
   Testimonials
-} from "../chunk-S4ARRDAI.js";
-import "../chunk-PB7ZPPLP.js";
+} from "../chunk-IDBEZY2O.js";
 import "../chunk-3VE6VFJ4.js";
+import "../chunk-PB7ZPPLP.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyatronics/sankhya-cms",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/sankhyatronics/SankhyaCMS.git",
@@ -142,7 +142,9 @@
     "clean": "rimraf dist",
     "test": "vitest run",
     "migrate-json": "node scripts/migrate-json.mjs",
-    "analyze": "cem analyze"
+    "analyze": "cem analyze",
+    "prepack": "node ../../scripts/resolve-workspace-deps.mjs",
+    "postpack": "node ../../scripts/resolve-workspace-deps.mjs --restore"
   },
   "dependencies": {
     "dompurify": "^3.4.16",
@@ -150,17 +152,6 @@
     "lit": "^3.3.3",
     "marked": "^18.1.0"
   },
-  "devDependencies": {
-    "@sankhyatronics/oxlint-config": "workspace:*",
-    "@sankhyatronics/typescript-config": "workspace:*",
-    "oxlint": "catalog:",
-    "rimraf": "catalog:",
-    "tsup": "catalog:",
-    "typescript": "catalog:",
-    "vitest": "catalog:",
-    "@types/node": "catalog:",
-    "@custom-elements-manifest/analyzer": "catalog:"
-  },
   "keywords": [
     "web-components",
     "lit",

package/dist/chunk-2VZFHTBC.js.map

@@ -1 +0,0 @@
-{"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@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      padding: var(--st-space-24);\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-space-16) var(--st-space-32);\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-3ERKQNZT.js.map

@@ -1 +0,0 @@
-{"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@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      margin: var(--st-space-40) auto;\r\n      padding: 100px var(--st-space-24);\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-space-24);\r\n        padding: 60px var(--st-space-24);\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;AAYjC,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC;AAAA;AAoFL,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;AA7Ha,YACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAef,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,GAnFf,YAoFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtFf,YAuFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAzF1C,YA0FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5Ff,YA6FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA/FvC,YAgGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlG/B,YAmGX;AAnGW,cAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}

package/dist/chunk-5REZSZCK.js.map

@@ -1 +0,0 @@
-{"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/** A title/markdown-subtitle/feature-list block beside (or under) an image. */\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      padding: var(--st-space-24);\r\n      background: var(--st-color-page);\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background: var(--st-color-text-strong);\r\n    }\r\n\r\n    .container {\r\n      max-width: var(--st-cms-container-max);\r\n      margin: 0 auto;\r\n      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-space-48) var(--st-space-24);\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-74MILER4.js.map

@@ -1 +0,0 @@
-{"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/** A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`. */\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      padding: var(--st-cms-section-padding) var(--st-space-24);\r\n      background: var(--st-color-page);\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    .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-space-48) var(--st-space-20);\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-E52WO7R7.js.map

@@ -1 +0,0 @@
-{"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@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      padding: var(--st-cms-section-padding) var(--st-space-24);\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-space-48) var(--st-space-16);\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"]}