@sankhyatronics/sankhya-cms 0.0.0-stage → 0.1.0

package/dist/chunk-XHBC23TV.js

@@ -0,0 +1,254 @@
+import {
+  reducedMotionStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  buttonResetStyles,
+  controlBaseStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/carousel/Carousel.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var Carousel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.autoPlay = true;
+    this.interval = 5e3;
+    this.showArrows = true;
+    this.showIndicators = true;
+    this.index = 0;
+    this.count = 0;
+    this.paused = false;
+    this.pause = () => {
+      this.paused = true;
+    };
+    this.resume = () => {
+      this.paused = false;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("mouseenter", this.pause);
+    this.addEventListener("mouseleave", this.resume);
+    this.addEventListener("focusin", this.pause);
+    this.addEventListener("focusout", this.resume);
+  }
+  disconnectedCallback() {
+    this.stopTimer();
+    this.removeEventListener("mouseenter", this.pause);
+    this.removeEventListener("mouseleave", this.resume);
+    this.removeEventListener("focusin", this.pause);
+    this.removeEventListener("focusout", this.resume);
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    if (changed.has("index") || changed.has("count")) this.syncSlides();
+    if (changed.has("autoPlay") || changed.has("interval") || changed.has("count")) this.restartTimer();
+  }
+  get slides() {
+    return this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: true }) ?? [];
+  }
+  syncSlides() {
+    this.slides.forEach((el, i) => el.toggleAttribute("data-st-active", i === this.index));
+  }
+  onSlotChange() {
+    this.count = this.slides.length;
+    if (this.index >= this.count) this.index = 0;
+    this.syncSlides();
+  }
+  stopTimer() {
+    if (this.timer !== void 0) clearInterval(this.timer);
+    this.timer = void 0;
+  }
+  restartTimer() {
+    this.stopTimer();
+    if (!this.autoPlay || this.count < 2) return;
+    this.timer = setInterval(() => {
+      if (!this.paused) this.go(this.index + 1, "next");
+    }, this.interval);
+  }
+  go(target, direction) {
+    if (this.count === 0) return;
+    this.setAttribute("data-direction", direction);
+    this.index = (target + this.count) % this.count;
+    this.dispatchEvent(
+      new CustomEvent("carousel-change", {
+        detail: { index: this.index },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.restartTimer();
+  }
+  render() {
+    const multiple = this.count > 1;
+    return html`
+      <slot @slotchange=${this.onSlotChange}></slot>
+      ${this.showArrows && multiple ? html`
+            <button part="nav-button prev" class="nav prev" aria-label="Previous Slide" @click=${() => this.go(this.index - 1, "prev")}>&#10094;</button>
+            <button part="nav-button next" class="nav next" aria-label="Next Slide" @click=${() => this.go(this.index + 1, "next")}>&#10095;</button>
+          ` : nothing}
+      ${this.showIndicators && multiple ? html`<div class="indicators" part="indicators">
+            ${Array.from(
+      { length: this.count },
+      (_, i) => html`
+                <button
+                  part="dot"
+                  class="dot ${i === this.index ? "active" : ""}"
+                  aria-label="Go to slide ${i + 1}"
+                  aria-current=${i === this.index ? "true" : "false"}
+                  @click=${() => this.go(i, i > this.index ? "next" : "prev")}
+                ></button>
+              `
+    )}
+          </div>` : nothing}
+    `;
+  }
+};
+Carousel.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    ::slotted(*) {
+      display: none !important;
+    }
+
+    ::slotted([data-st-active]) {
+      display: block !important;
+      animation: st-carousel-in-next 0.4s ease both;
+    }
+
+    :host([data-direction='prev']) ::slotted([data-st-active]) {
+      animation-name: st-carousel-in-prev;
+    }
+
+    @keyframes st-carousel-in-next {
+      from {
+        transform: translateX(10%);
+        opacity: 0;
+      }
+      to {
+        transform: none;
+        opacity: 1;
+      }
+    }
+
+    @keyframes st-carousel-in-prev {
+      from {
+        transform: translateX(-10%);
+        opacity: 0;
+      }
+      to {
+        transform: none;
+        opacity: 1;
+      }
+    }
+
+    .nav {
+      ${buttonResetStyles}
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--st-size-38);
+      height: var(--st-size-38);
+      border-radius: var(--st-radius-circle);
+      border: 1px solid var(--st-color-border);
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+      font-size: var(--st-text-xl);
+      opacity: 0.8;
+      transition:
+        opacity 0.3s ease,
+        transform 0.3s ease;
+    }
+
+    .nav:hover {
+      opacity: 1;
+      transform: translateY(-50%) scale(1.1);
+    }
+
+    .prev {
+      left: var(--st-space-12);
+    }
+
+    .next {
+      right: var(--st-space-12);
+    }
+
+    .indicators {
+      position: absolute;
+      bottom: var(--st-space-24);
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+      display: flex;
+      gap: var(--st-space-12);
+    }
+
+    .dot {
+      ${buttonResetStyles}
+      width: var(--st-space-12);
+      height: var(--st-space-12);
+      padding: 0;
+      border-radius: var(--st-radius-circle);
+      background: var(--st-color-border-strong);
+      transition:
+        background 0.3s ease,
+        transform 0.3s ease;
+    }
+
+    .dot:hover {
+      background: var(--st-color-text-muted);
+    }
+
+    .dot.active {
+      background: var(--st-color-text-strong);
+      transform: scale(1.2);
+    }
+
+    ${reducedMotionStyles}
+    @media (prefers-reduced-motion: reduce) {
+      ::slotted([data-st-active]) {
+        animation: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, attribute: "auto-play" })
+], Carousel.prototype, "autoPlay", 2);
+__decorateClass([
+  property({ type: Number })
+], Carousel.prototype, "interval", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-arrows" })
+], Carousel.prototype, "showArrows", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-indicators" })
+], Carousel.prototype, "showIndicators", 2);
+__decorateClass([
+  state()
+], Carousel.prototype, "index", 2);
+__decorateClass([
+  state()
+], Carousel.prototype, "count", 2);
+Carousel = __decorateClass([
+  customElement("st-carousel")
+], Carousel);
+
+export {
+  Carousel
+};
+//# sourceMappingURL=chunk-XHBC23TV.js.map

