@sankhyatronics/sankhya-cms 0.0.0-stage → 0.1.0

package/dist/chunk-U7YKCCJG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hero/Hero.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport { ctaLinkStyles, paddingScaleStyles } from '../shared/section-styles';\r\nimport type { HeroActionEventDetail } from './HeroEvents';\r\n\r\n/**\r\n * Full-width hero banner: background image with a darkening overlay, title, optional subtitle and\r\n * a call-to-action link. Port of `SankhyaUI`'s React `Hero`; the framer-motion entrance is redone\r\n * as CSS keyframes (skipped under `prefers-reduced-motion`). The CTA fires a cancelable `action`\r\n * event (detail `{ href }`) before navigating.\r\n */\r\n@customElement('st-hero')\r\nexport class Hero extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n    ${paddingScaleStyles}\r\n\r\n    @keyframes st-hero-zoom {\r\n      from { opacity: 0; transform: scale(1.1); }\r\n      to { opacity: 1; transform: scale(1); }\r\n    }\r\n    @keyframes st-hero-rise {\r\n      from { opacity: 0; transform: translateY(30px); }\r\n      to { opacity: 1; transform: none; }\r\n    }\r\n    @keyframes st-hero-fade {\r\n      from { opacity: 0; }\r\n      to { opacity: 1; }\r\n    }\r\n\r\n    :host {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      overflow: hidden;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      background-color: var(--st-color-text-strong);\r\n      background-repeat: no-repeat;\r\n      background-size: cover;\r\n      background-position: var(--st-hero-position, center center);\r\n      color: var(--st-color-on-solid);\r\n      ${rootFontFamilyStyles}\r\n      animation: st-hero-zoom 1.5s ease-out;\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background-color: var(--st-color-surface);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 1;\r\n      background: linear-gradient(\r\n        to bottom,\r\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),\r\n        color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),\r\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)\r\n      );\r\n    }\r\n\r\n    :host([inverted]) .overlay {\r\n      display: none;\r\n    }\r\n\r\n    .content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-20);\r\n      position: relative;\r\n      z-index: 2;\r\n      width: 80%;\r\n      margin: 0 auto;\r\n      text-align: center;\r\n      align-items: center;\r\n      /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts\r\n         on the host (e.g. a theme text colour) must not turn it dark. */\r\n      color: var(--st-hero-text-color, var(--st-color-on-solid));\r\n    }\r\n\r\n    :host([inverted]) .content {\r\n      color: var(--st-hero-text-color, var(--st-color-text-strong));\r\n    }\r\n\r\n    :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }\r\n    :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }\r\n    :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }\r\n\r\n    .title {\r\n      font-size: var(--st-cms-text-display);\r\n      font-weight: var(--st-font-weight-bold);\r\n      line-height: 1.1;\r\n      color: inherit;\r\n      margin: 0;\r\n      animation: st-hero-rise 0.8s 0.3s ease-out backwards;\r\n    }\r\n\r\n    .subtitle {\r\n      font-size: var(--st-cms-text-xl);\r\n      line-height: 1.5;\r\n      color: inherit;\r\n      margin: 0;\r\n      animation: st-hero-fade 0.8s 0.5s ease-out backwards;\r\n    }\r\n\r\n    .actions {\r\n      display: flex;\r\n      justify-content: center;\r\n      width: 100%;\r\n    }\r\n\r\n    .cta {\r\n      ${ctaLinkStyles}\r\n      background: var(--st-button-primary-bg);\r\n      color: var(--st-button-primary-color);\r\n      font-weight: var(--st-button-font-weight);\r\n      font-size: var(--st-text-md);\r\n      animation: st-hero-rise 0.6s 0.7s ease-out backwards;\r\n    }\r\n\r\n    .cta:hover {\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    .cta:active {\r\n      transform: scale(0.98);\r\n    }\r\n\r\n    @media (min-width: 768px) {\r\n      .content { padding: var(--st-space-32); }\r\n    }\r\n    @media (min-width: 1024px) {\r\n      .content { padding: var(--st-space-48); }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      :host, .title, .subtitle, .cta { animation: none; }\r\n      .cta { transition: none; }\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: 'image-src' })\r\n  imageSrc = '';\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, reflect: true, attribute: 'text-alignment' })\r\n  textAlignment: 'left' | 'center' | 'right' | 'justify' = 'left';\r\n\r\n  @property({ type: String, reflect: true })\r\n  padding: 'none' | 'small' | 'medium' | 'large' = 'none';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  @property({ type: String, attribute: 'focal-point' })\r\n  focalPoint: 'top' | 'left' | 'right' | 'bottom' | 'center' = 'center';\r\n\r\n  private static positions = {\r\n    top: 'center top',\r\n    left: 'left center',\r\n    right: 'right center',\r\n    bottom: 'center bottom',\r\n    center: 'center center'\r\n  } as const;\r\n\r\n  protected willUpdate(): void {\r\n    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\r\n    this.style.setProperty('--st-hero-position', Hero.positions[this.focalPoint] ?? Hero.positions.center);\r\n  }\r\n\r\n  private onClick = (event: MouseEvent): void => {\r\n    const action = new CustomEvent<HeroActionEventDetail>('action', {\r\n      detail: { href: this.href },\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: true\r\n    });\r\n    this.dispatchEvent(action);\r\n    if (action.defaultPrevented) event.preventDefault();\r\n  };\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"overlay\" part=\"overlay\"></div>\r\n      <div class=\"content\" part=\"content\">\r\n        <h1 class=\"title\" part=\"title\">${this.title}</h1>\r\n        ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n        ${this.actionLabel\r\n          ? html`<div class=\"actions\" part=\"actions\">\r\n              <a class=\"cta\" part=\"action\" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>\r\n            </div>`\r\n          : nothing}\r\n        <slot></slot>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-USNFT4DU.js

