@sankhyatronics/sankhya-cms 0.0.0-stage → 0.0.9

package/dist/bento-grid/index.d.ts

@@ -0,0 +1,27 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface BentoGridItem {
+    title: string;
+    description?: string;
+    /** Iconify icon name, e.g. `mdi:home`. */
+    icon?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+    colSpan?: 1 | 2 | 3 | 4;
+    rowSpan?: 1 | 2;
+    /** Turns the card into a link. */
+    href?: string;
+}
+/** A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property. */
+declare class BentoGrid extends LitElement {
+    static styles: lit.CSSResult;
+    inverted: boolean;
+    title: string;
+    subtitle: string;
+    items: BentoGridItem[];
+    private renderCard;
+    render(): lit.TemplateResult<1>;
+}
+
+export { BentoGrid, type BentoGridItem };

package/dist/bento-grid/index.js

@@ -0,0 +1,10 @@
+import {
+  BentoGrid
+} from "../chunk-OEX5FDMR.js";
+import "../chunk-3VE6VFJ4.js";
+import "../chunk-RHAOQ6K4.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  BentoGrid
+};
+//# sourceMappingURL=index.js.map

package/dist/bento-grid/index.js.map

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

package/dist/card/index.d.ts

@@ -0,0 +1,20 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A surfaced container — content goes in the default slot. Ports `SankhyaUI`'s React `Card`
+ * (`variant`, `padding`, `elevation`, `hoverable`, `inverted`); `onClick` is just a native `click`
+ * listener on the element. `padding` takes `none | small | medium | large` (the source's
+ * `sm|md|lg`, spelled like `paddingScaleStyles`); `elevation` takes `none | sm | md | lg`.
+ */
+declare class Card extends LitElement {
+    static styles: lit.CSSResult;
+    variant: 'default' | 'bordered';
+    padding: 'none' | 'small' | 'medium' | 'large';
+    elevation: 'none' | 'sm' | 'md' | 'lg';
+    hoverable: boolean;
+    inverted: boolean;
+    render(): lit.TemplateResult<1>;
+}
+
+export { Card };

package/dist/card/index.js

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

package/dist/card/index.js.map

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

package/dist/carousel/index.d.ts

@@ -0,0 +1,44 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * Cycles through its slotted children, one visible at a time, with optional autoplay, arrows and
+ * dot indicators. The incoming slide slides in from the travel direction (CSS keyframes in place
+ * of the source's framer-motion spring). Autoplay pauses while hovered or focused and stops when
+ * the element is disconnected.
+ */
+declare class Carousel extends LitElement {
+    static styles: lit.CSSResult;
+    autoPlay: boolean;
+    /** Autoplay delay in milliseconds. */
+    interval: number;
+    showArrows: boolean;
+    showIndicators: boolean;
+    private index;
+    private count;
+    private paused;
+    private timer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private pause;
+    private resume;
+    private get slides();
+    private syncSlides;
+    private onSlotChange;
+    private stopTimer;
+    private restartTimer;
+    private go;
+    render(): lit.TemplateResult<1>;
+}
+
+interface CarouselChangeEventDetail {
+    index: number;
+}
+declare global {
+    interface HTMLElementEventMap {
+        'carousel-change': CustomEvent<CarouselChangeEventDetail>;
+    }
+}
+
+export { Carousel, type CarouselChangeEventDetail };

package/dist/carousel/index.js

@@ -0,0 +1,10 @@
+import {
+  Carousel
+} from "../chunk-XHBC23TV.js";
+import "../chunk-3VE6VFJ4.js";
+import "../chunk-RHAOQ6K4.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  Carousel
+};
+//# sourceMappingURL=index.js.map

package/dist/carousel/index.js.map

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

package/dist/chunk-23IHTBAB.js

