@sankhyatronics/sankhya-cms 0.0.0-stage → 0.0.9

package/dist/chunk-LHU23TF6.js

@@ -0,0 +1,273 @@
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/menu-item/MenuItem.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var MenuItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.href = "";
+    this.description = "";
+    this.badge = "";
+    this.active = false;
+    this.compact = false;
+    this.showDescription = true;
+    this.target = "_self";
+    this.hasIcon = false;
+    this.onIconSlotChange = (event) => {
+      this.hasIcon = event.target.assignedNodes({ flatten: true }).length > 0;
+    };
+    this.onClick = (event) => {
+      const selectEvent = new CustomEvent("menu-item-select", {
+        detail: { href: this.href },
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      });
+      this.dispatchEvent(selectEvent);
+      if (selectEvent.defaultPrevented) event.preventDefault();
+    };
+  }
+  render() {
+    const showDescription = !!this.description && this.showDescription;
+    const classes = ["menu-item", this.active ? "active" : "", this.compact ? "compact" : "", showDescription ? "" : "no-description"].filter(Boolean).join(" ");
+    return html`
+      <a part="item" class=${classes} href=${this.href} target=${this.target} @click=${this.onClick}>
+        <span class="menu-item-icon" part="icon" ?hidden=${!this.hasIcon}><slot name="icon" @slotchange=${this.onIconSlotChange}></slot></span>
+        <span class="menu-item-content" part="content">
+          <span class="menu-item-header" part="header">
+            <span part="title" class="menu-item-title">${this.title}</span>
+            ${this.badge ? html`<span part="badge" class="menu-item-badge">${this.badge}</span>` : nothing}
+          </span>
+          ${showDescription ? html`<p part="description" class="menu-item-description">${this.description}</p>` : nothing}
+        </span>
+      </a>
+    `;
+  }
+};
+/** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */
+MenuItem.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+MenuItem.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      ${fontFamilyStyles}
+    }
+
+    @keyframes st-menu-item-badge-pop {
+      from {
+        transform: scale(0);
+      }
+      70% {
+        transform: scale(1.12);
+      }
+      to {
+        transform: scale(1);
+      }
+    }
+
+    @keyframes st-menu-item-fade-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    .menu-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 12px 16px;
+      font-size: 0.875rem;
+      text-decoration: none;
+      color: var(--st-color-text);
+      border-radius: 6px;
+      /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits
+         from a dropdown panel kept it unfocusable for a frame after the panel opened. */
+      transition-property: background-color, color, padding, transform, border-color;
+      transition-duration: 0.15s;
+      transition-timing-function: ease;
+      box-sizing: border-box;
+    }
+
+    /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would
+       spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.
+       Keyboard focus gets the same treatment as hover. */
+    .menu-item:hover,
+    .menu-item:focus-visible {
+      background: var(--st-color-hover);
+      color: var(--st-color-text-strong);
+      padding-left: 20px;
+      transition-duration: 0.1s;
+    }
+
+    .menu-item.compact:hover,
+    .menu-item.compact:focus-visible {
+      padding-left: 16px;
+    }
+
+    .menu-item:active {
+      transform: scale(0.99);
+      transition-duration: 0.1s;
+    }
+
+    .menu-item.active {
+      background-color: var(--st-color-accent-subtle);
+      color: var(--st-color-accent-text);
+      border-left: 4px solid var(--st-color-accent);
+    }
+
+    .menu-item-icon {
+      display: flex;
+      flex-shrink: 0;
+      margin-top: 2px;
+      transition: transform 0.2s ease;
+    }
+
+    .menu-item-icon:hover {
+      transform: rotate(5deg);
+    }
+
+    .menu-item-icon[hidden] {
+      display: none;
+    }
+
+    .menu-item-icon ::slotted(*) {
+      width: 16px;
+      height: 16px;
+    }
+
+    .menu-item-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .menu-item-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+
+    .menu-item-title {
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .menu-item-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 20px;
+      height: 20px;
+      padding: 0 6px;
+      font-size: 0.75rem;
+      font-weight: 500;
+      border-radius: 9999px;
+      flex-shrink: 0;
+      background: var(--st-color-accent-subtle);
+      color: var(--st-color-accent-text);
+      animation: st-menu-item-badge-pop 0.35s ease-out;
+    }
+
+    .menu-item-description {
+      display: -webkit-box;
+      margin: 4px 0 0;
+      font-size: 0.75rem;
+      color: var(--st-color-text-muted);
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      line-height: 1.4;
+      animation: st-menu-item-fade-in 0.2s ease;
+    }
+
+    .menu-item.compact {
+      padding: 8px 12px;
+      gap: 8px;
+    }
+
+    .menu-item.compact .menu-item-icon ::slotted(*) {
+      width: 14px;
+      height: 14px;
+    }
+
+    .menu-item.compact .menu-item-title {
+      font-size: 0.75rem;
+    }
+
+    .menu-item.compact .menu-item-description {
+      font-size: 0.75rem;
+    }
+
+    .menu-item.no-description {
+      align-items: center;
+    }
+
+    .menu-item.no-description .menu-item-icon {
+      margin-top: 0;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .menu-item,
+      .menu-item-icon {
+        transition: none;
+      }
+
+      .menu-item:active,
+      .menu-item-icon:hover {
+        transform: none;
+      }
+
+      .menu-item-badge,
+      .menu-item-description {
+        animation: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "href", 2);
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "description", 2);
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "badge", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuItem.prototype, "compact", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-description" })
+], MenuItem.prototype, "showDescription", 2);
+__decorateClass([
+  property({ type: String })
+], MenuItem.prototype, "target", 2);
+__decorateClass([
+  state()
+], MenuItem.prototype, "hasIcon", 2);
+MenuItem = __decorateClass([
+  customElement("st-menu-item")
+], MenuItem);
+
+export {
+  MenuItem
+};
+//# sourceMappingURL=chunk-LHU23TF6.js.map