@@ -0,0 +1,125 @@
+import {
+  controlBaseStyles,
+  rootFontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/stats/Stats.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var Stats = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.inverted = false;
+  }
+  render() {
+    return html`
+      <div class="grid" part="grid">
+        ${this.items.map(
+      (stat) => html`
+            <div class="item" part="item">
+              <span class="value" part="value">${stat.value}</span>
+              <span class="label" part="label">${stat.label}</span>
+              ${stat.description ? html`<span class="description" part="description">${stat.description}</span>` : nothing}
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+Stats.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      padding: var(--st-space-48) var(--st-space-24);
+      background-color: var(--st-color-surface);
+      border-top: 1px solid var(--st-color-divider);
+      border-bottom: 1px solid var(--st-color-divider);
+      ${rootFontFamilyStyles}
+    }
+
+    :host([inverted]) {
+      background-color: var(--st-color-text-strong);
+      border-color: transparent;
+    }
+
+    .grid {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: var(--st-space-40);
+    }
+
+    .item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: var(--st-space-8);
+    }
+
+    .value {
+      font-size: var(--st-cms-text-3xl);
+      font-weight: var(--st-font-weight-bold);
+      color: var(--st-color-text-strong);
+      line-height: 1;
+      letter-spacing: -0.02em;
+    }
+
+    .label {
+      font-size: var(--st-text-xl);
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: var(--st-tracking-wide);
+    }
+
+    .description {
+      font-size: var(--st-text-sm);
+      color: var(--st-color-text-faint);
+      max-width: 200px;
+    }
+
+    :host([inverted]) .value {
+      color: var(--st-color-on-solid);
+    }
+
+    :host([inverted]) .label,
+    :host([inverted]) .description {
+      color: var(--st-color-border);
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        padding: var(--st-space-40) var(--st-space-24);
+      }
+      .grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: var(--st-space-24);
+      }
+      .value {
+        font-size: var(--st-cms-text-xl);
+      }
+    }
+  `;
+__decorateClass([
+  property({ attribute: false })
+], Stats.prototype, "items", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Stats.prototype, "inverted", 2);
+Stats = __decorateClass([
+  customElement("st-stats")
+], Stats);
+
+export {
+  Stats
+};
+//# sourceMappingURL=chunk-USNFT4DU.js.map

package/dist/chunk-USNFT4DU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stats/Stats.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\n\r\nexport interface StatItem {\r\n  value: string;\r\n  label: string;\r\n  description?: string;\r\n}\r\n\r\n/** Responsive grid of headline numbers with a label and optional description. Port of React `Stats`. */\r\n@customElement('st-stats')\r\nexport class Stats extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      padding: var(--st-space-48) var(--st-space-24);\r\n      background-color: var(--st-color-surface);\r\n      border-top: 1px solid var(--st-color-divider);\r\n      border-bottom: 1px solid var(--st-color-divider);\r\n      ${rootFontFamilyStyles}\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background-color: var(--st-color-text-strong);\r\n      border-color: transparent;\r\n    }\r\n\r\n    .grid {\r\n      max-width: var(--st-cms-container-max);\r\n      margin: 0 auto;\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n      gap: var(--st-space-40);\r\n    }\r\n\r\n    .item {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      text-align: center;\r\n      gap: var(--st-space-8);\r\n    }\r\n\r\n    .value {\r\n      font-size: var(--st-cms-text-3xl);\r\n      font-weight: var(--st-font-weight-bold);\r\n      color: var(--st-color-text-strong);\r\n      line-height: 1;\r\n      letter-spacing: -0.02em;\r\n    }\r\n\r\n    .label {\r\n      font-size: var(--st-text-xl);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      color: var(--st-color-text-muted);\r\n      text-transform: uppercase;\r\n      letter-spacing: var(--st-tracking-wide);\r\n    }\r\n\r\n    .description {\r\n      font-size: var(--st-text-sm);\r\n      color: var(--st-color-text-faint);\r\n      max-width: 200px;\r\n    }\r\n\r\n    :host([inverted]) .value {\r\n      color: var(--st-color-on-solid);\r\n    }\r\n\r\n    :host([inverted]) .label,\r\n    :host([inverted]) .description {\r\n      color: var(--st-color-border);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-space-40) var(--st-space-24);\r\n      }\r\n      .grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: var(--st-space-24);\r\n      }\r\n      .value {\r\n        font-size: var(--st-cms-text-xl);\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ attribute: false })\r\n  items: StatItem[] = [];\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"grid\" part=\"grid\">\r\n        ${this.items.map(\r\n          (stat) => html`\r\n            <div class=\"item\" part=\"item\">\r\n              <span class=\"value\" part=\"value\">${stat.value}</span>\r\n              <span class=\"label\" part=\"label\">${stat.label}</span>\r\n              ${stat.description ? html`<span class=\"description\" part=\"description\">${stat.description}</span>` : nothing}\r\n            </div>\r\n          `\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAYjC,IAAM,QAAN,cAAoB,WAAW;AAAA,EAA/B;AAAA;AAiFL,iBAAoB,CAAC;AAGrB,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA;AAAA,UAED,KAAK,MAAM;AAAA,MACX,CAAC,SAAS;AAAA;AAAA,iDAE6B,KAAK,KAAK;AAAA,iDACV,KAAK,KAAK;AAAA,gBAC3C,KAAK,cAAc,oDAAoD,KAAK,WAAW,YAAY,OAAO;AAAA;AAAA;AAAA,IAGlH,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;AArGa,MACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsE1B;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAhFnB,MAiFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAnF/B,MAoFX;AApFW,QAAN;AAAA,EADN,cAAc,UAAU;AAAA,GACZ;","names":[]}

