@sankhyatronics/sankhya-cms 0.1.18 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/custom-elements.json +608 -15
  2. package/dist/bento-grid/index.d.ts +8 -1
  3. package/dist/bento-grid/index.js +2 -1
  4. package/dist/card/index.d.ts +3 -4
  5. package/dist/card/index.js +1 -1
  6. package/dist/{chunk-LEXZKGQX.js → chunk-2DXHPEB5.js} +1 -1
  7. package/dist/chunk-2DXHPEB5.js.map +1 -0
  8. package/dist/{chunk-R5G6KFTJ.js → chunk-2FJDNJ7R.js} +1 -1
  9. package/dist/chunk-2FJDNJ7R.js.map +1 -0
  10. package/dist/{chunk-ZN4LIKVG.js → chunk-3OEEOBHB.js} +1 -1
  11. package/dist/chunk-3OEEOBHB.js.map +1 -0
  12. package/dist/{chunk-BMHMNXIA.js → chunk-4AFOKKSU.js} +1 -1
  13. package/dist/chunk-4AFOKKSU.js.map +1 -0
  14. package/dist/{chunk-76AVBQUA.js → chunk-5C6C6K5U.js} +98 -4
  15. package/dist/chunk-5C6C6K5U.js.map +1 -0
  16. package/dist/{chunk-7NLZND6Q.js → chunk-5F5PTVWR.js} +27 -2
  17. package/dist/chunk-5F5PTVWR.js.map +1 -0
  18. package/dist/chunk-5MY6OWMK.js +125 -0
  19. package/dist/chunk-5MY6OWMK.js.map +1 -0
  20. package/dist/{chunk-FLY7TNRT.js → chunk-7NIWQWTA.js} +1 -1
  21. package/dist/chunk-7NIWQWTA.js.map +1 -0
  22. package/dist/{chunk-ALI26WOB.js → chunk-EE6PAN3B.js} +33 -2
  23. package/dist/chunk-EE6PAN3B.js.map +1 -0
  24. package/dist/{chunk-VWS53WY4.js → chunk-HMUZON6I.js} +49 -4
  25. package/dist/chunk-HMUZON6I.js.map +1 -0
  26. package/dist/chunk-O4FCRKDX.js +178 -0
  27. package/dist/chunk-O4FCRKDX.js.map +1 -0
  28. package/dist/{chunk-SMLR736E.js → chunk-OELI3IWC.js} +1 -1
  29. package/dist/chunk-OELI3IWC.js.map +1 -0
  30. package/dist/{chunk-JQY2G4QK.js → chunk-OLA35A2O.js} +1 -1
  31. package/dist/chunk-OLA35A2O.js.map +1 -0
  32. package/dist/{chunk-YQ42EBK5.js → chunk-PHEGSCOM.js} +1 -1
  33. package/dist/chunk-PHEGSCOM.js.map +1 -0
  34. package/dist/{chunk-5EBWMPJS.js → chunk-QLA4BH2B.js} +5 -5
  35. package/dist/chunk-QLA4BH2B.js.map +1 -0
  36. package/dist/{chunk-JKBWZLG4.js → chunk-SQ3OZO32.js} +141 -3
  37. package/dist/chunk-SQ3OZO32.js.map +1 -0
  38. package/dist/chunk-UAIUBPDN.js +11 -0
  39. package/dist/chunk-UAIUBPDN.js.map +1 -0
  40. package/dist/{chunk-XWB4CKDU.js → chunk-XUGEXERO.js} +6 -6
  41. package/dist/chunk-XUGEXERO.js.map +1 -0
  42. package/dist/chunk-ZRC5BVDX.js +219 -0
  43. package/dist/chunk-ZRC5BVDX.js.map +1 -0
  44. package/dist/cms-theme.css +7 -0
  45. package/dist/content-block/index.d.ts +2 -3
  46. package/dist/content-block/index.js +3 -2
  47. package/dist/dropdown/index.d.ts +8 -11
  48. package/dist/dropdown/index.js +1 -1
  49. package/dist/feature-split/index.js +2 -1
  50. package/dist/features-section/index.d.ts +4 -4
  51. package/dist/features-section/index.js +4 -3
  52. package/dist/flow/index.d.ts +35 -0
  53. package/dist/flow/index.js +9 -0
  54. package/dist/flow/index.js.map +1 -0
  55. package/dist/header/index.d.ts +8 -15
  56. package/dist/header/index.js +1 -1
  57. package/dist/hero/index.d.ts +18 -3
  58. package/dist/hero/index.js +1 -1
  59. package/dist/icon-button/index.d.ts +2 -4
  60. package/dist/icon-button/index.js +1 -1
  61. package/dist/index.d.ts +3 -0
  62. package/dist/index.js +36 -23
  63. package/dist/items-accordion/index.d.ts +5 -0
  64. package/dist/items-accordion/index.js +2 -1
  65. package/dist/markdown/index.d.ts +1 -2
  66. package/dist/markdown/index.js +2 -1
  67. package/dist/menu-grid/index.d.ts +2 -3
  68. package/dist/menu-grid/index.js +1 -1
  69. package/dist/menu-grid-item/index.d.ts +6 -8
  70. package/dist/menu-grid-item/index.js +1 -1
  71. package/dist/menu-item/index.d.ts +5 -7
  72. package/dist/menu-item/index.js +1 -1
  73. package/dist/promo-banner/index.d.ts +14 -3
  74. package/dist/promo-banner/index.js +1 -1
  75. package/dist/schema/index.d.ts +3 -0
  76. package/dist/schema/index.js +3 -0
  77. package/dist/schema/index.js.map +1 -1
  78. package/dist/section/index.d.ts +3 -0
  79. package/dist/section/index.js +1 -1
  80. package/dist/steps/index.d.ts +33 -0
  81. package/dist/steps/index.js +10 -0
  82. package/dist/steps/index.js.map +1 -0
  83. package/dist/tag-strip/index.d.ts +26 -0
  84. package/dist/tag-strip/index.js +9 -0
  85. package/dist/tag-strip/index.js.map +1 -0
  86. package/package.json +14 -2
  87. package/dist/chunk-5EBWMPJS.js.map +0 -1
  88. package/dist/chunk-76AVBQUA.js.map +0 -1
  89. package/dist/chunk-7NLZND6Q.js.map +0 -1
  90. package/dist/chunk-ALI26WOB.js.map +0 -1
  91. package/dist/chunk-BMHMNXIA.js.map +0 -1
  92. package/dist/chunk-FLY7TNRT.js.map +0 -1
  93. package/dist/chunk-JKBWZLG4.js.map +0 -1
  94. package/dist/chunk-JQY2G4QK.js.map +0 -1
  95. package/dist/chunk-LEXZKGQX.js.map +0 -1
  96. package/dist/chunk-R5G6KFTJ.js.map +0 -1
  97. package/dist/chunk-SMLR736E.js.map +0 -1
  98. package/dist/chunk-VWS53WY4.js.map +0 -1
  99. package/dist/chunk-XWB4CKDU.js.map +0 -1
  100. package/dist/chunk-YQ42EBK5.js.map +0 -1
  101. package/dist/chunk-ZN4LIKVG.js.map +0 -1
@@ -2,12 +2,16 @@ import * as lit from 'lit';
2
2
  import { LitElement } from 'lit';
3
3
 
4
4
  /**
5
- * Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a
6
- * background image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event
7
- * (detail `{ href }`, empty unless set) in place of `onAction`.
5
+ * Rounded call-to-action banner (title, subtitle, one or two outlined buttons) on a dark panel or a
6
+ * background image. The buttons fire an `action` event
7
+ * (detail `{ href }`, empty unless set; the secondary button adds `kind: 'secondary'`).
8
+ * `onAction`. `variant="accent"` fills the banner with the brand colour.
8
9
  *
10
+ * @fires action - Detail `{ href, kind? }`. `kind` is `secondary` for the second button only.
9
11
  * @cssprop --st-promo-banner-margin - Overrides the banner's margin.
10
12
  * @cssprop --st-promo-banner-padding - Overrides the banner's padding.
13
+ * @csspart action - The primary button.
14
+ * @csspart secondary-action - The second button.
11
15
  */
12
16
  declare class PromoBanner extends LitElement {
13
17
  static styles: lit.CSSResult;
@@ -16,9 +20,16 @@ declare class PromoBanner extends LitElement {
16
20
  actionLabel: string;
17
21
  href: string;
18
22
  imageSrc: string;
23
+ /** Label of a second, outlined button next to the first. */
24
+ secondaryActionLabel: string;
25
+ /** Target of the second button, sent in the `action` event detail. */
26
+ secondaryHref: string;
27
+ /** `default` is the dark panel; `accent` fills the banner with the brand colour and makes the first button white. */
28
+ variant: 'default' | 'accent';
19
29
  inverted: boolean;
20
30
  protected willUpdate(): void;
21
31
  private onAction;
32
+ private onSecondaryAction;
22
33
  render(): lit.TemplateResult<1>;
23
34
  }
24
35
 
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  PromoBanner
3
- } from "../chunk-VWS53WY4.js";
3
+ } from "../chunk-HMUZON6I.js";
4
4
  import "../chunk-FZ36KL73.js";
5
5
  import "../chunk-KMU6ABQF.js";
6
6
  import "../chunk-EUXUH3YW.js";