package/dist/chunk-LHU23TF6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-item/MenuItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { MenuItemSelectEventDetail } from './MenuItemEvents';\r\n\r\n/**\r\n * A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\r\n * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\r\n * port of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\r\n * markup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\r\n * hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\r\n * in. Colors come from the suite theme rather than per-item utility classes.\r\n *\r\n * Renders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\r\n * before navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\r\n * source used react-router's `Link` here; the suite apps have no router).\r\n */\r\n@customElement('st-menu-item')\r\nexport class MenuItem extends LitElement {\r\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\r\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\r\n\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    @keyframes st-menu-item-badge-pop {\r\n      from {\r\n        transform: scale(0);\r\n      }\r\n      70% {\r\n        transform: scale(1.12);\r\n      }\r\n      to {\r\n        transform: scale(1);\r\n      }\r\n    }\r\n\r\n    @keyframes st-menu-item-fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    .menu-item {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 12px;\r\n      padding: 12px 16px;\r\n      font-size: 0.875rem;\r\n      text-decoration: none;\r\n      color: var(--st-color-text);\r\n      border-radius: 6px;\r\n      /* The source's 'all 0.15s', minus visibility: animating the visibility this link inherits\r\n         from a dropdown panel kept it unfocusable for a frame after the panel opened. */\r\n      transition-property: background-color, color, padding, transform, border-color;\r\n      transition-duration: 0.15s;\r\n      transition-timing-function: ease;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    /* The source's hover nudge (x: 4px) is done with padding, not a transform: a transform would\r\n       spill past a scrolling panel's edge (st-source-bar's menus) and show a horizontal scrollbar.\r\n       Keyboard focus gets the same treatment as hover. */\r\n    .menu-item:hover,\r\n    .menu-item:focus-visible {\r\n      background: var(--st-color-hover);\r\n      color: var(--st-color-text-strong);\r\n      padding-left: 20px;\r\n      transition-duration: 0.1s;\r\n    }\r\n\r\n    .menu-item.compact:hover,\r\n    .menu-item.compact:focus-visible {\r\n      padding-left: 16px;\r\n    }\r\n\r\n    .menu-item:active {\r\n      transform: scale(0.99);\r\n      transition-duration: 0.1s;\r\n    }\r\n\r\n    .menu-item.active {\r\n      background-color: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n      border-left: 4px solid var(--st-color-accent);\r\n    }\r\n\r\n    .menu-item-icon {\r\n      display: flex;\r\n      flex-shrink: 0;\r\n      margin-top: 2px;\r\n      transition: transform 0.2s ease;\r\n    }\r\n\r\n    .menu-item-icon:hover {\r\n      transform: rotate(5deg);\r\n    }\r\n\r\n    .menu-item-icon[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    .menu-item-icon ::slotted(*) {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n\r\n    .menu-item-content {\r\n      flex: 1;\r\n      min-width: 0;\r\n    }\r\n\r\n    .menu-item-header {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-item-title {\r\n      font-weight: 500;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .menu-item-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 20px;\r\n      height: 20px;\r\n      padding: 0 6px;\r\n      font-size: 0.75rem;\r\n      font-weight: 500;\r\n      border-radius: 9999px;\r\n      flex-shrink: 0;\r\n      background: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n      animation: st-menu-item-badge-pop 0.35s ease-out;\r\n    }\r\n\r\n    .menu-item-description {\r\n      display: -webkit-box;\r\n      margin: 4px 0 0;\r\n      font-size: 0.75rem;\r\n      color: var(--st-color-text-muted);\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-height: 1.4;\r\n      animation: st-menu-item-fade-in 0.2s ease;\r\n    }\r\n\r\n    .menu-item.compact {\r\n      padding: 8px 12px;\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-icon ::slotted(*) {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-title {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-item.compact .menu-item-description {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-item.no-description {\r\n      align-items: center;\r\n    }\r\n\r\n    .menu-item.no-description .menu-item-icon {\r\n      margin-top: 0;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .menu-item,\r\n      .menu-item-icon {\r\n        transition: none;\r\n      }\r\n\r\n      .menu-item:active,\r\n      .menu-item-icon:hover {\r\n        transform: none;\r\n      }\r\n\r\n      .menu-item-badge,\r\n      .menu-item-description {\r\n        animation: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  @property({ type: String })\r\n  description = '';\r\n\r\n  /** Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none. */\r\n  @property({ type: String })\r\n  badge = '';\r\n\r\n  /** Highlights this row as the current page (source: `isActive`). */\r\n  @property({ type: Boolean, reflect: true })\r\n  active = false;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  compact = false;\r\n\r\n  /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\r\n  @property({ type: Boolean, attribute: 'show-description' })\r\n  showDescription = true;\r\n\r\n  /** `target` for the `<a>` (source default `_self`). */\r\n  @property({ type: String })\r\n  target = '_self';\r\n\r\n  /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\r\n  @state() private hasIcon = false;\r\n\r\n  private onIconSlotChange = (event: Event): void => {\r\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  private onClick = (event: MouseEvent): void => {\r\n    const selectEvent = new CustomEvent<MenuItemSelectEventDetail>('menu-item-select', {\r\n      detail: { href: this.href },\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: true\r\n    });\r\n    this.dispatchEvent(selectEvent);\r\n    if (selectEvent.defaultPrevented) event.preventDefault();\r\n  };\r\n\r\n  render() {\r\n    const showDescription = !!this.description && this.showDescription;\r\n    const classes = ['menu-item', this.active ? 'active' : '', this.compact ? 'compact' : '', showDescription ? '' : 'no-description']\r\n      .filter(Boolean)\r\n      .join(' ');\r\n    return html`\r\n      <a part=\"item\" class=${classes} href=${this.href} target=${this.target} @click=${this.onClick}>\r\n        <span class=\"menu-item-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\r\n        <span class=\"menu-item-content\" part=\"content\">\r\n          <span class=\"menu-item-header\" part=\"header\">\r\n            <span part=\"title\" class=\"menu-item-title\">${this.title}</span>\r\n            ${this.badge ? html`<span part=\"badge\" class=\"menu-item-badge\">${this.badge}</span>` : nothing}\r\n          </span>\r\n          ${showDescription ? html`<p part=\"description\" class=\"menu-item-description\">${this.description}</p>` : nothing}\r\n        </span>\r\n      </a>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-OEX5FDMR.js

@@ -0,0 +1,250 @@
+import {
+  cardTitleStyles,
+  iconTileStyles,
+  invertedSectionTextStyles,
+  reducedMotionStyles,
+  sectionHeaderStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/bento-grid/BentoGrid.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "iconify-icon";
+var BentoGrid = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.inverted = false;
+    this.title = "";
+    this.subtitle = "";
+    this.items = [];
+  }
+  renderCard(item) {
+    const classes = `card col-${item.colSpan ?? 1} row-${item.rowSpan ?? 1} ${item.imageSrc ? "has-image" : ""}`;
+    const body = html`
+      ${item.imageSrc ? html`<div class="image-wrapper" part="image-wrapper">
+            <img class="image" part="image" src=${item.imageSrc} alt=${item.imageAlt ?? item.title} />
+          </div>` : nothing}
+      <div class="content" part="content">
+        ${item.icon ? html`<div class="icon" part="icon"><iconify-icon icon=${item.icon}></iconify-icon></div>` : nothing}
+        <div class="text">
+          <h3 class="card-title" part="card-title">${item.title}</h3>
+          ${item.description ? html`<p class="card-description" part="card-description">${item.description}</p>` : nothing}
+        </div>
+      </div>
+    `;
+    return item.href ? html`<a part="card" class=${classes} href=${item.href}>${body}</a>` : html`<div part="card" class=${classes}>${body}</div>`;
+  }
+  render() {
+    return html`
+      <div class="container" part="container">
+        ${this.title || this.subtitle ? html`<div class="header" part="header">
+              ${this.title ? html`<h2 class="title" part="title">${this.title}</h2>` : nothing}
+              ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+            </div>` : nothing}
+        <div class="grid" part="grid">${this.items.map((item) => this.renderCard(item))}</div>
+      </div>
+    `;
+  }
+};
+BentoGrid.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      padding: var(--st-cms-section-padding) var(--st-space-24);
+      background: var(--st-color-page);
+      ${fontFamilyStyles}
+    }
+
+    :host([inverted]) {
+      background: var(--st-color-text-strong);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+    }
+
+    .header {
+      ${sectionHeaderStyles}
+    }
+
+    .title {
+      ${sectionTitleStyles}
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      margin-bottom: 0;
+    }
+
+    ${invertedSectionTextStyles}
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-auto-rows: minmax(240px, auto);
+      gap: var(--st-space-24);
+    }
+
+    .card {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-space-24);
+      background: var(--st-color-surface);
+      color: inherit;
+      text-decoration: none;
+      transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+    }
+
+    :host([inverted]) .card {
+      background: var(--st-color-text-strong);
+      border-color: var(--st-color-text);
+    }
+
+    .card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 24px -10px var(--st-shadow-color-lg);
+      z-index: 1;
+    }
+
+    .image-wrapper {
+      position: absolute;
+      inset: 0;
+    }
+
+    .image-wrapper::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(to bottom, transparent 0%, var(--st-shadow-color-xl) 100%);
+    }
+
+    .image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.5s ease;
+    }
+
+    .card:hover .image {
+      transform: scale(1.05);
+    }
+
+    .content {
+      position: relative;
+      z-index: 1;
+      margin-top: auto;
+      padding: var(--st-space-24);
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-16);
+    }
+
+    .icon {
+      ${iconTileStyles}
+      width: var(--st-size-40);
+      height: var(--st-size-40);
+      font-size: 24px;
+    }
+
+    .text {
+      padding: var(--st-space-16);
+      border-radius: var(--st-radius-md);
+    }
+
+    .card-title {
+      ${cardTitleStyles}
+      font-size: var(--st-text-lg);
+    }
+
+    .card-description {
+      margin: 0;
+      font-size: var(--st-text-md);
+      color: var(--st-color-text-muted);
+    }
+
+    :host([inverted]) .card-title {
+      color: var(--st-color-on-solid);
+    }
+
+    :host([inverted]) .card-description {
+      color: var(--st-color-border);
+    }
+
+    .card.has-image .card-title,
+    .card.has-image .card-description {
+      color: var(--st-color-on-solid);
+    }
+
+    .card.has-image .icon {
+      background: var(--st-shadow-color-lg);
+      color: var(--st-color-on-solid);
+      backdrop-filter: blur(4px);
+    }
+
+    .col-1 { grid-column: span 1; }
+    .col-2 { grid-column: span 2; }
+    .col-3 { grid-column: span 3; }
+    .col-4 { grid-column: span 4; }
+    .row-1 { grid-row: span 1; }
+    .row-2 { grid-row: span 2; }
+
+    @media (max-width: 1024px) {
+      .grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      .col-3,
+      .col-4 {
+        grid-column: span 2;
+      }
+    }
+
+    @media (max-width: 640px) {
+      .grid {
+        grid-template-columns: 1fr;
+      }
+      .col-1,
+      .col-2,
+      .col-3,
+      .col-4 {
+        grid-column: span 1;
+      }
+    }
+
+    ${reducedMotionStyles}
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], BentoGrid.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: String })
+], BentoGrid.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], BentoGrid.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], BentoGrid.prototype, "items", 2);
+BentoGrid = __decorateClass([
+  customElement("st-bento-grid")
+], BentoGrid);
+
+export {
+  BentoGrid
+};
+//# sourceMappingURL=chunk-OEX5FDMR.js.map

