@sankhyatronics/sankhya-cms 0.1.7 → 0.1.9

package/dist/themes.css

@@ -1,65 +1,65 @@
-:root.dark {
-   --st-primary-color: oklch(97.913% 0.00011 271.152);
-   --st-primary-background: oklch(11.862% 0.03663 260.411 / 0.808);
-   --st-font-family: "Open Sans";
-}
-
-:root.red {
-   --st-primary-color: oklch(25.8% 0.092 26.042);
-   --st-primary-background: oklch(97.1% 0.013 17.38);
-   --st-font-family: 'Arimo';
-}
-
-:root.amber {
-   --st-primary-color: oklch(27.9% 0.077 45.635);
-   --st-primary-background: oklch(98.7% 0.022 95.277);
-   --st-font-family: "Open Sans";
-}
-
-:root.lime {
-   --st-primary-color: oklch(27.4% 0.072 132.109);
-   --st-primary-background: oklch(98.6% 0.031 120.757);
-   --st-font-family: "Quicksand";
-}
-
-:root.teal {
-   --st-primary-color: oklch(27.7% 0.046 192.524);
-   --st-primary-background: oklch(98.4% 0.014 180.72);
-   --st-font-family: "Nunito";
-}
-
-:root.cyan {
-   --st-primary-color: oklch(30.2% 0.056 229.695);
-   --st-primary-background: oklch(98.4% 0.019 200.873);
-   --st-font-family: "Arimo";
-}
-
-:root.sky {
-   --st-primary-color: oklch(29.3% 0.066 243.157);
-   --st-primary-background: oklch(97.7% 0.013 236.62);
-   --st-font-family: "Almendra";
-}
-
-:root.blue {
-   --st-primary-color: oklch(28.2% 0.091 267.935);
-   --st-primary-background: oklch(97% 0.014 254.604);
-   --st-font-family: "Miranda Sans";
-}
-
-:root.indigo {
-   --st-primary-color: oklch(25.7% 0.09 281.288);
-   --st-primary-background: oklch(96.2% 0.018 272.314);
-   --st-font-family: "Nunito";
-}
-
-:root.fuchsia {
-   --st-primary-color: oklch(29.3% 0.136 325.661);
-   --st-primary-background: oklch(97.7% 0.017 320.058);
-   --st-font-family: "Quicksand";
-}
-
-:root.pink {
-   --st-primary-color: oklch(28.4% 0.109 3.907);
-   --st-primary-background: oklch(97.1% 0.014 343.198);
-   --st-font-family: "Open Sans";
+:root.dark {
+   --st-primary-color: oklch(97.913% 0.00011 271.152);
+   --st-primary-background: oklch(11.862% 0.03663 260.411 / 0.808);
+   --st-font-family: "Open Sans";
+}
+
+:root.red {
+   --st-primary-color: oklch(25.8% 0.092 26.042);
+   --st-primary-background: oklch(97.1% 0.013 17.38);
+   --st-font-family: 'Arimo';
+}
+
+:root.amber {
+   --st-primary-color: oklch(27.9% 0.077 45.635);
+   --st-primary-background: oklch(98.7% 0.022 95.277);
+   --st-font-family: "Open Sans";
+}
+
+:root.lime {
+   --st-primary-color: oklch(27.4% 0.072 132.109);
+   --st-primary-background: oklch(98.6% 0.031 120.757);
+   --st-font-family: "Quicksand";
+}
+
+:root.teal {
+   --st-primary-color: oklch(27.7% 0.046 192.524);
+   --st-primary-background: oklch(98.4% 0.014 180.72);
+   --st-font-family: "Nunito";
+}
+
+:root.cyan {
+   --st-primary-color: oklch(30.2% 0.056 229.695);
+   --st-primary-background: oklch(98.4% 0.019 200.873);
+   --st-font-family: "Arimo";
+}
+
+:root.sky {
+   --st-primary-color: oklch(29.3% 0.066 243.157);
+   --st-primary-background: oklch(97.7% 0.013 236.62);
+   --st-font-family: "Almendra";
+}
+
+:root.blue {
+   --st-primary-color: oklch(28.2% 0.091 267.935);
+   --st-primary-background: oklch(97% 0.014 254.604);
+   --st-font-family: "Miranda Sans";
+}
+
+:root.indigo {
+   --st-primary-color: oklch(25.7% 0.09 281.288);
+   --st-primary-background: oklch(96.2% 0.018 272.314);
+   --st-font-family: "Nunito";
+}
+
+:root.fuchsia {
+   --st-primary-color: oklch(29.3% 0.136 325.661);
+   --st-primary-background: oklch(97.7% 0.017 320.058);
+   --st-font-family: "Quicksand";
+}
+
+:root.pink {
+   --st-primary-color: oklch(28.4% 0.109 3.907);
+   --st-primary-background: oklch(97.1% 0.014 343.198);
+   --st-font-family: "Open Sans";
 }

package/dist/theming/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theming/index.ts"],"sourcesContent":["/**\r\n * Theme runtime for `themes.css`: the list of themes, and applying one to `<html>`.\r\n * Framework-free and storage-free — where the chosen theme is remembered is up to the host app.\r\n */\r\n\r\nexport interface ThemeOption {\r\n  value: string;\r\n  label: string;\r\n  /** Approximate color for a picker swatch, not the palette itself (that's `themes.css`). */\r\n  swatch: string;\r\n  dark: boolean;\r\n}\r\n\r\nexport const DEFAULT_THEME = 'default';\r\n\r\n/** `'default'` applies no class (the base palette); every other value is a class in `themes.css`. */\r\nexport const THEMES: readonly ThemeOption[] = [\r\n  { value: 'default', label: 'Default', swatch: '#94a3b8', dark: false },\r\n  { value: 'dark', label: 'Dark', swatch: '#1f2937', dark: true },\r\n  { value: 'red', label: 'Red', swatch: '#ef4444', dark: false },\r\n  { value: 'amber', label: 'Amber', swatch: '#f59e0b', dark: false },\r\n  { value: 'lime', label: 'Lime', swatch: '#84cc16', dark: false },\r\n  { value: 'teal', label: 'Teal', swatch: '#14b8a6', dark: false },\r\n  { value: 'cyan', label: 'Cyan', swatch: '#06b6d4', dark: false },\r\n  { value: 'sky', label: 'Sky', swatch: '#0ea5e9', dark: false },\r\n  { value: 'blue', label: 'Blue', swatch: '#3b82f6', dark: false },\r\n  { value: 'indigo', label: 'Indigo', swatch: '#6366f1', dark: false },\r\n  { value: 'fuchsia', label: 'Fuchsia', swatch: '#d946ef', dark: false },\r\n  { value: 'pink', label: 'Pink', swatch: '#ec4899', dark: false }\r\n];\r\n\r\nexport function isTheme(value: unknown): value is string {\r\n  return typeof value === 'string' && THEMES.some(theme => theme.value === value);\r\n}\r\n\r\nconst THEME_CLASSES = THEMES.filter(theme => theme.value !== DEFAULT_THEME).map(theme => theme.value);\r\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\r\n\r\n/** The theme to use when nobody has chosen one: `dark` if the OS prefers it, else `default`. */\r\nexport function systemTheme(): string {\r\n  if (typeof window === 'undefined' || !window.matchMedia) return DEFAULT_THEME;\r\n  return window.matchMedia(DARK_QUERY).matches ? 'dark' : DEFAULT_THEME;\r\n}\r\n\r\n/** Calls `onChange` when the OS light/dark setting flips; returns an unsubscribe function. */\r\nexport function watchSystemTheme(onChange: (theme: string) => void): () => void {\r\n  if (typeof window === 'undefined' || !window.matchMedia) return () => {};\r\n  const query = window.matchMedia(DARK_QUERY);\r\n  const listener = () => onChange(systemTheme());\r\n  query.addEventListener('change', listener);\r\n  return () => query.removeEventListener('change', listener);\r\n}\r\n\r\n/**\r\n * Applies a theme to `<html>`: swaps only the theme classes (other classes on the element are left\r\n * alone) and sets `color-scheme` so native controls and scrollbars match. `null`/`undefined` means\r\n * \"nobody chose\", which follows the OS; an unknown value falls back to `default`. Returns the\r\n * theme actually applied.\r\n */\r\nexport function applyTheme(theme: string | null | undefined): string {\r\n  const resolved = theme === null || theme === undefined ? systemTheme() : isTheme(theme) ? theme : DEFAULT_THEME;\r\n  if (typeof document === 'undefined') return resolved;\r\n  const root = document.documentElement;\r\n  root.classList.remove(...THEME_CLASSES);\r\n  if (resolved !== DEFAULT_THEME) root.classList.add(resolved);\r\n  root.style.colorScheme = THEMES.find(option => option.value === resolved)?.dark ? 'dark' : 'light';\r\n  return resolved;\r\n}\r\n"],"mappings":";;;AAaO,IAAM,gBAAgB;AAGtB,IAAM,SAAiC;AAAA,EAC5C,EAAE,OAAO,WAAW,OAAO,WAAW,QAAQ,WAAW,MAAM,MAAM;AAAA,EACrE,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,KAAK;AAAA,EAC9D,EAAE,OAAO,OAAO,OAAO,OAAO,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC7D,EAAE,OAAO,SAAS,OAAO,SAAS,QAAQ,WAAW,MAAM,MAAM;AAAA,EACjE,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC/D,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC/D,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC/D,EAAE,OAAO,OAAO,OAAO,OAAO,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC7D,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC/D,EAAE,OAAO,UAAU,OAAO,UAAU,QAAQ,WAAW,MAAM,MAAM;AAAA,EACnE,EAAE,OAAO,WAAW,OAAO,WAAW,QAAQ,WAAW,MAAM,MAAM;AAAA,EACrE,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,MAAM;AACjE;AAEO,SAAS,QAAQ,OAAiC;AACvD,SAAO,OAAO,UAAU,YAAY,OAAO,KAAK,WAAS,MAAM,UAAU,KAAK;AAChF;AAEA,IAAM,gBAAgB,OAAO,OAAO,WAAS,MAAM,UAAU,aAAa,EAAE,IAAI,WAAS,MAAM,KAAK;AACpG,IAAM,aAAa;AAGZ,SAAS,cAAsB;AACpC,MAAI,OAAO,WAAW,eAAe,CAAC,OAAO,WAAY,QAAO;AAChE,SAAO,OAAO,WAAW,UAAU,EAAE,UAAU,SAAS;AAC1D;AAGO,SAAS,iBAAiB,UAA+C;AAC9E,MAAI,OAAO,WAAW,eAAe,CAAC,OAAO,WAAY,QAAO,MAAM;AAAA,EAAC;AACvE,QAAM,QAAQ,OAAO,WAAW,UAAU;AAC1C,QAAM,WAAW,MAAM,SAAS,YAAY,CAAC;AAC7C,QAAM,iBAAiB,UAAU,QAAQ;AACzC,SAAO,MAAM,MAAM,oBAAoB,UAAU,QAAQ;AAC3D;AAQO,SAAS,WAAW,OAA0C;AACnE,QAAM,WAAW,UAAU,QAAQ,UAAU,SAAY,YAAY,IAAI,QAAQ,KAAK,IAAI,QAAQ;AAClG,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAM,OAAO,SAAS;AACtB,OAAK,UAAU,OAAO,GAAG,aAAa;AACtC,MAAI,aAAa,cAAe,MAAK,UAAU,IAAI,QAAQ;AAC3D,OAAK,MAAM,cAAc,OAAO,KAAK,YAAU,OAAO,UAAU,QAAQ,GAAG,OAAO,SAAS;AAC3F,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/theming/index.ts"],"sourcesContent":["/**\n * Theme runtime for `themes.css`: the list of themes, and applying one to `<html>`.\n * Framework-free and storage-free — where the chosen theme is remembered is up to the host app.\n */\n\nexport interface ThemeOption {\n  value: string;\n  label: string;\n  /** Approximate color for a picker swatch, not the palette itself (that's `themes.css`). */\n  swatch: string;\n  dark: boolean;\n}\n\nexport const DEFAULT_THEME = 'default';\n\n/** `'default'` applies no class (the base palette); every other value is a class in `themes.css`. */\nexport const THEMES: readonly ThemeOption[] = [\n  { value: 'default', label: 'Default', swatch: '#94a3b8', dark: false },\n  { value: 'dark', label: 'Dark', swatch: '#1f2937', dark: true },\n  { value: 'red', label: 'Red', swatch: '#ef4444', dark: false },\n  { value: 'amber', label: 'Amber', swatch: '#f59e0b', dark: false },\n  { value: 'lime', label: 'Lime', swatch: '#84cc16', dark: false },\n  { value: 'teal', label: 'Teal', swatch: '#14b8a6', dark: false },\n  { value: 'cyan', label: 'Cyan', swatch: '#06b6d4', dark: false },\n  { value: 'sky', label: 'Sky', swatch: '#0ea5e9', dark: false },\n  { value: 'blue', label: 'Blue', swatch: '#3b82f6', dark: false },\n  { value: 'indigo', label: 'Indigo', swatch: '#6366f1', dark: false },\n  { value: 'fuchsia', label: 'Fuchsia', swatch: '#d946ef', dark: false },\n  { value: 'pink', label: 'Pink', swatch: '#ec4899', dark: false }\n];\n\nexport function isTheme(value: unknown): value is string {\n  return typeof value === 'string' && THEMES.some(theme => theme.value === value);\n}\n\nconst THEME_CLASSES = THEMES.filter(theme => theme.value !== DEFAULT_THEME).map(theme => theme.value);\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\n/** The theme to use when nobody has chosen one: `dark` if the OS prefers it, else `default`. */\nexport function systemTheme(): string {\n  if (typeof window === 'undefined' || !window.matchMedia) return DEFAULT_THEME;\n  return window.matchMedia(DARK_QUERY).matches ? 'dark' : DEFAULT_THEME;\n}\n\n/** Calls `onChange` when the OS light/dark setting flips; returns an unsubscribe function. */\nexport function watchSystemTheme(onChange: (theme: string) => void): () => void {\n  if (typeof window === 'undefined' || !window.matchMedia) return () => {};\n  const query = window.matchMedia(DARK_QUERY);\n  const listener = () => onChange(systemTheme());\n  query.addEventListener('change', listener);\n  return () => query.removeEventListener('change', listener);\n}\n\n/**\n * Applies a theme to `<html>`: swaps only the theme classes (other classes on the element are left\n * alone) and sets `color-scheme` so native controls and scrollbars match. `null`/`undefined` means\n * \"nobody chose\", which follows the OS; an unknown value falls back to `default`. Returns the\n * theme actually applied.\n */\nexport function applyTheme(theme: string | null | undefined): string {\n  const resolved = theme === null || theme === undefined ? systemTheme() : isTheme(theme) ? theme : DEFAULT_THEME;\n  if (typeof document === 'undefined') return resolved;\n  const root = document.documentElement;\n  root.classList.remove(...THEME_CLASSES);\n  if (resolved !== DEFAULT_THEME) root.classList.add(resolved);\n  root.style.colorScheme = THEMES.find(option => option.value === resolved)?.dark ? 'dark' : 'light';\n  return resolved;\n}\n"],"mappings":";;;AAaO,IAAM,gBAAgB;AAGtB,IAAM,SAAiC;AAAA,EAC5C,EAAE,OAAO,WAAW,OAAO,WAAW,QAAQ,WAAW,MAAM,MAAM;AAAA,EACrE,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,KAAK;AAAA,EAC9D,EAAE,OAAO,OAAO,OAAO,OAAO,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC7D,EAAE,OAAO,SAAS,OAAO,SAAS,QAAQ,WAAW,MAAM,MAAM;AAAA,EACjE,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC/D,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC/D,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC/D,EAAE,OAAO,OAAO,OAAO,OAAO,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC7D,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,MAAM;AAAA,EAC/D,EAAE,OAAO,UAAU,OAAO,UAAU,QAAQ,WAAW,MAAM,MAAM;AAAA,EACnE,EAAE,OAAO,WAAW,OAAO,WAAW,QAAQ,WAAW,MAAM,MAAM;AAAA,EACrE,EAAE,OAAO,QAAQ,OAAO,QAAQ,QAAQ,WAAW,MAAM,MAAM;AACjE;AAEO,SAAS,QAAQ,OAAiC;AACvD,SAAO,OAAO,UAAU,YAAY,OAAO,KAAK,WAAS,MAAM,UAAU,KAAK;AAChF;AAEA,IAAM,gBAAgB,OAAO,OAAO,WAAS,MAAM,UAAU,aAAa,EAAE,IAAI,WAAS,MAAM,KAAK;AACpG,IAAM,aAAa;AAGZ,SAAS,cAAsB;AACpC,MAAI,OAAO,WAAW,eAAe,CAAC,OAAO,WAAY,QAAO;AAChE,SAAO,OAAO,WAAW,UAAU,EAAE,UAAU,SAAS;AAC1D;AAGO,SAAS,iBAAiB,UAA+C;AAC9E,MAAI,OAAO,WAAW,eAAe,CAAC,OAAO,WAAY,QAAO,MAAM;AAAA,EAAC;AACvE,QAAM,QAAQ,OAAO,WAAW,UAAU;AAC1C,QAAM,WAAW,MAAM,SAAS,YAAY,CAAC;AAC7C,QAAM,iBAAiB,UAAU,QAAQ;AACzC,SAAO,MAAM,MAAM,oBAAoB,UAAU,QAAQ;AAC3D;AAQO,SAAS,WAAW,OAA0C;AACnE,QAAM,WAAW,UAAU,QAAQ,UAAU,SAAY,YAAY,IAAI,QAAQ,KAAK,IAAI,QAAQ;AAClG,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAM,OAAO,SAAS;AACtB,OAAK,UAAU,OAAO,GAAG,aAAa;AACtC,MAAI,aAAa,cAAe,MAAK,UAAU,IAAI,QAAQ;AAC3D,OAAK,MAAM,cAAc,OAAO,KAAK,YAAU,OAAO,UAAU,QAAQ,GAAG,OAAO,SAAS;AAC3F,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyatronics/sankhya-cms",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/sankhyatronics/SankhyaCMS.git",

package/dist/chunk-2JGWWXEI.js.map

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

package/dist/chunk-3JU3R22O.js.map

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

package/dist/chunk-3VE6VFJ4.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/menu-grid-item/MenuGridItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { MenuGridItemSelectEventDetail } from './MenuGridItemEvents';\r\n\r\n/**\r\n * One entry in an `st-menu-grid` — icon (via `slot=\"icon\"`) + title on one line, an optional\r\n * description below, and an optional corner badge (\"New\", \"Popular\", ...). A 1:1 port of\r\n * `SankhyaUI`'s React `MenuGridItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same markup and\r\n * CSS, with its `motion` effects redone in CSS — fades up the first time it scrolls into view,\r\n * scales to 1.02 on hover / 0.98 while pressed, the icon tilts on hover, the badge pops in.\r\n * Colors come from the suite theme rather than per-item utility classes.\r\n *\r\n * An `http(s)` `href` opens in a new tab, like the source. Any other `href` fires a *cancelable*\r\n * `menu-grid-item-select` event (detail: `{ href }`) first: a host doing client-side routing calls\r\n * `event.preventDefault()` on it, which also cancels the anchor's own navigation (the source used\r\n * react-router's `Link` here; the suite apps have no router).\r\n */\r\n@customElement('st-menu-grid-item')\r\nexport class MenuGridItem extends LitElement {\r\n  /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\r\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\r\n\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    @keyframes st-menu-grid-badge-pop {\r\n      from {\r\n        transform: scale(0);\r\n      }\r\n      70% {\r\n        transform: scale(1.12);\r\n      }\r\n      to {\r\n        transform: scale(1);\r\n      }\r\n    }\r\n\r\n    .menu-grid-item {\r\n      display: flex;\r\n      flex-direction: column;\r\n      border-radius: 8px;\r\n      position: relative;\r\n      overflow: hidden;\r\n      color: var(--st-color-text);\r\n      transition:\r\n        opacity 0.4s ease-out,\r\n        transform 0.2s ease,\r\n        background-color 0.2s ease;\r\n    }\r\n\r\n    .menu-grid-item.pending {\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n    }\r\n\r\n    .menu-grid-item.regular {\r\n      padding: 16px;\r\n    }\r\n\r\n    .menu-grid-item.compact {\r\n      padding: 12px;\r\n    }\r\n\r\n    /* Keyboard focus gets the same treatment as hover. */\r\n    .menu-grid-item:hover,\r\n    .menu-grid-item:has(.menu-grid-link:focus-visible) {\r\n      background: var(--st-color-hover);\r\n      transform: scale(1.02);\r\n    }\r\n\r\n    .menu-grid-item:active {\r\n      transform: scale(0.98);\r\n    }\r\n\r\n    .menu-grid-link {\r\n      display: flex;\r\n      flex-direction: column;\r\n      text-decoration: none;\r\n      color: inherit;\r\n      width: 100%;\r\n      height: 100%;\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-grid-badge {\r\n      position: absolute;\r\n      top: 2px;\r\n      right: 8px;\r\n      font-size: 0.5rem;\r\n      padding: 2px 8px;\r\n      border-radius: 9999px;\r\n      font-weight: 500;\r\n      z-index: 1;\r\n      background-color: var(--st-color-text-strong);\r\n      color: var(--st-color-on-solid);\r\n      animation: st-menu-grid-badge-pop 0.35s ease-out;\r\n    }\r\n\r\n    .menu-grid-header {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      width: 100%;\r\n    }\r\n\r\n    .menu-grid-icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 32px;\r\n      height: 32px;\r\n      border-radius: 6px;\r\n      transition:\r\n        background-color 0.2s ease,\r\n        transform 0.2s ease;\r\n      flex-shrink: 0;\r\n      padding: 0;\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    .menu-grid-icon:hover {\r\n      transform: rotate(5deg) scale(1.1);\r\n    }\r\n\r\n    .menu-grid-icon[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    .menu-grid-icon ::slotted(*) {\r\n      width: 18px;\r\n      height: 18px;\r\n    }\r\n\r\n    .menu-grid-title {\r\n      font-size: 0.875rem;\r\n      font-weight: 500;\r\n      color: var(--st-color-text-strong);\r\n      transition: color 0.2s ease;\r\n      flex: 1;\r\n      min-width: 0;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n      margin-bottom: 0;\r\n    }\r\n\r\n    .menu-grid-description {\r\n      font-size: 0.75rem;\r\n      color: var(--st-color-text-muted);\r\n      display: -webkit-box;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-height: 1.4;\r\n      transition: color 0.2s ease;\r\n    }\r\n\r\n    .menu-grid-item.compact .menu-grid-header {\r\n      gap: 8px;\r\n    }\r\n\r\n    .menu-grid-item.compact .menu-grid-icon {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n\r\n    .menu-grid-item.compact .menu-grid-icon ::slotted(*) {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n\r\n    .menu-grid-item.compact .menu-grid-title {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-grid-item.compact .menu-grid-description {\r\n      font-size: 0.75rem;\r\n    }\r\n\r\n    .menu-grid-header.icon-only {\r\n      justify-content: center;\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .menu-grid-header {\r\n        gap: 8px;\r\n      }\r\n\r\n      .menu-grid-icon {\r\n        width: 28px;\r\n        height: 28px;\r\n      }\r\n\r\n      .menu-grid-icon ::slotted(*) {\r\n        width: 16px;\r\n        height: 16px;\r\n      }\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .menu-grid-item,\r\n      .menu-grid-icon {\r\n        transition: none;\r\n      }\r\n\r\n      .menu-grid-item.pending {\r\n        opacity: 1;\r\n        transform: none;\r\n      }\r\n\r\n      .menu-grid-badge {\r\n        animation: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  @property({ type: String })\r\n  description = '';\r\n\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  /** Small corner label, e.g. \"New\"/\"Beta\" — omit for none. */\r\n  @property({ type: String })\r\n  badge = '';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  compact = false;\r\n\r\n  /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\r\n  @property({ type: Boolean, attribute: 'show-description' })\r\n  showDescription = true;\r\n\r\n  /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\r\n  @state() private hasIcon = false;\r\n\r\n  /** True until the item first scrolls into view (the source's `whileInView ... once`). */\r\n  @state() private pending = true;\r\n\r\n  private observer?: IntersectionObserver;\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    if (typeof IntersectionObserver === 'undefined') {\r\n      this.pending = false;\r\n      return;\r\n    }\r\n    this.observer = new IntersectionObserver((entries) => {\r\n      if (entries.some((entry) => entry.isIntersecting)) {\r\n        this.pending = false;\r\n        this.observer?.disconnect();\r\n      }\r\n    });\r\n    this.observer.observe(this);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.observer?.disconnect();\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  private onIconSlotChange = (event: Event): void => {\r\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  private get isExternal(): boolean {\r\n    return this.href.startsWith('http');\r\n  }\r\n\r\n  private onClick = (event: MouseEvent): void => {\r\n    if (this.isExternal) return;\r\n    const selectEvent = new CustomEvent<MenuGridItemSelectEventDetail>('menu-grid-item-select', {\r\n      detail: { href: this.href },\r\n      bubbles: true,\r\n      composed: true,\r\n      cancelable: true\r\n    });\r\n    this.dispatchEvent(selectEvent);\r\n    if (selectEvent.defaultPrevented) event.preventDefault();\r\n  };\r\n\r\n  render() {\r\n    const iconOnly = this.hasIcon && !this.title;\r\n    return html`\r\n      <div class=\"menu-grid-item ${this.compact ? 'compact' : 'regular'} ${this.pending ? 'pending' : ''}\" part=\"item\">\r\n        <a\r\n          part=\"link\"\r\n          class=\"menu-grid-link\"\r\n          href=${this.href}\r\n          target=${this.isExternal ? '_blank' : '_self'}\r\n          rel=${this.isExternal ? 'noopener noreferrer' : nothing}\r\n          @click=${this.onClick}\r\n        >\r\n          ${this.badge ? html`<span part=\"badge\" class=\"menu-grid-badge\">${this.badge}</span>` : nothing}\r\n          <span class=\"menu-grid-header ${iconOnly ? 'icon-only' : ''}\" part=\"header\">\r\n            <span class=\"menu-grid-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\r\n            ${this.title ? html`<span part=\"title\" class=\"menu-grid-title\">${this.title}</span>` : nothing}\r\n          </span>\r\n          ${this.description && this.showDescription\r\n            ? html`<span part=\"description\" class=\"menu-grid-description\">${this.description}</span>`\r\n            : nothing}\r\n        </a>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,UAAU,aAAa;AAmBxC,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AA2ML,iBAAQ;AAGR,uBAAc;AAGd,gBAAO;AAIP,iBAAQ;AAGR,mBAAU;AAIV,2BAAkB;AAGT,SAAQ,UAAU;AAGlB,SAAQ,UAAU;AAwB3B,SAAQ,mBAAmB,CAAC,UAAuB;AACjD,WAAK,UAAW,MAAM,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,EAAE,SAAS;AAAA,IAC7F;AAMA,SAAQ,UAAU,CAAC,UAA4B;AAC7C,UAAI,KAAK,WAAY;AACrB,YAAM,cAAc,IAAI,YAA2C,yBAAyB;AAAA,QAC1F,QAAQ,EAAE,MAAM,KAAK,KAAK;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MACd,CAAC;AACD,WAAK,cAAc,WAAW;AAC9B,UAAI,YAAY,iBAAkB,OAAM,eAAe;AAAA,IACzD;AAAA;AAAA,EAtCA,oBAA0B;AACxB,UAAM,kBAAkB;AACxB,QAAI,OAAO,yBAAyB,aAAa;AAC/C,WAAK,UAAU;AACf;AAAA,IACF;AACA,SAAK,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACpD,UAAI,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc,GAAG;AACjD,aAAK,UAAU;AACf,aAAK,UAAU,WAAW;AAAA,MAC5B;AAAA,IACF,CAAC;AACD,SAAK,SAAS,QAAQ,IAAI;AAAA,EAC5B;AAAA,EAEA,uBAA6B;AAC3B,SAAK,UAAU,WAAW;AAC1B,UAAM,qBAAqB;AAAA,EAC7B;AAAA,EAMA,IAAY,aAAsB;AAChC,WAAO,KAAK,KAAK,WAAW,MAAM;AAAA,EACpC;AAAA,EAcA,SAAS;AACP,UAAM,WAAW,KAAK,WAAW,CAAC,KAAK;AACvC,WAAO;AAAA,mCACwB,KAAK,UAAU,YAAY,SAAS,IAAI,KAAK,UAAU,YAAY,EAAE;AAAA;AAAA;AAAA;AAAA,iBAIvF,KAAK,IAAI;AAAA,mBACP,KAAK,aAAa,WAAW,OAAO;AAAA,gBACvC,KAAK,aAAa,wBAAwB,OAAO;AAAA,mBAC9C,KAAK,OAAO;AAAA;AAAA,YAEnB,KAAK,QAAQ,kDAAkD,KAAK,KAAK,YAAY,OAAO;AAAA,0CAC9D,WAAW,cAAc,EAAE;AAAA,+DACN,CAAC,KAAK,OAAO,kCAAkC,KAAK,gBAAgB;AAAA,cACrH,KAAK,QAAQ,kDAAkD,KAAK,KAAK,YAAY,OAAO;AAAA;AAAA,YAE9F,KAAK,eAAe,KAAK,kBACvB,8DAA8D,KAAK,WAAW,YAC9E,OAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AACF;AAAA;AAtSa,aAEJ,oBAAoB,EAAE,GAAG,WAAW,mBAAmB,gBAAgB,KAAK;AAFxE,aAIJ,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;AAkMtB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1Mf,aA2MX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Mf,aA8MX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhNf,aAiNX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApNf,aAqNX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvN/B,aAwNX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,mBAAmB,CAAC;AAAA,GA3N/C,aA4NX;AAGiB;AAAA,EAAhB,MAAM;AAAA,GA/NI,aA+NM;AAGA;AAAA,EAAhB,MAAM;AAAA,GAlOI,aAkOM;AAlON,eAAN;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { chevronIcon, closeIcon, menuIcon } from '../shared/icons';\r\nimport { BREAKPOINT_TABLET, buttonResetStyles, controlBaseStyles, dropdownPanelStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { LanguageChangedEventDetail } from './HeaderEvents';\r\n\r\n/**\r\n * The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\r\n * for primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\r\n * middle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\r\n * from `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\r\n * package's Lit conventions and this workspace's actual needs — that source component takes an\r\n * `imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\r\n * `title` is the primary brand prop here and `brand-image-url` is optional, mirroring\r\n * `st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\r\n * deliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\r\n * props — pick whichever fits a given app's header).\r\n *\r\n * Layout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\r\n * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\r\n * source) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\r\n * toggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\r\n * `inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\r\n * (`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\r\n * `BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\r\n * root can only ever assign a given light-DOM child to the *first* slot of a given name.\r\n *\r\n * Also carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\r\n * `language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\r\n * rebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\r\n * as a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\r\n * This component has no translation logic itself; the consuming app owns what a language `code`\r\n * means and which content it re-renders in response.\r\n */\r\n@customElement('st-header')\r\nexport class Header extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: flex;\r\n      align-items: center;\r\n      /* The containing block of an st-dropdown[mega] panel, which spans the bar. */\r\n      position: relative;\r\n      /* Spacing between brand, menu and utility controls is the rows' own margins (SankhyaUI's\r\n         layout), not a flex gap. */\r\n      gap: 0;\r\n      /* !important on the box-model properties only: a shadow host's own :host rule always loses\r\n       * to ANY rule the consuming page has for the same property on that element, regardless of\r\n       * specificity (see st-footer's own padding/border-top for the same fix). Without\r\n       * box-sizing: border-box pinned here, a page that also sets its own padding on this host\r\n       * (e.g. a p-2 utility class) adds that padding on TOP of the fixed 64px height instead of\r\n       * being absorbed inside it — which is exactly what happens in Template Hub, the one app that\r\n       * doesn't load Tailwind Preflight (Preflight's own box-sizing: border-box reset is what\r\n       * silently keeps every other app's header at the intended 64px). */\r\n      box-sizing: border-box !important;\r\n      padding: 0 2rem !important;\r\n      height: 64px !important;\r\n      background: var(--st-color-surface);\r\n      border-bottom: 1px solid var(--st-color-border) !important;\r\n      ${rootFontFamilyStyles}\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    :host([sticky]) {\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 100;\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background: var(--st-color-text-strong);\r\n      color: var(--st-color-on-solid);\r\n      border-bottom-color: transparent;\r\n    }\r\n\r\n    :host([sticky]),\r\n    :host([transparent]),\r\n    :host([hide-on-scroll]) {\r\n      transition:\r\n        background-color 0.3s ease,\r\n        color 0.3s ease,\r\n        box-shadow 0.3s ease,\r\n        border-color 0.3s ease,\r\n        transform 0.3s ease;\r\n    }\r\n\r\n    /* Once the page has scrolled, a sticky/fixed header lifts off the content. */\r\n    :host([scrolled][sticky]),\r\n    :host([scrolled][transparent]),\r\n    :host([scrolled][hide-on-scroll]) {\r\n      box-shadow: 0 4px 16px var(--st-shadow-color-md);\r\n      border-bottom-color: transparent !important;\r\n    }\r\n\r\n    /* transparent: fixed over the top of the page (e.g. a dark hero), see-through until scrolled. */\r\n    :host([transparent]) {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      z-index: 100;\r\n    }\r\n\r\n    :host([transparent]:not([scrolled]):not([mobile-open])) {\r\n      background: transparent;\r\n      border-bottom-color: transparent !important;\r\n      color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n      /* Read by st-menu-item / st-dropdown triggers in the bar (their panels reset them). */\r\n      --st-nav-color: var(--st-header-transparent-color, var(--st-color-on-solid));\r\n      --st-nav-hover-bg: color-mix(in oklch, currentColor 14%, transparent);\r\n    }\r\n\r\n    :host([transparent]:not([scrolled]):not([mobile-open])) .utility-row {\r\n      border-left-color: color-mix(in oklch, currentColor 35%, transparent);\r\n    }\r\n\r\n    :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger {\r\n      color: inherit;\r\n    }\r\n\r\n    :host([transparent]:not([scrolled]):not([mobile-open])) .lang-trigger:hover,\r\n    :host([transparent]:not([scrolled]):not([mobile-open])) .toggle:hover {\r\n      background: color-mix(in oklch, currentColor 14%, transparent);\r\n    }\r\n\r\n    /* hide-on-scroll: slides away while scrolling down, back as soon as the user scrolls up. */\r\n    :host([hide-on-scroll]:not([sticky]):not([transparent])) {\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 100;\r\n    }\r\n\r\n    :host([scroll-hidden]:not([mobile-open])) {\r\n      transform: translateY(-100%);\r\n      box-shadow: none;\r\n    }\r\n\r\n    .brand {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--st-space-10);\r\n      flex: none;\r\n      text-decoration: none;\r\n      color: inherit;\r\n    }\r\n\r\n    .brand-mark {\r\n      width: var(--st-size-28);\r\n      height: var(--st-size-28);\r\n      border-radius: var(--st-radius-sm);\r\n      flex: none;\r\n      object-fit: contain;\r\n    }\r\n\r\n    .brand-title {\r\n      font-size: var(--st-text-xl);\r\n      font-weight: var(--st-font-weight-bold);\r\n      letter-spacing: var(--st-tracking-tight);\r\n      white-space: nowrap;\r\n    }\r\n\r\n    /* Desktop: a transparent pass-through so .menu-row/.utility-row lay out directly as :host's\r\n       own flex children. Mobile (see below) turns this into the actual overlay box. */\r\n    .mobile-panel {\r\n      display: contents;\r\n    }\r\n\r\n    /* Desktop layout from SankhyaUI's Header: the menu starts 4rem after the brand and takes the\r\n       free width; the utility controls sit after a vertical divider. Between 901px and 1200px the\r\n       gaps tighten so the menu still fits down to the 900px hamburger breakpoint. */\r\n    .menu-row {\r\n      flex: 1;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 1.5rem;\r\n      min-width: 0;\r\n      margin-left: 4rem;\r\n    }\r\n\r\n    .utility-row {\r\n      flex: none;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 1rem;\r\n      margin-left: 1.5rem;\r\n      padding-left: 1.5rem;\r\n      border-left: 1px solid var(--st-color-border);\r\n    }\r\n\r\n    :host([inverted]) .utility-row {\r\n      border-left-color: currentColor;\r\n    }\r\n\r\n    .utility-row.empty {\r\n      display: none;\r\n    }\r\n\r\n    @media (max-width: 1200px) {\r\n      :host {\r\n        padding: 0 1rem !important;\r\n      }\r\n\r\n      .menu-row {\r\n        margin-left: 0.5rem;\r\n      }\r\n\r\n      .utility-row {\r\n        margin-left: 0.5rem;\r\n        padding-left: 0.5rem;\r\n      }\r\n    }\r\n\r\n    @keyframes st-header-fade-in {\r\n      from {\r\n        opacity: 0;\r\n      }\r\n      to {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    .toggle {\r\n      display: none;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex: none;\r\n      position: relative;\r\n      z-index: 1002;\r\n      width: var(--st-size-32);\r\n      height: var(--st-size-32);\r\n      margin-left: auto;\r\n      padding: 0.5rem;\r\n      border: 0;\r\n      border-radius: var(--st-radius-sm);\r\n      background: transparent;\r\n      color: inherit;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .toggle:hover {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    .lang-menu {\r\n      position: relative;\r\n      flex: none;\r\n    }\r\n\r\n    .lang-trigger {\r\n      ${buttonResetStyles}\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--st-space-4);\r\n      height: var(--st-size-32);\r\n      padding: 0 var(--st-space-8);\r\n      border-radius: var(--st-radius-sm);\r\n      font-size: var(--st-text-base);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      color: var(--st-color-text-muted);\r\n    }\r\n\r\n    .lang-trigger:hover {\r\n      background: var(--st-color-hover);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .lang-dropdown {\r\n      ${dropdownPanelStyles}\r\n      min-width: 140px;\r\n    }\r\n\r\n    .lang-option {\r\n      ${buttonResetStyles}\r\n      display: block;\r\n      width: 100%;\r\n      padding: var(--st-space-10) var(--st-space-14);\r\n      font-size: var(--st-text-base);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      text-align: left;\r\n      color: inherit;\r\n    }\r\n\r\n    .lang-option:hover {\r\n      background: var(--st-color-hover);\r\n    }\r\n\r\n    .lang-option.active {\r\n      color: var(--st-color-accent-text);\r\n    }\r\n\r\n    /* Hamburger layout from SankhyaUI's Header: a full-screen layer under the toggle, menu above\r\n       the utility controls, the menu's dropdowns opening in the flow (see syncInlineDropdowns). */\r\n    @media (max-width: ${BREAKPOINT_TABLET}px) {\r\n      :host {\r\n        padding: 0 1rem !important;\r\n      }\r\n\r\n      .mobile-panel {\r\n        display: none;\r\n      }\r\n\r\n      .toggle {\r\n        display: inline-flex;\r\n      }\r\n\r\n      :host([mobile-open]) .mobile-panel {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 2rem;\r\n        position: fixed;\r\n        inset: 0;\r\n        background: var(--st-color-surface);\r\n        padding: 5rem 1.5rem 2rem;\r\n        overflow-y: auto;\r\n        z-index: 1001;\r\n        animation: st-header-fade-in 0.3s ease;\r\n      }\r\n\r\n      :host([mobile-open]) .menu-row,\r\n      :host([mobile-open]) .utility-row {\r\n        flex-direction: column;\r\n        align-items: stretch;\r\n        gap: 1.5rem;\r\n        margin-left: 0;\r\n      }\r\n\r\n      :host([mobile-open]) .utility-row {\r\n        padding: 1.5rem 0 0;\r\n        border-left: 0;\r\n        border-top: 1px solid var(--st-color-border);\r\n      }\r\n\r\n      /* Apps usually slot one flex-row wrapper per slot; stack its items as the source does. */\r\n      :host([mobile-open]) ::slotted([slot='menu']),\r\n      :host([mobile-open]) ::slotted([slot='utility']) {\r\n        flex-direction: column !important;\r\n        align-items: stretch !important;\r\n        margin: 0 !important;\r\n      }\r\n    }\r\n\r\n    /* The same collapsed layout, switched on by script when the menu no longer fits the bar at\r\n       desktop width (see evaluateFit) — without it the menu spills over the utility controls. */\r\n    :host([compact]) .mobile-panel {\r\n      display: none;\r\n    }\r\n\r\n    :host([compact]) .toggle {\r\n      display: inline-flex;\r\n    }\r\n\r\n    :host([compact][mobile-open]) .mobile-panel {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 2rem;\r\n      position: fixed;\r\n      inset: 0;\r\n      background: var(--st-color-surface);\r\n      padding: 5rem 1.5rem 2rem;\r\n      overflow-y: auto;\r\n      z-index: 1001;\r\n      animation: st-header-fade-in 0.3s ease;\r\n    }\r\n\r\n    :host([compact][mobile-open]) .menu-row,\r\n    :host([compact][mobile-open]) .utility-row {\r\n      flex-direction: column;\r\n      align-items: stretch;\r\n      gap: 1.5rem;\r\n      margin-left: 0;\r\n    }\r\n\r\n    :host([compact][mobile-open]) .utility-row {\r\n      padding: 1.5rem 0 0;\r\n      border-left: 0;\r\n      border-top: 1px solid var(--st-color-border);\r\n    }\r\n\r\n    :host([compact][mobile-open]) ::slotted([slot='menu']),\r\n    :host([compact][mobile-open]) ::slotted([slot='utility']) {\r\n      flex-direction: column !important;\r\n      align-items: stretch !important;\r\n      margin: 0 !important;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      :host,\r\n      .mobile-panel {\r\n        animation: none !important;\r\n        transition: none !important;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String })\r\n  title = '';\r\n\r\n  /** Optional logo image URL, shown before `title`. Omitted entirely when empty — none of this suite's apps has one today. Matches the source component's `imageSrc` (renamed here to pair with `title`/`logoHref`, since this component's only image use is the brand mark). */\r\n  @property({ type: String, attribute: 'brand-image-url' })\r\n  brandImageUrl = '';\r\n\r\n  /** `alt` text for the brand image — matches the source component's `altText` (default `'Logo'`). */\r\n  @property({ type: String, attribute: 'alt-text' })\r\n  altText = 'Logo';\r\n\r\n  /** Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise. */\r\n  @property({ type: String })\r\n  logoHref = '';\r\n\r\n  /** `target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set. */\r\n  @property({ type: String, attribute: 'logo-target' })\r\n  logoTarget = '_self';\r\n\r\n  /** Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`. */\r\n  @property({ type: String, attribute: 'logo-class-name' })\r\n  logoClassName = '';\r\n\r\n  /** Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\r\n   * source component's `inverted` (from its shared `BaseProps`). */\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  sticky = false;\r\n\r\n  /**\r\n   * Fixes the header over the top of the page and makes it see-through, with light text\r\n   * (`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\r\n   * header laid over a dark hero. It then takes its normal background and a shadow. The page\r\n   * content starts under it, so the first section should leave room for the 64px bar.\r\n   */\r\n  @property({ type: Boolean, reflect: true })\r\n  transparent = false;\r\n\r\n  /** Slides the header out of view while the page scrolls down and back in when it scrolls up. */\r\n  @property({ type: Boolean, reflect: true, attribute: 'hide-on-scroll' })\r\n  hideOnScroll = false;\r\n\r\n  /** Scroll distance in px after which the header counts as `scrolled`. */\r\n  @property({ type: Number, attribute: 'scroll-threshold' })\r\n  scrollThreshold = 8;\r\n\r\n  /** True once the page has scrolled past `scroll-threshold`; reflected so pages can style `st-header[scrolled]`. Set by the header, never from outside. */\r\n  @property({ type: Boolean, reflect: true })\r\n  scrolled = false;\r\n\r\n  /** True while `hide-on-scroll` has slid the header away. Set by the header, never from outside. */\r\n  @property({ type: Boolean, reflect: true, attribute: 'scroll-hidden' })\r\n  scrollHidden = false;\r\n\r\n  private lastScrollY = 0;\r\n  private scrollFrame = 0;\r\n\r\n  private onScroll = (): void => {\r\n    if (this.scrollFrame) return;\r\n    this.scrollFrame = requestAnimationFrame(() => {\r\n      this.scrollFrame = 0;\r\n      const y = Math.max(0, window.scrollY);\r\n      this.scrolled = y > this.scrollThreshold;\r\n      if (this.hideOnScroll) {\r\n        const delta = y - this.lastScrollY;\r\n        // Ignore tiny jitters; never hide while still at the top of the page or with the menu open.\r\n        if (Math.abs(delta) > 4) this.scrollHidden = delta > 0 && y > this.offsetHeight && !this.mobileOpen;\r\n      } else {\r\n        this.scrollHidden = false;\r\n      }\r\n      this.lastScrollY = y;\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\r\n   * when empty or when only one language is offered (same convention as `st-app-header`'s\r\n   * `languages`, which this reuses verbatim). This component has no translation logic itself —\r\n   * selecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\r\n   * what `code` actually means and which content it re-renders.\r\n   */\r\n  @property({ attribute: false })\r\n  languages: { code: string; label: string }[] = [];\r\n\r\n  @property({ type: String, attribute: 'current-language-code' })\r\n  currentLanguageCode = '';\r\n\r\n  @property({ type: String, attribute: 'language-menu-label' })\r\n  languageMenuLabel = 'Language';\r\n\r\n  /** Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\n   * the `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\n   * outside. */\r\n  @property({ type: Boolean, reflect: true, attribute: 'mobile-open' })\r\n  mobileOpen = false;\r\n\r\n  /** True while the menu doesn't fit the bar at the current width: the header then shows the same\r\n   * hamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside. */\r\n  @property({ type: Boolean, reflect: true })\r\n  compact = false;\r\n\r\n  @state() private languageMenuOpen = false;\r\n\r\n  /** Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden. */\r\n  @state() private hasUtility = false;\r\n\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */\r\n  private narrowQuery?: MediaQueryList;\r\n\r\n  /** The dropdowns this header switched to `inline` — only these are switched back, so a caller's\r\n   * own `inline` setting is left alone. */\r\n  private inlinedDropdowns = new Set<HTMLElement & { inline: boolean; open: boolean }>();\r\n\r\n  /** While the hamburger layout is on, the dropdowns in the header open in the flow of the\r\n   * full-screen panel instead of floating over it (SankhyaUI's touch-device layout). */\r\n  private syncInlineDropdowns = (): void => {\r\n    const collapsed = this.compact || !!this.narrowQuery?.matches;\r\n    const dropdowns = Array.from(this.querySelectorAll('st-dropdown')) as (HTMLElement & { inline: boolean; open: boolean })[];\r\n    if (collapsed) {\r\n      for (const dropdown of dropdowns) {\r\n        if (dropdown.inline) continue;\r\n        dropdown.inline = true;\r\n        this.inlinedDropdowns.add(dropdown);\r\n      }\r\n    } else {\r\n      for (const dropdown of this.inlinedDropdowns) dropdown.inline = false;\r\n      this.inlinedDropdowns.clear();\r\n    }\r\n  };\r\n\r\n  private onUtilitySlotChange = (event: Event): void => {\r\n    this.hasUtility = (event.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\r\n    this.evaluateFit();\r\n  };\r\n\r\n  private onMenuSlotChange = (): void => {\r\n    this.evaluateFit();\r\n    this.syncInlineDropdowns();\r\n  };\r\n\r\n  protected updated(changed: Map<string, unknown>): void {\r\n    if (changed.has('compact')) this.syncInlineDropdowns();\r\n    // A mega dropdown's drill-down panel would otherwise still cover the menu next time it opens.\r\n    if (changed.has('mobileOpen') && !this.mobileOpen) {\r\n      for (const dropdown of this.inlinedDropdowns) dropdown.open = false;\r\n    }\r\n  }\r\n\r\n  /** The bar width at which the menu last overflowed — the bar only expands again once it is\r\n   * clearly wider than this, so it can't flip back and forth right at the threshold. */\r\n  private collapsedAtWidth = 0;\r\n\r\n  /** Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\r\n   * once there is room. The collapsed layout hides the menu, so the room it needs can't be\r\n   * measured then; the width remembered when it collapsed stands in for it. */\r\n  private evaluateFit = (): void => {\r\n    const width = this.clientWidth;\r\n    if (this.compact) {\r\n      if (width > this.collapsedAtWidth + 24) {\r\n        this.compact = false;\r\n        this.mobileOpen = false;\r\n        void this.updateComplete.then(this.evaluateFit);\r\n      }\r\n      return;\r\n    }\r\n    if (this.menuOverflows()) {\r\n      this.collapsedAtWidth = width;\r\n      this.compact = true;\r\n    }\r\n  };\r\n\r\n  /** Whether the visible menu items reach past the right edge of the menu row. Measured from the\r\n   * items' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\r\n   * a closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\r\n   * report overflow at any width. */\r\n  private menuOverflows(): boolean {\r\n    const row = this.renderRoot.querySelector<HTMLElement>('.menu-row');\r\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"menu\"]');\r\n    if (!row || !slot) return false;\r\n    const limit = row.getBoundingClientRect().right + 1;\r\n    let right = 0;\r\n    for (const el of slot.assignedElements({ flatten: true })) {\r\n      for (const box of [el, ...Array.from(el.children)]) {\r\n        const rect = box.getBoundingClientRect();\r\n        if (rect.width > 0) right = Math.max(right, rect.right);\r\n      }\r\n    }\r\n    return right > limit;\r\n  }\r\n\r\n  protected firstUpdated(): void {\r\n    this.resizeObserver = new ResizeObserver(this.evaluateFit);\r\n    this.resizeObserver.observe(this);\r\n    this.evaluateFit();\r\n    this.syncInlineDropdowns();\r\n  }\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    window.addEventListener('keydown', this.closeOnEscape);\r\n    window.addEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n    window.addEventListener('scroll', this.onScroll, { passive: true });\r\n    this.onScroll();\r\n    this.narrowQuery = window.matchMedia(`(max-width: ${BREAKPOINT_TABLET}px)`);\r\n    this.narrowQuery.addEventListener('change', this.syncInlineDropdowns);\r\n    // Menus often render their dropdowns after the header (e.g. once the user's role loads),\r\n    // deeper than a slotchange reports.\r\n    this.lightDomObserver = new MutationObserver(this.syncInlineDropdowns);\r\n    this.lightDomObserver.observe(this, { childList: true, subtree: true });\r\n  }\r\n\r\n  private lightDomObserver?: MutationObserver;\r\n\r\n  disconnectedCallback(): void {\r\n    this.lightDomObserver?.disconnect();\r\n    this.narrowQuery?.removeEventListener('change', this.syncInlineDropdowns);\r\n    this.resizeObserver?.disconnect();\r\n    window.removeEventListener('keydown', this.closeOnEscape);\r\n    window.removeEventListener('click', this.closeLanguageMenuOnOutsideClick);\r\n    window.removeEventListener('scroll', this.onScroll);\r\n    if (this.scrollFrame) cancelAnimationFrame(this.scrollFrame);\r\n    this.scrollFrame = 0;\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  private closeOnEscape = (event: KeyboardEvent): void => {\r\n    if (this.mobileOpen && event.key === 'Escape') this.mobileOpen = false;\r\n    if (this.languageMenuOpen && event.key === 'Escape') this.languageMenuOpen = false;\r\n  };\r\n\r\n  private closeLanguageMenuOnOutsideClick = (event: Event): void => {\r\n    if (this.languageMenuOpen && !event.composedPath().includes(this)) this.languageMenuOpen = false;\r\n  };\r\n\r\n  private renderLanguageMenu() {\r\n    if (this.languages.length < 2) return nothing;\r\n    const current = this.languages.find((lang) => lang.code === this.currentLanguageCode);\r\n    return html`\r\n      <div class=\"lang-menu\" part=\"language-menu\">\r\n        <button\r\n          part=\"language-menu-trigger\"\r\n          type=\"button\"\r\n          class=\"lang-trigger\"\r\n          aria-label=${this.languageMenuLabel}\r\n          aria-expanded=${this.languageMenuOpen}\r\n          @click=${(event: Event) => {\r\n            event.stopPropagation();\r\n            this.languageMenuOpen = !this.languageMenuOpen;\r\n          }}\r\n        >\r\n          <span part=\"language-menu-current\">${current?.label ?? this.languageMenuLabel}</span>\r\n          ${chevronIcon('down', 10)}\r\n        </button>\r\n        ${this.languageMenuOpen\r\n          ? html`\r\n              <div part=\"language-dropdown\" class=\"lang-dropdown\">\r\n                ${this.languages.map(\r\n                  (lang) => html`\r\n                    <button\r\n                      part=\"language-option\"\r\n                      type=\"button\"\r\n                      class=\"lang-option ${lang.code === this.currentLanguageCode ? 'active' : ''}\"\r\n                      aria-current=${lang.code === this.currentLanguageCode}\r\n                      @click=${() => this.onLanguageSelect(lang.code)}\r\n                    >\r\n                      ${lang.label}\r\n                    </button>\r\n                  `\r\n                )}\r\n              </div>\r\n            `\r\n          : nothing}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private onLanguageSelect(code: string): void {\r\n    this.languageMenuOpen = false;\r\n    if (code === this.currentLanguageCode) return;\r\n    this.dispatchEvent(new CustomEvent<LanguageChangedEventDetail>('language-change', { detail: { code }, bubbles: true, composed: true }));\r\n  }\r\n\r\n  private renderBrand() {\r\n    const content = html`\r\n      ${this.brandImageUrl ? html`<img part=\"brand-mark\" class=\"brand-mark\" src=${this.brandImageUrl} alt=${this.altText} /> ` : nothing}\r\n      <span part=\"brand-title\" class=\"brand-title\">${this.title}</span>\r\n    `;\r\n    return this.logoHref\r\n      ? html`<a part=\"brand\" class=\"brand ${this.logoClassName}\" href=${this.logoHref} target=${this.logoTarget}>${content}</a>`\r\n      : html`<div part=\"brand\" class=\"brand ${this.logoClassName}\">${content}</div>`;\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      ${this.renderBrand()}\r\n\r\n      <div class=\"mobile-panel\" part=\"mobile-panel\" @click=${() => (this.mobileOpen = false)}>\r\n        <div class=\"menu-row\" part=\"menu-row\"><slot name=\"menu\" @slotchange=${this.onMenuSlotChange}></slot></div>\r\n        <div class=\"utility-row ${this.hasUtility || this.languages.length >= 2 ? '' : 'empty'}\" part=\"utility-row\">\r\n          ${this.renderLanguageMenu()}<slot name=\"utility\" @slotchange=${this.onUtilitySlotChange}></slot>\r\n        </div>\r\n      </div>\r\n\r\n      <button\r\n        part=\"toggle\"\r\n        type=\"button\"\r\n        class=\"toggle\"\r\n        aria-label=${this.mobileOpen ? 'Close menu' : 'Open menu'}\r\n        aria-expanded=${this.mobileOpen}\r\n        @click=${() => (this.mobileOpen = !this.mobileOpen)}\r\n      >\r\n        ${this.mobileOpen ? closeIcon() : menuIcon()}\r\n      </button>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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iB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAuBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA8LpB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBjB,mBAAmB;A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","names":[]}

package/dist/chunk-6H262SG6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/stats/Stats.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\n\r\nexport interface StatItem {\r\n  value: string;\r\n  label: string;\r\n  description?: string;\r\n}\r\n\r\n/**\r\n * Responsive grid of headline numbers with a label and optional description. Port of React `Stats`.\r\n * `inverted` puts it on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.\r\n *\r\n * @cssprop --st-stats-padding - Overrides the block's padding.\r\n */\r\n@customElement('st-stats')\r\nexport class Stats extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\r\n         padding; override with --st-stats-padding instead. */\r\n      padding: var(--st-stats-padding, var(--st-space-48) var(--st-space-24)) !important;\r\n      background-color: var(--st-color-surface);\r\n      border-top: 1px solid var(--st-color-divider);\r\n      border-bottom: 1px solid var(--st-color-divider);\r\n      ${rootFontFamilyStyles}\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background-color: var(--st-cms-band-dark-bg);\r\n      border-color: transparent;\r\n    }\r\n\r\n    .grid {\r\n      max-width: var(--st-cms-container-max);\r\n      margin: 0 auto;\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n      gap: var(--st-space-40);\r\n    }\r\n\r\n    .item {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      text-align: center;\r\n      gap: var(--st-space-8);\r\n    }\r\n\r\n    .value {\r\n      font-size: var(--st-cms-text-3xl);\r\n      font-weight: var(--st-font-weight-bold);\r\n      color: var(--st-color-text-strong);\r\n      line-height: 1;\r\n      letter-spacing: -0.02em;\r\n    }\r\n\r\n    .label {\r\n      font-size: var(--st-text-xl);\r\n      font-weight: var(--st-font-weight-semibold);\r\n      color: var(--st-color-text-muted);\r\n      text-transform: uppercase;\r\n      letter-spacing: var(--st-tracking-wide);\r\n    }\r\n\r\n    .description {\r\n      font-size: var(--st-text-sm);\r\n      color: var(--st-color-text-faint);\r\n      max-width: 200px;\r\n    }\r\n\r\n    :host([inverted]) .value {\r\n      color: var(--st-cms-band-dark-color);\r\n    }\r\n\r\n    :host([inverted]) .label,\r\n    :host([inverted]) .description {\r\n      color: color-mix(in oklch, var(--st-cms-band-dark-color) 75%, transparent);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      :host {\r\n        padding: var(--st-stats-padding, var(--st-space-40) var(--st-space-24)) !important;\r\n      }\r\n      .grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: var(--st-space-24);\r\n      }\r\n      .value {\r\n        font-size: var(--st-cms-text-xl);\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ attribute: false })\r\n  items: StatItem[] = [];\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  render() {\r\n    return html`\r\n      <div class=\"grid\" part=\"grid\">\r\n        ${this.items.map(\r\n          (stat) => html`\r\n            <div class=\"item\" part=\"item\">\r\n              <span class=\"value\" part=\"value\">${stat.value}</span>\r\n              <span class=\"label\" part=\"label\">${stat.label}</span>\r\n              ${stat.description ? html`<span class=\"description\" part=\"description\">${stat.description}</span>` : nothing}\r\n            </div>\r\n          `\r\n        )}\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAiBjC,IAAM,QAAN,cAAoB,WAAW;AAAA,EAA/B;AAAA;AAmFL,iBAAoB,CAAC;AAGrB,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA;AAAA,UAED,KAAK,MAAM;AAAA,MACX,CAAC,SAAS;AAAA;AAAA,iDAE6B,KAAK,KAAK;AAAA,iDACV,KAAK,KAAK;AAAA,gBAC3C,KAAK,cAAc,oDAAoD,KAAK,WAAW,YAAY,OAAO;AAAA;AAAA;AAAA,IAGlH,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;AAvGa,MACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsE1B;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAlFnB,MAmFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArF/B,MAsFX;AAtFW,QAAN;AAAA,EADN,cAAc,UAAU;AAAA,GACZ;","names":[]}

package/dist/chunk-7PSYCTEN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/card/Card.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, cardShellStyles, fontFamilyStyles } from '../shared/styles';\r\n\r\n/**\r\n * A surfaced container — content goes in the default slot. Ports `SankhyaUI`'s React `Card`\r\n * (`variant`, `padding`, `elevation`, `hoverable`, `inverted`); `onClick` is just a native `click`\r\n * listener on the element. `padding` takes `none | small | medium | large` (the source's\r\n * `sm|md|lg`, spelled like `paddingScaleStyles`); `elevation` takes `none | sm | md | lg`.\r\n */\r\n@customElement('st-card')\r\nexport class Card extends LitElement {\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: block;\r\n      ${fontFamilyStyles}\r\n      ${cardShellStyles}\r\n      border-radius: var(--st-radius-lg);\r\n      overflow: hidden;\r\n      position: relative;\r\n      transition:\r\n        transform 0.3s ease,\r\n        box-shadow 0.3s ease,\r\n        border-color 0.3s ease;\r\n    }\r\n\r\n    :host([variant='bordered']) {\r\n      border-color: var(--st-color-border-strong);\r\n    }\r\n\r\n    :host([elevation='sm']) {\r\n      box-shadow: 0 1px 2px var(--st-shadow-color-sm);\r\n    }\r\n\r\n    :host([elevation='md']) {\r\n      box-shadow: 0 4px 6px -1px var(--st-shadow-color-md);\r\n    }\r\n\r\n    :host([elevation='lg']) {\r\n      box-shadow: 0 10px 15px -3px var(--st-shadow-color-lg);\r\n    }\r\n\r\n    :host([hoverable]:hover) {\r\n      transform: translateY(-4px);\r\n      box-shadow: 0 20px 25px -5px var(--st-shadow-color-xl);\r\n      border-color: var(--st-color-border-strong);\r\n    }\r\n\r\n    :host([inverted]) {\r\n      background: var(--st-color-text-strong);\r\n      color: var(--st-color-on-solid);\r\n      border-color: var(--st-color-text-strong);\r\n    }\r\n\r\n    .body {\r\n      padding: var(--st-space-24);\r\n    }\r\n\r\n    :host([padding='none']) .body {\r\n      padding: 0;\r\n    }\r\n\r\n    :host([padding='small']) .body {\r\n      padding: var(--st-space-16);\r\n    }\r\n\r\n    :host([padding='large']) .body {\r\n      padding: var(--st-space-32);\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      :host {\r\n        transition: none;\r\n      }\r\n\r\n      :host([hoverable]:hover) {\r\n        transform: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  @property({ type: String, reflect: true })\r\n  variant: 'default' | 'bordered' = 'default';\r\n\r\n  @property({ type: String, reflect: true })\r\n  padding: 'none' | 'small' | 'medium' | 'large' = 'medium';\r\n\r\n  @property({ type: String, reflect: true })\r\n  elevation: 'none' | 'sm' | 'md' | 'lg' = 'sm';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  hoverable = false;\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  inverted = false;\r\n\r\n  render() {\r\n    return html`<div class=\"body\" part=\"body\"><slot></slot></div>`;\r\n  }\r\n}\r\n"],"mappings":";;;;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAWjC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;AAyEL,mBAAkC;AAGlC,mBAAiD;AAGjD,qBAAyC;AAGzC,qBAAY;AAGZ,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA,EACT;AACF;AA1Fa,KACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA,QAChB,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkErB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxE9B,KAyEX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA3E9B,KA4EX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9E9B,KA+EX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAjF/B,KAkFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApF/B,KAqFX;AArFW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}

package/dist/chunk-BQTDFQ4V.js.map

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

package/dist/chunk-CDC4P77V.js.map

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

package/dist/chunk-DQHMJZ6X.js.map

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

package/dist/chunk-EMVHNAID.js.map

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

package/dist/chunk-HGJT24UG.js.map

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