@@ -47,6 +47,7 @@ declare const componentTags: {
47
47
  readonly FeatureItem: "st-feature-item";
48
48
  readonly FeatureSplit: "st-feature-split";
49
49
  readonly FeaturesSection: "st-features-section";
50
+ readonly Flow: "st-flow";
50
51
  readonly Footer: "st-footer";
51
52
  readonly Header: "st-header";
52
53
  readonly Hero: "st-hero";
@@ -64,6 +65,8 @@ declare const componentTags: {
64
65
  readonly Section: "st-section";
65
66
  readonly Select: "st-select";
66
67
  readonly Stats: "st-stats";
68
+ readonly Steps: "st-steps";
69
+ readonly TagStrip: "st-tag-strip";
67
70
  readonly Testimonials: "st-testimonials";
68
71
  };
69
72
  /** Every `type` the base set knows. */
@@ -28,6 +28,7 @@ var componentTags = {
28
28
  FeatureItem: "st-feature-item",
29
29
  FeatureSplit: "st-feature-split",
30
30
  FeaturesSection: "st-features-section",
31
+ Flow: "st-flow",
31
32
  Footer: "st-footer",
32
33
  Header: "st-header",
33
34
  Hero: "st-hero",
@@ -45,6 +46,8 @@ var componentTags = {
45
46
  Section: "st-section",
46
47
  Select: "st-select",
47
48
  Stats: "st-stats",
49
+ Steps: "st-steps",
50
+ TagStrip: "st-tag-strip",
48
51
  Testimonials: "st-testimonials"
49
52
  };
50
53
  function isBaseComponentType(type) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/schema/node.ts","../../src/schema/nodeUtils.ts","../../src/schema/components.ts","../../src/schema/validate.ts"],"sourcesContent":["/** Dependency-free node types, safe to import from the content API layer. */\n\n/** Action reference in JSON, resolved against the `handlers` prop of `DynamicRenderer`. */\nexport type ActionRef = `@action:${string}`;\n\n/** Keys the renderer owns; everything else on a node is passed to the component as a prop. */\nexport interface NodeEnvelope<TNode> {\n id?: string;\n /** Named slot in the parent (e.g. Header: \"utility\"). Omit for the default slot. */\n slot?: string;\n /** Editor-only label, never passed to the component. */\n label?: string;\n children?: TNode[];\n}\n\n/**\n * A node as it appears in JSON: flat, no `data` wrapper.\n * `{ \"type\": \"Hero\", \"id\": \"home-hero\", \"title\": \"...\", \"children\": [...] }`\n */\nexport interface ComponentNode extends NodeEnvelope<ComponentNode> {\n type: string;\n [prop: string]: unknown;\n}\n\n/** A page is a list of nodes. */\nexport type PageContent = ComponentNode[];\n\nexport function isComponentNode(value: unknown): value is ComponentNode {\n return (\n typeof value === 'object' &&\n value !== null &&\n !Array.isArray(value) &&\n typeof (value as { type?: unknown }).type === 'string' &&\n (value as { type: string }).type.trim().length > 0\n );\n}\n","import type { ComponentNode } from './node';\n\n/**\n * Returns a copy of `nodes` where the node with the given `id` has `props` merged in.\n * Use it to inject runtime state (e.g. the selected language) into fetched JSON without mutating it.\n */\nexport function patchNodeById(nodes: ComponentNode[], id: string, props: Record<string, unknown>): ComponentNode[] {\n return nodes.map(node => {\n const patched = node.id === id ? { ...node, ...props } : node;\n return patched.children\n ? { ...patched, children: patchNodeById(patched.children, id, props) }\n : patched;\n });\n}\n","/**\n * The JSON `type` of every base component, and the Lit element that renders it.\n * This is the contract page JSON is written against — renderers (React, or any other binding)\n * map each `type` to their own component for that element.\n */\nexport const componentTags = {\n BentoGrid: 'st-bento-grid',\n Card: 'st-card',\n AttentionPanel: 'st-attention-panel',\n BarChart: 'st-bar-chart',\n Carousel: 'st-carousel',\n Chip: 'st-chip',\n ContentBlock: 'st-content-block',\n CookieConsent: 'st-cookie-consent',\n DateTile: 'st-date-tile',\n Dropdown: 'st-dropdown',\n FeatureItem: 'st-feature-item',\n FeatureSplit: 'st-feature-split',\n FeaturesSection: 'st-features-section',\n Footer: 'st-footer',\n Header: 'st-header',\n Hero: 'st-hero',\n IconButton: 'st-icon-button',\n ItemsAccordion: 'st-items-accordion',\n KpiCard: 'st-kpi-card',\n MegaMenu: 'st-mega-menu',\n MegaMenuColumn: 'st-mega-menu-column',\n MegaMenuFeature: 'st-mega-menu-feature',\n MenuGrid: 'st-menu-grid',\n MenuGridItem: 'st-menu-grid-item',\n MenuItem: 'st-menu-item',\n PromoBanner: 'st-promo-banner',\n SegmentedControl: 'st-segmented-control',\n Section: 'st-section',\n Select: 'st-select',\n Stats: 'st-stats',\n Testimonials: 'st-testimonials'\n} as const;\n\n/** Every `type` the base set knows. */\nexport type ComponentType = keyof typeof componentTags;\n\nexport function isBaseComponentType(type: string): type is ComponentType {\n return Object.hasOwn(componentTags, type);\n}\n","import { isBaseComponentType } from './components';\nimport type { ComponentNode } from './node';\n\n/** Keys from the pre-flat schema; their presence means the JSON still needs `scripts/migrate-json.mjs`. */\nconst LEGACY_KEYS = ['data', 'embeddedView', 'data-position', 'image', 'contentUrl'] as const;\n\n/**\n * Returns the schema violations for a node and its descendants (empty when valid).\n * `isKnownType` defaults to the base component set; pass a wider predicate when a renderer also\n * registers custom components.\n */\nexport function validateNode(node: unknown, where = 'node', isKnownType: (type: string) => boolean = isBaseComponentType): string[] {\n if (typeof node !== 'object' || node === null || Array.isArray(node)) return [`${where}: node must be an object`];\n const n = node as ComponentNode;\n const found: string[] = [];\n if (typeof n.type !== 'string' || !isKnownType(n.type)) found.push(`${where}: unknown type \"${String(n.type)}\"`);\n for (const legacy of LEGACY_KEYS) {\n if (legacy in n) found.push(`${where}: legacy key \"${legacy}\"`);\n }\n if (Array.isArray(n.items) && n.items.some(item => typeof item === 'object' && item !== null && 'type' in item)) {\n found.push(`${where}: \"items\" must hold plain data; nest components under \"children\"`);\n }\n if (n.children !== undefined) {\n if (!Array.isArray(n.children)) found.push(`${where}: children must be an array`);\n else n.children.forEach((child, i) => found.push(...validateNode(child, `${where}.children[${i}]`, isKnownType)));\n }\n return found;\n}\n\n/** Validates a page: a node or a list of nodes. */\nexport function validatePage(page: unknown, isKnownType?: (type: string) => boolean): string[] {\n const nodes = Array.isArray(page) ? page : [page];\n return nodes.flatMap((node, i) => validateNode(node, `[${i}]`, isKnownType));\n}\n"],"mappings":";;;AA2BO,SAAS,gBAAgB,OAAwC;AACpE,SACI,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,MAAM,QAAQ,KAAK,KACpB,OAAQ,MAA6B,SAAS,YAC7C,MAA2B,KAAK,KAAK,EAAE,SAAS;AAEzD;;;AC7BO,SAAS,cAAc,OAAwB,IAAY,OAAiD;AAC/G,SAAO,MAAM,IAAI,UAAQ;AACrB,UAAM,UAAU,KAAK,OAAO,KAAK,EAAE,GAAG,MAAM,GAAG,MAAM,IAAI;AACzD,WAAO,QAAQ,WACT,EAAE,GAAG,SAAS,UAAU,cAAc,QAAQ,UAAU,IAAI,KAAK,EAAE,IACnE;AAAA,EACV,CAAC;AACL;;;ACRO,IAAM,gBAAgB;AAAA,EACzB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAClB;AAKO,SAAS,oBAAoB,MAAqC;AACrE,SAAO,OAAO,OAAO,eAAe,IAAI;AAC5C;;;ACxCA,IAAM,cAAc,CAAC,QAAQ,gBAAgB,iBAAiB,SAAS,YAAY;AAO5E,SAAS,aAAa,MAAe,QAAQ,QAAQ,cAAyC,qBAA+B;AAChI,MAAI,OAAO,SAAS,YAAY,SAAS,QAAQ,MAAM,QAAQ,IAAI,EAAG,QAAO,CAAC,GAAG,KAAK,0BAA0B;AAChH,QAAM,IAAI;AACV,QAAM,QAAkB,CAAC;AACzB,MAAI,OAAO,EAAE,SAAS,YAAY,CAAC,YAAY,EAAE,IAAI,EAAG,OAAM,KAAK,GAAG,KAAK,mBAAmB,OAAO,EAAE,IAAI,CAAC,GAAG;AAC/G,aAAW,UAAU,aAAa;AAC9B,QAAI,UAAU,EAAG,OAAM,KAAK,GAAG,KAAK,iBAAiB,MAAM,GAAG;AAAA,EAClE;AACA,MAAI,MAAM,QAAQ,EAAE,KAAK,KAAK,EAAE,MAAM,KAAK,UAAQ,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,IAAI,GAAG;AAC7G,UAAM,KAAK,GAAG,KAAK,kEAAkE;AAAA,EACzF;AACA,MAAI,EAAE,aAAa,QAAW;AAC1B,QAAI,CAAC,MAAM,QAAQ,EAAE,QAAQ,EAAG,OAAM,KAAK,GAAG,KAAK,6BAA6B;AAAA,QAC3E,GAAE,SAAS,QAAQ,CAAC,OAAO,MAAM,MAAM,KAAK,GAAG,aAAa,OAAO,GAAG,KAAK,aAAa,CAAC,KAAK,WAAW,CAAC,CAAC;AAAA,EACpH;AACA,SAAO;AACX;AAGO,SAAS,aAAa,MAAe,aAAmD;AAC3F,QAAM,QAAQ,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAChD,SAAO,MAAM,QAAQ,CAAC,MAAM,MAAM,aAAa,MAAM,IAAI,CAAC,KAAK,WAAW,CAAC;AAC/E;","names":[]}
1
+ {"version":3,"sources":["../../src/schema/node.ts","../../src/schema/nodeUtils.ts","../../src/schema/components.ts","../../src/schema/validate.ts"],"sourcesContent":["/** Dependency-free node types, safe to import from the content API layer. */\n\n/** Action reference in JSON, resolved against the `handlers` prop of `DynamicRenderer`. */\nexport type ActionRef = `@action:${string}`;\n\n/** Keys the renderer owns; everything else on a node is passed to the component as a prop. */\nexport interface NodeEnvelope<TNode> {\n id?: string;\n /** Named slot in the parent (e.g. Header: \"utility\"). Omit for the default slot. */\n slot?: string;\n /** Editor-only label, never passed to the component. */\n label?: string;\n children?: TNode[];\n}\n\n/**\n * A node as it appears in JSON: flat, no `data` wrapper.\n * `{ \"type\": \"Hero\", \"id\": \"home-hero\", \"title\": \"...\", \"children\": [...] }`\n */\nexport interface ComponentNode extends NodeEnvelope<ComponentNode> {\n type: string;\n [prop: string]: unknown;\n}\n\n/** A page is a list of nodes. */\nexport type PageContent = ComponentNode[];\n\nexport function isComponentNode(value: unknown): value is ComponentNode {\n return (\n typeof value === 'object' &&\n value !== null &&\n !Array.isArray(value) &&\n typeof (value as { type?: unknown }).type === 'string' &&\n (value as { type: string }).type.trim().length > 0\n );\n}\n","import type { ComponentNode } from './node';\n\n/**\n * Returns a copy of `nodes` where the node with the given `id` has `props` merged in.\n * Use it to inject runtime state (e.g. the selected language) into fetched JSON without mutating it.\n */\nexport function patchNodeById(nodes: ComponentNode[], id: string, props: Record<string, unknown>): ComponentNode[] {\n return nodes.map(node => {\n const patched = node.id === id ? { ...node, ...props } : node;\n return patched.children\n ? { ...patched, children: patchNodeById(patched.children, id, props) }\n : patched;\n });\n}\n","/**\n * The JSON `type` of every base component, and the Lit element that renders it.\n * This is the contract page JSON is written against — renderers (React, or any other binding)\n * map each `type` to their own component for that element.\n */\nexport const componentTags = {\n BentoGrid: 'st-bento-grid',\n Card: 'st-card',\n AttentionPanel: 'st-attention-panel',\n BarChart: 'st-bar-chart',\n Carousel: 'st-carousel',\n Chip: 'st-chip',\n ContentBlock: 'st-content-block',\n CookieConsent: 'st-cookie-consent',\n DateTile: 'st-date-tile',\n Dropdown: 'st-dropdown',\n FeatureItem: 'st-feature-item',\n FeatureSplit: 'st-feature-split',\n FeaturesSection: 'st-features-section',\n Flow: 'st-flow',\n Footer: 'st-footer',\n Header: 'st-header',\n Hero: 'st-hero',\n IconButton: 'st-icon-button',\n ItemsAccordion: 'st-items-accordion',\n KpiCard: 'st-kpi-card',\n MegaMenu: 'st-mega-menu',\n MegaMenuColumn: 'st-mega-menu-column',\n MegaMenuFeature: 'st-mega-menu-feature',\n MenuGrid: 'st-menu-grid',\n MenuGridItem: 'st-menu-grid-item',\n MenuItem: 'st-menu-item',\n PromoBanner: 'st-promo-banner',\n SegmentedControl: 'st-segmented-control',\n Section: 'st-section',\n Select: 'st-select',\n Stats: 'st-stats',\n Steps: 'st-steps',\n TagStrip: 'st-tag-strip',\n Testimonials: 'st-testimonials'\n} as const;\n\n/** Every `type` the base set knows. */\nexport type ComponentType = keyof typeof componentTags;\n\nexport function isBaseComponentType(type: string): type is ComponentType {\n return Object.hasOwn(componentTags, type);\n}\n","import { isBaseComponentType } from './components';\nimport type { ComponentNode } from './node';\n\n/** Keys from the pre-flat schema; their presence means the JSON still needs `scripts/migrate-json.mjs`. */\nconst LEGACY_KEYS = ['data', 'embeddedView', 'data-position', 'image', 'contentUrl'] as const;\n\n/**\n * Returns the schema violations for a node and its descendants (empty when valid).\n * `isKnownType` defaults to the base component set; pass a wider predicate when a renderer also\n * registers custom components.\n */\nexport function validateNode(node: unknown, where = 'node', isKnownType: (type: string) => boolean = isBaseComponentType): string[] {\n if (typeof node !== 'object' || node === null || Array.isArray(node)) return [`${where}: node must be an object`];\n const n = node as ComponentNode;\n const found: string[] = [];\n if (typeof n.type !== 'string' || !isKnownType(n.type)) found.push(`${where}: unknown type \"${String(n.type)}\"`);\n for (const legacy of LEGACY_KEYS) {\n if (legacy in n) found.push(`${where}: legacy key \"${legacy}\"`);\n }\n if (Array.isArray(n.items) && n.items.some(item => typeof item === 'object' && item !== null && 'type' in item)) {\n found.push(`${where}: \"items\" must hold plain data; nest components under \"children\"`);\n }\n if (n.children !== undefined) {\n if (!Array.isArray(n.children)) found.push(`${where}: children must be an array`);\n else n.children.forEach((child, i) => found.push(...validateNode(child, `${where}.children[${i}]`, isKnownType)));\n }\n return found;\n}\n\n/** Validates a page: a node or a list of nodes. */\nexport function validatePage(page: unknown, isKnownType?: (type: string) => boolean): string[] {\n const nodes = Array.isArray(page) ? page : [page];\n return nodes.flatMap((node, i) => validateNode(node, `[${i}]`, isKnownType));\n}\n"],"mappings":";;;AA2BO,SAAS,gBAAgB,OAAwC;AACpE,SACI,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,MAAM,QAAQ,KAAK,KACpB,OAAQ,MAA6B,SAAS,YAC7C,MAA2B,KAAK,KAAK,EAAE,SAAS;AAEzD;;;AC7BO,SAAS,cAAc,OAAwB,IAAY,OAAiD;AAC/G,SAAO,MAAM,IAAI,UAAQ;AACrB,UAAM,UAAU,KAAK,OAAO,KAAK,EAAE,GAAG,MAAM,GAAG,MAAM,IAAI;AACzD,WAAO,QAAQ,WACT,EAAE,GAAG,SAAS,UAAU,cAAc,QAAQ,UAAU,IAAI,KAAK,EAAE,IACnE;AAAA,EACV,CAAC;AACL;;;ACRO,IAAM,gBAAgB;AAAA,EACzB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAClB;AAKO,SAAS,oBAAoB,MAAqC;AACrE,SAAO,OAAO,OAAO,eAAe,IAAI;AAC5C;;;AC3CA,IAAM,cAAc,CAAC,QAAQ,gBAAgB,iBAAiB,SAAS,YAAY;AAO5E,SAAS,aAAa,MAAe,QAAQ,QAAQ,cAAyC,qBAA+B;AAChI,MAAI,OAAO,SAAS,YAAY,SAAS,QAAQ,MAAM,QAAQ,IAAI,EAAG,QAAO,CAAC,GAAG,KAAK,0BAA0B;AAChH,QAAM,IAAI;AACV,QAAM,QAAkB,CAAC;AACzB,MAAI,OAAO,EAAE,SAAS,YAAY,CAAC,YAAY,EAAE,IAAI,EAAG,OAAM,KAAK,GAAG,KAAK,mBAAmB,OAAO,EAAE,IAAI,CAAC,GAAG;AAC/G,aAAW,UAAU,aAAa;AAC9B,QAAI,UAAU,EAAG,OAAM,KAAK,GAAG,KAAK,iBAAiB,MAAM,GAAG;AAAA,EAClE;AACA,MAAI,MAAM,QAAQ,EAAE,KAAK,KAAK,EAAE,MAAM,KAAK,UAAQ,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,IAAI,GAAG;AAC7G,UAAM,KAAK,GAAG,KAAK,kEAAkE;AAAA,EACzF;AACA,MAAI,EAAE,aAAa,QAAW;AAC1B,QAAI,CAAC,MAAM,QAAQ,EAAE,QAAQ,EAAG,OAAM,KAAK,GAAG,KAAK,6BAA6B;AAAA,QAC3E,GAAE,SAAS,QAAQ,CAAC,OAAO,MAAM,MAAM,KAAK,GAAG,aAAa,OAAO,GAAG,KAAK,aAAa,CAAC,KAAK,WAAW,CAAC,CAAC;AAAA,EACpH;AACA,SAAO;AACX;AAGO,SAAS,aAAa,MAAe,aAAmD;AAC3F,QAAM,QAAQ,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAChD,SAAO,MAAM,QAAQ,CAAC,MAAM,MAAM,aAAa,MAAM,IAAI,CAAC,KAAK,WAAW,CAAC;AAC/E;","names":[]}
@@ -12,6 +12,7 @@ import { LitElement } from 'lit';
12
12
  * @cssprop --st-section-padding-inline - Overrides the left/right padding (not with `width="full"`).
13
13
  * @csspart inner - The width-limited content box.
14
14
  * @csspart header - The heading block.
15
+ * @csspart content - The wrapper around the slot (the grid when `columns` is 2).
15
16
  */
16
17
  declare class Section extends LitElement {
17
18
  static styles: lit.CSSResult;
@@ -26,6 +27,8 @@ declare class Section extends LitElement {
26
27
  spacingBelow: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl';
27
28
  /** `contained` (default, the page container width), `narrow` (reading width) or `full` (edge to edge). */
28
29
  width: 'contained' | 'narrow' | 'full';
30
+ /** Columns for the slotted children: `1` (default, stacked) or `2` (two equal columns, stacked again below 720px). */
31
+ columns: 1 | 2;
29
32
  /** Alignment of the heading. */
30
33
  textAlignment: 'left' | 'center';
31
34
  render(): lit.TemplateResult<1>;
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Section
3
- } from "../chunk-7NLZND6Q.js";
3
+ } from "../chunk-5F5PTVWR.js";
4
4
  import "../chunk-FZ36KL73.js";
5
5
  import "../chunk-KMU6ABQF.js";
6
6
  import "../chunk-EUXUH3YW.js";
@@ -0,0 +1,33 @@
1
+ import * as lit from 'lit';
2
+ import { LitElement } from 'lit';
3
+
4
+ interface StepItem {
5
+ title: string;
6
+ description?: string;
7
+ }
8
+ /**
9
+ * A numbered process: a responsive grid of cards, each with an automatic "01", "02", ... number, a
10
+ * title and a description. `highlightLast` makes the final card a dark navy call-out, the way
11
+ * enterprise pages close a how-it-works sequence. `inverted` puts the whole block on the dark band.
12
+ *
13
+ * @cssprop --st-steps-padding - Overrides the block's padding.
14
+ * @csspart header - The eyebrow/title/subtitle block.
15
+ * @csspart card - Each step card (an `li`).
16
+ * @csspart number - The step number.
17
+ */
18
+ declare class Steps extends LitElement {
19
+ static styles: lit.CSSResult;
20
+ /** Small uppercase label above the title. */
21
+ eyebrow: string;
22
+ title: string;
23
+ subtitle: string;
24
+ /** The steps, in order. */
25
+ items: StepItem[];
26
+ /** Renders the last step as a dark navy call-out card. */
27
+ highlightLast: boolean;
28
+ /** Puts the block on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme. */
29
+ inverted: boolean;
30
+ render(): lit.TemplateResult<1>;
31
+ }
32
+
33
+ export { type StepItem, Steps };
@@ -0,0 +1,10 @@
1
+ import {
2
+ Steps
3
+ } from "../chunk-ZRC5BVDX.js";
4
+ import "../chunk-FZ36KL73.js";
5
+ import "../chunk-KMU6ABQF.js";
6
+ import "../chunk-EUXUH3YW.js";
7
+ export {
8
+ Steps
9
+ };
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -0,0 +1,26 @@
1
+ import * as lit from 'lit';
2
+ import { LitElement } from 'lit';
3
+
4
+ /**
5
+ * A single bordered band: a small uppercase label on the left and a run of bold items beside it
6
+ * (e.g. "Supported platforms: AWS · Azure · GCP"). Items wrap onto new lines on narrow screens.
7
+ * `inverted` puts the band on the dark band (`--st-cms-band-dark-bg`).
8
+ *
9
+ * @cssprop --st-tag-strip-padding - Overrides the block's padding.
10
+ * @csspart strip - The bordered band.
11
+ * @csspart label - The uppercase label.
12
+ * @csspart items - The list of items.
13
+ * @csspart item - Each item (an `li`).
14
+ */
15
+ declare class TagStrip extends LitElement {
16
+ static styles: lit.CSSResult;
17
+ /** Small uppercase label at the start of the band. Omit it for items alone. */
18
+ label: string;
19
+ /** The items, shown in order. */
20
+ items: string[];
21
+ /** Puts the band on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme. */
22
+ inverted: boolean;
23
+ render(): lit.TemplateResult<1>;
24
+ }
25
+
26
+ export { TagStrip };
@@ -0,0 +1,9 @@
1
+ import {
2
+ TagStrip
3
+ } from "../chunk-5MY6OWMK.js";
4
+ import "../chunk-KMU6ABQF.js";
5
+ import "../chunk-EUXUH3YW.js";
6
+ export {
7
+ TagStrip
8
+ };
9
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sankhyatronics/sankhya-cms",
3
- "version": "0.1.18",
3
+ "version": "0.2.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/sankhyatronics/SankhyaCMS.git",
@@ -136,6 +136,18 @@
136
136
  "types": "./dist/stats/index.d.ts",
137
137
  "import": "./dist/stats/index.js"
138
138
  },
139
+ "./steps": {
140
+ "types": "./dist/steps/index.d.ts",
141
+ "import": "./dist/steps/index.js"
142
+ },
143
+ "./tag-strip": {
144
+ "types": "./dist/tag-strip/index.d.ts",
145
+ "import": "./dist/tag-strip/index.js"
146
+ },
147
+ "./flow": {
148
+ "types": "./dist/flow/index.d.ts",
149
+ "import": "./dist/flow/index.js"
150
+ },
139
151
  "./testimonials": {
140
152
  "types": "./dist/testimonials/index.d.ts",
141
153
  "import": "./dist/testimonials/index.js"
@@ -181,7 +193,7 @@
181
193
  "access": "public"
182
194
  },
183
195
  "scripts": {
184
- "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.ts src/attention-panel/index.ts src/bar-chart/index.ts src/chip/index.ts src/date-tile/index.ts src/kpi-card/index.ts src/segmented-control/index.ts src/tooltip/index.ts src/bento-grid/index.ts src/card/index.ts src/carousel/index.ts src/content-block/index.ts src/cookie-consent/index.ts src/dropdown/index.ts src/feature-split/index.ts src/features-section/index.ts src/footer/index.ts src/header/index.ts src/hero/index.ts src/icon-button/index.ts src/items-accordion/index.ts src/markdown/index.ts src/mega-menu/index.ts src/menu-grid/index.ts src/menu-grid-item/index.ts src/menu-item/index.ts src/promo-banner/index.ts src/section/index.ts src/select/index.ts src/stats/index.ts src/testimonials/index.ts --format esm --dts --sourcemap --clean && node scripts/copy-theme.mjs && node scripts/copy-fonts.mjs && cem analyze",
196
+ "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.ts src/attention-panel/index.ts src/bar-chart/index.ts src/chip/index.ts src/date-tile/index.ts src/kpi-card/index.ts src/segmented-control/index.ts src/tooltip/index.ts src/bento-grid/index.ts src/card/index.ts src/carousel/index.ts src/content-block/index.ts src/cookie-consent/index.ts src/dropdown/index.ts src/feature-split/index.ts src/features-section/index.ts src/footer/index.ts src/header/index.ts src/hero/index.ts src/icon-button/index.ts src/items-accordion/index.ts src/markdown/index.ts src/mega-menu/index.ts src/menu-grid/index.ts src/menu-grid-item/index.ts src/menu-item/index.ts src/promo-banner/index.ts src/section/index.ts src/select/index.ts src/stats/index.ts src/steps/index.ts src/tag-strip/index.ts src/flow/index.ts src/testimonials/index.ts --format esm --dts --sourcemap --clean && node scripts/copy-theme.mjs && node scripts/copy-fonts.mjs && cem analyze",
185
197
  "dev": "tsup src/index.ts --watch --format esm --dts",
186
198
  "typecheck": "tsc --noEmit",
187
199
  "lint": "oxlint",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/markdown/Markdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport DOMPurify from 'dompurify';\nimport { marked } from 'marked';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MarkdownErrorEventDetail } from './MarkdownEvents';\n\n/**\n * Renders Markdown (GFM, single newlines become `<br>`) from either an inline `content` string or\n * a `src` URL it fetches. Ports `SankhyaUI`'s `useMarkdown` hook + `react-markdown` (remark-gfm,\n * remark-breaks); output is sanitized with DOMPurify. `src` wins over `content` when both are set.\n * While a fetch is pending it shows \"Loading content...\"; on failure \"Error loading content.\" and\n * a `markdown-error` event (detail: `{ error }`).\n *\n * Text color is inherited from the parent so inverted containers just work.\n */\n@customElement('st-markdown')\nexport class Markdown extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n ${fontFamilyStyles}\n line-height: 1.7;\n }\n\n :host > div > :first-child {\n margin-top: 0;\n }\n\n h1,\n h2,\n h3,\n h4 {\n color: inherit;\n font-weight: var(--st-font-weight-bold);\n line-height: 1.3;\n }\n\n h2 {\n font-size: var(--st-text-2xl);\n margin: var(--st-space-48) 0 var(--st-space-24);\n }\n\n h3 {\n font-size: var(--st-text-xl);\n font-weight: var(--st-font-weight-semibold);\n margin: var(--st-space-32) 0 var(--st-space-16);\n }\n\n p {\n margin: 0 0 var(--st-space-24);\n }\n\n ul,\n ol {\n margin: 0 0 var(--st-space-24);\n padding-left: var(--st-space-24);\n }\n\n li {\n margin-bottom: var(--st-space-8);\n }\n\n a {\n color: inherit;\n text-decoration: underline;\n text-underline-offset: 4px;\n }\n\n a:hover {\n color: var(--st-color-text-strong);\n }\n\n img {\n max-width: 100%;\n height: auto;\n border-radius: var(--st-radius-sm);\n margin: var(--st-space-32) 0;\n }\n\n blockquote {\n border-left: 4px solid var(--st-color-border);\n margin: var(--st-space-32) 0;\n padding-left: var(--st-space-24);\n font-style: italic;\n }\n\n table {\n border-collapse: collapse;\n margin: 0 0 var(--st-space-24);\n }\n\n th,\n td {\n border: 1px solid var(--st-color-border);\n padding: var(--st-space-8) var(--st-space-12);\n }\n\n pre,\n code {\n background: var(--st-color-subtle);\n border-radius: var(--st-radius-xs);\n }\n\n code {\n padding: 0 var(--st-space-4);\n }\n\n pre {\n padding: var(--st-space-16);\n overflow-x: auto;\n }\n\n pre code {\n padding: 0;\n }\n `;\n\n /** Inline Markdown source. Ignored when `src` is set. */\n @property({ type: String })\n content = '';\n\n /** URL of a Markdown file to fetch. */\n @property({ type: String })\n src = '';\n\n @state() private fetched = '';\n @state() private loading = false;\n @state() private error: Error | null = null;\n\n private abort?: AbortController;\n\n willUpdate(changed: Map<string, unknown>): void {\n if (changed.has('src')) void this.load();\n }\n\n disconnectedCallback(): void {\n this.abort?.abort();\n super.disconnectedCallback();\n }\n\n private async load(): Promise<void> {\n this.abort?.abort();\n this.fetched = '';\n this.error = null;\n if (!this.src) {\n this.loading = false;\n return;\n }\n const controller = new AbortController();\n this.abort = controller;\n this.loading = true;\n try {\n const response = await fetch(this.src, { signal: controller.signal });\n if (!response.ok) throw new Error(`Failed to fetch markdown: ${response.statusText}`);\n const text = await response.text();\n if (controller.signal.aborted) return;\n this.fetched = text;\n } catch (err) {\n if (controller.signal.aborted) return;\n this.error = err instanceof Error ? err : new Error('Unknown error fetching markdown');\n this.dispatchEvent(\n new CustomEvent<MarkdownErrorEventDetail>('markdown-error', {\n detail: { error: this.error },\n bubbles: true,\n composed: true\n })\n );\n }\n this.loading = false;\n }\n\n render() {\n if (this.loading) return html`<div part=\"loading\">Loading content...</div>`;\n if (this.error) return html`<div part=\"error\">Error loading content.</div>`;\n const source = this.src ? this.fetched : this.content;\n if (!source) return nothing;\n const rendered = DOMPurify.sanitize(marked.parse(source, { gfm: true, breaks: true, async: false }));\n return html`<div part=\"body\">${unsafeHTML(rendered)}</div>`;\n }\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/bento-grid/BentoGrid.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport {\n cardTitleStyles,\n iconTileStyles,\n reducedMotionStyles,\n sectionHeaderStyles,\n sectionSubtitleStyles,\n sectionTitleStyles, invertedSectionTextStyles } from '../shared/section-styles';\n\nexport interface BentoGridItem {\n title: string;\n description?: string;\n /** Iconify icon name, e.g. `mdi:home`. */\n icon?: string;\n imageSrc?: string;\n imageAlt?: string;\n colSpan?: 1 | 2 | 3 | 4;\n rowSpan?: 1 | 2;\n /** Turns the card into a link. */\n href?: string;\n}\n\n/**\n * A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property.\n *\n * @cssprop --st-bento-grid-padding - Overrides the block's padding.\n */\n@customElement('st-bento-grid')\nexport class BentoGrid extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n padding; override with --st-bento-grid-padding instead. */\n padding: var(--st-bento-grid-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\n background: var(--st-color-page);\n ${fontFamilyStyles}\n }\n\n :host([inverted]) {\n background: var(--st-color-text-strong);\n }\n\n .container {\n max-width: var(--st-cms-container-max);\n margin: 0 auto;\n }\n\n .header {\n ${sectionHeaderStyles}\n }\n\n .title {\n ${sectionTitleStyles}\n }\n\n .subtitle {\n ${sectionSubtitleStyles}\n margin-bottom: 0;\n }\n\n ${invertedSectionTextStyles}\n\n .grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-auto-rows: minmax(240px, auto);\n gap: var(--st-space-24);\n }\n\n .card {\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid var(--st-color-border);\n border-radius: var(--st-space-24);\n background: var(--st-color-surface);\n color: inherit;\n text-decoration: none;\n transition:\n transform 0.3s ease,\n box-shadow 0.3s ease;\n }\n\n :host([inverted]) .card {\n background: var(--st-color-text-strong);\n border-color: var(--st-color-text);\n }\n\n .card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 24px -10px var(--st-shadow-color-lg);\n z-index: 1;\n }\n\n .image-wrapper {\n position: absolute;\n inset: 0;\n }\n\n .image-wrapper::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(to bottom, transparent 0%, var(--st-shadow-color-xl) 100%);\n }\n\n .image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }\n\n .card:hover .image {\n transform: scale(1.05);\n }\n\n .content {\n position: relative;\n z-index: 1;\n margin-top: auto;\n padding: var(--st-space-24);\n display: flex;\n flex-direction: column;\n gap: var(--st-space-16);\n }\n\n .icon {\n ${iconTileStyles}\n width: var(--st-size-40);\n height: var(--st-size-40);\n font-size: 24px;\n }\n\n .text {\n padding: var(--st-space-16);\n border-radius: var(--st-radius-md);\n }\n\n .card-title {\n ${cardTitleStyles}\n font-size: var(--st-text-lg);\n }\n\n .card-description {\n margin: 0;\n font-size: var(--st-text-md);\n color: var(--st-color-text-muted);\n }\n\n :host([inverted]) .card-title {\n color: var(--st-color-on-solid);\n }\n\n :host([inverted]) .card-description {\n color: var(--st-color-border);\n }\n\n .card.has-image .card-title,\n .card.has-image .card-description {\n color: var(--st-color-on-solid);\n }\n\n .card.has-image .icon {\n background: var(--st-shadow-color-lg);\n color: var(--st-color-on-solid);\n backdrop-filter: blur(4px);\n }\n\n .col-1 { grid-column: span 1; }\n .col-2 { grid-column: span 2; }\n .col-3 { grid-column: span 3; }\n .col-4 { grid-column: span 4; }\n .row-1 { grid-row: span 1; }\n .row-2 { grid-row: span 2; }\n\n @media (max-width: 1024px) {\n .grid {\n grid-template-columns: repeat(2, 1fr);\n }\n .col-3,\n .col-4 {\n grid-column: span 2;\n }\n }\n\n @media (max-width: 640px) {\n .grid {\n grid-template-columns: 1fr;\n }\n .col-1,\n .col-2,\n .col-3,\n .col-4 {\n grid-column: span 1;\n }\n }\n\n ${reducedMotionStyles}\n `;\n\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n @property({ attribute: false })\n items: BentoGridItem[] = [];\n\n private renderCard(item: BentoGridItem) {\n const classes = `card col-${item.colSpan ?? 1} row-${item.rowSpan ?? 1} ${item.imageSrc ? 'has-image' : ''}`;\n const body = html`\n ${item.imageSrc\n ? html`<div class=\"image-wrapper\" part=\"image-wrapper\">\n <img class=\"image\" part=\"image\" src=${item.imageSrc} alt=${item.imageAlt ?? item.title} />\n </div>`\n : nothing}\n <div class=\"content\" part=\"content\">\n ${item.icon ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>` : nothing}\n <div class=\"text\">\n <h3 class=\"card-title\" part=\"card-title\">${item.title}</h3>\n ${item.description ? html`<p class=\"card-description\" part=\"card-description\">${item.description}</p>` : nothing}\n </div>\n </div>\n `;\n return item.href\n ? html`<a part=\"card\" class=${classes} href=${item.href}>${body}</a>`\n : html`<div part=\"card\" class=${classes}>${body}</div>`;\n }\n\n render() {\n return html`\n <div class=\"container\" part=\"container\">\n ${this.title || this.subtitle\n ? html`<div class=\"header\" part=\"header\">\n ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n </div>`\n : nothing}\n <div class=\"grid\" part=\"grid\">${this.items.map((item) => this.renderCard(item))}</div>\n </div>\n `;\n }\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/section/Section.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\n\n/**\n * A page band that holds other content: sets the background, the spacing above and below, and\n * the content width, with an optional eyebrow/title/subtitle heading over its slotted children.\n * Use it to give a run of components one dark or tinted backdrop and a consistent vertical rhythm,\n * the way enterprise marketing pages stack full-width sections.\n *\n * @slot - The section's content.\n * @cssprop --st-section-bg - Overrides the background colour picked by `background`.\n * @cssprop --st-section-padding-inline - Overrides the left/right padding (not with `width=\"full\"`).\n * @csspart inner - The width-limited content box.\n * @csspart header - The heading block.\n */\n@customElement('st-section')\nexport class Section extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n --st-section-space-none: 0;\n --st-section-space-s: var(--st-space-24);\n --st-section-space-m: var(--st-space-48);\n --st-section-space-l: 4.5rem;\n --st-section-space-xl: 6rem;\n --st-section-space-xxl: 8rem;\n\n display: block;\n box-sizing: border-box;\n width: 100%;\n /* !important on every padding rule: a page-level reset (e.g. Tailwind Preflight) otherwise\n zeroes a shadow host's padding. Rescale it with the --st-section-space-* tokens. */\n padding: var(--st-section-space-m) var(--st-section-padding-inline, var(--st-space-24)) !important;\n background: var(--st-section-bg, var(--st-color-surface));\n color: var(--st-color-text-strong);\n ${rootFontFamilyStyles}\n }\n\n :host([background='subtle']) {\n background: var(--st-section-bg, var(--st-color-subtle));\n }\n\n :host([background='dark']) {\n background: var(--st-section-bg, var(--st-cms-band-dark-bg));\n color: var(--st-cms-band-dark-color);\n }\n\n :host([background='accent']) {\n background: var(--st-section-bg, var(--st-color-accent));\n color: var(--st-color-on-solid);\n }\n\n :host([background='transparent']) {\n background: var(--st-section-bg, transparent);\n }\n\n :host([spacing-above='none']) { padding-top: var(--st-section-space-none) !important; }\n :host([spacing-above='s']) { padding-top: var(--st-section-space-s) !important; }\n :host([spacing-above='l']) { padding-top: var(--st-section-space-l) !important; }\n :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl) !important; }\n :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl) !important; }\n\n :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none) !important; }\n :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s) !important; }\n :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l) !important; }\n :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl) !important; }\n :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl) !important; }\n\n :host([width='full']) {\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n\n .inner {\n max-width: var(--st-cms-container-max);\n margin: 0 auto;\n }\n\n :host([width='narrow']) .inner {\n max-width: 800px;\n }\n\n :host([width='full']) .inner {\n max-width: none;\n }\n\n .header {\n margin-bottom: var(--st-space-48);\n }\n\n :host([text-alignment='center']) .header {\n text-align: center;\n }\n\n :host([text-alignment='center']) .subtitle {\n margin-inline: auto;\n }\n\n :host([width='full']) .header {\n max-width: var(--st-cms-container-max);\n margin-inline: auto;\n padding-inline: var(--st-space-24);\n box-sizing: border-box;\n }\n\n .eyebrow {\n margin: 0 0 var(--st-space-12);\n font-size: var(--st-text-sm);\n font-weight: var(--st-font-weight-bold);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--st-color-text-muted);\n }\n\n .title {\n ${sectionTitleStyles}\n color: inherit;\n letter-spacing: -0.02em;\n max-width: 24ch;\n }\n\n :host([text-alignment='center']) .title {\n margin-inline: auto;\n }\n\n .subtitle {\n ${sectionSubtitleStyles}\n max-width: 60ch;\n margin-bottom: 0;\n }\n\n :host([background='dark']) .eyebrow,\n :host([background='dark']) .subtitle {\n color: color-mix(in oklch, var(--st-cms-band-dark-color) 80%, transparent);\n }\n\n :host([background='accent']) .eyebrow,\n :host([background='accent']) .subtitle {\n color: color-mix(in oklch, var(--st-color-on-solid) 80%, transparent);\n }\n\n @media (max-width: 768px) {\n :host {\n --st-section-space-l: 3.5rem;\n --st-section-space-xl: 4.5rem;\n --st-section-space-xxl: 5.5rem;\n --st-section-padding-inline: var(--st-space-20);\n }\n }\n `;\n\n @property({ type: String })\n eyebrow = '';\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n /** `default` (page surface), `subtle`, `dark`, `accent` or `transparent`. */\n @property({ type: String, reflect: true })\n background: 'default' | 'subtle' | 'dark' | 'accent' | 'transparent' = 'default';\n\n /** Space above the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n @property({ type: String, reflect: true, attribute: 'spacing-above' })\n spacingAbove: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n /** Space below the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n @property({ type: String, reflect: true, attribute: 'spacing-below' })\n spacingBelow: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n /** `contained` (default, the page container width), `narrow` (reading width) or `full` (edge to edge). */\n @property({ type: String, reflect: true })\n width: 'contained' | 'narrow' | 'full' = 'contained';\n\n /** Alignment of the heading. */\n @property({ type: String, reflect: true, attribute: 'text-alignment' })\n textAlignment: 'left' | 'center' = 'left';\n\n render() {\n const heading = this.eyebrow || this.title || this.subtitle;\n return html`\n <div class=\"inner\" part=\"inner\">\n ${heading\n ? html`<div class=\"header\" part=\"header\">\n ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n </div>`\n : nothing}\n <slot></slot>\n </div>\n `;\n }\n}\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAkBjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AAyIL,mBAAU;AAGV,iBAAQ;AAGR,oBAAW;AAIX,sBAAuE;AAIvE,wBAAwD;AAIxD,wBAAwD;AAIxD,iBAAyC;AAIzC,yBAAmC;AAAA;AAAA,EAEnC,SAAS;AACP,UAAM,UAAU,KAAK,WAAW,KAAK,SAAS,KAAK;AACnD,WAAO;AAAA;AAAA,UAED,UACE;AAAA,gBACI,KAAK,UAAU,yCAAyC,KAAK,OAAO,SAAS,OAAO;AAAA,gBACpF,KAAK,QAAQ,sCAAsC,KAAK,KAAK,UAAU,OAAO;AAAA,gBAC9E,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA,sBAE5F,OAAO;AAAA;AAAA;AAAA;AAAA,EAIjB;AACF;AApLa,QACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBf,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,QAgFpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0B3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxIf,QAyIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3If,QA4IX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9If,QA+IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlJ9B,QAmJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GAtJ1D,QAuJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GA1J1D,QA2JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9J9B,QA+JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GAlK3D,QAmKX;AAnKW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/items-accordion/ItemsAccordion.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport {\n reducedMotionStyles,\n sectionHeaderStyles,\n sectionSubtitleStyles,\n sectionTitleStyles,\n} from '../shared/section-styles';\nimport type { AccordionToggleEventDetail } from './ItemsAccordionEvents';\n\nexport interface AccordionItem {\n id: string;\n title: string;\n content: string;\n}\n\n/**\n * A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.\n *\n * @cssprop --st-items-accordion-padding - Overrides the block's padding.\n */\n@customElement('st-items-accordion')\nexport class ItemsAccordion extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n padding; override with --st-items-accordion-padding instead. */\n padding: var(--st-items-accordion-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\n background: var(--st-color-page);\n ${fontFamilyStyles}\n }\n\n .container {\n max-width: 800px;\n margin: 0 auto;\n }\n\n .header {\n ${sectionHeaderStyles}\n }\n\n .title {\n ${sectionTitleStyles}\n font-size: var(--st-text-2xl);\n margin-bottom: var(--st-space-12);\n }\n\n .subtitle {\n ${sectionSubtitleStyles}\n font-size: var(--st-text-base);\n margin: 0;\n }\n\n .list {\n display: flex;\n flex-direction: column;\n gap: var(--st-space-16);\n }\n\n .item {\n border: 1px solid var(--st-color-border);\n border-radius: var(--st-radius-lg);\n background: var(--st-color-surface);\n overflow: hidden;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease;\n }\n\n .item.open {\n border-color: var(--st-color-border-strong);\n box-shadow: 0 4px 6px -1px var(--st-shadow-color-sm);\n }\n\n .trigger {\n ${buttonResetStyles}\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--st-space-24);\n text-align: left;\n font-size: var(--st-text-lg);\n font-weight: var(--st-font-weight-semibold);\n color: var(--st-color-text-strong);\n }\n\n .trigger:hover {\n background: var(--st-color-hover);\n }\n\n .chevron {\n flex-shrink: 0;\n margin-left: var(--st-space-16);\n font-size: 24px;\n color: var(--st-color-text-faint);\n transition: transform 0.3s ease;\n }\n\n .open .chevron {\n transform: rotate(180deg);\n }\n\n .content {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s ease;\n }\n\n .open .content {\n grid-template-rows: 1fr;\n }\n\n .content-clip {\n overflow: hidden;\n min-height: 0;\n }\n\n .content-inner {\n padding: 0 var(--st-space-24) var(--st-space-24);\n color: var(--st-color-text);\n line-height: 1.6;\n }\n\n @media (max-width: 768px) {\n :host {\n padding: var(--st-items-accordion-padding, var(--st-space-48) var(--st-space-20)) !important;\n }\n\n .title {\n font-size: var(--st-text-xl);\n }\n }\n\n ${reducedMotionStyles}\n `;\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n @property({ attribute: false })\n items: AccordionItem[] = [];\n\n @property({ type: Boolean, attribute: 'allow-multiple' })\n allowMultiple = false;\n\n @state() private openIds = new Set<string>();\n\n private toggle(id: string) {\n const wasOpen = this.openIds.has(id);\n const next = new Set(this.allowMultiple ? this.openIds : []);\n if (wasOpen) next.delete(id);\n else next.add(id);\n this.openIds = next;\n this.dispatchEvent(\n new CustomEvent<AccordionToggleEventDetail>('accordion-toggle', {\n detail: { id, open: !wasOpen },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n render() {\n return html`\n <div class=\"container\" part=\"container\">\n ${this.title || this.subtitle\n ? html`<div class=\"header\" part=\"header\">\n ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n </div>`\n : nothing}\n <div class=\"list\" part=\"list\">\n ${this.items.map((item) => {\n const open = this.openIds.has(item.id);\n return html`\n <div class=\"item ${open ? 'open' : ''}\" part=\"item\">\n <button\n class=\"trigger\"\n part=\"trigger\"\n type=\"button\"\n aria-expanded=${open ? 'true' : 'false'}\n aria-controls=\"content-${item.id}\"\n @click=${() => this.toggle(item.id)}\n >\n <span>${item.title}</span>\n <iconify-icon class=\"chevron\" icon=\"mdi:chevron-down\"></iconify-icon>\n </button>\n <div class=\"content\" id=\"content-${item.id}\" part=\"content\" role=\"region\" ?inert=${!open}>\n <div class=\"content-clip\">\n <div class=\"content-inner\">${item.content}</div>\n </div>\n </div>\n </div>\n `;\n })}\n </div>\n </div>\n `;\n }\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/content-block/ContentBlock.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\nimport '../markdown';\n\n/**\n * A long-form article section: centered title/subtitle, an optional featured image with caption,\n * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\n * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\n * block works without a fetch); `content-src` wins when both are set.\n *\n * @cssprop --st-content-block-padding - Overrides the block's padding.\n */\n@customElement('st-content-block')\nexport class ContentBlock extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n ${fontFamilyStyles}\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n padding; override with --st-content-block-padding instead. */\n padding: var(--st-content-block-padding, var(--st-space-24)) !important;\n background: var(--st-color-surface);\n color: var(--st-color-text-strong);\n }\n\n :host([inverted]) {\n background: var(--st-color-text-strong);\n color: var(--st-color-on-solid);\n }\n\n .container {\n max-width: var(--st-cms-container-max);\n padding: 0 var(--st-space-48);\n margin: 0 auto;\n }\n\n .header {\n ${sectionHeaderStyles}\n }\n\n .title {\n ${sectionTitleStyles}\n line-height: 1.1;\n }\n\n .subtitle {\n ${sectionSubtitleStyles}\n }\n\n :host([inverted]) .title,\n :host([inverted]) .subtitle {\n color: inherit;\n }\n\n .featured-image {\n margin: 0 0 var(--st-space-48);\n border-radius: var(--st-radius-lg);\n overflow: hidden;\n }\n\n .featured-image img {\n width: 100%;\n height: auto;\n display: block;\n }\n\n figcaption {\n padding: var(--st-space-12);\n text-align: center;\n color: var(--st-color-text-muted);\n font-size: var(--st-text-xs);\n }\n\n st-markdown {\n color: var(--st-color-text);\n font-size: var(--st-text-xl);\n }\n\n :host([inverted]) st-markdown {\n color: inherit;\n }\n\n @media (max-width: 768px) {\n :host {\n padding: var(--st-content-block-padding, var(--st-space-48) var(--st-space-24)) !important;\n }\n\n .container {\n padding: 0;\n }\n }\n `;\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n /** URL of a Markdown file. */\n @property({ type: String, attribute: 'content-src' })\n contentSrc = '';\n\n /** Inline Markdown, used when `content-src` is not set. */\n @property({ type: String })\n content = '';\n\n @property({ type: String, attribute: 'image-src' })\n imageSrc = '';\n\n @property({ type: String, attribute: 'image-alt' })\n imageAlt = '';\n\n @property({ type: String, attribute: 'image-caption' })\n imageCaption = '';\n\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n render() {\n return html`\n <section class=\"container\" part=\"container\">\n <div class=\"header\" part=\"header\">\n ${this.title ? html`<div class=\"title\" part=\"title\">${this.title}</div>` : nothing}\n ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\n </div>\n ${this.imageSrc\n ? html`\n <figure class=\"featured-image\" part=\"image\">\n <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />\n ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}\n </figure>\n `\n : nothing}\n <st-markdown part=\"body\" .src=${this.contentSrc} .content=${this.content}></st-markdown>\n </section>\n `;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAejC,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAmFL,iBAAQ;AAGR,oBAAW;AAIX,sBAAa;AAIb,mBAAU;AAGV,oBAAW;AAGX,oBAAW;AAGX,wBAAe;AAGf,oBAAW;AAAA;AAAA,EAEX,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,YAGC,KAAK,QAAQ,uCAAuC,KAAK,KAAK,WAAW,OAAO;AAAA,YAChF,KAAK,WAAW,6CAA6C,KAAK,QAAQ,WAAW,OAAO;AAAA;AAAA,UAE9F,KAAK,WACH;AAAA;AAAA,2BAEe,KAAK,QAAQ,QAAQ,KAAK,YAAY,KAAK,KAAK;AAAA,kBACzD,KAAK,eAAe,mBAAmB,KAAK,YAAY,kBAAkB,OAAO;AAAA;AAAA,gBAGvF,OAAO;AAAA,wCACqB,KAAK,UAAU,aAAa,KAAK,OAAO;AAAA;AAAA;AAAA,EAG9E;AACF;AA/Ha,aACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA,QAIf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAoBhB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,QAKlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgD3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlFf,aAmFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,aAsFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAzFzC,aA0FX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Ff,aA8FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAhGvC,aAiGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAnGvC,aAoGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GAtG3C,aAuGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzG/B,aA0GX;AA1GW,eAAN;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/features-section/FeaturesSection.ts","../src/features-section/FeatureItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\nimport './FeatureItem';\n\n/** Data for one tile when using the `items` property (mirrors `st-feature-item`'s properties). */\nexport interface FeatureItemData {\n icon?: string;\n title: string;\n description: string;\n href?: string;\n}\n\n/**\n * A titled grid of feature tiles. Ports `SankhyaUI`'s React `FeaturesSection`: tiles come from the\n * `items` property, from slotted `st-feature-item` elements (the source's `children`), or both\n * (slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`\n * is passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.\n *\n * @cssprop --st-features-section-padding - Overrides the section's padding.\n */\n@customElement('st-features-section')\nexport class FeaturesSection extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n ${fontFamilyStyles}\n /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n padding; override with --st-features-section-padding instead. */\n padding: var(--st-features-section-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\n background: var(--st-color-surface);\n }\n\n :host([inverted]) {\n background: var(--st-color-text-strong);\n }\n\n .container {\n max-width: var(--st-cms-container-max);\n margin: 0 auto;\n }\n\n .header {\n ${sectionHeaderStyles}\n }\n\n .title {\n ${sectionTitleStyles}\n margin: 0;\n }\n\n .subtitle {\n ${sectionSubtitleStyles}\n margin: 0 auto;\n }\n\n :host([inverted]) .title,\n :host([inverted]) .subtitle {\n color: var(--st-color-on-solid);\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(var(--features-columns, 2), 1fr);\n gap: var(--st-space-32);\n }\n\n @media (max-width: 768px) {\n :host {\n padding: var(--st-features-section-padding, var(--st-space-48) var(--st-space-16)) !important;\n }\n\n .grid {\n grid-template-columns: 1fr;\n }\n }\n `;\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n /** Applied to every tile built from `items`. */\n @property({ type: String, attribute: 'action-label' })\n actionLabel = 'Learn more';\n\n @property({ type: Number })\n columns = 0;\n\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n /** Tiles to render (property only). */\n @property({ attribute: false })\n items: FeatureItemData[] = [];\n\n render() {\n const gridStyle = this.columns ? `--features-columns: ${this.columns}` : nothing;\n return html`\n <section class=\"container\" part=\"container\">\n <div class=\"header\" part=\"header\">\n <div class=\"title\" part=\"title\">${this.title}</div>\n ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\n </div>\n <div class=\"grid\" part=\"grid\" style=${gridStyle}>\n <slot></slot>\n ${this.items.map(\n (item) => html`\n <st-feature-item\n .icon=${item.icon ?? ''}\n .title=${item.title}\n .description=${item.description}\n .href=${item.href ?? ''}\n .actionLabel=${this.actionLabel}\n ?inverted=${this.inverted}\n ></st-feature-item>\n `\n )}\n </div>\n </section>\n `;\n }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { cardDescriptionStyles, cardTitleStyles } from '../shared/section-styles';\nimport '../card';\nimport '../markdown';\n\n/**\n * One feature tile for `st-features-section`: optional icon, title, Markdown description and an\n * optional \"Learn more\" link, rendered on an `st-card`. `icon` is an Iconify name (e.g.\n * `mdi:rocket`). The link is a plain `<a>` (the source used react-router's `Link` for non-http\n * hrefs; there is no Lit equivalent). The click is composed, so an SPA router can intercept it\n * (e.g. via `event.composedPath()`) and navigate client-side; `http(s)` links open in a new tab.\n */\n@customElement('st-feature-item')\nexport class FeatureItem extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n ${fontFamilyStyles}\n }\n\n st-card {\n height: 100%;\n }\n\n .content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--st-space-16);\n height: 100%;\n }\n\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: var(--st-radius-lg);\n background: var(--st-color-subtle);\n color: var(--st-color-text-strong);\n margin-bottom: var(--st-space-8);\n font-size: 24px;\n }\n\n :host([inverted]) .icon {\n background: var(--st-color-text-muted);\n color: var(--st-color-on-solid);\n }\n\n .title {\n ${cardTitleStyles}\n margin: 0;\n }\n\n .description {\n ${cardDescriptionStyles}\n margin: 0;\n }\n\n :host([inverted]) .title,\n :host([inverted]) .description {\n color: inherit;\n }\n\n .link {\n display: flex;\n align-items: center;\n gap: var(--st-space-4);\n margin-top: auto;\n color: var(--st-color-text-muted);\n font-weight: var(--st-font-weight-medium);\n font-size: var(--st-text-md);\n text-decoration: none;\n transition: color 0.2s ease;\n }\n\n .link:hover {\n color: var(--st-color-text-strong);\n text-decoration: underline;\n }\n\n :host([inverted]) .link,\n :host([inverted]) .link:hover {\n color: inherit;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .link {\n transition: none;\n }\n }\n `;\n\n /** Iconify icon name, e.g. `mdi:rocket`. */\n @property({ type: String })\n icon = '';\n\n @property({ type: String })\n title = '';\n\n /** Markdown. */\n @property({ type: String })\n description = '';\n\n @property({ type: String })\n href = '';\n\n @property({ type: String, attribute: 'action-label' })\n actionLabel = 'Learn more';\n\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n render() {\n const external = this.href.startsWith('http');\n return html`\n <st-card hoverable elevation=\"sm\" ?inverted=${this.inverted} part=\"card\">\n <div class=\"content\" part=\"content\">\n ${this.icon\n ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${this.icon}></iconify-icon></div>`\n : nothing}\n <h3 class=\"title\" part=\"title\">${this.title}</h3>\n <st-markdown class=\"description\" part=\"description\" .content=${this.description}></st-markdown>\n ${this.href\n ? html`\n <a\n class=\"link\"\n part=\"link\"\n href=${this.href}\n target=${external ? '_blank' : '_self'}\n rel=${external ? 'noopener noreferrer' : nothing}\n >\n ${this.actionLabel} <span>&rarr;</span>\n </a>\n `\n : nothing}\n </div>\n </st-card>\n `;\n }\n}\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/hero/Hero.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { ctaLinkStyles, paddingScaleStyles } from '../shared/section-styles';\nimport type { HeroActionEventDetail } from './HeroEvents';\n\n/**\n * Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,\n * optional subtitle and up to two call-to-action links. Port of `SankhyaUI`'s React `Hero`; the\n * framer-motion entrance is redone as CSS keyframes (skipped under `prefers-reduced-motion`).\n *\n * `size`, `content-position` and `overlay=\"gradient\"` give the large editorial layout (copy on the\n * lower left over a gradient that darkens towards it) used by enterprise marketing heroes; the\n * defaults keep the original centered banner. Put several heroes in an `st-carousel` with\n * `indicator-style=\"tabs\"` for a tabbed hero carousel.\n *\n * @fires action - Cancelable, before navigating. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.\n * @cssprop --st-hero-text-color - Text colour over the image.\n * @cssprop --st-hero-min-height - Minimum height when `size` is `large` (default `640px`).\n * @csspart eyebrow - The small label above the title.\n * @csspart secondary-action - The outlined second button.\n */\n@customElement('st-hero')\nexport class Hero extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n ${paddingScaleStyles}\n\n @keyframes st-hero-zoom {\n from { opacity: 0; transform: scale(1.1); }\n to { opacity: 1; transform: scale(1); }\n }\n @keyframes st-hero-rise {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: none; }\n }\n @keyframes st-hero-fade {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n :host {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n width: 100%;\n box-sizing: border-box;\n background-color: var(--st-color-text-strong);\n background-repeat: no-repeat;\n background-size: cover;\n background-position: var(--st-hero-position, center center);\n color: var(--st-color-on-solid);\n ${rootFontFamilyStyles}\n animation: st-hero-zoom 1.5s ease-out;\n }\n\n :host([inverted]) {\n background-color: var(--st-color-surface);\n color: var(--st-color-text-strong);\n }\n\n .overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n background: linear-gradient(\n to bottom,\n color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),\n color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),\n color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)\n );\n }\n\n :host([inverted]) .overlay {\n display: none;\n }\n\n .content {\n display: flex;\n flex-direction: column;\n gap: var(--st-space-20);\n position: relative;\n z-index: 2;\n width: 80%;\n margin: 0 auto;\n text-align: center;\n align-items: center;\n /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts\n on the host (e.g. a theme text colour) must not turn it dark. */\n color: var(--st-hero-text-color, var(--st-color-on-solid));\n }\n\n :host([inverted]) .content {\n color: var(--st-hero-text-color, var(--st-color-text-strong));\n }\n\n :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }\n :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }\n :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }\n\n .title {\n font-size: var(--st-cms-text-display);\n font-weight: var(--st-font-weight-bold);\n line-height: 1.1;\n color: inherit;\n margin: 0;\n animation: st-hero-rise 0.8s 0.3s ease-out backwards;\n }\n\n .subtitle {\n font-size: var(--st-cms-text-xl);\n line-height: 1.5;\n color: inherit;\n margin: 0;\n animation: st-hero-fade 0.8s 0.5s ease-out backwards;\n }\n\n .actions {\n display: flex;\n justify-content: center;\n width: 100%;\n }\n\n .cta {\n ${ctaLinkStyles}\n background: var(--st-button-primary-bg);\n color: var(--st-button-primary-color);\n font-weight: var(--st-button-font-weight);\n font-size: var(--st-text-md);\n animation: st-hero-rise 0.6s 0.7s ease-out backwards;\n }\n\n .cta:hover {\n transform: scale(1.05);\n }\n\n .cta:active {\n transform: scale(0.98);\n }\n\n .eyebrow {\n margin: 0;\n font-size: var(--st-text-sm);\n font-weight: var(--st-font-weight-bold);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: inherit;\n opacity: 0.85;\n animation: st-hero-fade 0.8s 0.2s ease-out backwards;\n }\n\n .actions {\n flex-wrap: wrap;\n gap: var(--st-space-12);\n }\n\n .cta.secondary {\n background: transparent;\n color: inherit;\n box-shadow: inset 0 0 0 1.5px currentColor;\n }\n\n .cta.secondary:hover {\n background: color-mix(in oklch, currentColor 12%, transparent);\n }\n\n /* size=\"large\" / \"full\": a tall editorial hero. */\n :host([size='large']) {\n min-height: var(--st-hero-min-height, 640px);\n }\n\n :host([size='full']) {\n min-height: 100svh;\n }\n\n :host([size='large']) .title,\n :host([size='full']) .title {\n font-size: clamp(2.5rem, 6vw, 5rem);\n letter-spacing: -0.02em;\n line-height: 1.05;\n }\n\n /* content-position=\"bottom\": copy sits in the lower part of the hero, on the container grid. */\n :host([content-position='bottom']) {\n align-items: flex-end;\n }\n\n :host([content-position='bottom']) .content {\n width: 100%;\n max-width: var(--st-cms-container-max);\n box-sizing: border-box;\n padding: var(--st-space-48) var(--st-space-24);\n }\n\n :host([content-position='bottom']) .title,\n :host([content-position='bottom']) .subtitle {\n max-width: 18ch;\n }\n\n :host([content-position='bottom']) .subtitle {\n max-width: 48ch;\n }\n\n :host([content-position='bottom']:not([text-alignment='center']):not([text-alignment='right'])) .actions {\n justify-content: flex-start;\n }\n\n :host([content-position='bottom'][text-alignment='center']) .title,\n :host([content-position='bottom'][text-alignment='center']) .subtitle {\n margin-inline: auto;\n }\n\n /* overlay=\"gradient\": darkest behind the copy, clearing towards the far side of the image. */\n :host([overlay='gradient']) .overlay {\n background:\n linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\n linear-gradient(to right, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\n }\n\n :host([overlay='gradient'][text-alignment='right']) .overlay {\n background:\n linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\n linear-gradient(to left, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\n }\n\n :host([overlay='none']) .overlay {\n display: none;\n }\n\n @media (min-width: 768px) {\n .content { padding: var(--st-space-32); }\n }\n @media (min-width: 1024px) {\n .content { padding: var(--st-space-48); }\n :host([content-position='bottom']) .content { padding: var(--st-space-48) var(--st-space-32) 6rem; }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host, .eyebrow, .title, .subtitle, .cta { animation: none; }\n .cta { transition: none; }\n }\n `;\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n @property({ type: String, attribute: 'image-src' })\n imageSrc = '';\n\n @property({ type: String, attribute: 'action-label' })\n actionLabel = '';\n\n @property({ type: String })\n href = '';\n\n @property({ type: String, reflect: true, attribute: 'text-alignment' })\n textAlignment: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n @property({ type: String, reflect: true })\n padding: 'none' | 'small' | 'medium' | 'large' = 'none';\n\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n @property({ type: String, attribute: 'focal-point' })\n focalPoint: 'top' | 'left' | 'right' | 'bottom' | 'center' = 'center';\n\n /** Small uppercase label above the title (e.g. an event or product name). */\n @property({ type: String })\n eyebrow = '';\n\n /** Label of an outlined second button next to the primary one. */\n @property({ type: String, attribute: 'secondary-action-label' })\n secondaryActionLabel = '';\n\n @property({ type: String, attribute: 'secondary-href' })\n secondaryHref = '';\n\n /** `auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport. */\n @property({ type: String, reflect: true })\n size: 'auto' | 'large' | 'full' = 'auto';\n\n /** `center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container. */\n @property({ type: String, reflect: true, attribute: 'content-position' })\n contentPosition: 'center' | 'bottom' = 'center';\n\n /** `even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is. */\n @property({ type: String, reflect: true })\n overlay: 'even' | 'gradient' | 'none' = 'even';\n\n private static positions = {\n top: 'center top',\n left: 'left center',\n right: 'right center',\n bottom: 'center bottom',\n center: 'center center'\n } as const;\n\n protected willUpdate(): void {\n this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\n this.style.setProperty('--st-hero-position', Hero.positions[this.focalPoint] ?? Hero.positions.center);\n }\n\n private emitAction(event: MouseEvent, href: string, kind: 'primary' | 'secondary'): void {\n const action = new CustomEvent<HeroActionEventDetail>('action', {\n detail: { href, kind },\n bubbles: true,\n composed: true,\n cancelable: true\n });\n this.dispatchEvent(action);\n if (action.defaultPrevented) event.preventDefault();\n }\n\n private onClick = (event: MouseEvent): void => this.emitAction(event, this.href, 'primary');\n\n private onSecondaryClick = (event: MouseEvent): void => this.emitAction(event, this.secondaryHref, 'secondary');\n\n render() {\n return html`\n <div class=\"overlay\" part=\"overlay\"></div>\n <div class=\"content\" part=\"content\">\n ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n <h1 class=\"title\" part=\"title\">${this.title}</h1>\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n ${this.actionLabel || this.secondaryActionLabel\n ? html`<div class=\"actions\" part=\"actions\">\n ${this.actionLabel\n ? html`<a class=\"cta\" part=\"action\" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>`\n : nothing}\n ${this.secondaryActionLabel\n ? html`<a class=\"cta secondary\" part=\"secondary-action\" href=${this.secondaryHref || nothing} @click=${this.onSecondaryClick}\n >${this.secondaryActionLabel}</a\n >`\n : nothing}\n </div>`\n : nothing}\n <slot></slot>\n </div>\n `;\n }\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/menu-grid-item/MenuGridItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { MenuGridItemSelectEventDetail } from './MenuGridItemEvents';\n\n/**\n * One entry in an `st-menu-grid` — icon (via `slot=\"icon\"`) + title on one line, an optional\n * description below, and an optional corner badge (\"New\", \"Popular\", ...). A 1:1 port of\n * `SankhyaUI`'s React `MenuGridItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same markup and\n * CSS, with its `motion` effects redone in CSS — fades up the first time it scrolls into view,\n * scales to 1.02 on hover / 0.98 while pressed, the icon tilts on hover, the badge pops in.\n * Colors come from the suite theme rather than per-item utility classes.\n *\n * An `http(s)` `href` opens in a new tab, like the source. Any other `href` fires a *cancelable*\n * `menu-grid-item-select` event (detail: `{ href }`) first: a host doing client-side routing calls\n * `event.preventDefault()` on it, which also cancels the anchor's own navigation (the source used\n * react-router's `Link` here; the suite apps have no router).\n */\n@customElement('st-menu-grid-item')\nexport class MenuGridItem extends LitElement {\n /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n ${fontFamilyStyles}\n }\n\n @keyframes st-menu-grid-badge-pop {\n from {\n transform: scale(0);\n }\n 70% {\n transform: scale(1.12);\n }\n to {\n transform: scale(1);\n }\n }\n\n .menu-grid-item {\n display: flex;\n flex-direction: column;\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n color: var(--st-color-text);\n transition:\n opacity 0.4s ease-out,\n transform 0.2s ease,\n background-color 0.2s ease;\n }\n\n .menu-grid-item.pending {\n opacity: 0;\n transform: translateY(20px);\n }\n\n .menu-grid-item.regular {\n padding: 16px;\n }\n\n .menu-grid-item.compact {\n padding: 12px;\n }\n\n /* Keyboard focus gets the same treatment as hover. */\n .menu-grid-item:hover,\n .menu-grid-item:has(.menu-grid-link:focus-visible) {\n background: var(--st-color-hover);\n transform: scale(1.02);\n }\n\n .menu-grid-item:active {\n transform: scale(0.98);\n }\n\n .menu-grid-link {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n color: inherit;\n width: 100%;\n height: 100%;\n gap: 8px;\n }\n\n .menu-grid-badge {\n position: absolute;\n top: 2px;\n right: 8px;\n font-size: 0.5rem;\n padding: 2px 8px;\n border-radius: 9999px;\n font-weight: 500;\n z-index: 1;\n background-color: var(--st-color-text-strong);\n color: var(--st-color-on-solid);\n animation: st-menu-grid-badge-pop 0.35s ease-out;\n }\n\n .menu-grid-header {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n }\n\n .menu-grid-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 6px;\n transition:\n background-color 0.2s ease,\n transform 0.2s ease;\n flex-shrink: 0;\n padding: 0;\n margin-bottom: 0;\n }\n\n .menu-grid-icon:hover {\n transform: rotate(5deg) scale(1.1);\n }\n\n .menu-grid-icon[hidden] {\n display: none;\n }\n\n .menu-grid-icon ::slotted(*) {\n width: 18px;\n height: 18px;\n }\n\n .menu-grid-title {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--st-color-text-strong);\n transition: color 0.2s ease;\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n margin-bottom: 0;\n }\n\n .menu-grid-description {\n font-size: 0.75rem;\n color: var(--st-color-text-muted);\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 1.4;\n transition: color 0.2s ease;\n }\n\n .menu-grid-item.compact .menu-grid-header {\n gap: 8px;\n }\n\n .menu-grid-item.compact .menu-grid-icon {\n width: 24px;\n height: 24px;\n }\n\n .menu-grid-item.compact .menu-grid-icon ::slotted(*) {\n width: 14px;\n height: 14px;\n }\n\n .menu-grid-item.compact .menu-grid-title {\n font-size: 0.75rem;\n }\n\n .menu-grid-item.compact .menu-grid-description {\n font-size: 0.75rem;\n }\n\n .menu-grid-header.icon-only {\n justify-content: center;\n }\n\n @media (max-width: 480px) {\n .menu-grid-header {\n gap: 8px;\n }\n\n .menu-grid-icon {\n width: 28px;\n height: 28px;\n }\n\n .menu-grid-icon ::slotted(*) {\n width: 16px;\n height: 16px;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .menu-grid-item,\n .menu-grid-icon {\n transition: none;\n }\n\n .menu-grid-item.pending {\n opacity: 1;\n transform: none;\n }\n\n .menu-grid-badge {\n animation: none;\n }\n }\n `;\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n description = '';\n\n @property({ type: String })\n href = '';\n\n /** Small corner label, e.g. \"New\"/\"Beta\" — omit for none. */\n @property({ type: String })\n badge = '';\n\n @property({ type: Boolean, reflect: true })\n compact = false;\n\n /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */\n @property({ type: Boolean, attribute: 'show-description' })\n showDescription = true;\n\n /** Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box. */\n @state() private hasIcon = false;\n\n /** True until the item first scrolls into view (the source's `whileInView ... once`). */\n @state() private pending = true;\n\n private observer?: IntersectionObserver;\n\n connectedCallback(): void {\n super.connectedCallback();\n if (typeof IntersectionObserver === 'undefined') {\n this.pending = false;\n return;\n }\n this.observer = new IntersectionObserver((entries) => {\n if (entries.some((entry) => entry.isIntersecting)) {\n this.pending = false;\n this.observer?.disconnect();\n }\n });\n this.observer.observe(this);\n }\n\n disconnectedCallback(): void {\n this.observer?.disconnect();\n super.disconnectedCallback();\n }\n\n private onIconSlotChange = (event: Event): void => {\n this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n };\n\n private get isExternal(): boolean {\n return this.href.startsWith('http');\n }\n\n private onClick = (event: MouseEvent): void => {\n if (this.isExternal) return;\n const selectEvent = new CustomEvent<MenuGridItemSelectEventDetail>('menu-grid-item-select', {\n detail: { href: this.href },\n bubbles: true,\n composed: true,\n cancelable: true\n });\n this.dispatchEvent(selectEvent);\n if (selectEvent.defaultPrevented) event.preventDefault();\n };\n\n render() {\n const iconOnly = this.hasIcon && !this.title;\n return html`\n <div class=\"menu-grid-item ${this.compact ? 'compact' : 'regular'} ${this.pending ? 'pending' : ''}\" part=\"item\">\n <a\n part=\"link\"\n class=\"menu-grid-link\"\n href=${this.href}\n target=${this.isExternal ? '_blank' : '_self'}\n rel=${this.isExternal ? 'noopener noreferrer' : nothing}\n @click=${this.onClick}\n >\n ${this.badge ? html`<span part=\"badge\" class=\"menu-grid-badge\">${this.badge}</span>` : nothing}\n <span class=\"menu-grid-header ${iconOnly ? 'icon-only' : ''}\" part=\"header\">\n <span class=\"menu-grid-icon\" part=\"icon\" ?hidden=${!this.hasIcon}><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot></span>\n ${this.title ? html`<span part=\"title\" class=\"menu-grid-title\">${this.title}</span>` : nothing}\n </span>\n ${this.description && this.showDescription\n ? html`<span part=\"description\" class=\"menu-grid-description\">${this.description}</span>`\n : nothing}\n </a>\n </div>\n `;\n }\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { chevronIcon } from '../shared/icons';\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport type { DropdownToggleEventDetail } from './DropdownEvents';\n\n/**\n * A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\n * action menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\n * React `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\n * (`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\n *\n * - only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\n * provider element is needed);\n * - a mousedown outside, Escape, or a click inside the panel closes it;\n * - an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\n * - `inline` opens the panel in the flow, the source's `.touch-device` layout.\n *\n * Colors and the panel's surface come from the suite theme (the source left those to the\n * consumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\n * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\n * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\n * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\n * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event — plus\n * `mega` and `open-on-hover` for an okta.com-style mega menu (see `st-mega-menu`).\n *\n * @cssprop --st-mega-menu-max-width - Maximum width of a `mega` panel (default `1400px`).\n * @cssprop --st-mega-menu-inset - Minimum space between a `mega` panel and the header's sides (default `1rem`).\n * @cssprop --st-mega-menu-gap - Space between the header and a `mega` panel (default `12px`).\n * @cssprop --st-mega-menu-radius - Corner radius of a `mega` panel (default `24px`).\n */\n@customElement('st-dropdown')\nexport class Dropdown extends LitElement {\n /** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */\n private static openDropdown: Dropdown | null = null;\n\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: inline-block;\n position: relative;\n ${fontFamilyStyles}\n }\n\n .menu-title {\n ${buttonResetStyles}\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-height: 40px;\n padding: 12px;\n gap: 8px;\n text-align: center;\n width: fit-content;\n border-radius: var(--st-radius-sm);\n /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\n color: var(--st-nav-color, var(--st-color-text));\n font-size: 0.875rem;\n text-decoration: none;\n white-space: nowrap;\n transition: background-color 0.3s ease;\n }\n\n .menu-title:hover,\n .menu-title[aria-expanded='true'] {\n background: var(--st-nav-hover-bg, var(--st-color-hover));\n color: var(--st-nav-color, var(--st-color-text-strong));\n }\n\n :host([active]) .menu-title {\n background: var(--st-color-accent-subtle);\n color: var(--st-color-accent-text);\n }\n\n :host([disabled]) .menu-title {\n color: var(--st-color-text-muted);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .icon {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n }\n\n .icon[hidden] {\n display: none;\n }\n\n .arrow {\n display: inline-block;\n margin-left: 8px;\n font-size: 0.75rem;\n transition: transform 0.3s ease;\n }\n\n .menu-title[aria-expanded='true'] .arrow {\n transform: rotate(180deg);\n }\n\n .menu-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n padding: 16px;\n background: var(--st-color-surface);\n color: var(--st-color-text);\n /* The panel has its own surface: items in it never take the bar's nav colours. */\n --st-nav-color: initial;\n --st-nav-hover-bg: initial;\n border: 1px solid var(--st-color-border);\n border-radius: var(--st-radius-sm);\n box-shadow: 0 4px 16px var(--st-shadow-color-sm);\n opacity: 0;\n visibility: hidden;\n transform: translateY(-10px);\n /* visibility flips at once on open (so keyboard focus can move into the panel on the same\n frame) and only after the 0.3s fade on close. */\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0s linear 0.3s;\n pointer-events: none;\n }\n\n .menu-dropdown.align-right {\n left: auto;\n right: 0;\n }\n\n .menu-dropdown.show {\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n pointer-events: auto;\n transition-delay: 0s;\n }\n\n /* Inline: the panel opens in the flow under its trigger and pushes what follows down, instead\n of floating — the source's .touch-device layout. st-header turns this on for its menu while\n the hamburger panel is showing. */\n :host([inline]) {\n display: block;\n }\n\n :host([inline]) .menu-title {\n width: 100%;\n justify-content: flex-start;\n }\n\n :host([inline]) .arrow {\n margin-left: auto;\n }\n\n :host([inline]) .menu-dropdown {\n display: none;\n position: relative;\n top: auto;\n left: auto;\n right: auto;\n width: 100%;\n box-sizing: border-box;\n box-shadow: none;\n opacity: 1;\n visibility: visible;\n transform: none;\n }\n\n :host([inline]) .menu-dropdown.show {\n display: block;\n pointer-events: auto;\n }\n\n /* Mega (okta.com): the panel is a large rounded card floating under the whole bar, centred on\n the nearest positioned ancestor (st-header) instead of hanging off the trigger — the host\n stops being the panel's containing block. */\n :host([mega]:not([inline])) {\n position: static;\n }\n\n :host([mega]:not([inline])) .menu-dropdown {\n top: calc(100% + var(--st-mega-menu-gap, 12px));\n left: var(--st-mega-menu-inset, 1rem);\n right: var(--st-mega-menu-inset, 1rem);\n max-width: var(--st-mega-menu-max-width, 1400px);\n margin: 0 auto;\n padding: 0;\n max-height: calc(100dvh - var(--st-mega-menu-offset, 96px));\n overflow-y: auto;\n border: 0;\n border-radius: var(--st-mega-menu-radius, 24px);\n box-shadow: 0 24px 48px var(--st-shadow-color-md);\n }\n\n /* The open section's trigger becomes an accent pill — also for a plain dropdown marked \\`bar\\`,\n so it matches the mega triggers (and st-menu-item variant=\"bar\") beside it. */\n :host([mega]:not([inline])) .menu-title,\n :host([bar]:not([inline])) .menu-title {\n border-radius: 9999px;\n }\n\n :host([mega]:not([inline])) .menu-title[aria-expanded='true'],\n :host([bar]:not([inline])) .menu-title[aria-expanded='true'] {\n background: var(--st-color-accent);\n color: var(--st-color-on-solid);\n }\n\n .mega-back-bar,\n .mega-heading {\n display: none;\n }\n\n /* Mega in st-header's hamburger panel: rather than an accordion, the panel slides in over the\n whole screen with a Back button (okta.com's phone menu). Fixed to the viewport, stacked\n inside the header's own full-screen layer, so the header's close toggle stays on top. */\n :host([mega][inline]) .menu-dropdown {\n display: block;\n position: fixed;\n inset: 0;\n z-index: 1;\n padding: 0 1.5rem 2rem;\n overflow-y: auto;\n border: 0;\n border-radius: 0;\n visibility: hidden;\n transform: translateX(100%);\n transition:\n transform 0.3s ease,\n visibility 0s linear 0.3s;\n }\n\n :host([mega][inline]) .menu-dropdown.show {\n visibility: visible;\n transform: none;\n transition-delay: 0s;\n }\n\n :host([mega][inline]) .mega-back-bar {\n display: flex;\n align-items: center;\n position: sticky;\n top: 0;\n z-index: 1;\n height: 64px;\n margin: 0 -1.5rem;\n padding: 0 1rem;\n background: inherit;\n border-bottom: 1px solid var(--st-color-border);\n }\n\n .mega-back {\n ${buttonResetStyles}\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 40px;\n padding: 0 12px 0 6px;\n border-radius: var(--st-radius-sm);\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--st-color-text-strong);\n }\n\n .mega-back:hover {\n background: var(--st-color-hover);\n }\n\n :host([mega][inline]) .mega-heading {\n display: block;\n margin: 1.25rem 0 0.75rem;\n font-size: 1.375rem;\n font-weight: 600;\n color: var(--st-color-text-strong);\n }\n\n /* The drill-down replaces the trigger's open state, so the caret points the way it goes. */\n :host([mega][inline]) .arrow {\n transform: rotate(-90deg);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .menu-dropdown,\n .arrow,\n :host([mega][inline]) .menu-dropdown {\n transition: none;\n }\n }\n `;\n\n /** Trigger label text (source: `title`, renamed because `title` is the native tooltip\n * attribute). Leave empty to show only `slot=\"icon\"`. */\n @property({ type: String })\n label = '';\n\n /** Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in\n * the source); with none it navigates. */\n @property({ type: String })\n href = '';\n\n @property({ type: String, attribute: 'icon-position' })\n iconPosition: 'left' | 'right' = 'left';\n\n /** Inline `width`/`height` of the `slot=\"icon\"` wrapper (source: `iconSize`, default `1.2rem`). */\n @property({ type: String, attribute: 'icon-size' })\n iconSize = '1.2rem';\n\n /** Inline `color` of the `slot=\"icon\"` wrapper (source: `iconColor`). */\n @property({ type: String, attribute: 'icon-color' })\n iconColor = 'currentColor';\n\n /** Which edge of the trigger the panel lines up with. */\n @property({ type: String })\n align: 'left' | 'right' = 'left';\n\n /** `target` of an `href` trigger (source default `_self`). */\n @property({ type: String })\n target = '_self';\n\n /** Extra class(es) on the trigger (source: `className`; a `class` on `st-dropdown` styles the host). */\n @property({ type: String, attribute: 'trigger-class-name' })\n triggerClassName = '';\n\n /** Extra class(es) on the panel (source: `itemGroupClassName`). */\n @property({ type: String, attribute: 'item-group-class-name' })\n itemGroupClassName = '';\n\n /** Unused, as in the source (`itemClassName` is never read there); kept for prop parity. */\n @property({ type: String, attribute: 'item-class-name' })\n itemClassName = '';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Highlights the trigger as the current section (e.g. the current page is one of its items). */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /** Opens the panel in the flow under the trigger instead of floating over the page (see the\n * styles). `st-header` sets this on its own menu's dropdowns while its hamburger panel shows. */\n @property({ type: Boolean, reflect: true })\n inline = false;\n\n /** Whether the panel is showing. Follows user toggles; may also be set from outside. */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Mega-menu panel (okta.com style), typically holding an `st-mega-menu`: the panel spans the\n * full width of the nearest positioned ancestor — `st-header` — right under it, instead of\n * hanging off the trigger. In `st-header`'s hamburger layout (`inline`) it slides in over the\n * screen with a Back button rather than opening as an accordion. A click inside the panel only\n * closes it when it lands on a link.\n */\n @property({ type: Boolean, reflect: true })\n mega = false;\n\n /** Styles a non-`mega` trigger like a mega one — a pill that turns solid accent while open — so\n * a plain dropdown (e.g. \"+ New\") lines up with mega triggers in the same header bar. */\n @property({ type: Boolean, reflect: true })\n bar = false;\n\n /** Opens the panel while a mouse hovers the trigger or panel (touch and keyboard still click). Off while `inline`. */\n @property({ type: Boolean, attribute: 'open-on-hover' })\n openOnHover = false;\n\n /** Text of the Back button in the `mega` + `inline` drill-down panel. */\n @property({ type: String, attribute: 'back-label' })\n backLabel = 'Back';\n\n private hoverTimer = 0;\n\n /** When hover last opened the panel — a click right after that keeps it open instead of toggling it shut. */\n private hoverOpenedAt = 0;\n\n /** Whether the default slot has content — the source's `children` check. */\n @state() private hasContent = false;\n\n /** Whether `slot=\"icon\"` has content. */\n @state() private hasIcon = false;\n\n connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('mousedown', this.closeOnOutsideMouseDown);\n window.addEventListener('keydown', this.closeOnEscape);\n this.addEventListener('pointerenter', this.onPointerEnter);\n this.addEventListener('pointerleave', this.onPointerLeave);\n }\n\n disconnectedCallback(): void {\n document.removeEventListener('mousedown', this.closeOnOutsideMouseDown);\n window.removeEventListener('keydown', this.closeOnEscape);\n this.removeEventListener('pointerenter', this.onPointerEnter);\n this.removeEventListener('pointerleave', this.onPointerLeave);\n clearTimeout(this.hoverTimer);\n if (Dropdown.openDropdown === this) Dropdown.openDropdown = null;\n super.disconnectedCallback();\n }\n\n protected updated(changed: Map<string, unknown>): void {\n if (!changed.has('open')) return;\n if (this.open) {\n const previous = Dropdown.openDropdown;\n Dropdown.openDropdown = this;\n if (previous && previous !== this) previous.setOpen(false);\n } else if (Dropdown.openDropdown === this) {\n Dropdown.openDropdown = null;\n }\n }\n\n private setOpen(open: boolean): void {\n if (this.open === open) return;\n this.open = open;\n this.dispatchEvent(new CustomEvent<DropdownToggleEventDetail>('dropdown-toggle', { detail: { open }, bubbles: true, composed: true }));\n }\n\n private hovers(event: PointerEvent): boolean {\n return this.openOnHover && !this.inline && !this.disabled && this.hasContent && event.pointerType === 'mouse';\n }\n\n /** Short delays so a pointer crossing the gap between trigger and panel doesn't close it. */\n private onPointerEnter = (event: PointerEvent): void => {\n if (!this.hovers(event)) return;\n clearTimeout(this.hoverTimer);\n this.hoverTimer = window.setTimeout(() => {\n if (!this.open) this.hoverOpenedAt = Date.now();\n this.setOpen(true);\n }, 80);\n };\n\n private onPointerLeave = (event: PointerEvent): void => {\n if (!this.hovers(event)) return;\n clearTimeout(this.hoverTimer);\n this.hoverTimer = window.setTimeout(() => this.setOpen(false), 200);\n };\n\n private onBackClick = (event: Event): void => {\n event.stopPropagation();\n this.setOpen(false);\n this.trigger()?.focus();\n };\n\n private closeOnOutsideMouseDown = (event: Event): void => {\n if (this.open && !event.composedPath().includes(this)) this.setOpen(false);\n };\n\n private closeOnEscape = (event: KeyboardEvent): void => {\n if (!this.open || event.key !== 'Escape') return;\n const focusWasInside = event.composedPath().includes(this);\n this.setOpen(false);\n if (focusWasInside) this.trigger()?.focus();\n };\n\n private trigger(): HTMLElement | null {\n return this.renderRoot.querySelector<HTMLElement>('.menu-title');\n }\n\n /** Keyboard-reachable entries in the panel, in order: menu items (they delegate focus to their\n * own link) plus any plain links/buttons/tabbable elements a caller slots in. */\n private panelItems(): HTMLElement[] {\n const slot = this.renderRoot.querySelector<HTMLSlotElement>('.menu-dropdown slot');\n if (!slot) return [];\n const selector =\n 'st-menu-item, st-menu-grid-item, st-mega-menu-feature, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n const items: HTMLElement[] = [];\n for (const el of slot.assignedElements({ flatten: true })) {\n if (el.matches(selector)) items.push(el as HTMLElement);\n items.push(...Array.from(el.querySelectorAll<HTMLElement>(selector)));\n }\n return items;\n }\n\n /** Moves focus into the panel once it has become visible (it is `visibility: hidden` until the\n * `show` class lands, and hidden elements can't take focus). */\n private focusItem(pick: (items: HTMLElement[]) => HTMLElement | undefined): void {\n void this.updateComplete.then(() => pick(this.panelItems())?.focus());\n }\n\n /** Enter/Space/ArrowDown open the panel and focus its first entry; ArrowUp its last. */\n private onTitleKeyDown = (event: KeyboardEvent): void => {\n if (!this.hasContent || this.disabled) return;\n if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n this.setOpen(true);\n this.focusItem((items) => items[0]);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n this.setOpen(true);\n this.focusItem((items) => items[items.length - 1]);\n }\n };\n\n /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */\n private onPanelKeyDown = (event: KeyboardEvent): void => {\n if (event.key === 'Tab') {\n this.setOpen(false);\n return;\n }\n if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n const items = this.panelItems();\n if (items.length === 0) return;\n event.preventDefault();\n event.stopPropagation();\n const path = event.composedPath();\n const current = items.findIndex((item) => path.includes(item));\n const last = items.length - 1;\n const next =\n event.key === 'Home'\n ? 0\n : event.key === 'End'\n ? last\n : event.key === 'ArrowDown'\n ? current < 0 || current === last ? 0 : current + 1\n : current <= 0 ? last : current - 1;\n items[next].focus();\n };\n\n private onTitleClick = (event: Event): void => {\n event.stopPropagation();\n if (!this.hasContent) return;\n event.preventDefault();\n clearTimeout(this.hoverTimer);\n if (this.open && Date.now() - this.hoverOpenedAt < 400) return;\n this.setOpen(!this.open);\n };\n\n /** A click anywhere inside the panel closes it, as in the source — for `mega`, only a click on a\n * link: a big panel has headings and gaps, and a click there shouldn't also close st-header's\n * hamburger layer. */\n private onPanelClick = (event: Event): void => {\n if (this.mega && !event.composedPath().some((node) => node instanceof HTMLAnchorElement)) {\n event.stopPropagation();\n return;\n }\n this.setOpen(false);\n };\n\n private onContentSlotChange = (event: Event): void => {\n this.hasContent = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).some(\n (node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim()\n );\n };\n\n private onIconSlotChange = (event: Event): void => {\n this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n };\n\n render() {\n const icon = html`<span\n class=\"icon ${this.iconPosition === 'left' ? 'icon-left' : 'icon-right'}\"\n ?hidden=${!this.hasIcon}\n style=\"width:${this.iconSize};height:${this.iconSize};color:${this.iconColor}\"\n ><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot\n ></span>`;\n const titleContent = html`\n ${this.iconPosition === 'left' ? icon : nothing} ${this.label ? html`<span part=\"label\">${this.label}</span>` : nothing}\n ${this.iconPosition === 'right' ? icon : nothing}\n ${this.hasContent ? html`<span class=\"arrow\" part=\"caret\" aria-hidden=\"true\">▼</span>` : nothing}\n `;\n const titleClass = `menu-title ${this.triggerClassName} ${this.open ? 'active' : ''}`;\n\n return html`\n <div class=\"menu\" part=\"menu\">\n ${this.href\n ? html`\n <a\n part=\"trigger\"\n class=${titleClass}\n href=${this.href}\n target=${this.target}\n aria-haspopup=${this.hasContent ? 'true' : 'false'}\n aria-expanded=${this.open}\n aria-disabled=${this.disabled ? 'true' : nothing}\n @click=${this.onTitleClick}\n @keydown=${this.onTitleKeyDown}\n >\n ${titleContent}\n </a>\n `\n : html`\n <button\n part=\"trigger\"\n class=${titleClass}\n type=\"button\"\n aria-haspopup=\"true\"\n aria-expanded=${this.open}\n ?disabled=${this.disabled}\n @click=${this.onTitleClick}\n @keydown=${this.onTitleKeyDown}\n >\n ${titleContent}\n </button>\n `}\n <div\n part=\"panel\"\n class=\"menu-dropdown align-${this.align} ${this.itemGroupClassName} ${this.open ? 'show' : ''}\"\n role=\"menu\"\n @click=${this.onPanelClick}\n @keydown=${this.onPanelKeyDown}\n >\n ${this.mega\n ? html`\n <div class=\"mega-back-bar\" part=\"back-bar\">\n <button type=\"button\" class=\"mega-back\" part=\"back\" @click=${this.onBackClick}>\n ${chevronIcon('left', 16)} ${this.backLabel}\n </button>\n </div>\n ${this.label ? html`<p class=\"mega-heading\" part=\"mobile-heading\">${this.label}</p>` : nothing}\n `\n : nothing}\n <slot @slotchange=${this.onContentSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n"],"mappings":"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","names":[]}