@@ -0,0 +1,557 @@
+import {
+  chevronIcon,
+  closeIcon,
+  menuIcon
+} from "./chunk-3TCP25JG.js";
+import {
+  BREAKPOINT_TABLET,
+  buttonResetStyles,
+  controlBaseStyles,
+  dropdownPanelStyles,
+  rootFontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/header/Header.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var Header = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.brandImageUrl = "";
+    this.altText = "Logo";
+    this.logoHref = "";
+    this.logoTarget = "_self";
+    this.logoClassName = "";
+    this.inverted = false;
+    this.sticky = false;
+    this.languages = [];
+    this.currentLanguageCode = "";
+    this.languageMenuLabel = "Language";
+    this.mobileOpen = false;
+    this.compact = false;
+    this.languageMenuOpen = false;
+    this.hasUtility = false;
+    /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's
+     * own `inline` setting is left alone. */
+    this.inlinedDropdowns = /* @__PURE__ */ new Set();
+    /** While the hamburger layout is on, the dropdowns in the header open in the flow of the
+     * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */
+    this.syncInlineDropdowns = () => {
+      const collapsed = this.compact || !!this.narrowQuery?.matches;
+      const dropdowns = Array.from(this.querySelectorAll("st-dropdown"));
+      if (collapsed) {
+        for (const dropdown of dropdowns) {
+          if (dropdown.inline) continue;
+          dropdown.inline = true;
+          this.inlinedDropdowns.add(dropdown);
+        }
+      } else {
+        for (const dropdown of this.inlinedDropdowns) dropdown.inline = false;
+        this.inlinedDropdowns.clear();
+      }
+    };
+    this.onUtilitySlotChange = (event) => {
+      this.hasUtility = event.target.assignedElements({ flatten: true }).length > 0;
+      this.evaluateFit();
+    };
+    this.onMenuSlotChange = () => {
+      this.evaluateFit();
+      this.syncInlineDropdowns();
+    };
+    /** The bar width at which the menu last overflowed — the bar only expands again once it is
+     * clearly wider than this, so it can't flip back and forth right at the threshold. */
+    this.collapsedAtWidth = 0;
+    /** Collapses to the hamburger layout when the slotted menu overflows its row, and expands again
+     * once there is room. The collapsed layout hides the menu, so the room it needs can't be
+     * measured then; the width remembered when it collapsed stands in for it. */
+    this.evaluateFit = () => {
+      const width = this.clientWidth;
+      if (this.compact) {
+        if (width > this.collapsedAtWidth + 24) {
+          this.compact = false;
+          this.mobileOpen = false;
+          void this.updateComplete.then(this.evaluateFit);
+        }
+        return;
+      }
+      if (this.menuOverflows()) {
+        this.collapsedAtWidth = width;
+        this.compact = true;
+      }
+    };
+    this.closeOnEscape = (event) => {
+      if (this.mobileOpen && event.key === "Escape") this.mobileOpen = false;
+      if (this.languageMenuOpen && event.key === "Escape") this.languageMenuOpen = false;
+    };
+    this.closeLanguageMenuOnOutsideClick = (event) => {
+      if (this.languageMenuOpen && !event.composedPath().includes(this)) this.languageMenuOpen = false;
+    };
+  }
+  updated(changed) {
+    if (changed.has("compact")) this.syncInlineDropdowns();
+  }
+  /** Whether the visible menu items reach past the right edge of the menu row. Measured from the
+   * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:
+   * a closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would
+   * report overflow at any width. */
+  menuOverflows() {
+    const row = this.renderRoot.querySelector(".menu-row");
+    const slot = this.renderRoot.querySelector('slot[name="menu"]');
+    if (!row || !slot) return false;
+    const limit = row.getBoundingClientRect().right + 1;
+    let right = 0;
+    for (const el of slot.assignedElements({ flatten: true })) {
+      for (const box of [el, ...Array.from(el.children)]) {
+        const rect = box.getBoundingClientRect();
+        if (rect.width > 0) right = Math.max(right, rect.right);
+      }
+    }
+    return right > limit;
+  }
+  firstUpdated() {
+    this.resizeObserver = new ResizeObserver(this.evaluateFit);
+    this.resizeObserver.observe(this);
+    this.evaluateFit();
+    this.syncInlineDropdowns();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("keydown", this.closeOnEscape);
+    window.addEventListener("click", this.closeLanguageMenuOnOutsideClick);
+    this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);
+    this.narrowQuery.addEventListener("change", this.syncInlineDropdowns);
+    this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);
+    this.lightDomObserver.observe(this, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    this.lightDomObserver?.disconnect();
+    this.narrowQuery?.removeEventListener("change", this.syncInlineDropdowns);
+    this.resizeObserver?.disconnect();
+    window.removeEventListener("keydown", this.closeOnEscape);
+    window.removeEventListener("click", this.closeLanguageMenuOnOutsideClick);
+    super.disconnectedCallback();
+  }
+  renderLanguageMenu() {
+    if (this.languages.length < 2) return nothing;
+    const current = this.languages.find((lang) => lang.code === this.currentLanguageCode);
+    return html`
+      <div class="lang-menu" part="language-menu">
+        <button
+          part="language-menu-trigger"
+          type="button"
+          class="lang-trigger"
+          aria-label=${this.languageMenuLabel}
+          aria-expanded=${this.languageMenuOpen}
+          @click=${(event) => {
+      event.stopPropagation();
+      this.languageMenuOpen = !this.languageMenuOpen;
+    }}
+        >
+          <span part="language-menu-current">${current?.label ?? this.languageMenuLabel}</span>
+          ${chevronIcon("down", 10)}
+        </button>
+        ${this.languageMenuOpen ? html`
+              <div part="language-dropdown" class="lang-dropdown">
+                ${this.languages.map(
+      (lang) => html`
+                    <button
+                      part="language-option"
+                      type="button"
+                      class="lang-option ${lang.code === this.currentLanguageCode ? "active" : ""}"
+                      aria-current=${lang.code === this.currentLanguageCode}
+                      @click=${() => this.onLanguageSelect(lang.code)}
+                    >
+                      ${lang.label}
+                    </button>
+                  `
+    )}
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+  onLanguageSelect(code) {
+    this.languageMenuOpen = false;
+    if (code === this.currentLanguageCode) return;
+    this.dispatchEvent(new CustomEvent("language-change", { detail: { code }, bubbles: true, composed: true }));
+  }
+  renderBrand() {
+    const content = html`
+      ${this.brandImageUrl ? html`<img part="brand-mark" class="brand-mark" src=${this.brandImageUrl} alt=${this.altText} /> ` : nothing}
+      <span part="brand-title" class="brand-title">${this.title}</span>
+    `;
+    return this.logoHref ? html`<a part="brand" class="brand ${this.logoClassName}" href=${this.logoHref} target=${this.logoTarget}>${content}</a>` : html`<div part="brand" class="brand ${this.logoClassName}">${content}</div>`;
+  }
+  render() {
+    return html`
+      ${this.renderBrand()}
+
+      <div class="mobile-panel" part="mobile-panel" @click=${() => this.mobileOpen = false}>
+        <div class="menu-row" part="menu-row"><slot name="menu" @slotchange=${this.onMenuSlotChange}></slot></div>
+        <div class="utility-row ${this.hasUtility || this.languages.length >= 2 ? "" : "empty"}" part="utility-row">
+          ${this.renderLanguageMenu()}<slot name="utility" @slotchange=${this.onUtilitySlotChange}></slot>
+        </div>
+      </div>
+
+      <button
+        part="toggle"
+        type="button"
+        class="toggle"
+        aria-label=${this.mobileOpen ? "Close menu" : "Open menu"}
+        aria-expanded=${this.mobileOpen}
+        @click=${() => this.mobileOpen = !this.mobileOpen}
+      >
+        ${this.mobileOpen ? closeIcon() : menuIcon()}
+      </button>
+    `;
+  }
+};
+Header.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: flex;
+      align-items: center;
+      /* Spacing between brand, menu and utility controls is the rows' own margins (SankhyaUI's
+         layout), not a flex gap. */
+      gap: 0;
+      /* !important on the box-model properties only: a shadow host's own :host rule always loses
+       * to ANY rule the consuming page has for the same property on that element, regardless of
+       * specificity (see st-footer's own padding/border-top for the same fix). Without
+       * box-sizing: border-box pinned here, a page that also sets its own padding on this host
+       * (e.g. a p-2 utility class) adds that padding on TOP of the fixed 64px height instead of
+       * being absorbed inside it — which is exactly what happens in Template Hub, the one app that
+       * doesn't load Tailwind Preflight (Preflight's own box-sizing: border-box reset is what
+       * silently keeps every other app's header at the intended 64px). */
+      box-sizing: border-box !important;
+      padding: 0 2rem !important;
+      height: 64px !important;
+      background: var(--st-color-surface);
+      border-bottom: 1px solid var(--st-color-border) !important;
+      ${rootFontFamilyStyles}
+      color: var(--st-color-text-strong);
+    }
+
+    :host([sticky]) {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    :host([inverted]) {
+      background: var(--st-color-text-strong);
+      color: var(--st-color-on-solid);
+      border-bottom-color: transparent;
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: var(--st-space-10);
+      flex: none;
+      text-decoration: none;
+      color: inherit;
+    }
+
+    .brand-mark {
+      width: var(--st-size-28);
+      height: var(--st-size-28);
+      border-radius: var(--st-radius-sm);
+      flex: none;
+      object-fit: contain;
+    }
+
+    .brand-title {
+      font-size: var(--st-text-xl);
+      font-weight: var(--st-font-weight-bold);
+      letter-spacing: var(--st-tracking-tight);
+      white-space: nowrap;
+    }
+
+    /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's
+       own flex children. Mobile (see below) turns this into the actual overlay box. */
+    .mobile-panel {
+      display: contents;
+    }
+
+    /* Desktop layout from SankhyaUI's Header: the menu starts 4rem after the brand and takes the
+       free width; the utility controls sit after a vertical divider. Between 901px and 1200px the
+       gaps tighten so the menu still fits down to the 900px hamburger breakpoint. */
+    .menu-row {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+      min-width: 0;
+      margin-left: 4rem;
+    }
+
+    .utility-row {
+      flex: none;
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin-left: 1.5rem;
+      padding-left: 1.5rem;
+      border-left: 1px solid var(--st-color-border);
+    }
+
+    :host([inverted]) .utility-row {
+      border-left-color: currentColor;
+    }
+
+    .utility-row.empty {
+      display: none;
+    }
+
+    @media (max-width: 1200px) {
+      :host {
+        padding: 0 1rem !important;
+      }
+
+      .menu-row {
+        margin-left: 0.5rem;
+      }
+
+      .utility-row {
+        margin-left: 0.5rem;
+        padding-left: 0.5rem;
+      }
+    }
+
+    @keyframes st-header-fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    .toggle {
+      display: none;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      position: relative;
+      z-index: 1002;
+      width: var(--st-size-32);
+      height: var(--st-size-32);
+      margin-left: auto;
+      padding: 0.5rem;
+      border: 0;
+      border-radius: var(--st-radius-sm);
+      background: transparent;
+      color: var(--st-color-text-strong);
+      cursor: pointer;
+    }
+
+    .toggle:hover {
+      background: var(--st-color-hover);
+    }
+
+    .lang-menu {
+      position: relative;
+      flex: none;
+    }
+
+    .lang-trigger {
+      ${buttonResetStyles}
+      display: flex;
+      align-items: center;
+      gap: var(--st-space-4);
+      height: var(--st-size-32);
+      padding: 0 var(--st-space-8);
+      border-radius: var(--st-radius-sm);
+      font-size: var(--st-text-base);
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-muted);
+    }
+
+    .lang-trigger:hover {
+      background: var(--st-color-hover);
+      color: var(--st-color-text-strong);
+    }
+
+    .lang-dropdown {
+      ${dropdownPanelStyles}
+      min-width: 140px;
+    }
+
+    .lang-option {
+      ${buttonResetStyles}
+      display: block;
+      width: 100%;
+      padding: var(--st-space-10) var(--st-space-14);
+      font-size: var(--st-text-base);
+      font-weight: var(--st-font-weight-semibold);
+      text-align: left;
+      color: inherit;
+    }
+
+    .lang-option:hover {
+      background: var(--st-color-hover);
+    }
+
+    .lang-option.active {
+      color: var(--st-color-accent-text);
+    }
+
+    /* Hamburger layout from SankhyaUI's Header: a full-screen layer under the toggle, menu above
+       the utility controls, the menu's dropdowns opening in the flow (see syncInlineDropdowns). */
+    @media (max-width: ${BREAKPOINT_TABLET}px) {
+      :host {
+        padding: 0 1rem !important;
+      }
+
+      .mobile-panel {
+        display: none;
+      }
+
+      .toggle {
+        display: inline-flex;
+      }
+
+      :host([mobile-open]) .mobile-panel {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+        position: fixed;
+        inset: 0;
+        background: var(--st-color-surface);
+        padding: 5rem 1.5rem 2rem;
+        overflow-y: auto;
+        z-index: 1001;
+        animation: st-header-fade-in 0.3s ease;
+      }
+
+      :host([mobile-open]) .menu-row,
+      :host([mobile-open]) .utility-row {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1.5rem;
+        margin-left: 0;
+      }
+
+      :host([mobile-open]) .utility-row {
+        padding: 1.5rem 0 0;
+        border-left: 0;
+        border-top: 1px solid var(--st-color-border);
+      }
+
+      /* Apps usually slot one flex-row wrapper per slot; stack its items as the source does. */
+      :host([mobile-open]) ::slotted([slot='menu']),
+      :host([mobile-open]) ::slotted([slot='utility']) {
+        flex-direction: column !important;
+        align-items: stretch !important;
+        margin: 0 !important;
+      }
+    }
+
+    /* The same collapsed layout, switched on by script when the menu no longer fits the bar at
+       desktop width (see evaluateFit) — without it the menu spills over the utility controls. */
+    :host([compact]) .mobile-panel {
+      display: none;
+    }
+
+    :host([compact]) .toggle {
+      display: inline-flex;
+    }
+
+    :host([compact][mobile-open]) .mobile-panel {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+      position: fixed;
+      inset: 0;
+      background: var(--st-color-surface);
+      padding: 5rem 1.5rem 2rem;
+      overflow-y: auto;
+      z-index: 1001;
+      animation: st-header-fade-in 0.3s ease;
+    }
+
+    :host([compact][mobile-open]) .menu-row,
+    :host([compact][mobile-open]) .utility-row {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 1.5rem;
+      margin-left: 0;
+    }
+
+    :host([compact][mobile-open]) .utility-row {
+      padding: 1.5rem 0 0;
+      border-left: 0;
+      border-top: 1px solid var(--st-color-border);
+    }
+
+    :host([compact][mobile-open]) ::slotted([slot='menu']),
+    :host([compact][mobile-open]) ::slotted([slot='utility']) {
+      flex-direction: column !important;
+      align-items: stretch !important;
+      margin: 0 !important;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .mobile-panel {
+        animation: none !important;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Header.prototype, "title", 2);
+__decorateClass([
+  property({ type: String, attribute: "brand-image-url" })
+], Header.prototype, "brandImageUrl", 2);
+__decorateClass([
+  property({ type: String, attribute: "alt-text" })
+], Header.prototype, "altText", 2);
+__decorateClass([
+  property({ type: String })
+], Header.prototype, "logoHref", 2);
+__decorateClass([
+  property({ type: String, attribute: "logo-target" })
+], Header.prototype, "logoTarget", 2);
+__decorateClass([
+  property({ type: String, attribute: "logo-class-name" })
+], Header.prototype, "logoClassName", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Header.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Header.prototype, "sticky", 2);
+__decorateClass([
+  property({ attribute: false })
+], Header.prototype, "languages", 2);
+__decorateClass([
+  property({ type: String, attribute: "current-language-code" })
+], Header.prototype, "currentLanguageCode", 2);
+__decorateClass([
+  property({ type: String, attribute: "language-menu-label" })
+], Header.prototype, "languageMenuLabel", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "mobile-open" })
+], Header.prototype, "mobileOpen", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Header.prototype, "compact", 2);
+__decorateClass([
+  state()
+], Header.prototype, "languageMenuOpen", 2);
+__decorateClass([
+  state()
+], Header.prototype, "hasUtility", 2);
+Header = __decorateClass([
+  customElement("st-header")
+], Header);
+
+export {
+  Header
+};
+//# sourceMappingURL=chunk-23IHTBAB.js.map