package/dist/chunk-VYON56QO.js

@@ -0,0 +1,90 @@
+import {
+  controlBaseStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/menu-grid/MenuGrid.ts
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var MenuGrid = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.columns = 3;
+    this.gridClassName = "";
+  }
+  render() {
+    const columns = Math.min(4, Math.max(1, Math.round(this.columns) || 1));
+    return html`
+      <div class="menu-grid-container" part="container">
+        <div part="grid" class="menu-grid columns-${columns} ${this.gridClassName}">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+MenuGrid.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+    }
+
+    .menu-grid-container {
+      width: 100%;
+    }
+
+    .menu-grid {
+      display: grid;
+      gap: 12px;
+    }
+
+    .menu-grid.columns-1 {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .menu-grid.columns-2 {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .menu-grid.columns-3 {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .menu-grid.columns-4 {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    @media (max-width: 768px) {
+      .menu-grid.columns-2,
+      .menu-grid.columns-3,
+      .menu-grid.columns-4 {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    @media (max-width: 480px) {
+      .menu-grid.columns-1,
+      .menu-grid.columns-2,
+      .menu-grid.columns-3,
+      .menu-grid.columns-4 {
+        grid-template-columns: 1fr;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: Number })
+], MenuGrid.prototype, "columns", 2);
+__decorateClass([
+  property({ type: String, attribute: "grid-class-name" })
+], MenuGrid.prototype, "gridClassName", 2);
+MenuGrid = __decorateClass([
+  customElement("st-menu-grid")
+], MenuGrid);
+
+export {
+  MenuGrid
+};
+//# sourceMappingURL=chunk-VYON56QO.js.map

package/dist/chunk-VYON56QO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-grid/MenuGrid.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles } from '../shared/styles';\r\n\r\n/**\r\n * A responsive grid of `st-menu-grid-item`s — the \"rich\" nav-menu layout (icon + title +\r\n * description per entry, arranged in columns), typically slotted into `st-dropdown`'s default\r\n * slot. A 1:1 port of `SankhyaUI`'s React `MenuGrid` (`SankhyaCMS/SankhyaUI/src/components/Menu`):\r\n * same markup (`.menu-grid-container` > `.menu-grid.columns-N`), gap and breakpoints (768px: 2–4\r\n * columns → 2; 480px: everything → 1; a 1-column grid stays 1).\r\n */\r\n@customElement('st-menu-grid')\r\nexport class MenuGrid extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n    }\r\n\r\n    .menu-grid-container {\r\n      width: 100%;\r\n    }\r\n\r\n    .menu-grid {\r\n      display: grid;\r\n      gap: 12px;\r\n    }\r\n\r\n    .menu-grid.columns-1 {\r\n      grid-template-columns: repeat(1, 1fr);\r\n    }\r\n\r\n    .menu-grid.columns-2 {\r\n      grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .menu-grid.columns-3 {\r\n      grid-template-columns: repeat(3, 1fr);\r\n    }\r\n\r\n    .menu-grid.columns-4 {\r\n      grid-template-columns: repeat(4, 1fr);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .menu-grid.columns-2,\r\n      .menu-grid.columns-3,\r\n      .menu-grid.columns-4 {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .menu-grid.columns-1,\r\n      .menu-grid.columns-2,\r\n      .menu-grid.columns-3,\r\n      .menu-grid.columns-4 {\r\n        grid-template-columns: 1fr;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** Number of columns at full width (1–4, same as the source component's `columns-N` classes). */\r\n  @property({ type: Number })\r\n  columns = 3;\r\n\r\n  /** Extra class(es) appended to the inner grid element — the source component's `gridClassName`.\r\n   * Its outer `className` is the host element itself here: set a `class` attribute on `st-menu-grid`. */\r\n  @property({ type: String, attribute: 'grid-class-name' })\r\n  gridClassName = '';\r\n\r\n  render() {\r\n    const columns = Math.min(4, Math.max(1, Math.round(this.columns) || 1));\r\n    return html`\r\n      <div class=\"menu-grid-container\" part=\"container\">\r\n        <div part=\"grid\" class=\"menu-grid columns-${columns} ${this.gridClassName}\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAYjC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAqDL,mBAAU;AAKV,yBAAgB;AAAA;AAAA,EAEhB,SAAS;AACP,UAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC;AACtE,WAAO;AAAA;AAAA,oDAEyC,OAAO,IAAI,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/E;AACF;AAtEa,SACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDrB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApDf,SAqDX;AAKA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA,GAzD7C,SA0DX;AA1DW,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":[]}

