@sankhyatronics/sankhya-cms 0.0.0-stage → 0.1.0

package/dist/chunk-4HKSA5UT.js

@@ -0,0 +1,312 @@
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/menu-grid-item/MenuGridItem.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var MenuGridItem = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.description = "";
+    this.href = "";
+    this.badge = "";
+    this.compact = false;
+    this.showDescription = true;
+    this.hasIcon = false;
+    this.pending = true;
+    this.onIconSlotChange = (event) => {
+      this.hasIcon = event.target.assignedNodes({ flatten: true }).length > 0;
+    };
+    this.onClick = (event) => {
+      if (this.isExternal) return;
+      const selectEvent = new CustomEvent("menu-grid-item-select", {
+        detail: { href: this.href },
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      });
+      this.dispatchEvent(selectEvent);
+      if (selectEvent.defaultPrevented) event.preventDefault();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof IntersectionObserver === "undefined") {
+      this.pending = false;
+      return;
+    }
+    this.observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        this.pending = false;
+        this.observer?.disconnect();
+      }
+    });
+    this.observer.observe(this);
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+    super.disconnectedCallback();
+  }
+  get isExternal() {
+    return this.href.startsWith("http");
+  }
+  render() {
+    const iconOnly = this.hasIcon && !this.title;
+    return html`
+      <div class="menu-grid-item ${this.compact ? "compact" : "regular"} ${this.pending ? "pending" : ""}" part="item">
+        <a
+          part="link"
+          class="menu-grid-link"
+          href=${this.href}
+          target=${this.isExternal ? "_blank" : "_self"}
+          rel=${this.isExternal ? "noopener noreferrer" : nothing}
+          @click=${this.onClick}
+        >
+          ${this.badge ? html`<span part="badge" class="menu-grid-badge">${this.badge}</span>` : nothing}
+          <span class="menu-grid-header ${iconOnly ? "icon-only" : ""}" part="header">
+            <span class="menu-grid-icon" part="icon" ?hidden=${!this.hasIcon}><slot name="icon" @slotchange=${this.onIconSlotChange}></slot></span>
+            ${this.title ? html`<span part="title" class="menu-grid-title">${this.title}</span>` : nothing}
+          </span>
+          ${this.description && this.showDescription ? html`<span part="description" class="menu-grid-description">${this.description}</span>` : nothing}
+        </a>
+      </div>
+    `;
+  }
+};
+/** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */
+MenuGridItem.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+MenuGridItem.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      ${fontFamilyStyles}
+    }
+
+    @keyframes st-menu-grid-badge-pop {
+      from {
+        transform: scale(0);
+      }
+      70% {
+        transform: scale(1.12);
+      }
+      to {
+        transform: scale(1);
+      }
+    }
+
+    .menu-grid-item {
+      display: flex;
+      flex-direction: column;
+      border-radius: 8px;
+      position: relative;
+      overflow: hidden;
+      color: var(--st-color-text);
+      transition:
+        opacity 0.4s ease-out,
+        transform 0.2s ease,
+        background-color 0.2s ease;
+    }
+
+    .menu-grid-item.pending {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    .menu-grid-item.regular {
+      padding: 16px;
+    }
+
+    .menu-grid-item.compact {
+      padding: 12px;
+    }
+
+    /* Keyboard focus gets the same treatment as hover. */
+    .menu-grid-item:hover,
+    .menu-grid-item:has(.menu-grid-link:focus-visible) {
+      background: var(--st-color-hover);
+      transform: scale(1.02);
+    }
+
+    .menu-grid-item:active {
+      transform: scale(0.98);
+    }
+
+    .menu-grid-link {
+      display: flex;
+      flex-direction: column;
+      text-decoration: none;
+      color: inherit;
+      width: 100%;
+      height: 100%;
+      gap: 8px;
+    }
+
+    .menu-grid-badge {
+      position: absolute;
+      top: 2px;
+      right: 8px;
+      font-size: 0.5rem;
+      padding: 2px 8px;
+      border-radius: 9999px;
+      font-weight: 500;
+      z-index: 1;
+      background-color: var(--st-color-text-strong);
+      color: var(--st-color-on-solid);
+      animation: st-menu-grid-badge-pop 0.35s ease-out;
+    }
+
+    .menu-grid-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+    }
+
+    .menu-grid-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      transition:
+        background-color 0.2s ease,
+        transform 0.2s ease;
+      flex-shrink: 0;
+      padding: 0;
+      margin-bottom: 0;
+    }
+
+    .menu-grid-icon:hover {
+      transform: rotate(5deg) scale(1.1);
+    }
+
+    .menu-grid-icon[hidden] {
+      display: none;
+    }
+
+    .menu-grid-icon ::slotted(*) {
+      width: 18px;
+      height: 18px;
+    }
+
+    .menu-grid-title {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--st-color-text-strong);
+      transition: color 0.2s ease;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-bottom: 0;
+    }
+
+    .menu-grid-description {
+      font-size: 0.75rem;
+      color: var(--st-color-text-muted);
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      line-height: 1.4;
+      transition: color 0.2s ease;
+    }
+
+    .menu-grid-item.compact .menu-grid-header {
+      gap: 8px;
+    }
+
+    .menu-grid-item.compact .menu-grid-icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    .menu-grid-item.compact .menu-grid-icon ::slotted(*) {
+      width: 14px;
+      height: 14px;
+    }
+
+    .menu-grid-item.compact .menu-grid-title {
+      font-size: 0.75rem;
+    }
+
+    .menu-grid-item.compact .menu-grid-description {
+      font-size: 0.75rem;
+    }
+
+    .menu-grid-header.icon-only {
+      justify-content: center;
+    }
+
+    @media (max-width: 480px) {
+      .menu-grid-header {
+        gap: 8px;
+      }
+
+      .menu-grid-icon {
+        width: 28px;
+        height: 28px;
+      }
+
+      .menu-grid-icon ::slotted(*) {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .menu-grid-item,
+      .menu-grid-icon {
+        transition: none;
+      }
+
+      .menu-grid-item.pending {
+        opacity: 1;
+        transform: none;
+      }
+
+      .menu-grid-badge {
+        animation: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], MenuGridItem.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], MenuGridItem.prototype, "description", 2);
+__decorateClass([
+  property({ type: String })
+], MenuGridItem.prototype, "href", 2);
+__decorateClass([
+  property({ type: String })
+], MenuGridItem.prototype, "badge", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MenuGridItem.prototype, "compact", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-description" })
+], MenuGridItem.prototype, "showDescription", 2);
+__decorateClass([
+  state()
+], MenuGridItem.prototype, "hasIcon", 2);
+__decorateClass([
+  state()
+], MenuGridItem.prototype, "pending", 2);
+MenuGridItem = __decorateClass([
+  customElement("st-menu-grid-item")
+], MenuGridItem);
+
+export {
+  MenuGridItem
+};
+//# sourceMappingURL=chunk-4HKSA5UT.js.map