package/dist/chunk-XHBC23TV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/carousel/Carousel.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles } from '../shared/styles';\r\nimport { reducedMotionStyles } from '../shared/section-styles';\r\nimport type { CarouselChangeEventDetail } from './CarouselEvents';\r\n\r\n/**\r\n * Cycles through its slotted children, one visible at a time, with optional autoplay, arrows and\r\n * dot indicators. The incoming slide slides in from the travel direction (CSS keyframes in place\r\n * of the source's framer-motion spring). Autoplay pauses while hovered or focused and stops when\r\n * the element is disconnected.\r\n */\r\n@customElement('st-carousel')\r\nexport class Carousel extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      position: relative;\r\n      width: 100%;\r\n      overflow: hidden;\r\n    }\r\n\r\n    ::slotted(*) {\r\n      display: none !important;\r\n    }\r\n\r\n    ::slotted([data-st-active]) {\r\n      display: block !important;\r\n      animation: st-carousel-in-next 0.4s ease both;\r\n    }\r\n\r\n    :host([data-direction='prev']) ::slotted([data-st-active]) {\r\n      animation-name: st-carousel-in-prev;\r\n    }\r\n\r\n    @keyframes st-carousel-in-next {\r\n      from {\r\n        transform: translateX(10%);\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        transform: none;\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    @keyframes st-carousel-in-prev {\r\n      from {\r\n        transform: translateX(-10%);\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        transform: none;\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    .nav {\r\n      ${buttonResetStyles}\r\n      position: absolute;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      z-index: 10;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: var(--st-size-38);\r\n      height: var(--st-size-38);\r\n      border-radius: var(--st-radius-circle);\r\n      border: 1px solid var(--st-color-border);\r\n      background: var(--st-color-surface);\r\n      color: var(--st-color-text-strong);\r\n      font-size: var(--st-text-xl);\r\n      opacity: 0.8;\r\n      transition:\r\n        opacity 0.3s ease,\r\n        transform 0.3s ease;\r\n    }\r\n\r\n    .nav:hover {\r\n      opacity: 1;\r\n      transform: translateY(-50%) scale(1.1);\r\n    }\r\n\r\n    .prev {\r\n      left: var(--st-space-12);\r\n    }\r\n\r\n    .next {\r\n      right: var(--st-space-12);\r\n    }\r\n\r\n    .indicators {\r\n      position: absolute;\r\n      bottom: var(--st-space-24);\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      z-index: 10;\r\n      display: flex;\r\n      gap: var(--st-space-12);\r\n    }\r\n\r\n    .dot {\r\n      ${buttonResetStyles}\r\n      width: var(--st-space-12);\r\n      height: var(--st-space-12);\r\n      padding: 0;\r\n      border-radius: var(--st-radius-circle);\r\n      background: var(--st-color-border-strong);\r\n      transition:\r\n        background 0.3s ease,\r\n        transform 0.3s ease;\r\n    }\r\n\r\n    .dot:hover {\r\n      background: var(--st-color-text-muted);\r\n    }\r\n\r\n    .dot.active {\r\n      background: var(--st-color-text-strong);\r\n      transform: scale(1.2);\r\n    }\r\n\r\n    ${reducedMotionStyles}\r\n    @media (prefers-reduced-motion: reduce) {\r\n      ::slotted([data-st-active]) {\r\n        animation: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: Boolean, attribute: 'auto-play' })\r\n  autoPlay = true;\r\n\r\n  /** Autoplay delay in milliseconds. */\r\n  @property({ type: Number })\r\n  interval = 5000;\r\n\r\n  @property({ type: Boolean, attribute: 'show-arrows' })\r\n  showArrows = true;\r\n\r\n  @property({ type: Boolean, attribute: 'show-indicators' })\r\n  showIndicators = true;\r\n\r\n  @state() private index = 0;\r\n  @state() private count = 0;\r\n  private paused = false;\r\n  private timer?: ReturnType<typeof setInterval>;\r\n\r\n  connectedCallback() {\r\n    super.connectedCallback();\r\n    this.addEventListener('mouseenter', this.pause);\r\n    this.addEventListener('mouseleave', this.resume);\r\n    this.addEventListener('focusin', this.pause);\r\n    this.addEventListener('focusout', this.resume);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.stopTimer();\r\n    this.removeEventListener('mouseenter', this.pause);\r\n    this.removeEventListener('mouseleave', this.resume);\r\n    this.removeEventListener('focusin', this.pause);\r\n    this.removeEventListener('focusout', this.resume);\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  protected updated(changed: Map<string, unknown>) {\r\n    if (changed.has('index') || changed.has('count')) this.syncSlides();\r\n    if (changed.has('autoPlay') || changed.has('interval') || changed.has('count')) this.restartTimer();\r\n  }\r\n\r\n  private pause = () => {\r\n    this.paused = true;\r\n  };\r\n\r\n  private resume = () => {\r\n    this.paused = false;\r\n  };\r\n\r\n  private get slides(): Element[] {\r\n    return this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? [];\r\n  }\r\n\r\n  private syncSlides() {\r\n    this.slides.forEach((el, i) => el.toggleAttribute('data-st-active', i === this.index));\r\n  }\r\n\r\n  private onSlotChange() {\r\n    this.count = this.slides.length;\r\n    if (this.index >= this.count) this.index = 0;\r\n    this.syncSlides();\r\n  }\r\n\r\n  private stopTimer() {\r\n    if (this.timer !== undefined) clearInterval(this.timer);\r\n    this.timer = undefined;\r\n  }\r\n\r\n  private restartTimer() {\r\n    this.stopTimer();\r\n    if (!this.autoPlay || this.count < 2) return;\r\n    this.timer = setInterval(() => {\r\n      if (!this.paused) this.go(this.index + 1, 'next');\r\n    }, this.interval);\r\n  }\r\n\r\n  private go(target: number, direction: 'next' | 'prev') {\r\n    if (this.count === 0) return;\r\n    this.setAttribute('data-direction', direction);\r\n    this.index = (target + this.count) % this.count;\r\n    this.dispatchEvent(\r\n      new CustomEvent<CarouselChangeEventDetail>('carousel-change', {\r\n        detail: { index: this.index },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n    this.restartTimer();\r\n  }\r\n\r\n  render() {\r\n    const multiple = this.count > 1;\r\n    return html`\r\n      <slot @slotchange=${this.onSlotChange}></slot>\r\n      ${this.showArrows && multiple\r\n        ? html`\r\n            <button part=\"nav-button prev\" class=\"nav prev\" aria-label=\"Previous Slide\" @click=${() => this.go(this.index - 1, 'prev')}>&#10094;</button>\r\n            <button part=\"nav-button next\" class=\"nav next\" aria-label=\"Next Slide\" @click=${() => this.go(this.index + 1, 'next')}>&#10095;</button>\r\n          `\r\n        : nothing}\r\n      ${this.showIndicators && multiple\r\n        ? html`<div class=\"indicators\" part=\"indicators\">\r\n            ${Array.from(\r\n              { length: this.count },\r\n              (_, i) => html`\r\n                <button\r\n                  part=\"dot\"\r\n                  class=\"dot ${i === this.index ? 'active' : ''}\"\r\n                  aria-label=\"Go to slide ${i + 1}\"\r\n                  aria-current=${i === this.index ? 'true' : 'false'}\r\n                  @click=${() => this.go(i, i > this.index ? 'next' : 'prev')}\r\n                ></button>\r\n              `,\r\n            )}\r\n          </div>`\r\n        : nothing}\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,UAAU,aAAa;AAaxC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAyHL,oBAAW;AAIX,oBAAW;AAGX,sBAAa;AAGb,0BAAiB;AAER,SAAQ,QAAQ;AAChB,SAAQ,QAAQ;AACzB,SAAQ,SAAS;AAyBjB,SAAQ,QAAQ,MAAM;AACpB,WAAK,SAAS;AAAA,IAChB;AAEA,SAAQ,SAAS,MAAM;AACrB,WAAK,SAAS;AAAA,IAChB;AAAA;AAAA,EA5BA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,cAAc,KAAK,KAAK;AAC9C,SAAK,iBAAiB,cAAc,KAAK,MAAM;AAC/C,SAAK,iBAAiB,WAAW,KAAK,KAAK;AAC3C,SAAK,iBAAiB,YAAY,KAAK,MAAM;AAAA,EAC/C;AAAA,EAEA,uBAAuB;AACrB,SAAK,UAAU;AACf,SAAK,oBAAoB,cAAc,KAAK,KAAK;AACjD,SAAK,oBAAoB,cAAc,KAAK,MAAM;AAClD,SAAK,oBAAoB,WAAW,KAAK,KAAK;AAC9C,SAAK,oBAAoB,YAAY,KAAK,MAAM;AAChD,UAAM,qBAAqB;AAAA,EAC7B;AAAA,EAEU,QAAQ,SAA+B;AAC/C,QAAI,QAAQ,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,EAAG,MAAK,WAAW;AAClE,QAAI,QAAQ,IAAI,UAAU,KAAK,QAAQ,IAAI,UAAU,KAAK,QAAQ,IAAI,OAAO,EAAG,MAAK,aAAa;AAAA,EACpG;AAAA,EAUA,IAAY,SAAoB;AAC9B,WAAO,KAAK,YAAY,cAAc,MAAM,GAAG,iBAAiB,EAAE,SAAS,KAAK,CAAC,KAAK,CAAC;AAAA,EACzF;AAAA,EAEQ,aAAa;AACnB,SAAK,OAAO,QAAQ,CAAC,IAAI,MAAM,GAAG,gBAAgB,kBAAkB,MAAM,KAAK,KAAK,CAAC;AAAA,EACvF;AAAA,EAEQ,eAAe;AACrB,SAAK,QAAQ,KAAK,OAAO;AACzB,QAAI,KAAK,SAAS,KAAK,MAAO,MAAK,QAAQ;AAC3C,SAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,YAAY;AAClB,QAAI,KAAK,UAAU,OAAW,eAAc,KAAK,KAAK;AACtD,SAAK,QAAQ;AAAA,EACf;AAAA,EAEQ,eAAe;AACrB,SAAK,UAAU;AACf,QAAI,CAAC,KAAK,YAAY,KAAK,QAAQ,EAAG;AACtC,SAAK,QAAQ,YAAY,MAAM;AAC7B,UAAI,CAAC,KAAK,OAAQ,MAAK,GAAG,KAAK,QAAQ,GAAG,MAAM;AAAA,IAClD,GAAG,KAAK,QAAQ;AAAA,EAClB;AAAA,EAEQ,GAAG,QAAgB,WAA4B;AACrD,QAAI,KAAK,UAAU,EAAG;AACtB,SAAK,aAAa,kBAAkB,SAAS;AAC7C,SAAK,SAAS,SAAS,KAAK,SAAS,KAAK;AAC1C,SAAK;AAAA,MACH,IAAI,YAAuC,mBAAmB;AAAA,QAC5D,QAAQ,EAAE,OAAO,KAAK,MAAM;AAAA,QAC5B,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AACA,SAAK,aAAa;AAAA,EACpB;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,QAAQ;AAC9B,WAAO;AAAA,0BACe,KAAK,YAAY;AAAA,QACnC,KAAK,cAAc,WACjB;AAAA,iGACuF,MAAM,KAAK,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC;AAAA,6FACzC,MAAM,KAAK,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC;AAAA,cAExH,OAAO;AAAA,QACT,KAAK,kBAAkB,WACrB;AAAA,cACI,MAAM;AAAA,MACN,EAAE,QAAQ,KAAK,MAAM;AAAA,MACrB,CAAC,GAAG,MAAM;AAAA;AAAA;AAAA,+BAGO,MAAM,KAAK,QAAQ,WAAW,EAAE;AAAA,4CACnB,IAAI,CAAC;AAAA,iCAChB,MAAM,KAAK,QAAQ,SAAS,OAAO;AAAA,2BACzC,MAAM,KAAK,GAAG,GAAG,IAAI,KAAK,QAAQ,SAAS,MAAM,CAAC;AAAA;AAAA;AAAA,IAGjE,CAAC;AAAA,oBAEH,OAAO;AAAA;AAAA,EAEf;AACF;AA7Oa,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,QA6Cf,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,QA6CjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAoBnB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,YAAY,CAAC;AAAA,GAxHxC,SAyHX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5Hf,SA6HX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,cAAc,CAAC;AAAA,GA/H1C,SAgIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,kBAAkB,CAAC;AAAA,GAlI9C,SAmIX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GArII,SAqIM;AACA;AAAA,EAAhB,MAAM;AAAA,GAtII,SAsIM;AAtIN,WAAN;AAAA,EADN,cAAc,aAAa;AAAA,GACf;","names":[]}

package/dist/chunk-XXPBFHWR.js

@@ -0,0 +1,70 @@
+import {
+  buttonResetStyles,
+  controlBaseStyles,
+  rootFontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/icon-button/IconButton.ts
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var IconButton = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.disabled = false;
+  }
+  render() {
+    return html`
+      <button part="button" type="button" aria-label=${this.label} title=${this.label} ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+IconButton.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: inline-flex;
+      ${rootFontFamilyStyles}
+    }
+
+    button {
+      ${buttonResetStyles}
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--st-size-32);
+      height: var(--st-size-32);
+      border-radius: var(--st-radius-sm);
+      color: var(--st-color-text-muted);
+    }
+
+    button:hover {
+      background: var(--st-color-hover);
+      color: var(--st-color-text-strong);
+    }
+
+    :host([disabled]) button {
+      color: var(--st-color-text-muted);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], IconButton.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], IconButton.prototype, "disabled", 2);
+IconButton = __decorateClass([
+  customElement("st-icon-button")
+], IconButton);
+
+export {
+  IconButton
+};
+//# sourceMappingURL=chunk-XXPBFHWR.js.map

package/dist/chunk-XXPBFHWR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icon-button/IconButton.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\n\r\n/**\r\n * A small, icon-only action button — ported from `SankhyaUI`'s React `IconButton` (a separate,\r\n * unrelated marketing-site project; that source takes an iconify string `icon` prop, this package\r\n * has no iconify dependency, so the icon is default-slotted content instead, same convention as\r\n * `st-dropdown`/`st-menu-grid-item`'s `slot=\"icon\"`).\r\n *\r\n * Fires a plain native `click` — no custom event, since a caller just wants an ordinary button.\r\n */\r\n@customElement('st-icon-button')\r\nexport class IconButton extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: inline-flex;\r\n      ${rootFontFamilyStyles}\r\n    }\r\n\r\n    button {\r\n      ${buttonResetStyles}\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: var(--st-size-32);\r\n      height: var(--st-size-32);\r\n      border-radius: var(--st-radius-sm);\r\n      color: var(--st-color-text-muted);\r\n    }\r\n\r\n    button:hover {\r\n      background: var(--st-color-hover);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    :host([disabled]) button {\r\n      color: var(--st-color-text-muted);\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n  `;\r\n\r\n  /** Accessible name and tooltip — matches the source component's `ariaLabel` (renamed: modern\r\n   * browsers already expose a native `ariaLabel` reflected property on every `Element`, so reusing\r\n   * that exact name as a Lit reactive property would shadow it). Required for a control with no\r\n   * visible text. */\r\n  @property({ type: String })\r\n  label = '';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  disabled = false;\r\n\r\n  render() {\r\n    return html`\r\n      <button part=\"button\" type=\"button\" aria-label=${this.label} title=${this.label} ?disabled=${this.disabled}>\r\n        <slot></slot>\r\n      </button>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAajC,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC;AAAA;AAqCL,iBAAQ;AAGR,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA,uDAC4C,KAAK,KAAK,UAAU,KAAK,KAAK,cAAc,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAI9G;AACF;AAjDa,WACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,oBAAoB;AAAA;AAAA;AAAA;AAAA,QAIpB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApCf,WAqCX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvC/B,WAwCX;AAxCW,aAAN;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB;","names":[]}

package/dist/cms-theme.css

@@ -0,0 +1,15 @@
+/**
+ * Marketing-scale tokens for the CMS section components (hero, features, stats, ...).
+ * theme.css is tuned for dense app chrome (its largest text step is 20px), so
+ * the display sizes a content page needs live here. Import after theme.css (shipped in this package);
+ * override any of these at :root to rescale the CMS components.
+ */
+:root {
+  --st-cms-text-display: 3.75rem;
+  --st-cms-text-4xl: 2.25rem;
+  --st-cms-text-3xl: 1.875rem;
+  --st-cms-text-xl: 1.25rem;
+  --st-cms-text-lg: 1.125rem;
+  --st-cms-section-padding: 4rem;
+  --st-cms-container-max: 1200px;
+}

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

@@ -0,0 +1,25 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A long-form article section: centered title/subtitle, an optional featured image with caption,
+ * 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.
+ */
+declare class ContentBlock extends LitElement {
+    static styles: lit.CSSResult;
+    title: string;
+    subtitle: string;
+    /** URL of a Markdown file. */
+    contentSrc: string;
+    /** Inline Markdown, used when `content-src` is not set. */
+    content: string;
+    imageSrc: string;
+    imageAlt: string;
+    imageCaption: string;
+    inverted: boolean;
+    render(): lit.TemplateResult<1>;
+}
+
+export { ContentBlock };

package/dist/content-block/index.js

@@ -0,0 +1,11 @@
+import {
+  ContentBlock
+} from "../chunk-IMACP7HN.js";
+import "../chunk-3JU3R22O.js";
+import "../chunk-3VE6VFJ4.js";
+import "../chunk-RHAOQ6K4.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  ContentBlock
+};
+//# sourceMappingURL=index.js.map

package/dist/content-block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

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

@@ -0,0 +1,33 @@
+import * as lit from 'lit';
+import { LitElement, nothing } from 'lit';
+
+/**
+ * Fixed bottom consent bar. The source read/wrote consent through a React `UserContext`; here the
+ * element persists the choice itself in localStorage (`storage-key`, default the source's
+ * `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.
+ */
+declare class CookieConsent extends LitElement {
+    static styles: lit.CSSResult;
+    message: string;
+    acceptButtonText: string;
+    refuseButtonText: string;
+    privacyPolicyLink: string;
+    privacyPolicyText: string;
+    storageKey: string;
+    /** The stored choice, or `null` while undecided (the bar is only shown then). */
+    private consent;
+    connectedCallback(): void;
+    private readStored;
+    private choose;
+    render(): lit.TemplateResult<1> | typeof nothing;
+}
+
+type CookieConsentStatus = 'accepted' | 'refused';
+/** Detail of `cookie-consent-accept` / `cookie-consent-refuse` (source: `onAccept` / `onRefuse`). */
+interface CookieConsentEventDetail {
+    status: CookieConsentStatus;
+}
+
+export { CookieConsent, type CookieConsentEventDetail, type CookieConsentStatus };

package/dist/cookie-consent/index.js

@@ -0,0 +1,9 @@
+import {
+  CookieConsent
+} from "../chunk-2VZFHTBC.js";
+import "../chunk-RHAOQ6K4.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  CookieConsent
+};
+//# sourceMappingURL=index.js.map

package/dist/cookie-consent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/dropdown/index.d.ts

@@ -0,0 +1,89 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),
+ * action menus, anything "click a trigger, show content under it". A 1:1 port of `SankhyaUI`'s
+ * React `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup
+ * (`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —
+ *
+ * - only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no
+ *   provider element is needed);
+ * - a mousedown outside, Escape, or a click inside the panel closes it;
+ * - an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;
+ * - `inline` opens the panel in the flow, the source's `.touch-device` layout.
+ *
+ * Colors and the panel's surface come from the suite theme (the source left those to the
+ * consumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out
+ * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel
+ * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`
+ * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions
+ * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event.
+ */
+declare class Dropdown extends LitElement {
+    /** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */
+    private static openDropdown;
+    static styles: lit.CSSResult;
+    /** Trigger label text (source: `title`, renamed because `title` is the native tooltip
+     * attribute). Leave empty to show only `slot="icon"`. */
+    label: string;
+    /** Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in
+     * the source); with none it navigates. */
+    href: string;
+    iconPosition: 'left' | 'right';
+    /** Inline `width`/`height` of the `slot="icon"` wrapper (source: `iconSize`, default `1.2rem`). */
+    iconSize: string;
+    /** Inline `color` of the `slot="icon"` wrapper (source: `iconColor`). */
+    iconColor: string;
+    /** Which edge of the trigger the panel lines up with. */
+    align: 'left' | 'right';
+    /** `target` of an `href` trigger (source default `_self`). */
+    target: string;
+    /** Extra class(es) on the trigger (source: `className`; a `class` on `st-dropdown` styles the host). */
+    triggerClassName: string;
+    /** Extra class(es) on the panel (source: `itemGroupClassName`). */
+    itemGroupClassName: string;
+    /** Unused, as in the source (`itemClassName` is never read there); kept for prop parity. */
+    itemClassName: string;
+    disabled: boolean;
+    /** Highlights the trigger as the current section (e.g. the current page is one of its items). */
+    active: boolean;
+    /** Opens the panel in the flow under the trigger instead of floating over the page (see the
+     * styles). `st-header` sets this on its own menu's dropdowns while its hamburger panel shows. */
+    inline: boolean;
+    /** Whether the panel is showing. Follows user toggles; may also be set from outside. */
+    open: boolean;
+    /** Whether the default slot has content — the source's `children` check. */
+    private hasContent;
+    /** Whether `slot="icon"` has content. */
+    private hasIcon;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private setOpen;
+    private closeOnOutsideMouseDown;
+    private closeOnEscape;
+    private trigger;
+    /** Keyboard-reachable entries in the panel, in order: menu items (they delegate focus to their
+     * own link) plus any plain links/buttons/tabbable elements a caller slots in. */
+    private panelItems;
+    /** Moves focus into the panel once it has become visible (it is `visibility: hidden` until the
+     * `show` class lands, and hidden elements can't take focus). */
+    private focusItem;
+    /** Enter/Space/ArrowDown open the panel and focus its first entry; ArrowUp its last. */
+    private onTitleKeyDown;
+    /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */
+    private onPanelKeyDown;
+    private onTitleClick;
+    /** A click anywhere inside the panel closes it, as in the source. */
+    private onPanelClick;
+    private onContentSlotChange;
+    private onIconSlotChange;
+    render(): lit.TemplateResult<1>;
+}
+
+interface DropdownToggleEventDetail {
+    open: boolean;
+}
+
+export { Dropdown, type DropdownToggleEventDetail };

package/dist/dropdown/index.js

@@ -0,0 +1,9 @@
+import {
+  Dropdown
+} from "../chunk-RMIJVTFS.js";
+import "../chunk-RHAOQ6K4.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  Dropdown
+};
+//# sourceMappingURL=index.js.map

package/dist/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

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

@@ -0,0 +1,38 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface FeatureSplitItem {
+    /** Iconify icon name, e.g. `mdi:check`. */
+    icon?: string;
+    title: string;
+    /** Markdown. */
+    description: string;
+}
+type FeatureSplitImagePosition = 'left' | 'right' | 'top';
+/** A title/markdown-subtitle/feature-list block beside (or under) an image. */
+declare class FeatureSplit extends LitElement {
+    static styles: lit.CSSResult;
+    inverted: boolean;
+    title: string;
+    /** Markdown. */
+    subtitle: string;
+    items: FeatureSplitItem[];
+    imageSrc: string;
+    imageAlt: string;
+    imagePosition: FeatureSplitImagePosition;
+    actionLabel: string;
+    href: string;
+    private onAction;
+    render(): lit.TemplateResult<1>;
+}
+
+interface FeatureSplitActionEventDetail {
+    href: string;
+}
+declare global {
+    interface HTMLElementEventMap {
+        'feature-split-action': CustomEvent<FeatureSplitActionEventDetail>;
+    }
+}
+
+export { FeatureSplit, type FeatureSplitActionEventDetail, type FeatureSplitImagePosition, type FeatureSplitItem };

package/dist/feature-split/index.js

@@ -0,0 +1,11 @@
+import {
+  FeatureSplit
+} from "../chunk-5REZSZCK.js";
+import "../chunk-3JU3R22O.js";
+import "../chunk-3VE6VFJ4.js";
+import "../chunk-RHAOQ6K4.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  FeatureSplit
+};
+//# sourceMappingURL=index.js.map

package/dist/feature-split/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

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

@@ -0,0 +1,50 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * One feature tile for `st-features-section`: optional icon, title, Markdown description and an
+ * optional "Learn more" link, rendered on an `st-card`. `icon` is an Iconify name (e.g.
+ * `mdi:rocket`). The link is a plain `<a>` (the source used react-router's `Link` for non-http
+ * hrefs; there is no Lit equivalent). The click is composed, so an SPA router can intercept it
+ * (e.g. via `event.composedPath()`) and navigate client-side; `http(s)` links open in a new tab.
+ */
+declare class FeatureItem extends LitElement {
+    static styles: lit.CSSResult;
+    /** Iconify icon name, e.g. `mdi:rocket`. */
+    icon: string;
+    title: string;
+    /** Markdown. */
+    description: string;
+    href: string;
+    actionLabel: string;
+    inverted: boolean;
+    render(): lit.TemplateResult<1>;
+}
+
+/** Data for one tile when using the `items` property (mirrors `st-feature-item`'s properties). */
+interface FeatureItemData {
+    icon?: string;
+    title: string;
+    description: string;
+    href?: string;
+}
+/**
+ * A titled grid of feature tiles. Ports `SankhyaUI`'s React `FeaturesSection`: tiles come from the
+ * `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.
+ */
+declare class FeaturesSection extends LitElement {
+    static styles: lit.CSSResult;
+    title: string;
+    subtitle: string;
+    /** Applied to every tile built from `items`. */
+    actionLabel: string;
+    columns: number;
+    inverted: boolean;
+    /** Tiles to render (property only). */
+    items: FeatureItemData[];
+    render(): lit.TemplateResult<1>;
+}
+
+export { FeatureItem, type FeatureItemData, FeaturesSection };