@sankhyatronics/sankhya-cms 0.1.8 → 0.1.10

package/dist/bento-grid/index.js

@@ -1,8 +1,8 @@
 import {
   BentoGrid
-} from "../chunk-2JGWWXEI.js";
-import "../chunk-3VE6VFJ4.js";
-import "../chunk-RHAOQ6K4.js";
+} from "../chunk-76AVBQUA.js";
+import "../chunk-FZ36KL73.js";
+import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";
 export {
   BentoGrid

package/dist/card/index.js

@@ -1,7 +1,7 @@
 import {
   Card
-} from "../chunk-7PSYCTEN.js";
-import "../chunk-RHAOQ6K4.js";
+} from "../chunk-ZN4LIKVG.js";
+import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Card

package/dist/carousel/index.js

@@ -1,8 +1,8 @@
 import {
   Carousel
-} from "../chunk-HPIQSECE.js";
-import "../chunk-3VE6VFJ4.js";
-import "../chunk-RHAOQ6K4.js";
+} from "../chunk-EMCQBT3S.js";
+import "../chunk-FZ36KL73.js";
+import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Carousel

package/dist/{chunk-3JU3R22O.js → chunk-5EBWMPJS.js}

@@ -1,7 +1,7 @@
 import {
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -190,4 +190,4 @@ Markdown = __decorateClass([
 export {
   Markdown
 };
-//# sourceMappingURL=chunk-3JU3R22O.js.map
+//# sourceMappingURL=chunk-5EBWMPJS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/markdown/Markdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport DOMPurify from 'dompurify';\nimport { marked } from 'marked';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MarkdownErrorEventDetail } from './MarkdownEvents';\n\n/**\n * Renders Markdown (GFM, single newlines become `<br>`) from either an inline `content` string or\n * a `src` URL it fetches. Ports `SankhyaUI`'s `useMarkdown` hook + `react-markdown` (remark-gfm,\n * remark-breaks); output is sanitized with DOMPurify. `src` wins over `content` when both are set.\n * While a fetch is pending it shows \"Loading content...\"; on failure \"Error loading content.\" and\n * a `markdown-error` event (detail: `{ error }`).\n *\n * Text color is inherited from the parent so inverted containers just work.\n */\n@customElement('st-markdown')\nexport class Markdown extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n      line-height: 1.7;\n    }\n\n    :host > div > :first-child {\n      margin-top: 0;\n    }\n\n    h1,\n    h2,\n    h3,\n    h4 {\n      color: inherit;\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1.3;\n    }\n\n    h2 {\n      font-size: var(--st-text-2xl);\n      margin: var(--st-space-48) 0 var(--st-space-24);\n    }\n\n    h3 {\n      font-size: var(--st-text-xl);\n      font-weight: var(--st-font-weight-semibold);\n      margin: var(--st-space-32) 0 var(--st-space-16);\n    }\n\n    p {\n      margin: 0 0 var(--st-space-24);\n    }\n\n    ul,\n    ol {\n      margin: 0 0 var(--st-space-24);\n      padding-left: var(--st-space-24);\n    }\n\n    li {\n      margin-bottom: var(--st-space-8);\n    }\n\n    a {\n      color: inherit;\n      text-decoration: underline;\n      text-underline-offset: 4px;\n    }\n\n    a:hover {\n      color: var(--st-color-text-strong);\n    }\n\n    img {\n      max-width: 100%;\n      height: auto;\n      border-radius: var(--st-radius-sm);\n      margin: var(--st-space-32) 0;\n    }\n\n    blockquote {\n      border-left: 4px solid var(--st-color-border);\n      margin: var(--st-space-32) 0;\n      padding-left: var(--st-space-24);\n      font-style: italic;\n    }\n\n    table {\n      border-collapse: collapse;\n      margin: 0 0 var(--st-space-24);\n    }\n\n    th,\n    td {\n      border: 1px solid var(--st-color-border);\n      padding: var(--st-space-8) var(--st-space-12);\n    }\n\n    pre,\n    code {\n      background: var(--st-color-subtle);\n      border-radius: var(--st-radius-xs);\n    }\n\n    code {\n      padding: 0 var(--st-space-4);\n    }\n\n    pre {\n      padding: var(--st-space-16);\n      overflow-x: auto;\n    }\n\n    pre code {\n      padding: 0;\n    }\n  `;\n\n  /** Inline Markdown source. Ignored when `src` is set. */\n  @property({ type: String })\n  content = '';\n\n  /** URL of a Markdown file to fetch. */\n  @property({ type: String })\n  src = '';\n\n  @state() private fetched = '';\n  @state() private loading = false;\n  @state() private error: Error | null = null;\n\n  private abort?: AbortController;\n\n  willUpdate(changed: Map<string, unknown>): void {\n    if (changed.has('src')) void this.load();\n  }\n\n  disconnectedCallback(): void {\n    this.abort?.abort();\n    super.disconnectedCallback();\n  }\n\n  private async load(): Promise<void> {\n    this.abort?.abort();\n    this.fetched = '';\n    this.error = null;\n    if (!this.src) {\n      this.loading = false;\n      return;\n    }\n    const controller = new AbortController();\n    this.abort = controller;\n    this.loading = true;\n    try {\n      const response = await fetch(this.src, { signal: controller.signal });\n      if (!response.ok) throw new Error(`Failed to fetch markdown: ${response.statusText}`);\n      const text = await response.text();\n      if (controller.signal.aborted) return;\n      this.fetched = text;\n    } catch (err) {\n      if (controller.signal.aborted) return;\n      this.error = err instanceof Error ? err : new Error('Unknown error fetching markdown');\n      this.dispatchEvent(\n        new CustomEvent<MarkdownErrorEventDetail>('markdown-error', {\n          detail: { error: this.error },\n          bubbles: true,\n          composed: true\n        })\n      );\n    }\n    this.loading = false;\n  }\n\n  render() {\n    if (this.loading) return html`<div part=\"loading\">Loading content...</div>`;\n    if (this.error) return html`<div part=\"error\">Error loading content.</div>`;\n    const source = this.src ? this.fetched : this.content;\n    if (!source) return nothing;\n    const rendered = DOMPurify.sanitize(marked.parse(source, { gfm: true, breaks: true, async: false }));\n    return html`<div part=\"body\">${unsafeHTML(rendered)}</div>`;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-2JGWWXEI.js → chunk-76AVBQUA.js}

@@ -6,11 +6,11 @@ import {
   sectionHeaderStyles,
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-3VE6VFJ4.js";
+} from "./chunk-FZ36KL73.js";
 import {
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -249,4 +249,4 @@ BentoGrid = __decorateClass([
 export {
   BentoGrid
 };
-//# sourceMappingURL=chunk-2JGWWXEI.js.map
+//# sourceMappingURL=chunk-76AVBQUA.js.map

package/dist/chunk-76AVBQUA.js.map

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

package/dist/{chunk-NN3OCPDV.js → chunk-7NLZND6Q.js}

@@ -1,11 +1,11 @@
 import {
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-3VE6VFJ4.js";
+} from "./chunk-FZ36KL73.js";
 import {
   controlBaseStyles,
   rootFontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -204,4 +204,4 @@ Section = __decorateClass([
 export {
   Section
 };
-//# sourceMappingURL=chunk-NN3OCPDV.js.map
+//# sourceMappingURL=chunk-7NLZND6Q.js.map

package/dist/{chunk-EMVHNAID.js → chunk-ALI26WOB.js}

@@ -3,12 +3,12 @@ import {
   sectionHeaderStyles,
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-3VE6VFJ4.js";
+} from "./chunk-FZ36KL73.js";
 import {
   buttonResetStyles,
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -214,4 +214,4 @@ ItemsAccordion = __decorateClass([
 export {
   ItemsAccordion
 };
-//# sourceMappingURL=chunk-EMVHNAID.js.map
+//# sourceMappingURL=chunk-ALI26WOB.js.map

package/dist/chunk-ALI26WOB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/items-accordion/ItemsAccordion.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport {\n  reducedMotionStyles,\n  sectionHeaderStyles,\n  sectionSubtitleStyles,\n  sectionTitleStyles,\n} from '../shared/section-styles';\nimport type { AccordionToggleEventDetail } from './ItemsAccordionEvents';\n\nexport interface AccordionItem {\n  id: string;\n  title: string;\n  content: string;\n}\n\n/**\n * A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.\n *\n * @cssprop --st-items-accordion-padding - Overrides the block's padding.\n */\n@customElement('st-items-accordion')\nexport class ItemsAccordion 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-items-accordion-padding instead. */\n      padding: var(--st-items-accordion-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\n      background: var(--st-color-page);\n      ${fontFamilyStyles}\n    }\n\n    .container {\n      max-width: 800px;\n      margin: 0 auto;\n    }\n\n    .header {\n      ${sectionHeaderStyles}\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      font-size: var(--st-text-2xl);\n      margin-bottom: var(--st-space-12);\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      font-size: var(--st-text-base);\n      margin: 0;\n    }\n\n    .list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-16);\n    }\n\n    .item {\n      border: 1px solid var(--st-color-border);\n      border-radius: var(--st-radius-lg);\n      background: var(--st-color-surface);\n      overflow: hidden;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n    }\n\n    .item.open {\n      border-color: var(--st-color-border-strong);\n      box-shadow: 0 4px 6px -1px var(--st-shadow-color-sm);\n    }\n\n    .trigger {\n      ${buttonResetStyles}\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: var(--st-space-24);\n      text-align: left;\n      font-size: var(--st-text-lg);\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n    }\n\n    .trigger:hover {\n      background: var(--st-color-hover);\n    }\n\n    .chevron {\n      flex-shrink: 0;\n      margin-left: var(--st-space-16);\n      font-size: 24px;\n      color: var(--st-color-text-faint);\n      transition: transform 0.3s ease;\n    }\n\n    .open .chevron {\n      transform: rotate(180deg);\n    }\n\n    .content {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows 0.3s ease;\n    }\n\n    .open .content {\n      grid-template-rows: 1fr;\n    }\n\n    .content-clip {\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .content-inner {\n      padding: 0 var(--st-space-24) var(--st-space-24);\n      color: var(--st-color-text);\n      line-height: 1.6;\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        padding: var(--st-items-accordion-padding, var(--st-space-48) var(--st-space-20)) !important;\n      }\n\n      .title {\n        font-size: var(--st-text-xl);\n      }\n    }\n\n    ${reducedMotionStyles}\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ attribute: false })\n  items: AccordionItem[] = [];\n\n  @property({ type: Boolean, attribute: 'allow-multiple' })\n  allowMultiple = false;\n\n  @state() private openIds = new Set<string>();\n\n  private toggle(id: string) {\n    const wasOpen = this.openIds.has(id);\n    const next = new Set(this.allowMultiple ? this.openIds : []);\n    if (wasOpen) next.delete(id);\n    else next.add(id);\n    this.openIds = next;\n    this.dispatchEvent(\n      new CustomEvent<AccordionToggleEventDetail>('accordion-toggle', {\n        detail: { id, open: !wasOpen },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${this.title || this.subtitle\n          ? html`<div class=\"header\" part=\"header\">\n              ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n              ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n            </div>`\n          : nothing}\n        <div class=\"list\" part=\"list\">\n          ${this.items.map((item) => {\n            const open = this.openIds.has(item.id);\n            return html`\n              <div class=\"item ${open ? 'open' : ''}\" part=\"item\">\n                <button\n                  class=\"trigger\"\n                  part=\"trigger\"\n                  type=\"button\"\n                  aria-expanded=${open ? 'true' : 'false'}\n                  aria-controls=\"content-${item.id}\"\n                  @click=${() => this.toggle(item.id)}\n                >\n                  <span>${item.title}</span>\n                  <iconify-icon class=\"chevron\" icon=\"mdi:chevron-down\"></iconify-icon>\n                </button>\n                <div class=\"content\" id=\"content-${item.id}\" part=\"content\" role=\"region\" ?inert=${!open}>\n                  <div class=\"content-clip\">\n                    <div class=\"content-inner\">${item.content}</div>\n                  </div>\n                </div>\n              </div>\n            `;\n          })}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-TLHG33MM.js → chunk-BLQV2YMO.js}

@@ -1,12 +1,12 @@
 import {
   chevronIcon,
   externalLinkIcon
-} from "./chunk-PB7ZPPLP.js";
+} from "./chunk-WTD2YIAA.js";
 import {
   controlBaseStyles,
   eyebrowLabelStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -265,4 +265,4 @@ Select = __decorateClass([
 export {
   Select
 };
-//# sourceMappingURL=chunk-TLHG33MM.js.map
+//# sourceMappingURL=chunk-BLQV2YMO.js.map

package/dist/chunk-BLQV2YMO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/select/Select.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { chevronIcon, externalLinkIcon } from '../shared/icons';\nimport { controlBaseStyles, eyebrowLabelStyles, fontFamilyStyles } from '../shared/styles';\nimport type { SelectOption } from './SelectEvents';\nimport type { SelectChangedEventDetail } from './SelectEvents';\n\nlet instanceCounter = 0;\n\n/**\n * A fully custom-styled replacement for native `<select>`, used everywhere\n * the wizard needs a single-choice dropdown (template source, list, document\n * library, admin roles, ...).\n *\n * Built on the CSS Customizable Select API (`appearance: base-select`) —\n * still a real `<select>`/`<option>` element tree, so focus, keyboard\n * (arrows/Home/End/typeahead), and ARIA all come from the browser for free,\n * but the trigger (`<button>`/`<selectedcontent>`) and popup\n * (`::picker(select)`) are fully styleable instead of OS-rendered. Chromium\n * only for now (Firefox/Safari fall back to an unstyled native `<select>` —\n * the extra `<button>`/`<selectedcontent>` markup is simply not rendered by\n * browsers that don't support the parsing/CSS additions, so the control\n * still works there, just without the custom look).\n *\n * `options` intentionally has no \"unselected\" placeholder entry — set\n * `value=\"\"` (or any value with no matching option) and it falls back to\n * showing `placeholder` in the trigger instead, letting callers swap the\n * placeholder text dynamically (e.g. \"Select a list\" vs \"Select a list\n * first\") without needing a synthetic option in the list. Internally this is\n * a real hidden/disabled `<option value=\"\">`, since a native `<select>`\n * always has *some* option selected.\n *\n * Fires `select-change` (detail: `{ value }`) only when the value actually\n * changes, matching native `<select>`'s `change` event semantics.\n *\n * `link-href` optionally renders an external-link button in front of\n * `field-label` — the same glyph/placement as the \"open library\" links\n * placed next to the Templates/Save-location breadcrumbs — for callers that\n * want a one-click way to open whatever the current selection points at\n * (e.g. the SharePoint site or library) in a new tab.\n */\n@customElement('st-select')\nexport class Select extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: inline-flex;\n      flex-direction: column;\n      gap: var(--st-space-4);\n      min-width: 0;\n      ${fontFamilyStyles}\n    }\n\n    .field-label-row {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-6);\n      min-width: 0;\n    }\n\n    .field-label {\n      font-size: var(--st-text-xs);\n      ${eyebrowLabelStyles}\n    }\n\n    .field-label-link {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: none;\n      color: var(--st-color-text-faint);\n    }\n\n    .field-label-link:hover {\n      color: var(--st-color-text-strong);\n    }\n\n    select {\n      appearance: base-select;\n      width: 100%;\n      min-width: 0;\n      border: 0;\n      padding: 0;\n      background: transparent;\n      font: inherit;\n      color: inherit;\n    }\n\n    select::picker(select) {\n      appearance: base-select;\n      margin-top: var(--st-space-4);\n      background: var(--st-color-surface);\n      border: 1px solid var(--st-color-border);\n      border-radius: var(--st-radius-sm);\n      box-shadow: 0 4px 16px var(--st-shadow-color-sm);\n      padding: var(--st-space-4) 0;\n    }\n\n    .trigger {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--st-space-8);\n      width: 100%;\n      padding: var(--st-space-8) var(--st-space-10);\n      border-radius: var(--st-radius-sm);\n      border: 1px solid var(--st-color-border);\n      background: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n      font: inherit;\n      font-size: var(--st-text-base);\n      box-sizing: border-box;\n      text-align: left;\n      cursor: pointer;\n    }\n\n    .trigger:hover,\n    .trigger:focus-visible {\n      background: var(--st-color-hover);\n    }\n\n    /* Borderless variant for a header/toolbar utility slot, so it reads as the same kind of\n     * hover-only control as st-icon-button and st-header's own language trigger (same fixed\n     * height, no permanent visible border) instead of a form-field box. */\n    :host([ghost]) .trigger {\n      height: var(--st-size-32);\n      padding: 0 var(--st-space-8);\n      border: none;\n      background: transparent;\n    }\n\n    :host([ghost]) .trigger:hover,\n    :host([ghost]) .trigger:focus-visible {\n      background: var(--st-color-hover);\n    }\n\n    select:disabled .trigger {\n      color: var(--st-color-text-muted);\n      cursor: not-allowed;\n    }\n\n    selectedcontent {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    select:has(option[value='']:checked) selectedcontent {\n      color: var(--st-color-text-muted);\n    }\n\n    select::picker-icon {\n      display: none;\n    }\n\n    .caret {\n      display: flex;\n      flex: none;\n      color: var(--st-color-text-muted);\n    }\n\n    option {\n      display: block;\n      padding: var(--st-space-8) var(--st-space-10);\n      font-size: var(--st-text-base);\n      color: var(--st-color-text);\n      cursor: pointer;\n    }\n\n    option[hidden] {\n      display: none;\n    }\n\n    option:hover,\n    option:focus {\n      background: var(--st-color-hover);\n    }\n\n    option:checked {\n      color: var(--st-color-text-strong);\n      font-weight: var(--st-font-weight-semibold);\n    }\n\n    option::checkmark {\n      display: none;\n    }\n  `;\n\n  @property({ attribute: false })\n  options: SelectOption[] = [];\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  placeholder = 'Select…';\n\n  /** Renders an internal `<label>` above the trigger, associated via `aria-labelledby`. Leave empty when the field is labeled some other way (e.g. context alone). */\n  @property({ type: String, attribute: 'field-label' })\n  fieldLabel = '';\n\n  /**\n   * Optional URL for an external-link button rendered in front of\n   * `field-label` (same glyph/placement as the \"open library\" links next to\n   * the Templates/Save-location breadcrumbs) — e.g. a link to the\n   * SharePoint site or library the current selection points at. Ignored\n   * when `field-label` is empty, since there'd be nothing to place it in\n   * front of.\n   */\n  @property({ type: String, attribute: 'link-href' })\n  linkHref = '';\n\n  /** Accessible name/title for the `link-href` button. */\n  @property({ type: String, attribute: 'link-label' })\n  linkLabel = 'Open';\n\n  /** Accessible name for the trigger when there's no visible `field-label` (e.g. a filter-row select). Ignored when `field-label` is set. */\n  @property({ type: String, attribute: 'select-label' })\n  selectLabel = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Borderless variant for a header/toolbar utility slot — see the `:host([ghost])` styles. */\n  @property({ type: Boolean, reflect: true })\n  ghost = false;\n\n  @query('select')\n  private readonly selectEl!: HTMLSelectElement;\n\n  private readonly instanceId = ++instanceCounter;\n  private readonly fieldLabelId = `st-select-label-${this.instanceId}`;\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('value') || changed.has('options')) {\n      const hasValue = this.options.some((option) => option.value === this.value);\n      const nextValue = hasValue ? this.value : '';\n      if (this.selectEl.value !== nextValue) this.selectEl.value = nextValue;\n    }\n  }\n\n  render() {\n    const hasValue = this.options.some((option) => option.value === this.value);\n\n    return html`\n      ${this.fieldLabel\n        ? html`\n            <span class=\"field-label-row\">\n              ${this.linkHref\n                ? html`\n                    <a\n                      part=\"field-label-link\"\n                      class=\"field-label-link\"\n                      href=${this.linkHref}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      title=${this.linkLabel}\n                      aria-label=${this.linkLabel}\n                    >\n                      ${externalLinkIcon(11)}\n                    </a>\n                  `\n                : nothing}\n              <span part=\"field-label\" id=${this.fieldLabelId} class=\"field-label\">${this.fieldLabel}</span>\n            </span>\n          `\n        : nothing}\n      <select\n        part=\"select\"\n        aria-label=${!this.fieldLabel && this.selectLabel ? this.selectLabel : nothing}\n        aria-labelledby=${this.fieldLabel ? this.fieldLabelId : nothing}\n        ?disabled=${this.disabled}\n        @change=${this.onChange}\n      >\n        <button part=\"trigger\" class=\"trigger\" type=\"button\">\n          <selectedcontent></selectedcontent>\n          <span class=\"caret\">${chevronIcon('down', 10)}</span>\n        </button>\n        <option value=\"\" ?selected=${!hasValue} disabled hidden>${this.placeholder}</option>\n        ${this.options.map(\n          (option) => html`<option part=\"option\" value=${option.value} ?selected=${option.value === this.value}>${option.label}</option>`\n        )}\n      </select>\n    `;\n  }\n\n  private onChange = (event: Event): void => {\n    const newValue = (event.target as HTMLSelectElement).value;\n    if (newValue === this.value) return;\n\n    this.value = newValue;\n    this.dispatchEvent(new CustomEvent<SelectChangedEventDetail>('select-change', { detail: { value: newValue }, bubbles: true, composed: true }));\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-UVNBZD7R.js → chunk-BMHMNXIA.js}

@@ -2,11 +2,11 @@ import {
   sectionHeaderStyles,
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-3VE6VFJ4.js";
+} from "./chunk-FZ36KL73.js";
 import {
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -155,4 +155,4 @@ ContentBlock = __decorateClass([
 export {
   ContentBlock
 };
-//# sourceMappingURL=chunk-UVNBZD7R.js.map
+//# sourceMappingURL=chunk-BMHMNXIA.js.map

package/dist/chunk-BMHMNXIA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/content-block/ContentBlock.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\nimport '../markdown';\n\n/**\n * A long-form article section: centered title/subtitle, an optional featured image with caption,\n * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\n * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\n * block works without a fetch); `content-src` wins when both are set.\n *\n * @cssprop --st-content-block-padding - Overrides the block's padding.\n */\n@customElement('st-content-block')\nexport class ContentBlock extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-content-block-padding instead. */\n      padding: var(--st-content-block-padding, var(--st-space-24)) !important;\n      background: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n    }\n\n    :host([inverted]) {\n      background: var(--st-color-text-strong);\n      color: var(--st-color-on-solid);\n    }\n\n    .container {\n      max-width: var(--st-cms-container-max);\n      padding: 0 var(--st-space-48);\n      margin: 0 auto;\n    }\n\n    .header {\n      ${sectionHeaderStyles}\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      line-height: 1.1;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n    }\n\n    :host([inverted]) .title,\n    :host([inverted]) .subtitle {\n      color: inherit;\n    }\n\n    .featured-image {\n      margin: 0 0 var(--st-space-48);\n      border-radius: var(--st-radius-lg);\n      overflow: hidden;\n    }\n\n    .featured-image img {\n      width: 100%;\n      height: auto;\n      display: block;\n    }\n\n    figcaption {\n      padding: var(--st-space-12);\n      text-align: center;\n      color: var(--st-color-text-muted);\n      font-size: var(--st-text-xs);\n    }\n\n    st-markdown {\n      color: var(--st-color-text);\n      font-size: var(--st-text-xl);\n    }\n\n    :host([inverted]) st-markdown {\n      color: inherit;\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        padding: var(--st-content-block-padding, var(--st-space-48) var(--st-space-24)) !important;\n      }\n\n      .container {\n        padding: 0;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  /** URL of a Markdown file. */\n  @property({ type: String, attribute: 'content-src' })\n  contentSrc = '';\n\n  /** Inline Markdown, used when `content-src` is not set. */\n  @property({ type: String })\n  content = '';\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-caption' })\n  imageCaption = '';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  render() {\n    return html`\n      <section class=\"container\" part=\"container\">\n        <div class=\"header\" part=\"header\">\n          ${this.title ? html`<div class=\"title\" part=\"title\">${this.title}</div>` : nothing}\n          ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\n        </div>\n        ${this.imageSrc\n          ? html`\n              <figure class=\"featured-image\" part=\"image\">\n                <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />\n                ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}\n              </figure>\n            `\n          : nothing}\n        <st-markdown part=\"body\" .src=${this.contentSrc} .content=${this.content}></st-markdown>\n      </section>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAejC,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAmFL,iBAAQ;AAGR,oBAAW;AAIX,sBAAa;AAIb,mBAAU;AAGV,oBAAW;AAGX,oBAAW;AAGX,wBAAe;AAGf,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,YAGC,KAAK,QAAQ,uCAAuC,KAAK,KAAK,WAAW,OAAO;AAAA,YAChF,KAAK,WAAW,6CAA6C,KAAK,QAAQ,WAAW,OAAO;AAAA;AAAA,UAE9F,KAAK,WACH;AAAA;AAAA,2BAEe,KAAK,QAAQ,QAAQ,KAAK,YAAY,KAAK,KAAK;AAAA,kBACzD,KAAK,eAAe,mBAAmB,KAAK,YAAY,kBAAkB,OAAO;AAAA;AAAA,gBAGvF,OAAO;AAAA,wCACqB,KAAK,UAAU,aAAa,KAAK,OAAO;AAAA;AAAA;AAAA,EAG9E;AACF;AA/Ha,aACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAoBhB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKlB,qBAAqB;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;AAgD3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlFf,aAmFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,aAsFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAzFzC,aA0FX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Ff,aA8FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAhGvC,aAiGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAnGvC,aAoGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAtG3C,aAuGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzG/B,aA0GX;AA1GW,eAAN;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB;","names":[]}

package/dist/{chunk-ZRXYWH6C.js → chunk-DH53HZPB.js}

@@ -1,19 +1,19 @@
 import {
   chevronIcon
-} from "./chunk-PB7ZPPLP.js";
+} from "./chunk-WTD2YIAA.js";
 import {
   invertedSectionTextStyles,
   reducedMotionStyles,
   sectionHeaderStyles,
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-3VE6VFJ4.js";
+} from "./chunk-FZ36KL73.js";
 import {
   buttonResetStyles,
   cardShellStyles,
   controlBaseStyles,
   rootFontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -508,4 +508,4 @@ Testimonials = __decorateClass([
 export {
   Testimonials
 };
-//# sourceMappingURL=chunk-ZRXYWH6C.js.map
+//# sourceMappingURL=chunk-DH53HZPB.js.map

package/dist/{chunk-HPIQSECE.js → chunk-EMCQBT3S.js}

@@ -1,10 +1,10 @@
 import {
   reducedMotionStyles
-} from "./chunk-3VE6VFJ4.js";
+} from "./chunk-FZ36KL73.js";
 import {
   buttonResetStyles,
   controlBaseStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -531,4 +531,4 @@ Carousel = __decorateClass([
 export {
   Carousel
 };
-//# sourceMappingURL=chunk-HPIQSECE.js.map
+//# sourceMappingURL=chunk-EMCQBT3S.js.map

package/dist/{chunk-BQTDFQ4V.js → chunk-FLY7TNRT.js}

@@ -4,11 +4,11 @@ import {
   sectionHeaderStyles,
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-3VE6VFJ4.js";
+} from "./chunk-FZ36KL73.js";
 import {
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -278,4 +278,4 @@ export {
   FeatureItem,
   FeaturesSection
 };
-//# sourceMappingURL=chunk-BQTDFQ4V.js.map
+//# sourceMappingURL=chunk-FLY7TNRT.js.map

package/dist/chunk-FLY7TNRT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/features-section/FeaturesSection.ts","../src/features-section/FeatureItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\nimport './FeatureItem';\n\n/** Data for one tile when using the `items` property (mirrors `st-feature-item`'s properties). */\nexport interface FeatureItemData {\n  icon?: string;\n  title: string;\n  description: string;\n  href?: string;\n}\n\n/**\n * A titled grid of feature tiles. Ports `SankhyaUI`'s React `FeaturesSection`: tiles come from the\n * `items` property, from slotted `st-feature-item` elements (the source's `children`), or both\n * (slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`\n * is passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.\n *\n * @cssprop --st-features-section-padding - Overrides the section's padding.\n */\n@customElement('st-features-section')\nexport class FeaturesSection extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-features-section-padding instead. */\n      padding: var(--st-features-section-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\n      background: var(--st-color-surface);\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    }\n\n    .header {\n      ${sectionHeaderStyles}\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      margin: 0;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      margin: 0 auto;\n    }\n\n    :host([inverted]) .title,\n    :host([inverted]) .subtitle {\n      color: var(--st-color-on-solid);\n    }\n\n    .grid {\n      display: grid;\n      grid-template-columns: repeat(var(--features-columns, 2), 1fr);\n      gap: var(--st-space-32);\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        padding: var(--st-features-section-padding, var(--st-space-48) var(--st-space-16)) !important;\n      }\n\n      .grid {\n        grid-template-columns: 1fr;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  /** Applied to every tile built from `items`. */\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = 'Learn more';\n\n  @property({ type: Number })\n  columns = 0;\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /** Tiles to render (property only). */\n  @property({ attribute: false })\n  items: FeatureItemData[] = [];\n\n  render() {\n    const gridStyle = this.columns ? `--features-columns: ${this.columns}` : nothing;\n    return html`\n      <section class=\"container\" part=\"container\">\n        <div class=\"header\" part=\"header\">\n          <div class=\"title\" part=\"title\">${this.title}</div>\n          ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\n        </div>\n        <div class=\"grid\" part=\"grid\" style=${gridStyle}>\n          <slot></slot>\n          ${this.items.map(\n            (item) => html`\n              <st-feature-item\n                .icon=${item.icon ?? ''}\n                .title=${item.title}\n                .description=${item.description}\n                .href=${item.href ?? ''}\n                .actionLabel=${this.actionLabel}\n                ?inverted=${this.inverted}\n              ></st-feature-item>\n            `\n          )}\n        </div>\n      </section>\n    `;\n  }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { cardDescriptionStyles, cardTitleStyles } from '../shared/section-styles';\nimport '../card';\nimport '../markdown';\n\n/**\n * One feature tile for `st-features-section`: optional icon, title, Markdown description and an\n * optional \"Learn more\" link, rendered on an `st-card`. `icon` is an Iconify name (e.g.\n * `mdi:rocket`). The link is a plain `<a>` (the source used react-router's `Link` for non-http\n * hrefs; there is no Lit equivalent). The click is composed, so an SPA router can intercept it\n * (e.g. via `event.composedPath()`) and navigate client-side; `http(s)` links open in a new tab.\n */\n@customElement('st-feature-item')\nexport class FeatureItem extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n    }\n\n    st-card {\n      height: 100%;\n    }\n\n    .content {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: var(--st-space-16);\n      height: 100%;\n    }\n\n    .icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 48px;\n      height: 48px;\n      border-radius: var(--st-radius-lg);\n      background: var(--st-color-subtle);\n      color: var(--st-color-text-strong);\n      margin-bottom: var(--st-space-8);\n      font-size: 24px;\n    }\n\n    :host([inverted]) .icon {\n      background: var(--st-color-text-muted);\n      color: var(--st-color-on-solid);\n    }\n\n    .title {\n      ${cardTitleStyles}\n      margin: 0;\n    }\n\n    .description {\n      ${cardDescriptionStyles}\n      margin: 0;\n    }\n\n    :host([inverted]) .title,\n    :host([inverted]) .description {\n      color: inherit;\n    }\n\n    .link {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-4);\n      margin-top: auto;\n      color: var(--st-color-text-muted);\n      font-weight: var(--st-font-weight-medium);\n      font-size: var(--st-text-md);\n      text-decoration: none;\n      transition: color 0.2s ease;\n    }\n\n    .link:hover {\n      color: var(--st-color-text-strong);\n      text-decoration: underline;\n    }\n\n    :host([inverted]) .link,\n    :host([inverted]) .link:hover {\n      color: inherit;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .link {\n        transition: none;\n      }\n    }\n  `;\n\n  /** Iconify icon name, e.g. `mdi:rocket`. */\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String })\n  title = '';\n\n  /** Markdown. */\n  @property({ type: String })\n  description = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = 'Learn more';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  render() {\n    const external = this.href.startsWith('http');\n    return html`\n      <st-card hoverable elevation=\"sm\" ?inverted=${this.inverted} part=\"card\">\n        <div class=\"content\" part=\"content\">\n          ${this.icon\n            ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${this.icon}></iconify-icon></div>`\n            : nothing}\n          <h3 class=\"title\" part=\"title\">${this.title}</h3>\n          <st-markdown class=\"description\" part=\"description\" .content=${this.description}></st-markdown>\n          ${this.href\n            ? html`\n                <a\n                  class=\"link\"\n                  part=\"link\"\n                  href=${this.href}\n                  target=${external ? '_blank' : '_self'}\n                  rel=${external ? 'noopener noreferrer' : nothing}\n                >\n                  ${this.actionLabel} <span>&rarr;</span>\n                </a>\n              `\n            : nothing}\n        </div>\n      </st-card>\n    `;\n  }\n}\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement"]}

package/dist/{chunk-3VE6VFJ4.js → chunk-FZ36KL73.js}

@@ -84,4 +84,4 @@ export {
   reducedMotionStyles,
   invertedSectionTextStyles
 };
-//# sourceMappingURL=chunk-3VE6VFJ4.js.map
+//# sourceMappingURL=chunk-FZ36KL73.js.map

package/dist/chunk-FZ36KL73.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/section-styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * CSS fragments shared by the CMS section components (hero, features, stats, ...), replacing the\n * source React library's global `Common.css` classes (`.section-title`, `.theme-inverted`, ...)\n * so each Lit component composes them into its own shadow root instead of re-declaring them.\n */\n\n/** Section heading + subheading typography. Use on `.title` / `.subtitle` selectors. */\nexport const sectionTitleStyles = css`\n  font-size: var(--st-cms-text-4xl);\n  font-weight: var(--st-font-weight-bold);\n  color: var(--st-color-text-strong);\n  margin: 0 0 var(--st-space-16);\n  line-height: 1.2;\n`;\n\nexport const sectionSubtitleStyles = css`\n  font-size: var(--st-cms-text-lg);\n  color: var(--st-color-text-muted);\n  line-height: 1.6;\n  margin: 0 0 var(--st-space-28);\n`;\n\n/** Card heading + body typography. */\nexport const cardTitleStyles = css`\n  font-size: var(--st-text-2xl);\n  font-weight: var(--st-font-weight-semibold);\n  color: var(--st-color-text-strong);\n  margin: 0 0 var(--st-space-8);\n`;\n\nexport const cardDescriptionStyles = css`\n  font-size: var(--st-text-md);\n  color: var(--st-color-text-muted);\n  line-height: 1.5;\n`;\n\n/** Outlined call-to-action link/button used by hero, promo banner, features, ... */\nexport const ctaLinkStyles = css`\n  display: inline-block;\n  padding: 12px 24px;\n  border-radius: var(--st-radius-sm);\n  font: inherit;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n`;\n\n/** Maps the source's `padding` prop (none|small|medium|large) to `:host([padding=...])` rules. */\nexport const paddingScaleStyles = css`\n  :host([padding='small']) { padding: var(--st-space-16); }\n  :host([padding='medium']) { padding: var(--st-space-24); }\n  :host([padding='large']) { padding: var(--st-space-32); }\n`;\n\n/** Centered title/subtitle block above a section's content. Use on a `.header` wrapper. */\nexport const sectionHeaderStyles = css`\n  text-align: center;\n  margin-bottom: var(--st-space-48);\n`;\n\n/** Rounded icon tile (holds an `<iconify-icon>`) used by bento cards, feature lists, ... */\nexport const iconTileStyles = css`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: var(--st-radius-lg);\n  background: var(--st-color-subtle);\n  color: var(--st-color-text-muted);\n`;\n\n/** Collapses CSS transitions/animations for users who prefer reduced motion. */\nexport const reducedMotionStyles = css`\n  @media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n      transition-duration: 0.01ms !important;\n      animation-duration: 0.01ms !important;\n    }\n  }\n`;\n\n/** Light-on-dark title/subtitle for an `inverted` section host. Place inside the host's `static styles`. */\nexport const invertedSectionTextStyles = css`\n  :host([inverted]) .title {\n    color: var(--st-color-on-solid);\n  }\n\n  :host([inverted]) .subtitle {\n    color: var(--st-color-border);\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AASb,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,IAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9B,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxB,IAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAO9B,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYtB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAO3B,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAM5B,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvB,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY5B,IAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/{chunk-HGTC3LCW.js → chunk-G3CF7MBO.js}

@@ -1,10 +1,10 @@
 import {
   arrowUpRightIcon
-} from "./chunk-PB7ZPPLP.js";
+} from "./chunk-WTD2YIAA.js";
 import {
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -604,4 +604,4 @@ export {
   MegaMenuColumn,
   MegaMenuFeature
 };
-//# sourceMappingURL=chunk-HGTC3LCW.js.map
+//# sourceMappingURL=chunk-G3CF7MBO.js.map

package/dist/{chunk-CDC4P77V.js → chunk-GJO3RGOB.js}

@@ -1,7 +1,7 @@
 import {
   controlBaseStyles,
   rootFontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -296,4 +296,4 @@ Footer = __decorateClass([
 export {
   Footer
 };
-//# sourceMappingURL=chunk-CDC4P77V.js.map
+//# sourceMappingURL=chunk-GJO3RGOB.js.map

package/dist/chunk-GJO3RGOB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/footer/Footer.ts"],"sourcesContent":["import { LitElement, PropertyValues, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\n\nexport interface FooterLink {\n  label: string;\n  href: string;\n}\n\nexport interface FooterColumn {\n  title: string;\n  links: FooterLink[];\n}\n\nexport interface FooterSocialLink {\n  /** Iconify icon name, e.g. `mdi:github`. */\n  icon: string;\n  href: string;\n}\n\n/** Fired when an internal footer link is activated — cancelable, so an SPA can `preventDefault()` and route instead. */\nexport interface FooterLinkEventDetail {\n  href: string;\n}\n\n/**\n * The footer, in two layouts:\n *\n * - **Bar** (default): a copyright line plus an optional \"powered by\" link — what the suite's\n *   authenticated apps use.\n * - **Site**: when `columns`, `socialLinks`, `description` or `imageSrc` is set, the footer becomes a\n *   marketing-site footer — brand (logo/company name, description, social icons), link columns and a\n *   bottom bar with the copyright and \"powered by\".\n *\n * Fires a cancelable `footer-link` event (detail `{ href }`) when an internal link is clicked.\n */\n@customElement('st-footer')\nexport class Footer extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--st-space-16);\n      flex-wrap: wrap;\n      /* !important on padding/border-top only: a shadow host's own :host rule always loses to ANY\n       * rule the consuming page has for the same property on that element, regardless of\n       * specificity — so a page that resets margin/padding/border on every element (e.g. Tailwind\n       * Preflight, which every app but Template Hub loads) silently zeroes this footer's padding\n       * and top border unless these two win the conflict outright via !important. */\n      padding: var(--st-space-16) var(--st-space-28) !important;\n      border-top: 1px solid var(--st-color-border) !important;\n      color: var(--st-color-text-muted);\n      font-size: var(--st-text-xs);\n      ${rootFontFamilyStyles}\n    }\n\n    .powered-by {\n      color: inherit;\n      text-decoration: none;\n      font-weight: var(--st-font-weight-semibold);\n    }\n\n    .powered-by:hover {\n      color: var(--st-color-text-strong);\n    }\n\n    :host([inverted]) {\n      background: var(--st-color-text-strong);\n      color: var(--st-color-on-solid);\n      border-top-color: transparent !important;\n    }\n\n    /* Site layout */\n    :host([site]) {\n      display: block;\n      padding: 64px var(--st-space-28) 32px !important;\n      font-size: var(--st-text-sm);\n    }\n\n    .site {\n      max-width: 1200px;\n      margin: 0 auto;\n    }\n\n    .grid {\n      display: grid;\n      grid-template-columns: 2fr repeat(3, 1fr);\n      gap: 64px;\n      margin-bottom: 64px;\n    }\n\n    .brand {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .logo {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 1.25rem;\n      font-weight: 700;\n      color: var(--st-color-text-strong);\n    }\n\n    .logo-img {\n      height: 32px;\n      width: auto;\n    }\n\n    .description {\n      margin: 0;\n      max-width: 300px;\n      line-height: 1.6;\n    }\n\n    .social {\n      display: flex;\n      gap: 16px;\n      margin-top: 16px;\n    }\n\n    .social-link,\n    .link {\n      color: inherit;\n      text-decoration: none;\n      transition: color 0.2s ease;\n    }\n\n    .social-link:hover,\n    .link:hover {\n      color: var(--st-color-text-strong);\n    }\n\n    .column-title {\n      margin: 0 0 24px;\n      font-size: var(--st-text-xs);\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .links {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .bottom {\n      padding-top: 32px;\n      border-top: 1px solid var(--st-color-border);\n      font-size: var(--st-text-xs);\n    }\n\n    .bottom-text {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .bottom-text .powered-by {\n      font-size: 0.85em;\n      font-weight: inherit;\n      opacity: 0.8;\n    }\n\n    @media (max-width: 1024px) {\n      .grid {\n        grid-template-columns: repeat(3, 1fr);\n        gap: 48px;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .grid {\n        grid-template-columns: 1fr;\n        gap: 40px;\n      }\n\n      .bottom {\n        text-align: center;\n      }\n    }\n\n    :host([site][inverted]) .logo,\n    :host([site][inverted]) .column-title,\n    :host([site][inverted]) .social-link:hover,\n    :host([site][inverted]) .link:hover {\n      color: var(--st-color-on-solid);\n    }\n\n    :host([site][inverted]) .bottom {\n      border-top-color: color-mix(in oklch, var(--st-color-on-solid) 20%, var(--st-color-text-strong));\n    }\n  `;\n\n  /** Inverts the footer's color roles (light-on-dark instead of dark-on-light) — matches the\n   * source component's `inverted` (from its shared `BaseProps`), same as `st-header`'s. */\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /** Used to build the default `copyright` line (`© {year} {companyName}`) when `copyright` isn't set explicitly. */\n  @property({ type: String, attribute: 'company-name' })\n  companyName = '';\n\n  /** Overrides the default computed copyright line entirely. */\n  @property({ type: String })\n  copyright = '';\n\n  @property({ type: String, attribute: 'powered-by' })\n  poweredBy = '';\n\n  @property({ type: String, attribute: 'powered-by-link' })\n  poweredByLink = '';\n\n  /** App version, rendered as `v{version}` after the copyright line — for apps that show their own\n   * version in the footer rather than the header title. */\n  @property({ type: String })\n  version = '';\n\n  /** Logo shown in the brand block (site layout). */\n  @property({ type: String, attribute: 'image-src' })\n  imageSrc = '';\n\n  /** Short blurb under the logo (site layout). */\n  @property({ type: String })\n  description = '';\n\n  /** Link columns (site layout). */\n  @property({ attribute: false })\n  columns: FooterColumn[] = [];\n\n  /** Social icon links under the description (site layout). */\n  @property({ attribute: false })\n  socialLinks: FooterSocialLink[] = [];\n\n  private get isSite(): boolean {\n    return !!(this.columns.length || this.socialLinks.length || this.description || this.imageSrc);\n  }\n\n  private get resolvedCopyright(): string {\n    if (this.copyright) return this.copyright;\n    if (this.companyName) return `© ${new Date().getFullYear()} ${this.companyName}`;\n    return `© ${new Date().getFullYear()}`;\n  }\n\n  protected willUpdate(changed: PropertyValues): void {\n    if (changed.size) this.toggleAttribute('site', this.isSite);\n  }\n\n  private onLinkClick(event: MouseEvent, href: string): void {\n    const select = new CustomEvent<FooterLinkEventDetail>('footer-link', {\n      detail: { href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(select);\n    if (select.defaultPrevented) event.preventDefault();\n  }\n\n  private renderLink(link: FooterLink) {\n    return /^https?:/i.test(link.href)\n      ? html`<a part=\"link\" class=\"link\" href=${link.href} target=\"_blank\" rel=\"noopener noreferrer\">${link.label}</a>`\n      : html`<a part=\"link\" class=\"link\" href=${link.href} @click=${(event: MouseEvent) => this.onLinkClick(event, link.href)}>${link.label}</a>`;\n  }\n\n  private renderPoweredBy() {\n    return this.poweredBy\n      ? html`\n          <a part=\"powered-by\" class=\"powered-by\" href=${this.poweredByLink || '#'} target=\"_blank\" rel=\"noopener noreferrer\">\n            ${this.poweredBy}\n          </a>\n        `\n      : nothing;\n  }\n\n  private renderSite() {\n    return html`\n      <div class=\"site\" part=\"site\">\n        <div class=\"grid\">\n          <div class=\"brand\" part=\"brand\">\n            ${this.imageSrc || this.companyName\n              ? html`<div class=\"logo\">\n                  ${this.imageSrc ? html`<img class=\"logo-img\" src=${this.imageSrc} alt=${this.companyName || 'Logo'} />` : nothing}\n                  ${this.companyName ? html`<span>${this.companyName}</span>` : nothing}\n                </div>`\n              : nothing}\n            ${this.description ? html`<p class=\"description\">${this.description}</p>` : nothing}\n            ${this.socialLinks.length\n              ? html`<div class=\"social\">\n                  ${this.socialLinks.map(\n                    social => html`<a part=\"social\" class=\"social-link\" href=${social.href} target=\"_blank\" rel=\"noopener noreferrer\" aria-label=${social.icon}>\n                      <iconify-icon icon=${social.icon} width=\"24\" height=\"24\"></iconify-icon>\n                    </a>`\n                  )}\n                </div>`\n              : nothing}\n          </div>\n          ${this.columns.map(\n            column => html`<div class=\"column\" part=\"column\">\n              <h4 class=\"column-title\">${column.title}</h4>\n              <div class=\"links\">${column.links.map(link => this.renderLink(link))}</div>\n            </div>`\n          )}\n        </div>\n        <div class=\"bottom\" part=\"bottom\">\n          <div class=\"bottom-text\">\n            <span part=\"copyright\">${this.resolvedCopyright}</span>\n            ${this.version ? html`<span part=\"version\">v${this.version}</span>` : nothing} ${this.renderPoweredBy()}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  render() {\n    if (this.isSite) return this.renderSite();\n    return html`\n      <span part=\"copyright\">${this.resolvedCopyright}</span>\n      ${this.version ? html`<span part=\"version\">v${this.version}</span>` : nothing} ${this.renderPoweredBy()}\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-K4ZICRZL.js → chunk-JKBWZLG4.js}

@@ -1,11 +1,11 @@
 import {
   ctaLinkStyles,
   paddingScaleStyles
-} from "./chunk-3VE6VFJ4.js";
+} from "./chunk-FZ36KL73.js";
 import {
   controlBaseStyles,
   rootFontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -345,4 +345,4 @@ Hero = __decorateClass([
 export {
   Hero
 };
-//# sourceMappingURL=chunk-K4ZICRZL.js.map
+//# sourceMappingURL=chunk-JKBWZLG4.js.map

package/dist/chunk-JKBWZLG4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hero/Hero.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { ctaLinkStyles, paddingScaleStyles } from '../shared/section-styles';\nimport type { HeroActionEventDetail } from './HeroEvents';\n\n/**\n * Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,\n * optional subtitle and up to two call-to-action links. Port of `SankhyaUI`'s React `Hero`; the\n * framer-motion entrance is redone as CSS keyframes (skipped under `prefers-reduced-motion`).\n *\n * `size`, `content-position` and `overlay=\"gradient\"` give the large editorial layout (copy on the\n * lower left over a gradient that darkens towards it) used by enterprise marketing heroes; the\n * defaults keep the original centered banner. Put several heroes in an `st-carousel` with\n * `indicator-style=\"tabs\"` for a tabbed hero carousel.\n *\n * @fires action - Cancelable, before navigating. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.\n * @cssprop --st-hero-text-color - Text colour over the image.\n * @cssprop --st-hero-min-height - Minimum height when `size` is `large` (default `640px`).\n * @csspart eyebrow - The small label above the title.\n * @csspart secondary-action - The outlined second button.\n */\n@customElement('st-hero')\nexport class Hero extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n    ${paddingScaleStyles}\n\n    @keyframes st-hero-zoom {\n      from { opacity: 0; transform: scale(1.1); }\n      to { opacity: 1; transform: scale(1); }\n    }\n    @keyframes st-hero-rise {\n      from { opacity: 0; transform: translateY(30px); }\n      to { opacity: 1; transform: none; }\n    }\n    @keyframes st-hero-fade {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      overflow: hidden;\n      width: 100%;\n      box-sizing: border-box;\n      background-color: var(--st-color-text-strong);\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: var(--st-hero-position, center center);\n      color: var(--st-color-on-solid);\n      ${rootFontFamilyStyles}\n      animation: st-hero-zoom 1.5s ease-out;\n    }\n\n    :host([inverted]) {\n      background-color: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n    }\n\n    .overlay {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      background: linear-gradient(\n        to bottom,\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),\n        color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)\n      );\n    }\n\n    :host([inverted]) .overlay {\n      display: none;\n    }\n\n    .content {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-20);\n      position: relative;\n      z-index: 2;\n      width: 80%;\n      margin: 0 auto;\n      text-align: center;\n      align-items: center;\n      /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts\n         on the host (e.g. a theme text colour) must not turn it dark. */\n      color: var(--st-hero-text-color, var(--st-color-on-solid));\n    }\n\n    :host([inverted]) .content {\n      color: var(--st-hero-text-color, var(--st-color-text-strong));\n    }\n\n    :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }\n    :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }\n    :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }\n\n    .title {\n      font-size: var(--st-cms-text-display);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1.1;\n      color: inherit;\n      margin: 0;\n      animation: st-hero-rise 0.8s 0.3s ease-out backwards;\n    }\n\n    .subtitle {\n      font-size: var(--st-cms-text-xl);\n      line-height: 1.5;\n      color: inherit;\n      margin: 0;\n      animation: st-hero-fade 0.8s 0.5s ease-out backwards;\n    }\n\n    .actions {\n      display: flex;\n      justify-content: center;\n      width: 100%;\n    }\n\n    .cta {\n      ${ctaLinkStyles}\n      background: var(--st-button-primary-bg);\n      color: var(--st-button-primary-color);\n      font-weight: var(--st-button-font-weight);\n      font-size: var(--st-text-md);\n      animation: st-hero-rise 0.6s 0.7s ease-out backwards;\n    }\n\n    .cta:hover {\n      transform: scale(1.05);\n    }\n\n    .cta:active {\n      transform: scale(0.98);\n    }\n\n    .eyebrow {\n      margin: 0;\n      font-size: var(--st-text-sm);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      color: inherit;\n      opacity: 0.85;\n      animation: st-hero-fade 0.8s 0.2s ease-out backwards;\n    }\n\n    .actions {\n      flex-wrap: wrap;\n      gap: var(--st-space-12);\n    }\n\n    .cta.secondary {\n      background: transparent;\n      color: inherit;\n      box-shadow: inset 0 0 0 1.5px currentColor;\n    }\n\n    .cta.secondary:hover {\n      background: color-mix(in oklch, currentColor 12%, transparent);\n    }\n\n    /* size=\"large\" / \"full\": a tall editorial hero. */\n    :host([size='large']) {\n      min-height: var(--st-hero-min-height, 640px);\n    }\n\n    :host([size='full']) {\n      min-height: 100svh;\n    }\n\n    :host([size='large']) .title,\n    :host([size='full']) .title {\n      font-size: clamp(2.5rem, 6vw, 5rem);\n      letter-spacing: -0.02em;\n      line-height: 1.05;\n    }\n\n    /* content-position=\"bottom\": copy sits in the lower part of the hero, on the container grid. */\n    :host([content-position='bottom']) {\n      align-items: flex-end;\n    }\n\n    :host([content-position='bottom']) .content {\n      width: 100%;\n      max-width: var(--st-cms-container-max);\n      box-sizing: border-box;\n      padding: var(--st-space-48) var(--st-space-24);\n    }\n\n    :host([content-position='bottom']) .title,\n    :host([content-position='bottom']) .subtitle {\n      max-width: 18ch;\n    }\n\n    :host([content-position='bottom']) .subtitle {\n      max-width: 48ch;\n    }\n\n    :host([content-position='bottom']:not([text-alignment='center']):not([text-alignment='right'])) .actions {\n      justify-content: flex-start;\n    }\n\n    :host([content-position='bottom'][text-alignment='center']) .title,\n    :host([content-position='bottom'][text-alignment='center']) .subtitle {\n      margin-inline: auto;\n    }\n\n    /* overlay=\"gradient\": darkest behind the copy, clearing towards the far side of the image. */\n    :host([overlay='gradient']) .overlay {\n      background:\n        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\n        linear-gradient(to right, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\n    }\n\n    :host([overlay='gradient'][text-alignment='right']) .overlay {\n      background:\n        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\n        linear-gradient(to left, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\n    }\n\n    :host([overlay='none']) .overlay {\n      display: none;\n    }\n\n    @media (min-width: 768px) {\n      .content { padding: var(--st-space-32); }\n    }\n    @media (min-width: 1024px) {\n      .content { padding: var(--st-space-48); }\n      :host([content-position='bottom']) .content { padding: var(--st-space-48) var(--st-space-32) 6rem; }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host, .eyebrow, .title, .subtitle, .cta { animation: none; }\n      .cta { transition: none; }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ type: String, attribute: 'image-src' })\n  imageSrc = '';\n\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String, reflect: true, attribute: 'text-alignment' })\n  textAlignment: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  @property({ type: String, reflect: true })\n  padding: 'none' | 'small' | 'medium' | 'large' = 'none';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  @property({ type: String, attribute: 'focal-point' })\n  focalPoint: 'top' | 'left' | 'right' | 'bottom' | 'center' = 'center';\n\n  /** Small uppercase label above the title (e.g. an event or product name). */\n  @property({ type: String })\n  eyebrow = '';\n\n  /** Label of an outlined second button next to the primary one. */\n  @property({ type: String, attribute: 'secondary-action-label' })\n  secondaryActionLabel = '';\n\n  @property({ type: String, attribute: 'secondary-href' })\n  secondaryHref = '';\n\n  /** `auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport. */\n  @property({ type: String, reflect: true })\n  size: 'auto' | 'large' | 'full' = 'auto';\n\n  /** `center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container. */\n  @property({ type: String, reflect: true, attribute: 'content-position' })\n  contentPosition: 'center' | 'bottom' = 'center';\n\n  /** `even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is. */\n  @property({ type: String, reflect: true })\n  overlay: 'even' | 'gradient' | 'none' = 'even';\n\n  private static positions = {\n    top: 'center top',\n    left: 'left center',\n    right: 'right center',\n    bottom: 'center bottom',\n    center: 'center center'\n  } as const;\n\n  protected willUpdate(): void {\n    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\n    this.style.setProperty('--st-hero-position', Hero.positions[this.focalPoint] ?? Hero.positions.center);\n  }\n\n  private emitAction(event: MouseEvent, href: string, kind: 'primary' | 'secondary'): void {\n    const action = new CustomEvent<HeroActionEventDetail>('action', {\n      detail: { href, kind },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(action);\n    if (action.defaultPrevented) event.preventDefault();\n  }\n\n  private onClick = (event: MouseEvent): void => this.emitAction(event, this.href, 'primary');\n\n  private onSecondaryClick = (event: MouseEvent): void => this.emitAction(event, this.secondaryHref, 'secondary');\n\n  render() {\n    return html`\n      <div class=\"overlay\" part=\"overlay\"></div>\n      <div class=\"content\" part=\"content\">\n        ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n        <h1 class=\"title\" part=\"title\">${this.title}</h1>\n        ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n        ${this.actionLabel || this.secondaryActionLabel\n          ? html`<div class=\"actions\" part=\"actions\">\n              ${this.actionLabel\n                ? html`<a class=\"cta\" part=\"action\" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>`\n                : nothing}\n              ${this.secondaryActionLabel\n                ? html`<a class=\"cta secondary\" part=\"secondary-action\" href=${this.secondaryHref || nothing} @click=${this.onSecondaryClick}\n                    >${this.secondaryActionLabel}</a\n                  >`\n                : nothing}\n            </div>`\n          : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-4HKSA5UT.js → chunk-JQY2G4QK.js}

@@ -1,7 +1,7 @@
 import {
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-RHAOQ6K4.js";
+} from "./chunk-KMU6ABQF.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -309,4 +309,4 @@ MenuGridItem = __decorateClass([
 export {
   MenuGridItem
 };
-//# sourceMappingURL=chunk-4HKSA5UT.js.map
+//# sourceMappingURL=chunk-JQY2G4QK.js.map

package/dist/chunk-JQY2G4QK.js.map

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

package/dist/{chunk-RHAOQ6K4.js → chunk-KMU6ABQF.js}

@@ -135,4 +135,4 @@ export {
   BREAKPOINT_TABLET,
   BREAKPOINT_MOBILE
 };
-//# sourceMappingURL=chunk-RHAOQ6K4.js.map
+//# sourceMappingURL=chunk-KMU6ABQF.js.map

package/dist/chunk-KMU6ABQF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Reusable `css` fragments shared across component `static styles` blocks.\n *\n * Lit's `css` tag allows interpolating another `CSSResult` anywhere inside a\n * template, including mid-rule — `${fragment}` below expands to raw CSS\n * text, so these compose into a component's own selectors without forcing a\n * shared class name or touching `render()`. Each component keeps its own\n * selectors; only the duplicated property lists move here. Layout details\n * that genuinely vary per component (padding, gap, font-size, ...) stay\n * local, declared after a fragment so the cascade lets them override it.\n *\n * Add a fragment here only once a pattern is byte-identical (or near enough\n * that the deltas are better expressed as local overrides) across 3+\n * components — see `packages/suite-components/README.md#shared-style-fragments`.\n */\n\n/** Truncates overflowing text to a single line with an ellipsis. */\nexport const truncateStyles = css`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\n/**\n * Base for an unstyled, click-through interactive element (icon buttons,\n * menu triggers, link-like buttons) before component-specific padding,\n * font-size, and color are layered on.\n */\nexport const buttonResetStyles = css`\n  border: 0;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n`;\n\n/**\n * The dark-filled primary-action button look (wizard Next/Generate/Run/Save,\n * active toggle buttons, ...). Pair with `ctaButtonDisabledStyles` on the\n * same selector's `:disabled` state.\n */\nexport const ctaButtonStyles = css`\n  border: 0;\n  border-radius: var(--st-button-radius);\n  background: var(--st-button-primary-bg);\n  color: var(--st-button-primary-color);\n  font-weight: var(--st-button-font-weight);\n  cursor: pointer;\n`;\n\nexport const ctaButtonDisabledStyles = css`\n  background: var(--st-color-subtle);\n  cursor: not-allowed;\n`;\n\n/**\n * Just the fill (background + color) from `ctaButtonStyles`, for selectors\n * that only need to swap an already-bordered/sized button into the CTA look\n * on an active/pressed/selected state (`[aria-pressed='true']`, `.active`,\n * ...) rather than defining the button from scratch.\n */\nexport const ctaButtonFillStyles = css`\n  background: var(--st-button-primary-bg);\n  color: var(--st-button-primary-color);\n`;\n\n/** Floating menu/dropdown panel chrome (user menu, language menu, ...). */\nexport const dropdownPanelStyles = css`\n  position: absolute;\n  top: 38px;\n  right: 0;\n  background: var(--st-color-surface);\n  border: 1px solid var(--st-color-border);\n  border-radius: var(--st-radius-sm);\n  box-shadow: 0 4px 16px var(--st-shadow-color-sm);\n  z-index: 30;\n  overflow: hidden;\n`;\n\n/** \"No results\" / \"Nothing here.\" empty-state text. Padding stays local. */\nexport const emptyStateStyles = css`\n  text-align: center;\n  color: var(--st-color-text-muted);\n  font-size: var(--st-text-base);\n`;\n\n/** Bordered, rounded shell wrapping a data table (browse/list views). */\nexport const tableShellStyles = css`\n  background: var(--st-color-surface);\n  border: 1px solid var(--st-color-border);\n  border-radius: var(--st-radius-md);\n  overflow: hidden;\n`;\n\n/** A single bordered result row with a name (truncated) + trailing link. */\nexport const resultRowStyles = css`\n  display: flex;\n  align-items: center;\n  gap: var(--st-space-12);\n  padding: var(--st-space-12) var(--st-space-14);\n  border: 1px solid var(--st-color-border);\n  border-radius: var(--st-radius-sm);\n`;\n\nexport const resultNameStyles = css`\n  flex: 1;\n  min-width: 120px;\n  font-size: var(--st-text-base);\n  font-weight: var(--st-font-weight-medium);\n  ${truncateStyles}\n`;\n\nexport const resultLinkStyles = css`\n  font-size: var(--st-text-sm);\n  font-weight: var(--st-font-weight-semibold);\n  color: var(--st-color-accent-text);\n`;\n\n/**\n * Uppercase, letter-spaced section/field \"eyebrow\" label (card headings,\n * table headers, field labels, ...). Font-size stays local since it varies\n * (11–12px) by context.\n */\nexport const eyebrowLabelStyles = css`\n  font-weight: var(--st-font-weight-bold);\n  color: var(--st-color-text-muted);\n  text-transform: uppercase;\n  letter-spacing: var(--st-tracking-wide);\n`;\n\n/** Top border separating stacked rows in a list/table (folder rows, data rows, table rows, ...). */\nexport const rowDividerStyles = css`\n  border-top: 1px solid var(--st-color-divider);\n`;\n\n/**\n * Bordered, rounded surface shell for a card/tile/panel (as opposed to\n * `tableShellStyles`, which additionally clips overflow for tabular content).\n * Padding, gap, and cursor stay local since they vary by component.\n */\nexport const cardShellStyles = css`\n  background: var(--st-color-surface);\n  border: 1px solid var(--st-color-border);\n  border-radius: var(--st-radius-md);\n`;\n\n/** A card/tile/row's bold primary name line (folder tiles/rows, template cards, ...). */\nexport const itemNameStyles = css`\n  font-size: var(--st-text-base);\n  font-weight: var(--st-font-weight-semibold);\n  color: var(--st-color-text-strong);\n`;\n\n/** A card/tile/row's muted secondary caption line, paired with `itemNameStyles`. */\nexport const itemCaptionStyles = css`\n  font-size: var(--st-text-xs);\n  color: var(--st-color-text-muted);\n`;\n\n/**\n * Whole rules (not a property list) every component's stylesheet starts\n * with: routes keyboard focus rings and native checkbox/radio tint through\n * `--st-focus-ring` / `--st-checkbox-color`, whose defaults (`auto`) keep\n * the browser's own look until a host app themes them.\n */\nexport const controlBaseStyles = css`\n  :is(button, a, input, select, textarea, [tabindex]):focus-visible {\n    outline: var(--st-focus-ring);\n    outline-offset: var(--st-focus-ring-offset);\n  }\n\n  input[type='checkbox'],\n  input[type='radio'] {\n    accent-color: var(--st-checkbox-color);\n  }\n`;\n\n/** Default font stack, used by nearly every component. */\nexport const fontFamilyStyles = css`\n  font-family: var(--st-font-family);\n`;\n\n/**\n * Font stack for page-root/chrome components (`st-template-hub`, the admin\n * and configuration pages, `st-app-header`, ...). Identical to\n * `fontFamilyStyles` now that `--st-font-family` always resolves via\n * `theme.css` (no per-usage fallback) — kept as a separate export so those\n * call sites stay semantically distinct if the two ever need to diverge\n * again.\n */\nexport const rootFontFamilyStyles = css`\n  font-family: var(--st-font-family);\n`;\n\n/** Canonical responsive breakpoints (px). Interpolate as `${BREAKPOINT_TABLET}px`. */\nexport const BREAKPOINT_TABLET = 900;\nexport const BREAKPOINT_MOBILE = 500;\n"],"mappings":";AAAA,SAAS,WAAW;AAmBb,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAWvB,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAY1B,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASxB,IAAM,0BAA0B;AAAA;AAAA;AAAA;AAWhC,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAM5B,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa5B,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAOzB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQzB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASxB,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5B,cAAc;AAAA;AAGX,IAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAWzB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,IAAM,mBAAmB;AAAA;AAAA;AASzB,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAOxB,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAOvB,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAW1B,IAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa1B,IAAM,mBAAmB;AAAA;AAAA;AAYzB,IAAM,uBAAuB;AAAA;AAAA;AAK7B,IAAM,oBAAoB;AAC1B,IAAM,oBAAoB;","names":[]}