package/dist/chunk-4HKSA5UT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/menu-grid-item/MenuGridItem.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 { MenuGridItemSelectEventDetail } from './MenuGridItemEvents';\r\n\r\n/**\r\n * One entry in an `st-menu-grid` — icon (via `slot=\"icon\"`) + title on one line, an optional\r\n * description below, and an optional corner badge (\"New\", \"Popular\", ...). A 1:1 port of\r\n * `SankhyaUI`'s React `MenuGridItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same markup and\r\n * CSS, with its `motion` effects redone in CSS — fades up the first time it scrolls into view,\r\n * scales to 1.02 on hover / 0.98 while pressed, the icon tilts on hover, the badge pops in.\r\n * Colors come from the suite theme rather than per-item utility classes.\r\n *\r\n * An `http(s)` `href` opens in a new tab, like the source. Any other `href` fires a *cancelable*\r\n * `menu-grid-item-select` event (detail: `{ href }`) first: a host doing client-side routing calls\r\n * `event.preventDefault()` on it, which also cancels the anchor's own navigation (the source used\r\n * react-router's `Link` here; the suite apps have no router).\r\n */\r\n@customElement('st-menu-grid-item')\r\nexport class MenuGridItem 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-grid-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    .menu-grid-item {\r\n      display: flex;\r\n      flex-direction: column;\r\n      border-radius: 8px;\r\n      position: relative;\r\n      overflow: hidden;\r\n      color: var(--st-color-text);\r\n      transition:\r\n        opacity 0.4s ease-out,\r\n        transform 0.2s ease,\r\n        background-color 0.2s ease;\r\n    }\r\n\r\n    .menu-grid-item.pending {\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n    }\r\n\r\n    .menu-grid-item.regular {\r\n      padding: 16px;\r\n    }\r\n\r\n    .menu-grid-item.compact {\r\n      padding: 12px;\r\n    }\r\n\r\n    /* Keyboard focus gets the same treatment as hover. */\r\n    .menu-grid-item:hover,\r\n    .menu-grid-item:has(.menu-grid-link:focus-visible) {\r\n      background: var(--st-color-hover);\r\n      transform: scale(1.02);\r\n    }\r\n\r\n    .menu-grid-item:active {\r\n      transform: scale(0.98);\r\n    }\r\n\r\n    .menu-grid-link {\r\n      display: flex;\r\n      flex-direction: column;\r\n      text-decoration: none;\r\n      color: inherit;\r\n      width: 100%;\r\n      height: 100%;\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-grid-badge {\r\n      position: absolute;\r\n      top: 2px;\r\n      right: 8px;\r\n      font-size: 0.5rem;\r\n      padding: 2px 8px;\r\n      border-radius: 9999px;\r\n      font-weight: 500;\r\n      z-index: 1;\r\n      background-color: var(--st-color-text-strong);\r\n      color: var(--st-color-on-solid);\r\n      animation: st-menu-grid-badge-pop 0.35s ease-out;\r\n    }\r\n\r\n    .menu-grid-header {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      width: 100%;\r\n    }\r\n\r\n    .menu-grid-icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 32px;\r\n      height: 32px;\r\n      border-radius: 6px;\r\n      transition:\r\n        background-color 0.2s ease,\r\n        transform 0.2s ease;\r\n      flex-shrink: 0;\r\n      padding: 0;\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    .menu-grid-icon:hover {\r\n      transform: rotate(5deg) scale(1.1);\r\n    }\r\n\r\n    .menu-grid-icon[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    .menu-grid-icon ::slotted(*) {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n\r\n    .menu-grid-title {\r\n      font-size: 0.875rem;\r\n      font-weight: 500;\r\n      color: var(--st-color-text-strong);\r\n      transition: color 0.2s ease;\r\n      flex: 1;\r\n      min-width: 0;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    .menu-grid-description {\r\n      font-size: 0.75rem;\r\n      color: var(--st-color-text-muted);\r\n      display: -webkit-box;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-height: 1.4;\r\n      transition: color 0.2s ease;\r\n    }\r\n\r\n    .menu-grid-item.compact .menu-grid-header {\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-grid-item.compact .menu-grid-icon {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    .menu-grid-item.compact .menu-grid-icon ::slotted(*) {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n\r\n    .menu-grid-item.compact .menu-grid-title {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-grid-item.compact .menu-grid-description {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-grid-header.icon-only {\r\n      justify-content: center;\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .menu-grid-header {\r\n        gap: 8px;\r\n      }\r\n\r\n      .menu-grid-icon {\r\n        width: 28px;\r\n        height: 28px;\r\n      }\r\n\r\n      .menu-grid-icon ::slotted(*) {\r\n        width: 16px;\r\n        height: 16px;\r\n      }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .menu-grid-item,\r\n      .menu-grid-icon {\r\n        transition: none;\r\n      }\r\n\r\n      .menu-grid-item.pending {\r\n        opacity: 1;\r\n        transform: none;\r\n      }\r\n\r\n      .menu-grid-badge {\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  description = '';\r\n\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  /** Small corner label, e.g. \"New\"/\"Beta\" — omit for none. */\r\n  @property({ type: String })\r\n  badge = '';\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  /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\r\n  @state() private hasIcon = false;\r\n\r\n  /** True until the item first scrolls into view (the source's `whileInView ... once`). */\r\n  @state() private pending = true;\r\n\r\n  private observer?: IntersectionObserver;\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    if (typeof IntersectionObserver === 'undefined') {\r\n      this.pending = false;\r\n      return;\r\n    }\r\n    this.observer = new IntersectionObserver((entries) => {\r\n      if (entries.some((entry) => entry.isIntersecting)) {\r\n        this.pending = false;\r\n        this.observer?.disconnect();\r\n      }\r\n    });\r\n    this.observer.observe(this);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.observer?.disconnect();\r\n    super.disconnectedCallback();\r\n  }\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 get isExternal(): boolean {\r\n    return this.href.startsWith('http');\r\n  }\r\n\r\n  private onClick = (event: MouseEvent): void => {\r\n    if (this.isExternal) return;\r\n    const selectEvent = new CustomEvent<MenuGridItemSelectEventDetail>('menu-grid-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 iconOnly = this.hasIcon && !this.title;\r\n    return html`\r\n      <div class=\"menu-grid-item ${this.compact ? 'compact' : 'regular'} ${this.pending ? 'pending' : ''}\" part=\"item\">\r\n        <a\r\n          part=\"link\"\r\n          class=\"menu-grid-link\"\r\n          href=${this.href}\r\n          target=${this.isExternal ? '_blank' : '_self'}\r\n          rel=${this.isExternal ? 'noopener noreferrer' : nothing}\r\n          @click=${this.onClick}\r\n        >\r\n          ${this.badge ? html`<span part=\"badge\" class=\"menu-grid-badge\">${this.badge}</span>` : nothing}\r\n          <span class=\"menu-grid-header ${iconOnly ? 'icon-only' : ''}\" part=\"header\">\r\n            <span class=\"menu-grid-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\r\n            ${this.title ? html`<span part=\"title\" class=\"menu-grid-title\">${this.title}</span>` : nothing}\r\n          </span>\r\n          ${this.description && this.showDescription\r\n            ? html`<span part=\"description\" class=\"menu-grid-description\">${this.description}</span>`\r\n            : nothing}\r\n        </a>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-5REZSZCK.js

@@ -0,0 +1,266 @@
+import {
+  cardTitleStyles,
+  iconTileStyles,
+  reducedMotionStyles,
+  sectionTitleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  controlBaseStyles,
+  ctaButtonStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/feature-split/FeatureSplit.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "iconify-icon";
+var FeatureSplit = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.inverted = false;
+    this.title = "";
+    this.subtitle = "";
+    this.items = [];
+    this.imageSrc = "";
+    this.imageAlt = "";
+    this.imagePosition = "right";
+    this.actionLabel = "";
+    this.href = "";
+  }
+  onAction() {
+    const event = new CustomEvent("feature-split-action", {
+      detail: { href: this.href },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    if (this.dispatchEvent(event)) window.location.href = this.href;
+  }
+  render() {
+    return html`
+      <div class="container" part="container">
+        <div class="content" part="content">
+          <h2 class="title" part="title">${this.title}</h2>
+          ${this.subtitle ? html`<div class="subtitle" part="subtitle"><st-markdown .content=${this.subtitle}></st-markdown></div>` : nothing}
+          ${this.items.length > 0 ? html`<div class="list" part="list">
+                ${this.items.map(
+      (item) => html`
+                    <div class="item" part="item">
+                      ${item.icon ? html`<div class="icon" part="icon"><iconify-icon icon=${item.icon}></iconify-icon></div>` : nothing}
+                      <div>
+                        <h3 class="item-title" part="item-title">${item.title}</h3>
+                        <div class="item-description" part="item-description">
+                          <st-markdown .content=${item.description}></st-markdown>
+                        </div>
+                      </div>
+                    </div>
+                  `
+    )}
+              </div>` : nothing}
+          ${this.actionLabel && this.href ? html`<button class="action" part="action" type="button" @click=${this.onAction}>${this.actionLabel}</button>` : nothing}
+        </div>
+        <div class="image-wrapper" part="image-wrapper">
+          <img class="image" part="image" src=${this.imageSrc} alt=${this.imageAlt || this.title} />
+        </div>
+      </div>
+    `;
+  }
+};
+FeatureSplit.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      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;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--st-space-48);
+      align-items: center;
+    }
+
+    :host([image-position='left']) .container {
+      direction: rtl;
+    }
+
+    :host([image-position='left']) .content {
+      direction: ltr;
+    }
+
+    :host([image-position='top']) .container {
+      grid-template-columns: 1fr;
+      text-align: center;
+    }
+
+    :host([image-position='top']) .content {
+      align-items: center;
+    }
+
+    :host([image-position='top']) .image-wrapper {
+      order: -1;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-32);
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      margin: 0;
+    }
+
+    .subtitle {
+      color: var(--st-color-text-muted);
+      font-size: var(--st-text-base);
+      line-height: 1.6;
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-24);
+      margin-top: var(--st-space-16);
+    }
+
+    .item {
+      display: flex;
+      gap: var(--st-space-16);
+      align-items: flex-start;
+      text-align: left;
+    }
+
+    .icon {
+      ${iconTileStyles}
+      width: var(--st-space-48);
+      height: var(--st-space-48);
+      font-size: 24px;
+    }
+
+    .item-title {
+      ${cardTitleStyles}
+    }
+
+    .item-description {
+      color: var(--st-color-text-muted);
+      font-size: var(--st-text-sm);
+      line-height: 1.5;
+    }
+
+    .action {
+      ${ctaButtonStyles}
+      justify-self: start;
+      padding: var(--st-space-16);
+      border-radius: var(--st-radius-lg);
+    }
+
+    .image-wrapper {
+      width: 100%;
+      height: 100%;
+      min-height: 400px;
+      border-radius: var(--st-space-24);
+      overflow: hidden;
+      box-shadow: 0 20px 40px -12px var(--st-shadow-color-md);
+    }
+
+    .image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.5s ease;
+    }
+
+    .image:hover {
+      transform: scale(1.02);
+    }
+
+    :host([inverted]) .title,
+    :host([inverted]) .item-title {
+      color: var(--st-color-on-solid);
+    }
+
+    :host([inverted]) .subtitle,
+    :host([inverted]) .item-description {
+      color: var(--st-color-border);
+    }
+
+    :host([inverted]) .icon {
+      background: var(--st-color-text);
+      color: var(--st-color-border);
+    }
+
+    @media (max-width: 1024px) {
+      .container {
+        gap: var(--st-space-40);
+      }
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        padding: var(--st-space-48) var(--st-space-24);
+      }
+
+      .container {
+        grid-template-columns: 1fr;
+        direction: ltr !important;
+      }
+
+      .image-wrapper {
+        min-height: 300px;
+        order: -1;
+      }
+    }
+
+    ${reducedMotionStyles}
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FeatureSplit.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: String })
+], FeatureSplit.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], FeatureSplit.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], FeatureSplit.prototype, "items", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-src" })
+], FeatureSplit.prototype, "imageSrc", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-alt" })
+], FeatureSplit.prototype, "imageAlt", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-position", reflect: true })
+], FeatureSplit.prototype, "imagePosition", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-label" })
+], FeatureSplit.prototype, "actionLabel", 2);
+__decorateClass([
+  property({ type: String })
+], FeatureSplit.prototype, "href", 2);
+FeatureSplit = __decorateClass([
+  customElement("st-feature-split")
+], FeatureSplit);
+
+export {
+  FeatureSplit
+};
+//# sourceMappingURL=chunk-5REZSZCK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/feature-split/FeatureSplit.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { controlBaseStyles, ctaButtonStyles, fontFamilyStyles } from '../shared/styles';\r\nimport '../markdown';\r\nimport {\r\n  cardTitleStyles,\r\n  iconTileStyles,\r\n  reducedMotionStyles,\r\n  sectionTitleStyles,\r\n} from '../shared/section-styles';\r\nimport type { FeatureSplitActionEventDetail } from './FeatureSplitEvents';\r\n\r\nexport interface FeatureSplitItem {\r\n  /** Iconify icon name, e.g. `mdi:check`. */\r\n  icon?: string;\r\n  title: string;\r\n  /** Markdown. */\r\n  description: string;\r\n}\r\n\r\nexport type FeatureSplitImagePosition = 'left' | 'right' | 'top';\r\n\r\n/** A title/markdown-subtitle/feature-list block beside (or under) an image. */\r\n@customElement('st-feature-split')\r\nexport class FeatureSplit extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      padding: var(--st-space-24);\r\n      background: var(--st-color-page);\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background: var(--st-color-text-strong);\r\n    }\r\n\r\n    .container {\r\n      max-width: var(--st-cms-container-max);\r\n      margin: 0 auto;\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: var(--st-space-48);\r\n      align-items: center;\r\n    }\r\n\r\n    :host([image-position='left']) .container {\r\n      direction: rtl;\r\n    }\r\n\r\n    :host([image-position='left']) .content {\r\n      direction: ltr;\r\n    }\r\n\r\n    :host([image-position='top']) .container {\r\n      grid-template-columns: 1fr;\r\n      text-align: center;\r\n    }\r\n\r\n    :host([image-position='top']) .content {\r\n      align-items: center;\r\n    }\r\n\r\n    :host([image-position='top']) .image-wrapper {\r\n      order: -1;\r\n      max-width: 800px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-32);\r\n    }\r\n\r\n    .title {\r\n      ${sectionTitleStyles}\r\n      margin: 0;\r\n    }\r\n\r\n    .subtitle {\r\n      color: var(--st-color-text-muted);\r\n      font-size: var(--st-text-base);\r\n      line-height: 1.6;\r\n    }\r\n\r\n    .list {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--st-space-24);\r\n      margin-top: var(--st-space-16);\r\n    }\r\n\r\n    .item {\r\n      display: flex;\r\n      gap: var(--st-space-16);\r\n      align-items: flex-start;\r\n      text-align: left;\r\n    }\r\n\r\n    .icon {\r\n      ${iconTileStyles}\r\n      width: var(--st-space-48);\r\n      height: var(--st-space-48);\r\n      font-size: 24px;\r\n    }\r\n\r\n    .item-title {\r\n      ${cardTitleStyles}\r\n    }\r\n\r\n    .item-description {\r\n      color: var(--st-color-text-muted);\r\n      font-size: var(--st-text-sm);\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .action {\r\n      ${ctaButtonStyles}\r\n      justify-self: start;\r\n      padding: var(--st-space-16);\r\n      border-radius: var(--st-radius-lg);\r\n    }\r\n\r\n    .image-wrapper {\r\n      width: 100%;\r\n      height: 100%;\r\n      min-height: 400px;\r\n      border-radius: var(--st-space-24);\r\n      overflow: hidden;\r\n      box-shadow: 0 20px 40px -12px var(--st-shadow-color-md);\r\n    }\r\n\r\n    .image {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: transform 0.5s ease;\r\n    }\r\n\r\n    .image:hover {\r\n      transform: scale(1.02);\r\n    }\r\n\r\n    :host([inverted]) .title,\r\n    :host([inverted]) .item-title {\r\n      color: var(--st-color-on-solid);\r\n    }\r\n\r\n    :host([inverted]) .subtitle,\r\n    :host([inverted]) .item-description {\r\n      color: var(--st-color-border);\r\n    }\r\n\r\n    :host([inverted]) .icon {\r\n      background: var(--st-color-text);\r\n      color: var(--st-color-border);\r\n    }\r\n\r\n    @media (max-width: 1024px) {\r\n      .container {\r\n        gap: var(--st-space-40);\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-space-48) var(--st-space-24);\r\n      }\r\n\r\n      .container {\r\n        grid-template-columns: 1fr;\r\n        direction: ltr !important;\r\n      }\r\n\r\n      .image-wrapper {\r\n        min-height: 300px;\r\n        order: -1;\r\n      }\r\n    }\r\n\r\n    ${reducedMotionStyles}\r\n  `;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  /** Markdown. */\r\n  @property({ type: String })\r\n  subtitle = '';\r\n\r\n  @property({ attribute: false })\r\n  items: FeatureSplitItem[] = [];\r\n\r\n  @property({ type: String, attribute: 'image-src' })\r\n  imageSrc = '';\r\n\r\n  @property({ type: String, attribute: 'image-alt' })\r\n  imageAlt = '';\r\n\r\n  @property({ type: String, attribute: 'image-position', reflect: true })\r\n  imagePosition: FeatureSplitImagePosition = 'right';\r\n\r\n  @property({ type: String, attribute: 'action-label' })\r\n  actionLabel = '';\r\n\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  private onAction() {\r\n    const event = new CustomEvent<FeatureSplitActionEventDetail>('feature-split-action', {\r\n      detail: { href: this.href },\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: true,\r\n    });\r\n    if (this.dispatchEvent(event)) window.location.href = this.href;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"container\" part=\"container\">\r\n        <div class=\"content\" part=\"content\">\r\n          <h2 class=\"title\" part=\"title\">${this.title}</h2>\r\n          ${this.subtitle\r\n            ? html`<div class=\"subtitle\" part=\"subtitle\"><st-markdown .content=${this.subtitle}></st-markdown></div>`\r\n            : nothing}\r\n          ${this.items.length > 0\r\n            ? html`<div class=\"list\" part=\"list\">\r\n                ${this.items.map(\r\n                  (item) => html`\r\n                    <div class=\"item\" part=\"item\">\r\n                      ${item.icon\r\n                        ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>`\r\n                        : nothing}\r\n                      <div>\r\n                        <h3 class=\"item-title\" part=\"item-title\">${item.title}</h3>\r\n                        <div class=\"item-description\" part=\"item-description\">\r\n                          <st-markdown .content=${item.description}></st-markdown>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                  `,\r\n                )}\r\n              </div>`\r\n            : nothing}\r\n          ${this.actionLabel && this.href\r\n            ? html`<button class=\"action\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>`\r\n            : nothing}\r\n        </div>\r\n        <div class=\"image-wrapper\" part=\"image-wrapper\">\r\n          <img class=\"image\" part=\"image\" src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}