package/dist/chunk-OEX5FDMR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/bento-grid/BentoGrid.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, fontFamilyStyles } from '../shared/styles';\r\nimport {\r\n  cardTitleStyles,\r\n  iconTileStyles,\r\n  reducedMotionStyles,\r\n  sectionHeaderStyles,\r\n  sectionSubtitleStyles,\r\n  sectionTitleStyles, invertedSectionTextStyles } from '../shared/section-styles';\r\n\r\nexport interface BentoGridItem {\r\n  title: string;\r\n  description?: string;\r\n  /** Iconify icon name, e.g. `mdi:home`. */\r\n  icon?: string;\r\n  imageSrc?: string;\r\n  imageAlt?: string;\r\n  colSpan?: 1 | 2 | 3 | 4;\r\n  rowSpan?: 1 | 2;\r\n  /** Turns the card into a link. */\r\n  href?: string;\r\n}\r\n\r\n/** A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property. */\r\n@customElement('st-bento-grid')\r\nexport class BentoGrid 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    :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    }\r\n\r\n    .subtitle {\r\n      ${sectionSubtitleStyles}\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    ${invertedSectionTextStyles}\r\n\r\n    .grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      grid-auto-rows: minmax(240px, auto);\r\n      gap: var(--st-space-24);\r\n    }\r\n\r\n    .card {\r\n      position: relative;\r\n      display: flex;\r\n      flex-direction: column;\r\n      overflow: hidden;\r\n      border: 1px solid var(--st-color-border);\r\n      border-radius: var(--st-space-24);\r\n      background: var(--st-color-surface);\r\n      color: inherit;\r\n      text-decoration: none;\r\n      transition:\r\n        transform 0.3s ease,\r\n        box-shadow 0.3s ease;\r\n    }\r\n\r\n    :host([inverted]) .card {\r\n      background: var(--st-color-text-strong);\r\n      border-color: var(--st-color-text);\r\n    }\r\n\r\n    .card:hover {\r\n      transform: translateY(-4px);\r\n      box-shadow: 0 12px 24px -10px var(--st-shadow-color-lg);\r\n      z-index: 1;\r\n    }\r\n\r\n    .image-wrapper {\r\n      position: absolute;\r\n      inset: 0;\r\n    }\r\n\r\n    .image-wrapper::after {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 0;\r\n      background: linear-gradient(to bottom, transparent 0%, var(--st-shadow-color-xl) 100%);\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    .card:hover .image {\r\n      transform: scale(1.05);\r\n    }\r\n\r\n    .content {\r\n      position: relative;\r\n      z-index: 1;\r\n      margin-top: auto;\r\n      padding: var(--st-space-24);\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-16);\r\n    }\r\n\r\n    .icon {\r\n      ${iconTileStyles}\r\n      width: var(--st-size-40);\r\n      height: var(--st-size-40);\r\n      font-size: 24px;\r\n    }\r\n\r\n    .text {\r\n      padding: var(--st-space-16);\r\n      border-radius: var(--st-radius-md);\r\n    }\r\n\r\n    .card-title {\r\n      ${cardTitleStyles}\r\n      font-size: var(--st-text-lg);\r\n    }\r\n\r\n    .card-description {\r\n      margin: 0;\r\n      font-size: var(--st-text-md);\r\n      color: var(--st-color-text-muted);\r\n    }\r\n\r\n    :host([inverted]) .card-title {\r\n      color: var(--st-color-on-solid);\r\n    }\r\n\r\n    :host([inverted]) .card-description {\r\n      color: var(--st-color-border);\r\n    }\r\n\r\n    .card.has-image .card-title,\r\n    .card.has-image .card-description {\r\n      color: var(--st-color-on-solid);\r\n    }\r\n\r\n    .card.has-image .icon {\r\n      background: var(--st-shadow-color-lg);\r\n      color: var(--st-color-on-solid);\r\n      backdrop-filter: blur(4px);\r\n    }\r\n\r\n    .col-1 { grid-column: span 1; }\r\n    .col-2 { grid-column: span 2; }\r\n    .col-3 { grid-column: span 3; }\r\n    .col-4 { grid-column: span 4; }\r\n    .row-1 { grid-row: span 1; }\r\n    .row-2 { grid-row: span 2; }\r\n\r\n    @media (max-width: 1024px) {\r\n      .grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n      .col-3,\r\n      .col-4 {\r\n        grid-column: span 2;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n      .grid {\r\n        grid-template-columns: 1fr;\r\n      }\r\n      .col-1,\r\n      .col-2,\r\n      .col-3,\r\n      .col-4 {\r\n        grid-column: span 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  @property({ type: String })\r\n  subtitle = '';\r\n\r\n  @property({ attribute: false })\r\n  items: BentoGridItem[] = [];\r\n\r\n  private renderCard(item: BentoGridItem) {\r\n    const classes = `card col-${item.colSpan ?? 1} row-${item.rowSpan ?? 1} ${item.imageSrc ? 'has-image' : ''}`;\r\n    const body = html`\r\n      ${item.imageSrc\r\n        ? html`<div class=\"image-wrapper\" part=\"image-wrapper\">\r\n            <img class=\"image\" part=\"image\" src=${item.imageSrc} alt=${item.imageAlt ?? item.title} />\r\n          </div>`\r\n        : nothing}\r\n      <div class=\"content\" part=\"content\">\r\n        ${item.icon ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>` : nothing}\r\n        <div class=\"text\">\r\n          <h3 class=\"card-title\" part=\"card-title\">${item.title}</h3>\r\n          ${item.description ? html`<p class=\"card-description\" part=\"card-description\">${item.description}</p>` : nothing}\r\n        </div>\r\n      </div>\r\n    `;\r\n    return item.href\r\n      ? html`<a part=\"card\" class=${classes} href=${item.href}>${body}</a>`\r\n      : html`<div part=\"card\" class=${classes}>${body}</div>`;\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=\"grid\" part=\"grid\">${this.items.map((item) => this.renderCard(item))}</div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}