@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/chunk-MSSH3HFK.js

@@ -1,205 +0,0 @@
-import {
-  buttonResetStyles,
-  controlBaseStyles,
-  rootFontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
-import {
-  __decorateClass
-} from "./chunk-EUXUH3YW.js";
-
-// src/cookie-consent/CookieConsent.ts
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-var DEFAULT_STORAGE_KEY = "sankhya_ui_cookie_consent";
-var CookieConsent = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.message = "";
-    this.acceptButtonText = "Accept";
-    this.refuseButtonText = "Refuse";
-    this.privacyPolicyLink = "";
-    this.privacyPolicyText = "Privacy Policy";
-    this.storageKey = DEFAULT_STORAGE_KEY;
-    this.consent = null;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.consent = this.readStored();
-  }
-  readStored() {
-    try {
-      const saved = localStorage.getItem(this.storageKey);
-      return saved === "accepted" || saved === "refused" ? saved : null;
-    } catch {
-      return null;
-    }
-  }
-  choose(status) {
-    this.consent = status;
-    try {
-      localStorage.setItem(this.storageKey, status);
-    } catch {
-    }
-    this.dispatchEvent(
-      new CustomEvent(status === "accepted" ? "cookie-consent-accept" : "cookie-consent-refuse", {
-        detail: { status },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-  render() {
-    if (this.consent !== null) return nothing;
-    return html`
-      <div class="content" part="content">
-        <p class="message" part="message">
-          <slot>
-            ${this.message || "We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies."}
-            ${this.privacyPolicyLink ? html`<a class="link" part="link" href=${this.privacyPolicyLink} target="_blank" rel="noopener noreferrer">${this.privacyPolicyText}</a>` : nothing}
-          </slot>
-        </p>
-      </div>
-      <div class="actions" part="actions">
-        <button class="btn refuse" part="refuse" type="button" @click=${() => this.choose("refused")}>${this.refuseButtonText}</button>
-        <button class="btn accept" part="accept" type="button" @click=${() => this.choose("accepted")}>${this.acceptButtonText}</button>
-      </div>
-    `;
-  }
-};
-CookieConsent.styles = css`
-    ${controlBaseStyles}
-
-    @keyframes st-cookie-slide-up {
-      from {
-        transform: translateY(100%);
-      }
-      to {
-        transform: translateY(0);
-      }
-    }
-
-    :host {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      box-sizing: border-box;
-      z-index: 9999;
-      display: flex;
-      flex-direction: column;
-      gap: var(--st-space-16);
-      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
-         padding; override with --st-cookie-consent-padding instead. */
-      padding: var(--st-cookie-consent-padding, var(--st-space-24)) !important;
-      background: var(--st-color-surface);
-      color: var(--st-color-text);
-      border-top: 1px solid var(--st-color-border);
-      box-shadow: 0 -4px 10px var(--st-shadow-color-sm);
-      animation: st-cookie-slide-up 0.3s ease-out;
-      ${rootFontFamilyStyles}
-    }
-
-    .content {
-      flex: 1;
-    }
-
-    .message {
-      margin: 0;
-      font-size: var(--st-text-md);
-      line-height: 1.5;
-    }
-
-    .link {
-      color: var(--st-color-accent-text);
-      text-decoration: underline;
-      margin-left: var(--st-space-4);
-    }
-
-    .link:hover {
-      text-decoration: none;
-    }
-
-    .actions {
-      display: flex;
-      gap: var(--st-space-12);
-      flex-shrink: 0;
-    }
-
-    .btn {
-      ${buttonResetStyles}
-      padding: var(--st-space-8) var(--st-space-16);
-      border: 1px solid transparent;
-      border-radius: var(--st-radius-xs);
-      font-weight: var(--st-font-weight-medium);
-      font-size: var(--st-text-md);
-      transition:
-        background-color 0.2s ease,
-        color 0.2s ease;
-    }
-
-    .accept {
-      background: var(--st-button-primary-bg);
-      color: var(--st-button-primary-color);
-    }
-
-    .accept:hover {
-      opacity: 0.9;
-    }
-
-    .refuse {
-      border-color: var(--st-color-border);
-      color: var(--st-color-text-muted);
-    }
-
-    .refuse:hover {
-      background: var(--st-color-hover);
-      color: var(--st-color-text-strong);
-    }
-
-    @media (min-width: 768px) {
-      :host {
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(--st-cookie-consent-padding, var(--st-space-16) var(--st-space-32)) !important;
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      :host {
-        animation: none;
-      }
-      .btn {
-        transition: none;
-      }
-    }
-  `;
-__decorateClass([
-  property({ type: String })
-], CookieConsent.prototype, "message", 2);
-__decorateClass([
-  property({ type: String, attribute: "accept-button-text" })
-], CookieConsent.prototype, "acceptButtonText", 2);
-__decorateClass([
-  property({ type: String, attribute: "refuse-button-text" })
-], CookieConsent.prototype, "refuseButtonText", 2);
-__decorateClass([
-  property({ type: String, attribute: "privacy-policy-link" })
-], CookieConsent.prototype, "privacyPolicyLink", 2);
-__decorateClass([
-  property({ type: String, attribute: "privacy-policy-text" })
-], CookieConsent.prototype, "privacyPolicyText", 2);
-__decorateClass([
-  property({ type: String, attribute: "storage-key" })
-], CookieConsent.prototype, "storageKey", 2);
-__decorateClass([
-  state()
-], CookieConsent.prototype, "consent", 2);
-CookieConsent = __decorateClass([
-  customElement("st-cookie-consent")
-], CookieConsent);
-
-export {
-  CookieConsent
-};
-//# sourceMappingURL=chunk-MSSH3HFK.js.map

package/dist/chunk-MSSH3HFK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/cookie-consent/CookieConsent.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport type { CookieConsentEventDetail, CookieConsentStatus } from './CookieConsentEvents';\n\nconst DEFAULT_STORAGE_KEY = 'sankhya_ui_cookie_consent';\n\n/**\n * Fixed bottom consent bar. The source read/wrote consent through a React `UserContext`; here the\n * element persists the choice itself in localStorage (`storage-key`, default the source's\n * `sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice\n * exists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The\n * default slot replaces the message text.\n *\n * @cssprop --st-cookie-consent-padding - Overrides the bar's padding.\n */\n@customElement('st-cookie-consent')\nexport class CookieConsent extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    @keyframes st-cookie-slide-up {\n      from {\n        transform: translateY(100%);\n      }\n      to {\n        transform: translateY(0);\n      }\n    }\n\n    :host {\n      position: fixed;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      box-sizing: border-box;\n      z-index: 9999;\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-16);\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-cookie-consent-padding instead. */\n      padding: var(--st-cookie-consent-padding, var(--st-space-24)) !important;\n      background: var(--st-color-surface);\n      color: var(--st-color-text);\n      border-top: 1px solid var(--st-color-border);\n      box-shadow: 0 -4px 10px var(--st-shadow-color-sm);\n      animation: st-cookie-slide-up 0.3s ease-out;\n      ${rootFontFamilyStyles}\n    }\n\n    .content {\n      flex: 1;\n    }\n\n    .message {\n      margin: 0;\n      font-size: var(--st-text-md);\n      line-height: 1.5;\n    }\n\n    .link {\n      color: var(--st-color-accent-text);\n      text-decoration: underline;\n      margin-left: var(--st-space-4);\n    }\n\n    .link:hover {\n      text-decoration: none;\n    }\n\n    .actions {\n      display: flex;\n      gap: var(--st-space-12);\n      flex-shrink: 0;\n    }\n\n    .btn {\n      ${buttonResetStyles}\n      padding: var(--st-space-8) var(--st-space-16);\n      border: 1px solid transparent;\n      border-radius: var(--st-radius-xs);\n      font-weight: var(--st-font-weight-medium);\n      font-size: var(--st-text-md);\n      transition:\n        background-color 0.2s ease,\n        color 0.2s ease;\n    }\n\n    .accept {\n      background: var(--st-button-primary-bg);\n      color: var(--st-button-primary-color);\n    }\n\n    .accept:hover {\n      opacity: 0.9;\n    }\n\n    .refuse {\n      border-color: var(--st-color-border);\n      color: var(--st-color-text-muted);\n    }\n\n    .refuse:hover {\n      background: var(--st-color-hover);\n      color: var(--st-color-text-strong);\n    }\n\n    @media (min-width: 768px) {\n      :host {\n        flex-direction: row;\n        align-items: center;\n        justify-content: space-between;\n        padding: var(--st-cookie-consent-padding, var(--st-space-16) var(--st-space-32)) !important;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host {\n        animation: none;\n      }\n      .btn {\n        transition: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  message = '';\n\n  @property({ type: String, attribute: 'accept-button-text' })\n  acceptButtonText = 'Accept';\n\n  @property({ type: String, attribute: 'refuse-button-text' })\n  refuseButtonText = 'Refuse';\n\n  @property({ type: String, attribute: 'privacy-policy-link' })\n  privacyPolicyLink = '';\n\n  @property({ type: String, attribute: 'privacy-policy-text' })\n  privacyPolicyText = 'Privacy Policy';\n\n  @property({ type: String, attribute: 'storage-key' })\n  storageKey = DEFAULT_STORAGE_KEY;\n\n  /** The stored choice, or `null` while undecided (the bar is only shown then). */\n  @state() private consent: CookieConsentStatus | null = null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.consent = this.readStored();\n  }\n\n  private readStored(): CookieConsentStatus | null {\n    try {\n      const saved = localStorage.getItem(this.storageKey);\n      return saved === 'accepted' || saved === 'refused' ? saved : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private choose(status: CookieConsentStatus): void {\n    this.consent = status;\n    try {\n      localStorage.setItem(this.storageKey, status);\n    } catch {\n      // Storage unavailable (private mode, blocked): the choice just doesn't persist.\n    }\n    this.dispatchEvent(\n      new CustomEvent<CookieConsentEventDetail>(status === 'accepted' ? 'cookie-consent-accept' : 'cookie-consent-refuse', {\n        detail: { status },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  render() {\n    if (this.consent !== null) return nothing;\n    return html`\n      <div class=\"content\" part=\"content\">\n        <p class=\"message\" part=\"message\">\n          <slot>\n            ${this.message || 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.'}\n            ${this.privacyPolicyLink\n              ? html`<a class=\"link\" part=\"link\" href=${this.privacyPolicyLink} target=\"_blank\" rel=\"noopener noreferrer\">${this.privacyPolicyText}</a>`\n              : nothing}\n          </slot>\n        </p>\n      </div>\n      <div class=\"actions\" part=\"actions\">\n        <button class=\"btn refuse\" part=\"refuse\" type=\"button\" @click=${() => this.choose('refused')}>${this.refuseButtonText}</button>\n        <button class=\"btn accept\" part=\"accept\" type=\"button\" @click=${() => this.choose('accepted')}>${this.acceptButtonText}</button>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-R5G6KFTJ.js.map

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

package/dist/chunk-SMLR736E.js.map

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

package/dist/chunk-VWS53WY4.js

@@ -1,157 +0,0 @@
-import {
-  ctaLinkStyles,
-  sectionSubtitleStyles,
-  sectionTitleStyles
-} from "./chunk-FZ36KL73.js";
-import {
-  buttonResetStyles,
-  controlBaseStyles,
-  rootFontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
-import {
-  __decorateClass
-} from "./chunk-EUXUH3YW.js";
-
-// src/promo-banner/PromoBanner.ts
-import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-var PromoBanner = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.title = "";
-    this.subtitle = "";
-    this.actionLabel = "";
-    this.href = "";
-    this.imageSrc = "";
-    this.inverted = false;
-    this.onAction = () => {
-      this.dispatchEvent(
-        new CustomEvent("action", { detail: { href: this.href }, bubbles: true, composed: true })
-      );
-    };
-  }
-  willUpdate() {
-    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : "";
-  }
-  render() {
-    return html`
-      <div class="container" part="container">
-        <h2 class="title" part="title">${this.title}</h2>
-        ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
-        <slot></slot>
-        ${this.actionLabel ? html`<div class="actions" part="actions">
-              <button class="cta" part="action" type="button" @click=${this.onAction}>${this.actionLabel}</button>
-            </div>` : nothing}
-      </div>
-    `;
-  }
-};
-PromoBanner.styles = css`
-    ${controlBaseStyles}
-
-    :host {
-      display: block;
-      box-sizing: border-box;
-      width: calc(100% - 48px);
-      max-width: var(--st-cms-container-max);
-      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
-         margin/padding; override with --st-promo-banner-margin/-padding instead. */
-      margin: var(--st-promo-banner-margin, var(--st-space-40) auto) !important;
-      padding: var(--st-promo-banner-padding, 100px var(--st-space-24)) !important;
-      border-radius: var(--st-space-24);
-      background-color: var(--st-color-text-strong);
-      background-size: cover;
-      background-position: center;
-      color: var(--st-color-on-solid);
-      text-align: center;
-      ${rootFontFamilyStyles}
-    }
-
-    :host([inverted]) {
-      background-color: var(--st-color-subtle);
-      color: var(--st-color-text-strong);
-    }
-
-    .container {
-      max-width: 800px;
-      margin: 0 auto;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--st-space-32);
-    }
-
-    .title {
-      ${sectionTitleStyles}
-      color: inherit;
-      margin: 0;
-      letter-spacing: -0.02em;
-    }
-
-    .subtitle {
-      ${sectionSubtitleStyles}
-      color: inherit;
-      opacity: 0.8;
-      margin: 0;
-    }
-
-    .actions {
-      margin-top: var(--st-space-16);
-    }
-
-    .cta {
-      ${buttonResetStyles}
-      ${ctaLinkStyles}
-      border: 1px solid currentColor;
-      color: inherit;
-    }
-
-    .cta:hover {
-      transform: scale(1.05);
-    }
-
-    @media (max-width: 768px) {
-      :host {
-        width: auto;
-        margin: var(--st-promo-banner-margin, var(--st-space-24)) !important;
-        padding: var(--st-promo-banner-padding, 60px var(--st-space-24)) !important;
-        border-radius: var(--st-radius-lg);
-      }
-      .actions,
-      .cta {
-        width: 100%;
-      }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .cta {
-        transition: none;
-      }
-    }
-  `;
-__decorateClass([
-  property({ type: String })
-], PromoBanner.prototype, "title", 2);
-__decorateClass([
-  property({ type: String })
-], PromoBanner.prototype, "subtitle", 2);
-__decorateClass([
-  property({ type: String, attribute: "action-label" })
-], PromoBanner.prototype, "actionLabel", 2);
-__decorateClass([
-  property({ type: String })
-], PromoBanner.prototype, "href", 2);
-__decorateClass([
-  property({ type: String, attribute: "image-src" })
-], PromoBanner.prototype, "imageSrc", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PromoBanner.prototype, "inverted", 2);
-PromoBanner = __decorateClass([
-  customElement("st-promo-banner")
-], PromoBanner);
-
-export {
-  PromoBanner
-};
-//# sourceMappingURL=chunk-VWS53WY4.js.map

package/dist/chunk-VWS53WY4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/promo-banner/PromoBanner.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { ctaLinkStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\nimport type { HeroActionEventDetail } from '../hero/HeroEvents';\n\n/**\n * Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a\n * background image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event\n * (detail `{ href }`, empty unless set) in place of `onAction`.\n *\n * @cssprop --st-promo-banner-margin - Overrides the banner's margin.\n * @cssprop --st-promo-banner-padding - Overrides the banner's padding.\n */\n@customElement('st-promo-banner')\nexport class PromoBanner extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      box-sizing: border-box;\n      width: calc(100% - 48px);\n      max-width: var(--st-cms-container-max);\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         margin/padding; override with --st-promo-banner-margin/-padding instead. */\n      margin: var(--st-promo-banner-margin, var(--st-space-40) auto) !important;\n      padding: var(--st-promo-banner-padding, 100px var(--st-space-24)) !important;\n      border-radius: var(--st-space-24);\n      background-color: var(--st-color-text-strong);\n      background-size: cover;\n      background-position: center;\n      color: var(--st-color-on-solid);\n      text-align: center;\n      ${rootFontFamilyStyles}\n    }\n\n    :host([inverted]) {\n      background-color: var(--st-color-subtle);\n      color: var(--st-color-text-strong);\n    }\n\n    .container {\n      max-width: 800px;\n      margin: 0 auto;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--st-space-32);\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      color: inherit;\n      margin: 0;\n      letter-spacing: -0.02em;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      color: inherit;\n      opacity: 0.8;\n      margin: 0;\n    }\n\n    .actions {\n      margin-top: var(--st-space-16);\n    }\n\n    .cta {\n      ${buttonResetStyles}\n      ${ctaLinkStyles}\n      border: 1px solid currentColor;\n      color: inherit;\n    }\n\n    .cta:hover {\n      transform: scale(1.05);\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        width: auto;\n        margin: var(--st-promo-banner-margin, var(--st-space-24)) !important;\n        padding: var(--st-promo-banner-padding, 60px var(--st-space-24)) !important;\n        border-radius: var(--st-radius-lg);\n      }\n      .actions,\n      .cta {\n        width: 100%;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .cta {\n        transition: none;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String, attribute: 'image-src' })\n  imageSrc = '';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  protected willUpdate(): void {\n    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\n  }\n\n  private onAction = (): void => {\n    this.dispatchEvent(\n      new CustomEvent<HeroActionEventDetail>('action', { detail: { href: this.href }, bubbles: true, composed: true })\n    );\n  };\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <h2 class=\"title\" part=\"title\">${this.title}</h2>\n        ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n        <slot></slot>\n        ${this.actionLabel\n          ? html`<div class=\"actions\" part=\"actions\">\n              <button class=\"cta\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>\n            </div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAejC,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC;AAAA;AAsFL,iBAAQ;AAGR,oBAAW;AAGX,uBAAc;AAGd,gBAAO;AAGP,oBAAW;AAGX,oBAAW;AAMX,SAAQ,WAAW,MAAY;AAC7B,WAAK;AAAA,QACH,IAAI,YAAmC,UAAU,EAAE,QAAQ,EAAE,MAAM,KAAK,KAAK,GAAG,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,MACjH;AAAA,IACF;AAAA;AAAA,EARU,aAAmB;AAC3B,SAAK,MAAM,kBAAkB,KAAK,WAAW,OAAO,KAAK,UAAU,KAAK,QAAQ,CAAC,MAAM;AAAA,EACzF;AAAA,EAQA,SAAS;AACP,WAAO;AAAA;AAAA,yCAE8B,KAAK,KAAK;AAAA,UACzC,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA;AAAA,UAExF,KAAK,cACH;AAAA,uEAC2D,KAAK,QAAQ,IAAI,KAAK,WAAW;AAAA,sBAE5F,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA/Ha,YACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAiBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWrB,iBAAiB;AAAA,QACjB,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;AA8BnB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,YAsFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxFf,YAyFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GA3F1C,YA4FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Ff,YA+FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAjGvC,YAkGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApG/B,YAqGX;AArGW,cAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}

package/dist/chunk-WT4OATGP.js.map

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