package/dist/chunk-WCO7JAIK.js

@@ -0,0 +1,195 @@
+import {
+  invertedSectionTextStyles,
+  sectionHeaderStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  cardShellStyles,
+  controlBaseStyles,
+  rootFontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/testimonials/Testimonials.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "iconify-icon";
+var Testimonials = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.subtitle = "";
+    this.items = [];
+    this.inverted = false;
+  }
+  renderItem(item) {
+    const rating = item.rating || 5;
+    return html`
+      <figure class="card" part="card">
+        <div class="stars" part="stars" role="img" aria-label="${rating} / 5">
+          ${Array.from({ length: rating }, () => html`<iconify-icon icon="mdi:star"></iconify-icon>`)}
+        </div>
+        <blockquote class="quote" part="quote">"${item.quote}"</blockquote>
+        <figcaption class="author" part="author">
+          ${item.imageSrc ? html`<img class="avatar" part="avatar" src=${item.imageSrc} alt=${item.name} />` : html`<div class="avatar avatar-placeholder" part="avatar">${item.name.charAt(0)}</div>`}
+          <span class="author-info">
+            <span class="name" part="name">${item.name}</span>
+            <span class="role" part="role">${item.role}${item.company ? ` at ${item.company}` : ""}</span>
+          </span>
+        </figcaption>
+      </figure>
+    `;
+  }
+  render() {
+    return html`
+      <div class="container" part="container">
+        <div class="header" part="header">
+          <h2 class="title" part="title">${this.title}</h2>
+          ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+        </div>
+        <div class="grid" part="grid">${this.items.map((item) => this.renderItem(item))}</div>
+      </div>
+    `;
+  }
+};
+Testimonials.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      padding: var(--st-space-48) var(--st-space-24);
+      background-color: var(--st-color-subtle);
+      ${rootFontFamilyStyles}
+    }
+
+    :host([inverted]) {
+      background-color: var(--st-color-text-strong);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+    }
+
+    .header {
+      ${sectionHeaderStyles}
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      margin-bottom: var(--st-space-16);
+      letter-spacing: -0.02em;
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      margin: 0 auto;
+    }
+
+    ${invertedSectionTextStyles}
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: var(--st-space-32);
+    }
+
+    .card {
+      ${cardShellStyles}
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-24);
+      margin: 0;
+      padding: var(--st-space-24);
+      box-shadow: 0 1px 3px var(--st-shadow-color-sm);
+    }
+
+    .stars {
+      display: flex;
+      gap: var(--st-space-4);
+      color: var(--st-favorite-accent);
+      font-size: var(--st-size-20);
+    }
+
+    .quote {
+      font-size: var(--st-text-md);
+      line-height: 1.6;
+      color: var(--st-color-text);
+      font-style: italic;
+      margin: 0;
+    }
+
+    .author {
+      display: flex;
+      align-items: center;
+      gap: var(--st-space-12);
+      margin-top: auto;
+    }
+
+    .avatar {
+      width: var(--st-space-48);
+      height: var(--st-space-48);
+      border-radius: var(--st-radius-circle);
+      object-fit: cover;
+      background-color: var(--st-color-divider);
+      flex-shrink: 0;
+    }
+
+    .avatar-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--st-color-text-muted);
+      font-weight: var(--st-font-weight-semibold);
+      font-size: var(--st-text-xl);
+    }
+
+    .author-info {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .name {
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+      font-size: var(--st-text-xl);
+    }
+
+    .role {
+      font-size: var(--st-text-sm);
+      color: var(--st-color-text-faint);
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        padding: var(--st-space-40) var(--st-space-20);
+      }
+      .grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Testimonials.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], Testimonials.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], Testimonials.prototype, "items", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Testimonials.prototype, "inverted", 2);
+Testimonials = __decorateClass([
+  customElement("st-testimonials")
+], Testimonials);
+
+export {
+  Testimonials
+};
+//# sourceMappingURL=chunk-WCO7JAIK.js.map

package/dist/chunk-WCO7JAIK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/testimonials/Testimonials.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 { cardShellStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, invertedSectionTextStyles, sectionHeaderStyles } from '../shared/section-styles';\r\n\r\nexport interface TestimonialItem {\r\n  id?: string;\r\n  name: string;\r\n  role: string;\r\n  company?: string;\r\n  imageSrc?: string;\r\n  quote: string;\r\n  /** Number of stars, default 5. */\r\n  rating?: number;\r\n}\r\n\r\n/** Section heading plus a grid of quote cards with star rating and author. Port of React `Testimonials`. */\r\n@customElement('st-testimonials')\r\nexport class Testimonials extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      padding: var(--st-space-48) var(--st-space-24);\r\n      background-color: var(--st-color-subtle);\r\n      ${rootFontFamilyStyles}\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background-color: 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-bottom: var(--st-space-16);\r\n      letter-spacing: -0.02em;\r\n    }\r\n\r\n    .subtitle {\r\n      ${sectionSubtitleStyles}\r\n      margin: 0 auto;\r\n    }\r\n\r\n    ${invertedSectionTextStyles}\r\n\r\n    .grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n      gap: var(--st-space-32);\r\n    }\r\n\r\n    .card {\r\n      ${cardShellStyles}\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-24);\r\n      margin: 0;\r\n      padding: var(--st-space-24);\r\n      box-shadow: 0 1px 3px var(--st-shadow-color-sm);\r\n    }\r\n\r\n    .stars {\r\n      display: flex;\r\n      gap: var(--st-space-4);\r\n      color: var(--st-favorite-accent);\r\n      font-size: var(--st-size-20);\r\n    }\r\n\r\n    .quote {\r\n      font-size: var(--st-text-md);\r\n      line-height: 1.6;\r\n      color: var(--st-color-text);\r\n      font-style: italic;\r\n      margin: 0;\r\n    }\r\n\r\n    .author {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--st-space-12);\r\n      margin-top: auto;\r\n    }\r\n\r\n    .avatar {\r\n      width: var(--st-space-48);\r\n      height: var(--st-space-48);\r\n      border-radius: var(--st-radius-circle);\r\n      object-fit: cover;\r\n      background-color: var(--st-color-divider);\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .avatar-placeholder {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--st-color-text-muted);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      font-size: var(--st-text-xl);\r\n    }\r\n\r\n    .author-info {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .name {\r\n      font-weight: var(--st-font-weight-semibold);\r\n      color: var(--st-color-text-strong);\r\n      font-size: var(--st-text-xl);\r\n    }\r\n\r\n    .role {\r\n      font-size: var(--st-text-sm);\r\n      color: var(--st-color-text-faint);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-space-40) var(--st-space-20);\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  @property({ attribute: false })\r\n  items: TestimonialItem[] = [];\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  private renderItem(item: TestimonialItem) {\r\n    const rating = item.rating || 5;\r\n    return html`\r\n      <figure class=\"card\" part=\"card\">\r\n        <div class=\"stars\" part=\"stars\" role=\"img\" aria-label=\"${rating} / 5\">\r\n          ${Array.from({ length: rating }, () => html`<iconify-icon icon=\"mdi:star\"></iconify-icon>`)}\r\n        </div>\r\n        <blockquote class=\"quote\" part=\"quote\">\"${item.quote}\"</blockquote>\r\n        <figcaption class=\"author\" part=\"author\">\r\n          ${item.imageSrc\r\n            ? html`<img class=\"avatar\" part=\"avatar\" src=${item.imageSrc} alt=${item.name} />`\r\n            : html`<div class=\"avatar avatar-placeholder\" part=\"avatar\">${item.name.charAt(0)}</div>`}\r\n          <span class=\"author-info\">\r\n            <span class=\"name\" part=\"name\">${item.name}</span>\r\n            <span class=\"role\" part=\"role\">${item.role}${item.company ? ` at ${item.company}` : ''}</span>\r\n          </span>\r\n        </figcaption>\r\n      </figure>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"container\" part=\"container\">\r\n        <div class=\"header\" part=\"header\">\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        </div>\r\n        <div class=\"grid\" part=\"grid\">${this.items.map((item) => this.renderItem(item))}</div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AACxC,OAAO;AAkBA,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAyHL,iBAAQ;AAGR,oBAAW;AAGX,iBAA2B,CAAC;AAG5B,oBAAW;AAAA;AAAA,EAEH,WAAW,MAAuB;AACxC,UAAM,SAAS,KAAK,UAAU;AAC9B,WAAO;AAAA;AAAA,iEAEsD,MAAM;AAAA,YAC3D,MAAM,KAAK,EAAE,QAAQ,OAAO,GAAG,MAAM,mDAAmD,CAAC;AAAA;AAAA,kDAEnD,KAAK,KAAK;AAAA;AAAA,YAEhD,KAAK,WACH,6CAA6C,KAAK,QAAQ,QAAQ,KAAK,IAAI,QAC3E,4DAA4D,KAAK,KAAK,OAAO,CAAC,CAAC,QAAQ;AAAA;AAAA,6CAExD,KAAK,IAAI;AAAA,6CACT,KAAK,IAAI,GAAG,KAAK,UAAU,OAAO,KAAK,OAAO,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhG;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,2CAGgC,KAAK,KAAK;AAAA,YACzC,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA;AAAA,wCAE5D,KAAK,MAAM,IAAI,CAAC,SAAS,KAAK,WAAW,IAAI,CAAC,CAAC;AAAA;AAAA;AAAA,EAGrF;AACF;AApKa,aACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAapB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMlB,qBAAqB;AAAA;AAAA;AAAA;AAAA,MAIvB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASvB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4ErB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxHf,aAyHX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3Hf,aA4HX;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GA9HnB,aA+HX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjI/B,aAkIX;AAlIW,eAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}