@sankhyatronics/sankhya-cms 0.1.3 → 0.1.5

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 (86) hide show
  1. package/custom-elements.json +2255 -1328
  2. package/dist/bento-grid/index.d.ts +5 -1
  3. package/dist/bento-grid/index.js +1 -1
  4. package/dist/{chunk-OEX5FDMR.js → chunk-2JGWWXEI.js} +4 -2
  5. package/dist/chunk-2JGWWXEI.js.map +1 -0
  6. package/dist/{chunk-PKTRYUGP.js → chunk-5KHI36M5.js} +7 -2
  7. package/dist/chunk-5KHI36M5.js.map +1 -0
  8. package/dist/{chunk-FWIG6GEZ.js → chunk-5MTPMXAQ.js} +171 -5
  9. package/dist/chunk-5MTPMXAQ.js.map +1 -0
  10. package/dist/{chunk-USNFT4DU.js → chunk-6H262SG6.js} +8 -6
  11. package/dist/chunk-6H262SG6.js.map +1 -0
  12. package/dist/{chunk-E52WO7R7.js → chunk-BQTDFQ4V.js} +5 -3
  13. package/dist/chunk-BQTDFQ4V.js.map +1 -0
  14. package/dist/{chunk-74MILER4.js → chunk-EMVHNAID.js} +5 -3
  15. package/dist/chunk-EMVHNAID.js.map +1 -0
  16. package/dist/{chunk-3ERKQNZT.js → chunk-HGJT24UG.js} +7 -5
  17. package/dist/chunk-HGJT24UG.js.map +1 -0
  18. package/dist/chunk-HGTC3LCW.js +607 -0
  19. package/dist/chunk-HGTC3LCW.js.map +1 -0
  20. package/dist/{chunk-5DNVCMOO.js → chunk-IDBEZY2O.js} +8 -6
  21. package/dist/chunk-IDBEZY2O.js.map +1 -0
  22. package/dist/{chunk-TH5NZXA7.js → chunk-KHPJ5FAJ.js} +80 -4
  23. package/dist/chunk-KHPJ5FAJ.js.map +1 -0
  24. package/dist/{chunk-2VZFHTBC.js → chunk-MW43OS47.js} +5 -3
  25. package/dist/chunk-MW43OS47.js.map +1 -0
  26. package/dist/{chunk-N63TVWK3.js → chunk-NN3OCPDV.js} +23 -19
  27. package/dist/chunk-NN3OCPDV.js.map +1 -0
  28. package/dist/{chunk-3TCP25JG.js → chunk-PB7ZPPLP.js} +9 -1
  29. package/dist/chunk-PB7ZPPLP.js.map +1 -0
  30. package/dist/{chunk-5UFRGZWG.js → chunk-TLHG33MM.js} +2 -2
  31. package/dist/{chunk-IMACP7HN.js → chunk-UVNBZD7R.js} +5 -3
  32. package/dist/chunk-UVNBZD7R.js.map +1 -0
  33. package/dist/{chunk-5REZSZCK.js → chunk-VRRBMOUP.js} +5 -3
  34. package/dist/chunk-VRRBMOUP.js.map +1 -0
  35. package/dist/cms-theme.css +11 -0
  36. package/dist/content-block/index.d.ts +2 -0
  37. package/dist/content-block/index.js +1 -1
  38. package/dist/cookie-consent/index.d.ts +2 -0
  39. package/dist/cookie-consent/index.js +1 -1
  40. package/dist/dropdown/index.d.ts +30 -2
  41. package/dist/dropdown/index.js +2 -1
  42. package/dist/feature-split/index.d.ts +5 -1
  43. package/dist/feature-split/index.js +1 -1
  44. package/dist/features-section/index.d.ts +2 -0
  45. package/dist/features-section/index.js +1 -1
  46. package/dist/header/index.js +2 -2
  47. package/dist/index.d.ts +1 -0
  48. package/dist/index.js +42 -34
  49. package/dist/items-accordion/index.d.ts +5 -1
  50. package/dist/items-accordion/index.js +1 -1
  51. package/dist/mega-menu/index.d.ts +142 -0
  52. package/dist/mega-menu/index.js +14 -0
  53. package/dist/mega-menu/index.js.map +1 -0
  54. package/dist/menu-item/index.d.ts +3 -0
  55. package/dist/menu-item/index.js +2 -1
  56. package/dist/promo-banner/index.d.ts +3 -0
  57. package/dist/promo-banner/index.js +1 -1
  58. package/dist/schema/index.d.ts +3 -0
  59. package/dist/schema/index.js +3 -0
  60. package/dist/schema/index.js.map +1 -1
  61. package/dist/section/index.d.ts +1 -0
  62. package/dist/section/index.js +1 -1
  63. package/dist/select/index.js +2 -2
  64. package/dist/shared/icons.d.ts +3 -1
  65. package/dist/shared/icons.js +3 -1
  66. package/dist/stats/index.d.ts +6 -1
  67. package/dist/stats/index.js +1 -1
  68. package/dist/testimonials/index.d.ts +1 -0
  69. package/dist/testimonials/index.js +2 -2
  70. package/package.json +18 -23
  71. package/LICENSE +0 -21
  72. package/dist/chunk-2VZFHTBC.js.map +0 -1
  73. package/dist/chunk-3ERKQNZT.js.map +0 -1
  74. package/dist/chunk-3TCP25JG.js.map +0 -1
  75. package/dist/chunk-5DNVCMOO.js.map +0 -1
  76. package/dist/chunk-5REZSZCK.js.map +0 -1
  77. package/dist/chunk-74MILER4.js.map +0 -1
  78. package/dist/chunk-E52WO7R7.js.map +0 -1
  79. package/dist/chunk-FWIG6GEZ.js.map +0 -1
  80. package/dist/chunk-IMACP7HN.js.map +0 -1
  81. package/dist/chunk-N63TVWK3.js.map +0 -1
  82. package/dist/chunk-OEX5FDMR.js.map +0 -1
  83. package/dist/chunk-PKTRYUGP.js.map +0 -1
  84. package/dist/chunk-TH5NZXA7.js.map +0 -1
  85. package/dist/chunk-USNFT4DU.js.map +0 -1
  86. /package/dist/{chunk-5UFRGZWG.js.map → chunk-TLHG33MM.js.map} +0 -0
@@ -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. */\r\n\r\n/** Action reference in JSON, resolved against the `handlers` prop of `DynamicRenderer`. */\r\nexport type ActionRef = `@action:${string}`;\r\n\r\n/** Keys the renderer owns; everything else on a node is passed to the component as a prop. */\r\nexport interface NodeEnvelope<TNode> {\r\n id?: string;\r\n /** Named slot in the parent (e.g. Header: \"utility\"). Omit for the default slot. */\r\n slot?: string;\r\n /** Editor-only label, never passed to the component. */\r\n label?: string;\r\n children?: TNode[];\r\n}\r\n\r\n/**\r\n * A node as it appears in JSON: flat, no `data` wrapper.\r\n * `{ \"type\": \"Hero\", \"id\": \"home-hero\", \"title\": \"...\", \"children\": [...] }`\r\n */\r\nexport interface ComponentNode extends NodeEnvelope<ComponentNode> {\r\n type: string;\r\n [prop: string]: unknown;\r\n}\r\n\r\n/** A page is a list of nodes. */\r\nexport type PageContent = ComponentNode[];\r\n\r\nexport function isComponentNode(value: unknown): value is ComponentNode {\r\n return (\r\n typeof value === 'object' &&\r\n value !== null &&\r\n !Array.isArray(value) &&\r\n typeof (value as { type?: unknown }).type === 'string' &&\r\n (value as { type: string }).type.trim().length > 0\r\n );\r\n}\r\n","import type { ComponentNode } from './node';\r\n\r\n/**\r\n * Returns a copy of `nodes` where the node with the given `id` has `props` merged in.\r\n * Use it to inject runtime state (e.g. the selected language) into fetched JSON without mutating it.\r\n */\r\nexport function patchNodeById(nodes: ComponentNode[], id: string, props: Record<string, unknown>): ComponentNode[] {\r\n return nodes.map(node => {\r\n const patched = node.id === id ? { ...node, ...props } : node;\r\n return patched.children\r\n ? { ...patched, children: patchNodeById(patched.children, id, props) }\r\n : patched;\r\n });\r\n}\r\n","/**\r\n * The JSON `type` of every base component, and the Lit element that renders it.\r\n * This is the contract page JSON is written against — renderers (React, or any other binding)\r\n * map each `type` to their own component for that element.\r\n */\r\nexport const componentTags = {\r\n BentoGrid: 'st-bento-grid',\r\n Card: 'st-card',\r\n Carousel: 'st-carousel',\r\n ContentBlock: 'st-content-block',\r\n CookieConsent: 'st-cookie-consent',\r\n Dropdown: 'st-dropdown',\r\n FeatureItem: 'st-feature-item',\r\n FeatureSplit: 'st-feature-split',\r\n FeaturesSection: 'st-features-section',\r\n Footer: 'st-footer',\r\n Header: 'st-header',\r\n Hero: 'st-hero',\r\n IconButton: 'st-icon-button',\r\n ItemsAccordion: 'st-items-accordion',\r\n MenuGrid: 'st-menu-grid',\r\n MenuGridItem: 'st-menu-grid-item',\r\n MenuItem: 'st-menu-item',\r\n PromoBanner: 'st-promo-banner',\r\n Section: 'st-section',\r\n Select: 'st-select',\r\n Stats: 'st-stats',\r\n Testimonials: 'st-testimonials'\r\n} as const;\r\n\r\n/** Every `type` the base set knows. */\r\nexport type ComponentType = keyof typeof componentTags;\r\n\r\nexport function isBaseComponentType(type: string): type is ComponentType {\r\n return Object.hasOwn(componentTags, type);\r\n}\r\n","import { isBaseComponentType } from './components';\r\nimport type { ComponentNode } from './node';\r\n\r\n/** Keys from the pre-flat schema; their presence means the JSON still needs `scripts/migrate-json.mjs`. */\r\nconst LEGACY_KEYS = ['data', 'embeddedView', 'data-position', 'image', 'contentUrl'] as const;\r\n\r\n/**\r\n * Returns the schema violations for a node and its descendants (empty when valid).\r\n * `isKnownType` defaults to the base component set; pass a wider predicate when a renderer also\r\n * registers custom components.\r\n */\r\nexport function validateNode(node: unknown, where = 'node', isKnownType: (type: string) => boolean = isBaseComponentType): string[] {\r\n if (typeof node !== 'object' || node === null || Array.isArray(node)) return [`${where}: node must be an object`];\r\n const n = node as ComponentNode;\r\n const found: string[] = [];\r\n if (typeof n.type !== 'string' || !isKnownType(n.type)) found.push(`${where}: unknown type \"${String(n.type)}\"`);\r\n for (const legacy of LEGACY_KEYS) {\r\n if (legacy in n) found.push(`${where}: legacy key \"${legacy}\"`);\r\n }\r\n if (Array.isArray(n.items) && n.items.some(item => typeof item === 'object' && item !== null && 'type' in item)) {\r\n found.push(`${where}: \"items\" must hold plain data; nest components under \"children\"`);\r\n }\r\n if (n.children !== undefined) {\r\n if (!Array.isArray(n.children)) found.push(`${where}: children must be an array`);\r\n else n.children.forEach((child, i) => found.push(...validateNode(child, `${where}.children[${i}]`, isKnownType)));\r\n }\r\n return found;\r\n}\r\n\r\n/** Validates a page: a node or a list of nodes. */\r\nexport function validatePage(page: unknown, isKnownType?: (type: string) => boolean): string[] {\r\n const nodes = Array.isArray(page) ? page : [page];\r\n return nodes.flatMap((node, i) => validateNode(node, `[${i}]`, isKnownType));\r\n}\r\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,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,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,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAClB;AAKO,SAAS,oBAAoB,MAAqC;AACrE,SAAO,OAAO,OAAO,eAAe,IAAI;AAC5C;;;AC/BA,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. */\r\n\r\n/** Action reference in JSON, resolved against the `handlers` prop of `DynamicRenderer`. */\r\nexport type ActionRef = `@action:${string}`;\r\n\r\n/** Keys the renderer owns; everything else on a node is passed to the component as a prop. */\r\nexport interface NodeEnvelope<TNode> {\r\n id?: string;\r\n /** Named slot in the parent (e.g. Header: \"utility\"). Omit for the default slot. */\r\n slot?: string;\r\n /** Editor-only label, never passed to the component. */\r\n label?: string;\r\n children?: TNode[];\r\n}\r\n\r\n/**\r\n * A node as it appears in JSON: flat, no `data` wrapper.\r\n * `{ \"type\": \"Hero\", \"id\": \"home-hero\", \"title\": \"...\", \"children\": [...] }`\r\n */\r\nexport interface ComponentNode extends NodeEnvelope<ComponentNode> {\r\n type: string;\r\n [prop: string]: unknown;\r\n}\r\n\r\n/** A page is a list of nodes. */\r\nexport type PageContent = ComponentNode[];\r\n\r\nexport function isComponentNode(value: unknown): value is ComponentNode {\r\n return (\r\n typeof value === 'object' &&\r\n value !== null &&\r\n !Array.isArray(value) &&\r\n typeof (value as { type?: unknown }).type === 'string' &&\r\n (value as { type: string }).type.trim().length > 0\r\n );\r\n}\r\n","import type { ComponentNode } from './node';\r\n\r\n/**\r\n * Returns a copy of `nodes` where the node with the given `id` has `props` merged in.\r\n * Use it to inject runtime state (e.g. the selected language) into fetched JSON without mutating it.\r\n */\r\nexport function patchNodeById(nodes: ComponentNode[], id: string, props: Record<string, unknown>): ComponentNode[] {\r\n return nodes.map(node => {\r\n const patched = node.id === id ? { ...node, ...props } : node;\r\n return patched.children\r\n ? { ...patched, children: patchNodeById(patched.children, id, props) }\r\n : patched;\r\n });\r\n}\r\n","/**\r\n * The JSON `type` of every base component, and the Lit element that renders it.\r\n * This is the contract page JSON is written against — renderers (React, or any other binding)\r\n * map each `type` to their own component for that element.\r\n */\r\nexport const componentTags = {\r\n BentoGrid: 'st-bento-grid',\r\n Card: 'st-card',\r\n Carousel: 'st-carousel',\r\n ContentBlock: 'st-content-block',\r\n CookieConsent: 'st-cookie-consent',\r\n Dropdown: 'st-dropdown',\r\n FeatureItem: 'st-feature-item',\r\n FeatureSplit: 'st-feature-split',\r\n FeaturesSection: 'st-features-section',\r\n Footer: 'st-footer',\r\n Header: 'st-header',\r\n Hero: 'st-hero',\r\n IconButton: 'st-icon-button',\r\n ItemsAccordion: 'st-items-accordion',\r\n MegaMenu: 'st-mega-menu',\r\n MegaMenuColumn: 'st-mega-menu-column',\r\n MegaMenuFeature: 'st-mega-menu-feature',\r\n MenuGrid: 'st-menu-grid',\r\n MenuGridItem: 'st-menu-grid-item',\r\n MenuItem: 'st-menu-item',\r\n PromoBanner: 'st-promo-banner',\r\n Section: 'st-section',\r\n Select: 'st-select',\r\n Stats: 'st-stats',\r\n Testimonials: 'st-testimonials'\r\n} as const;\r\n\r\n/** Every `type` the base set knows. */\r\nexport type ComponentType = keyof typeof componentTags;\r\n\r\nexport function isBaseComponentType(type: string): type is ComponentType {\r\n return Object.hasOwn(componentTags, type);\r\n}\r\n","import { isBaseComponentType } from './components';\r\nimport type { ComponentNode } from './node';\r\n\r\n/** Keys from the pre-flat schema; their presence means the JSON still needs `scripts/migrate-json.mjs`. */\r\nconst LEGACY_KEYS = ['data', 'embeddedView', 'data-position', 'image', 'contentUrl'] as const;\r\n\r\n/**\r\n * Returns the schema violations for a node and its descendants (empty when valid).\r\n * `isKnownType` defaults to the base component set; pass a wider predicate when a renderer also\r\n * registers custom components.\r\n */\r\nexport function validateNode(node: unknown, where = 'node', isKnownType: (type: string) => boolean = isBaseComponentType): string[] {\r\n if (typeof node !== 'object' || node === null || Array.isArray(node)) return [`${where}: node must be an object`];\r\n const n = node as ComponentNode;\r\n const found: string[] = [];\r\n if (typeof n.type !== 'string' || !isKnownType(n.type)) found.push(`${where}: unknown type \"${String(n.type)}\"`);\r\n for (const legacy of LEGACY_KEYS) {\r\n if (legacy in n) found.push(`${where}: legacy key \"${legacy}\"`);\r\n }\r\n if (Array.isArray(n.items) && n.items.some(item => typeof item === 'object' && item !== null && 'type' in item)) {\r\n found.push(`${where}: \"items\" must hold plain data; nest components under \"children\"`);\r\n }\r\n if (n.children !== undefined) {\r\n if (!Array.isArray(n.children)) found.push(`${where}: children must be an array`);\r\n else n.children.forEach((child, i) => found.push(...validateNode(child, `${where}.children[${i}]`, isKnownType)));\r\n }\r\n return found;\r\n}\r\n\r\n/** Validates a page: a node or a list of nodes. */\r\nexport function validatePage(page: unknown, isKnownType?: (type: string) => boolean): string[] {\r\n const nodes = Array.isArray(page) ? page : [page];\r\n return nodes.flatMap((node, i) => validateNode(node, `[${i}]`, isKnownType));\r\n}\r\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,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,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,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAClB;AAKO,SAAS,oBAAoB,MAAqC;AACrE,SAAO,OAAO,OAAO,eAAe,IAAI;AAC5C;;;AClCA,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":[]}
@@ -9,6 +9,7 @@ import { LitElement } from 'lit';
9
9
  *
10
10
  * @slot - The section's content.
11
11
  * @cssprop --st-section-bg - Overrides the background colour picked by `background`.
12
+ * @cssprop --st-section-padding-inline - Overrides the left/right padding (not with `width="full"`).
12
13
  * @csspart inner - The width-limited content box.
13
14
  * @csspart header - The heading block.
14
15
  */
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Section
3
- } from "../chunk-N63TVWK3.js";
3
+ } from "../chunk-NN3OCPDV.js";
4
4
  import "../chunk-3VE6VFJ4.js";
5
5
  import "../chunk-RHAOQ6K4.js";
6
6
  import "../chunk-EUXUH3YW.js";
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  Select
3
- } from "../chunk-5UFRGZWG.js";
4
- import "../chunk-3TCP25JG.js";
3
+ } from "../chunk-TLHG33MM.js";
4
+ import "../chunk-PB7ZPPLP.js";
5
5
  import "../chunk-RHAOQ6K4.js";
6
6
  import "../chunk-EUXUH3YW.js";
7
7
  export {
@@ -14,6 +14,8 @@ declare function historyIcon(size?: number): TemplateResult;
14
14
  declare function trashIcon(size?: number): TemplateResult;
15
15
  /** Chevron glyph (pager prev/next buttons, the select trigger's caret). */
16
16
  declare function chevronIcon(direction: 'left' | 'right' | 'down', size?: number): TemplateResult;
17
+ /** Up-right arrow glyph (marks a link that leaves the site — mega-menu links and buttons). */
18
+ declare function arrowUpRightIcon(size?: number): TemplateResult;
17
19
  /** Plus glyph ("New folder" action button). */
18
20
  declare function plusIcon(size?: number): TemplateResult;
19
21
  /** Cards-view glyph (2x2 grid — view-toggle button). */
@@ -74,4 +76,4 @@ declare function gearIcon(size?: number): TemplateResult;
74
76
  /** Paint-palette glyph (theme/color-scheme switcher). */
75
77
  declare function paletteIcon(size?: number): TemplateResult;
76
78
 
77
- export { bentoGridIcon, bookIcon, boxIcon, cardsViewIcon, cartIcon, checkIcon, chevronIcon, closeIcon, coinsIcon, documentIcon, externalLinkIcon, fileTypeIcon, folderIcon, folderOutlineIcon, gearIcon, historyIcon, listViewIcon, lockIcon, mapPinIcon, menuIcon, paletteIcon, percentIcon, plusIcon, receiptIcon, refreshIcon, siteIcon, trashIcon, truckIcon, usersIcon };
79
+ export { arrowUpRightIcon, bentoGridIcon, bookIcon, boxIcon, cardsViewIcon, cartIcon, checkIcon, chevronIcon, closeIcon, coinsIcon, documentIcon, externalLinkIcon, fileTypeIcon, folderIcon, folderOutlineIcon, gearIcon, historyIcon, listViewIcon, lockIcon, mapPinIcon, menuIcon, paletteIcon, percentIcon, plusIcon, receiptIcon, refreshIcon, siteIcon, trashIcon, truckIcon, usersIcon };
@@ -1,4 +1,5 @@
1
1
  import {
2
+ arrowUpRightIcon,
2
3
  bentoGridIcon,
3
4
  bookIcon,
4
5
  boxIcon,
@@ -28,9 +29,10 @@ import {
28
29
  trashIcon,
29
30
  truckIcon,
30
31
  usersIcon
31
- } from "../chunk-3TCP25JG.js";
32
+ } from "../chunk-PB7ZPPLP.js";
32
33
  import "../chunk-EUXUH3YW.js";
33
34
  export {
35
+ arrowUpRightIcon,
34
36
  bentoGridIcon,
35
37
  bookIcon,
36
38
  boxIcon,
@@ -6,7 +6,12 @@ interface StatItem {
6
6
  label: string;
7
7
  description?: string;
8
8
  }
9
- /** Responsive grid of headline numbers with a label and optional description. Port of React `Stats`. */
9
+ /**
10
+ * Responsive grid of headline numbers with a label and optional description. Port of React `Stats`.
11
+ * `inverted` puts it on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.
12
+ *
13
+ * @cssprop --st-stats-padding - Overrides the block's padding.
14
+ */
10
15
  declare class Stats extends LitElement {
11
16
  static styles: lit.CSSResult;
12
17
  items: StatItem[];
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Stats
3
- } from "../chunk-USNFT4DU.js";
3
+ } from "../chunk-6H262SG6.js";
4
4
  import "../chunk-RHAOQ6K4.js";
5
5
  import "../chunk-EUXUH3YW.js";
6
6
  export {
@@ -40,6 +40,7 @@ interface TestimonialItem {
40
40
  * (e.g. "Explore customer stories").
41
41
  *
42
42
  * @fires testimonials-link - Cancelable, before following a story or section link. Detail `{ href }`.
43
+ * @cssprop --st-testimonials-padding - Overrides the section's padding.
43
44
  */
44
45
  declare class Testimonials extends LitElement {
45
46
  static styles: lit.CSSResult;
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  Testimonials
3
- } from "../chunk-5DNVCMOO.js";
4
- import "../chunk-3TCP25JG.js";
3
+ } from "../chunk-IDBEZY2O.js";
5
4
  import "../chunk-3VE6VFJ4.js";
5
+ import "../chunk-PB7ZPPLP.js";
6
6
  import "../chunk-RHAOQ6K4.js";
7
7
  import "../chunk-EUXUH3YW.js";
8
8
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sankhyatronics/sankhya-cms",
3
- "version": "0.1.3",
3
+ "version": "0.1.5",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/sankhyatronics/SankhyaCMS.git",
@@ -75,6 +75,10 @@
75
75
  "types": "./dist/markdown/index.d.ts",
76
76
  "import": "./dist/markdown/index.js"
77
77
  },
78
+ "./mega-menu": {
79
+ "types": "./dist/mega-menu/index.d.ts",
80
+ "import": "./dist/mega-menu/index.js"
81
+ },
78
82
  "./menu-grid": {
79
83
  "types": "./dist/menu-grid/index.d.ts",
80
84
  "import": "./dist/menu-grid/index.js"
@@ -130,23 +134,24 @@
130
134
  "custom-elements.json"
131
135
  ],
132
136
  "sideEffects": true,
137
+ "scripts": {
138
+ "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.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 && cem analyze",
139
+ "dev": "tsup src/index.ts --watch --format esm --dts",
140
+ "typecheck": "tsc --noEmit",
141
+ "lint": "oxlint",
142
+ "clean": "rimraf dist",
143
+ "test": "vitest run",
144
+ "migrate-json": "node scripts/migrate-json.mjs",
145
+ "analyze": "cem analyze",
146
+ "prepack": "node ../../scripts/resolve-workspace-deps.mjs",
147
+ "postpack": "node ../../scripts/resolve-workspace-deps.mjs --restore"
148
+ },
133
149
  "dependencies": {
134
150
  "dompurify": "^3.4.16",
135
151
  "iconify-icon": "^3.0.3",
136
152
  "lit": "^3.3.3",
137
153
  "marked": "^18.1.0"
138
154
  },
139
- "devDependencies": {
140
- "@sankhyatronics/oxlint-config": "0.1.3",
141
- "@sankhyatronics/typescript-config": "0.1.3",
142
- "oxlint": "1.87.0",
143
- "rimraf": "6.1.3",
144
- "tsup": "8.5.1",
145
- "typescript": "6.0.3",
146
- "vitest": "5.0.3",
147
- "@types/node": "26.6.4",
148
- "@custom-elements-manifest/analyzer": "0.11.0"
149
- },
150
155
  "keywords": [
151
156
  "web-components",
152
157
  "lit",
@@ -156,15 +161,5 @@
156
161
  "customElements": "custom-elements.json",
157
162
  "publishConfig": {
158
163
  "access": "public"
159
- },
160
- "scripts": {
161
- "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.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/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 && cem analyze",
162
- "dev": "tsup src/index.ts --watch --format esm --dts",
163
- "typecheck": "tsc --noEmit",
164
- "lint": "oxlint",
165
- "clean": "rimraf dist",
166
- "test": "vitest run",
167
- "migrate-json": "node scripts/migrate-json.mjs",
168
- "analyze": "cem analyze"
169
164
  }
170
- }
165
+ }
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2026 Sankhyatronics
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/cookie-consent/CookieConsent.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport type { CookieConsentEventDetail, CookieConsentStatus } from './CookieConsentEvents';\r\n\r\nconst DEFAULT_STORAGE_KEY = 'sankhya_ui_cookie_consent';\r\n\r\n/**\r\n * Fixed bottom consent bar. The source read/wrote consent through a React `UserContext`; here the\r\n * element persists the choice itself in localStorage (`storage-key`, default the source's\r\n * `sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice\r\n * exists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The\r\n * default slot replaces the message text.\r\n */\r\n@customElement('st-cookie-consent')\r\nexport class CookieConsent extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n @keyframes st-cookie-slide-up {\r\n from {\r\n transform: translateY(100%);\r\n }\r\n to {\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n :host {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n box-sizing: border-box;\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-16);\r\n padding: var(--st-space-24);\r\n background: var(--st-color-surface);\r\n color: var(--st-color-text);\r\n border-top: 1px solid var(--st-color-border);\r\n box-shadow: 0 -4px 10px var(--st-shadow-color-sm);\r\n animation: st-cookie-slide-up 0.3s ease-out;\r\n ${rootFontFamilyStyles}\r\n }\r\n\r\n .content {\r\n flex: 1;\r\n }\r\n\r\n .message {\r\n margin: 0;\r\n font-size: var(--st-text-md);\r\n line-height: 1.5;\r\n }\r\n\r\n .link {\r\n color: var(--st-color-accent-text);\r\n text-decoration: underline;\r\n margin-left: var(--st-space-4);\r\n }\r\n\r\n .link:hover {\r\n text-decoration: none;\r\n }\r\n\r\n .actions {\r\n display: flex;\r\n gap: var(--st-space-12);\r\n flex-shrink: 0;\r\n }\r\n\r\n .btn {\r\n ${buttonResetStyles}\r\n padding: var(--st-space-8) var(--st-space-16);\r\n border: 1px solid transparent;\r\n border-radius: var(--st-radius-xs);\r\n font-weight: var(--st-font-weight-medium);\r\n font-size: var(--st-text-md);\r\n transition:\r\n background-color 0.2s ease,\r\n color 0.2s ease;\r\n }\r\n\r\n .accept {\r\n background: var(--st-button-primary-bg);\r\n color: var(--st-button-primary-color);\r\n }\r\n\r\n .accept:hover {\r\n opacity: 0.9;\r\n }\r\n\r\n .refuse {\r\n border-color: var(--st-color-border);\r\n color: var(--st-color-text-muted);\r\n }\r\n\r\n .refuse:hover {\r\n background: var(--st-color-hover);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n @media (min-width: 768px) {\r\n :host {\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: var(--st-space-16) var(--st-space-32);\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n :host {\r\n animation: none;\r\n }\r\n .btn {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n message = '';\r\n\r\n @property({ type: String, attribute: 'accept-button-text' })\r\n acceptButtonText = 'Accept';\r\n\r\n @property({ type: String, attribute: 'refuse-button-text' })\r\n refuseButtonText = 'Refuse';\r\n\r\n @property({ type: String, attribute: 'privacy-policy-link' })\r\n privacyPolicyLink = '';\r\n\r\n @property({ type: String, attribute: 'privacy-policy-text' })\r\n privacyPolicyText = 'Privacy Policy';\r\n\r\n @property({ type: String, attribute: 'storage-key' })\r\n storageKey = DEFAULT_STORAGE_KEY;\r\n\r\n /** The stored choice, or `null` while undecided (the bar is only shown then). */\r\n @state() private consent: CookieConsentStatus | null = null;\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n this.consent = this.readStored();\r\n }\r\n\r\n private readStored(): CookieConsentStatus | null {\r\n try {\r\n const saved = localStorage.getItem(this.storageKey);\r\n return saved === 'accepted' || saved === 'refused' ? saved : null;\r\n } catch {\r\n return null;\r\n }\r\n }\r\n\r\n private choose(status: CookieConsentStatus): void {\r\n this.consent = status;\r\n try {\r\n localStorage.setItem(this.storageKey, status);\r\n } catch {\r\n // Storage unavailable (private mode, blocked): the choice just doesn't persist.\r\n }\r\n this.dispatchEvent(\r\n new CustomEvent<CookieConsentEventDetail>(status === 'accepted' ? 'cookie-consent-accept' : 'cookie-consent-refuse', {\r\n detail: { status },\r\n bubbles: true,\r\n composed: true\r\n })\r\n );\r\n }\r\n\r\n render() {\r\n if (this.consent !== null) return nothing;\r\n return html`\r\n <div class=\"content\" part=\"content\">\r\n <p class=\"message\" part=\"message\">\r\n <slot>\r\n ${this.message || 'We use cookies to enhance your experience. By continuing to visit this site you agree to our use of cookies.'}\r\n ${this.privacyPolicyLink\r\n ? html`<a class=\"link\" part=\"link\" href=${this.privacyPolicyLink} target=\"_blank\" rel=\"noopener noreferrer\">${this.privacyPolicyText}</a>`\r\n : nothing}\r\n </slot>\r\n </p>\r\n </div>\r\n <div class=\"actions\" part=\"actions\">\r\n <button class=\"btn refuse\" part=\"refuse\" type=\"button\" @click=${() => this.choose('refused')}>${this.refuseButtonText}</button>\r\n <button class=\"btn accept\" part=\"accept\" type=\"button\" @click=${() => this.choose('accepted')}>${this.acceptButtonText}</button>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/promo-banner/PromoBanner.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\r\nimport { ctaLinkStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\r\nimport type { HeroActionEventDetail } from '../hero/HeroEvents';\r\n\r\n/**\r\n * Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a\r\n * background image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event\r\n * (detail `{ href }`, empty unless set) in place of `onAction`.\r\n */\r\n@customElement('st-promo-banner')\r\nexport class PromoBanner extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n box-sizing: border-box;\r\n width: calc(100% - 48px);\r\n max-width: var(--st-cms-container-max);\r\n margin: var(--st-space-40) auto;\r\n padding: 100px var(--st-space-24);\r\n border-radius: var(--st-space-24);\r\n background-color: var(--st-color-text-strong);\r\n background-size: cover;\r\n background-position: center;\r\n color: var(--st-color-on-solid);\r\n text-align: center;\r\n ${rootFontFamilyStyles}\r\n }\r\n\r\n :host([inverted]) {\r\n background-color: var(--st-color-subtle);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n .container {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--st-space-32);\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n color: inherit;\r\n margin: 0;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n color: inherit;\r\n opacity: 0.8;\r\n margin: 0;\r\n }\r\n\r\n .actions {\r\n margin-top: var(--st-space-16);\r\n }\r\n\r\n .cta {\r\n ${buttonResetStyles}\r\n ${ctaLinkStyles}\r\n border: 1px solid currentColor;\r\n color: inherit;\r\n }\r\n\r\n .cta:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n width: auto;\r\n margin: var(--st-space-24);\r\n padding: 60px var(--st-space-24);\r\n border-radius: var(--st-radius-lg);\r\n }\r\n .actions,\r\n .cta {\r\n width: 100%;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .cta {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n @property({ type: String, attribute: 'action-label' })\r\n actionLabel = '';\r\n\r\n @property({ type: String })\r\n href = '';\r\n\r\n @property({ type: String, attribute: 'image-src' })\r\n imageSrc = '';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n protected willUpdate(): void {\r\n this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\r\n }\r\n\r\n private onAction = (): void => {\r\n this.dispatchEvent(\r\n new CustomEvent<HeroActionEventDetail>('action', { detail: { href: this.href }, bubbles: true, composed: true })\r\n );\r\n };\r\n\r\n render() {\r\n return html`\r\n <div class=\"container\" part=\"container\">\r\n <h2 class=\"title\" part=\"title\">${this.title}</h2>\r\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n <slot></slot>\r\n ${this.actionLabel\r\n ? html`<div class=\"actions\" part=\"actions\">\r\n <button class=\"cta\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>\r\n </div>`\r\n : nothing}\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAYjC,IAAM,cAAN,cAA0B,WAAW;AAAA,EAArC;AAAA;AAoFL,iBAAQ;AAGR,oBAAW;AAGX,uBAAc;AAGd,gBAAO;AAGP,oBAAW;AAGX,oBAAW;AAMX,SAAQ,WAAW,MAAY;AAC7B,WAAK;AAAA,QACH,IAAI,YAAmC,UAAU,EAAE,QAAQ,EAAE,MAAM,KAAK,KAAK,GAAG,SAAS,MAAM,UAAU,KAAK,CAAC;AAAA,MACjH;AAAA,IACF;AAAA;AAAA,EARU,aAAmB;AAC3B,SAAK,MAAM,kBAAkB,KAAK,WAAW,OAAO,KAAK,UAAU,KAAK,QAAQ,CAAC,MAAM;AAAA,EACzF;AAAA,EAQA,SAAS;AACP,WAAO;AAAA;AAAA,yCAE8B,KAAK,KAAK;AAAA,UACzC,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA;AAAA,UAExF,KAAK,cACH;AAAA,uEAC2D,KAAK,QAAQ,IAAI,KAAK,WAAW;AAAA,sBAE5F,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA7Ha,YACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAef,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWrB,iBAAiB;AAAA,QACjB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BnB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAnFf,YAoFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtFf,YAuFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAzF1C,YA0FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5Ff,YA6FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA/FvC,YAgGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlG/B,YAmGX;AAnGW,cAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/shared/icons.ts"],"sourcesContent":["import { html } from 'lit';\r\nimport type { TemplateResult } from 'lit';\r\n\r\n/**\r\n * Every inline SVG icon used across components, centralized so a glyph's\r\n * path data lives in exactly one place instead of being copy-pasted at each\r\n * call site. Each icon is a small function returning a Lit `TemplateResult`\r\n * (not a `css`-style fragment) so callers can size — and, where noted, class\r\n * — the icon per context while sharing the same markup.\r\n */\r\n\r\nconst FOLDER_ICON_COLOR = 'oklch(0.72 0.09 75)';\r\n\r\n/** Filled folder glyph (browse rows/tiles). Fixed 20x16 — folders don't resize per usage. */\r\nexport function folderIcon(): TemplateResult {\r\n return html`\r\n <svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M0 2a2 2 0 012-2h5l2 2h9a2 2 0 012 2v10a2 2 0 01-2 2H2a2 2 0 01-2-2V2z\" fill=${FOLDER_ICON_COLOR} />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Outlined folder glyph (breadcrumb crumb icon). `className` lets the caller hook its own layout class. */\r\nexport function folderOutlineIcon(size = 11, className = ''): TemplateResult {\r\n return html`\r\n <svg class=${className} width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M4 4h5l2 2h9v12H4V4z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** External-link/\"open\" glyph (open site/library actions in the Templates/Data/Save-location pickers). */\r\nexport function externalLinkIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5M15 4h5v5M20 4l-9 9\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.8\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Refresh/reload glyph (Templates/Data picker refresh buttons). */\r\nexport function refreshIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M17.65 6.35A7.958 7.958 0 0 0 12 4a8 8 0 1 0 8 8h-2a6 6 0 1 1-6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Clock glyph (the wizard's \"Recent activity\" history trigger button, Steps 1-3). */\r\nexport function historyIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M12 7v5l3.5 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Trash/delete glyph (clear-all button in the selected-chips summary badge). */\r\nexport function trashIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M4 4h2l1.2 12.4A2 2 0 0 0 9.2 18.2h8.1a2 2 0 0 0 1.98-1.7L20.5 8H6.5\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <circle cx=\"10\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n <circle cx=\"17\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Chevron glyph (pager prev/next buttons, the select trigger's caret). */\r\nexport function chevronIcon(direction: 'left' | 'right' | 'down', size = 14): TemplateResult {\r\n const d = { left: 'M15 18l-6-6 6-6', right: 'M9 6l6 6-6 6', down: 'M6 9l6 6 6-6' }[direction];\r\n\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=${d} stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Plus glyph (\"New folder\" action button). */\r\nexport function plusIcon(size = 13): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M12 4v16M4 12h16\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Cards-view glyph (2x2 grid — view-toggle button). */\r\nexport function cardsViewIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n <rect x=\"1\" y=\"1\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n <rect x=\"9\" y=\"1\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n <rect x=\"1\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n <rect x=\"9\" y=\"9\" width=\"6\" height=\"6\" rx=\"1\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Checkmark glyph (completed-step marker in the step indicator). */\r\nexport function checkIcon(size = 14): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M4 12l5 5L20 6\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** SharePoint site glyph (globe — root \"All sites\" browser rows). */\r\nexport function siteIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.6\" />\r\n <path d=\"M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18\" stroke=\"currentColor\" stroke-width=\"1.6\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** 3x3 dot-grid glyph (bento-menu app-switcher trigger). */\r\nexport function bentoGridIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path\r\n d=\"M16 20h4v-4h-4m0-2h4v-4h-4m-6-2h4V4h-4m6 4h4V4h-4m-6 10h4v-4h-4m-6 4h4v-4H4m0 10h4v-4H4m6 4h4v-4h-4M4 8h4V4H4z\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** List-view glyph (stacked rows — view-toggle button). */\r\nexport function listViewIcon(size = 15): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n <rect x=\"1\" y=\"2\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n <rect x=\"6\" y=\"2.5\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n <rect x=\"1\" y=\"6.5\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n <rect x=\"6\" y=\"7\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n <rect x=\"1\" y=\"11\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"currentColor\" />\r\n <rect x=\"6\" y=\"11.5\" width=\"9\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/**\r\n * A small set of generic domain icons for `st-menu-grid-item`'s icon slot (nav \"mega menu\"\r\n * entries — sales/purchase/accounting/settings items) — deliberately simple line glyphs rather\r\n * than pixel-perfect illustrations, same fidelity level as the icons above.\r\n */\r\n\r\n/** Shopping-cart glyph (sales/orders). */\r\nexport function cartIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M3 4h2l2.4 12.4A2 2 0 0 0 9.36 18h8.2a2 2 0 0 0 1.96-1.6L21 8H6\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <circle cx=\"10\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n <circle cx=\"17\" cy=\"21\" r=\"1.4\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Delivery-truck glyph (purchase orders / receiving). */\r\nexport function truckIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M2 6h11v10H2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n <path d=\"M13 10h4l4 3.5V16h-8z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n <circle cx=\"6.5\" cy=\"18\" r=\"1.8\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <circle cx=\"16.5\" cy=\"18\" r=\"1.8\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Package/box glyph (products, inventory). */\r\nexport function boxIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M12 3l8 4.2v9.6L12 21l-8-4.2V7.2L12 3z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path d=\"M4.2 7.2L12 11l7.8-3.8M12 11v10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Map-pin glyph (stock locations). */\r\nexport function mapPinIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M12 21s7-6.1 7-11.5A7 7 0 0 0 5 9.5C5 14.9 12 21 12 21z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <circle cx=\"12\" cy=\"9.5\" r=\"2.4\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Two-person glyph (partners — customers/vendors/employees). */\r\nexport function usersIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"9\" cy=\"8\" r=\"3.2\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n <path\r\n d=\"M16 5.3a3.2 3.2 0 0 1 0 6.2M19 20c0-2.8-2-5.1-4.6-5.8\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Open-book glyph (journals). */\r\nexport function bookIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M12 5.5c-1.6-1-4-1.5-6-1.5-1 0-2 .1-3 .4v13.6c1-.3 2-.4 3-.4 2 0 4.4.5 6 1.5m0-13.6c1.6-1 4-1.5 6-1.5 1 0 2 .1 3 .4v13.6c-1-.3-2-.4-3-.4-2 0-4.4.5-6 1.5m0-13.6v13.6\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.8\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Document/invoice glyph. */\r\nexport function documentIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M6 2h9l5 5v15H6V2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n <path d=\"M15 2v5h5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" />\r\n <path d=\"M9 12h6M9 16h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Receipt glyph, zig-zag bottom edge (credit/debit notes). */\r\nexport function receiptIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M5 2h14v19l-2.5-1.6L14 21l-2.5-1.6L9 21l-2.5-1.6L5 21V2z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <path d=\"M8 8h8M8 12h8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Percent glyph (taxes). */\r\nexport function percentIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n <circle cx=\"7\" cy=\"7\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <circle cx=\"17\" cy=\"17\" r=\"2.5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Stacked-coins glyph (payment terms). */\r\nexport function coinsIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <ellipse cx=\"8\" cy=\"7\" rx=\"5.5\" ry=\"3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M2.5 7v10c0 1.7 2.5 3 5.5 3s5.5-1.3 5.5-3V7\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M2.5 12c0 1.7 2.5 3 5.5 3s5.5-1.3 5.5-3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <ellipse cx=\"16.5\" cy=\"12\" rx=\"5\" ry=\"2.7\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M11.5 12v5c0 1.5 2.2 2.7 5 2.7s5-1.2 5-2.7v-5\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Padlock glyph (fiscal year closing / lock dates). */\r\nexport function lockIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <rect x=\"4\" y=\"11\" width=\"16\" height=\"10\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n <circle cx=\"12\" cy=\"16\" r=\"1.6\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/**\r\n * Office file-type glyphs, ported from `PennyIcons` in `@sankhyatronics/sankhya-icons`\r\n * (FileWordIcon/FileExcelIcon/FilePowerPointIcon) — this package is Lit, so it can't import\r\n * the React components and carries the same path data instead. Filled, `currentColor`.\r\n */\r\nconst FILE_TYPE_ICON_PATHS = {\r\n word: 'm19.95 5.54-3.48-3.49A6.96 6.96 0 0 0 11.52 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.48 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-3.28-5.76L15.3 18.9c-.15.61-.68 1.05-1.31 1.09-.63.04-1.21-.32-1.44-.91L12 17.7l-.55 1.38c-.22.56-.75.91-1.34.91h-.1c-.63-.04-1.15-.48-1.31-1.1l-1.41-5.66a1 1 0 0 1 1.94-.48l1 4 .85-2.13a1 1 0 0 1 1.86 0l.84 2.13 1.01-4a1 1 0 0 1 1.94.48Z',\r\n excel:\r\n 'M15.27 13.64 13.3 16l1.97 2.36a1.001 1.001 0 1 1-1.54 1.28L12 17.56l-1.73 2.08a.99.99 0 0 1-.77.36c-.23 0-.45-.08-.64-.23-.42-.35-.48-.98-.13-1.41L10.7 16l-1.97-2.36a1.001 1.001 0 1 1 1.54-1.28L12 14.44l1.73-2.08c.35-.42.98-.48 1.41-.13.42.35.48.98.13 1.41ZM22 10.49V19c0 2.76-2.24 5-5 5H7c-2.76 0-5-2.24-5-5V5c0-2.76 2.24-5 5-5h4.51c1.87 0 3.63.73 4.95 2.05l3.48 3.49a6.96 6.96 0 0 1 2.05 4.95Zm-6.95-7.03c-.32-.32-.67-.59-1.05-.81V7c0 .55.45 1 1 1h4.34c-.22-.38-.49-.73-.81-1.05l-3.48-3.49ZM20 10.48c0-.16 0-.33-.02-.49H15c-1.65 0-3-1.35-3-3V2.02C11.84 2 11.68 2 11.51 2H7C5.35 2 4 3.35 4 5v14c0 1.65 1.35 3 3 3h10c1.65 0 3-1.35 3-3v-8.51Z',\r\n powerpoint:\r\n 'm19.95 5.54-3.49-3.49A6.96 6.96 0 0 0 11.51 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.49 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-10 1c-.55 0-1-.45-1-1v-5c0-1.1.9-2 2-2h1c1.65 0 3 1.35 3 3s-1.35 3-3 3h-1v1c0 .55-.45 1-1 1Zm1-4h1c.55 0 1-.45 1-1s-.45-1-1-1h-1v2Z'\r\n} as const;\r\n\r\n/** Word/Excel/PowerPoint file glyph (the document icon in front of template/file rows). */\r\nexport function fileTypeIcon(type: keyof typeof FILE_TYPE_ICON_PATHS, size = 24): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\r\n <path d=${FILE_TYPE_ICON_PATHS[type]} />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Hamburger glyph (`st-header`'s mobile nav toggle, closed state). */\r\nexport function menuIcon(size = 20): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M4 6h16M4 12h16M4 18h16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** X/close glyph (`st-header`'s mobile nav toggle, open state). */\r\nexport function closeIcon(size = 20): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M5 5l14 14M19 5L5 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Gear/cog glyph (company settings). */\r\nexport function gearIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" stroke-width=\"2\" />\r\n <path\r\n d=\"M12 3v2.2M12 18.8V21M21 12h-2.2M5.2 12H3M18 6l-1.6 1.6M7.6 16.4L6 18M18 18l-1.6-1.6M7.6 7.6L6 6\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n />\r\n </svg>\r\n `;\r\n}\r\n\r\n/** Paint-palette glyph (theme/color-scheme switcher). */\r\nexport function paletteIcon(size = 18): TemplateResult {\r\n return html`\r\n <svg width=${size} height=${size} viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path\r\n d=\"M12 3a9 9 0 1 0 0 18c1.1 0 2-.9 2-2 0-.5-.2-1-.5-1.3-.3-.4-.5-.8-.5-1.2 0-1.1.9-2 2-2h2a4 4 0 0 0 4-4c0-4.4-4-7.5-9-7.5z\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"1.6\"\r\n stroke-linejoin=\"round\"\r\n />\r\n <circle cx=\"7.5\" cy=\"10.5\" r=\"1.2\" fill=\"currentColor\" />\r\n <circle cx=\"11\" cy=\"7\" r=\"1.2\" fill=\"currentColor\" />\r\n <circle cx=\"15.5\" cy=\"7.5\" r=\"1.2\" fill=\"currentColor\" />\r\n <circle cx=\"17.5\" cy=\"11.5\" r=\"1.2\" fill=\"currentColor\" />\r\n </svg>\r\n `;\r\n}\r\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/testimonials/Testimonials.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { chevronIcon } from '../shared/icons';\nimport { buttonResetStyles, cardShellStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles, invertedSectionTextStyles, sectionHeaderStyles, reducedMotionStyles } from '../shared/section-styles';\nimport type { TestimonialsLinkEventDetail } from './TestimonialsEvents';\n\nexport interface TestimonialMetric {\n /** The figure, e.g. `100M` or `85%`. */\n value: string;\n label: string;\n}\n\nexport interface TestimonialItem {\n id?: string;\n name?: string;\n role?: string;\n company?: string;\n /** Author photo. */\n imageSrc?: string;\n quote?: string;\n /** Number of stars. Default: 5 for a plain quote card; no stars on a story card (one with a `headline` or `logoSrc`). `0` hides them. */\n rating?: number;\n /** Customer logo, shown at the top of the card body. */\n logoSrc?: string;\n /** Wide image across the top of the card. */\n mediaSrc?: string;\n /** Story headline, e.g. \"Acme gives 100 million users a seamless sign-in\". */\n headline?: string;\n /** Key results, shown as large figures. */\n metrics?: TestimonialMetric[];\n /** Link to the full story. */\n href?: string;\n /** Text of the story link; defaults to the section's `link-label`. */\n linkLabel?: string;\n}\n\n/**\n * Section heading plus customer quotes or stories. Port of React `Testimonials`.\n *\n * Each card shows whatever its item has: a cover image, the customer logo, a story headline, a\n * quote with star rating, result metrics, the author and a \"See full story\" link. `layout=\"grid\"`\n * (default) lays the cards out in a grid; `layout=\"carousel\"` puts them on one horizontally\n * scrolling, snapping row with previous/next buttons next to the heading — the customer-story\n * carousel of enterprise marketing pages. `action-label`/`action-href` add a section-level link\n * (e.g. \"Explore customer stories\").\n *\n * @fires testimonials-link - Cancelable, before following a story or section link. Detail `{ href }`.\n */\n@customElement('st-testimonials')\nexport class Testimonials extends LitElement {\n static styles = css`\n ${controlBaseStyles}\n\n :host {\n display: block;\n box-sizing: border-box;\n padding: var(--st-space-48) var(--st-space-24);\n background-color: var(--st-color-subtle);\n ${rootFontFamilyStyles}\n }\n\n :host([inverted]) {\n background-color: 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-bottom: var(--st-space-16);\n letter-spacing: -0.02em;\n }\n\n .subtitle {\n ${sectionSubtitleStyles}\n margin: 0 auto;\n }\n\n ${invertedSectionTextStyles}\n\n .grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: var(--st-space-32);\n }\n\n .card {\n ${cardShellStyles}\n display: flex;\n flex-direction: column;\n margin: 0;\n overflow: hidden;\n box-shadow: 0 1px 3px var(--st-shadow-color-sm);\n }\n\n .media {\n aspect-ratio: 16 / 9;\n background: var(--st-color-divider);\n }\n\n .media img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.4s ease;\n }\n\n .card:hover .media img {\n transform: scale(1.03);\n }\n\n .body {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--st-space-24);\n padding: var(--st-space-24);\n }\n\n .logo {\n display: block;\n height: 32px;\n width: auto;\n max-width: 60%;\n object-fit: contain;\n object-position: left center;\n }\n\n .headline {\n margin: 0;\n font-size: var(--st-text-xl);\n font-weight: var(--st-font-weight-semibold);\n line-height: 1.35;\n color: var(--st-color-text-strong);\n }\n\n .stars {\n display: flex;\n gap: var(--st-space-4);\n color: var(--st-favorite-accent);\n font-size: var(--st-size-20);\n }\n\n .quote {\n font-size: var(--st-text-md);\n line-height: 1.6;\n color: var(--st-color-text);\n font-style: italic;\n margin: 0;\n }\n\n .metrics {\n display: flex;\n flex-wrap: wrap;\n gap: var(--st-space-16) var(--st-space-32);\n margin: 0;\n padding-top: var(--st-space-16);\n border-top: 1px solid var(--st-color-border);\n }\n\n .metric {\n display: flex;\n flex-direction: column-reverse;\n min-width: 6rem;\n }\n\n .metric dt {\n font-size: var(--st-text-sm);\n color: var(--st-color-text-muted);\n line-height: 1.4;\n }\n\n .metric dd {\n margin: 0;\n font-size: var(--st-cms-text-4xl);\n font-weight: var(--st-font-weight-bold);\n letter-spacing: -0.02em;\n line-height: 1.1;\n color: var(--st-color-text-strong);\n }\n\n .author {\n display: flex;\n align-items: center;\n gap: var(--st-space-12);\n margin-top: auto;\n }\n\n .avatar {\n width: var(--st-space-48);\n height: var(--st-space-48);\n border-radius: var(--st-radius-circle);\n object-fit: cover;\n background-color: var(--st-color-divider);\n flex-shrink: 0;\n }\n\n .avatar-placeholder {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--st-color-text-muted);\n font-weight: var(--st-font-weight-semibold);\n font-size: var(--st-text-xl);\n }\n\n .author-info {\n display: flex;\n flex-direction: column;\n }\n\n .name {\n font-weight: var(--st-font-weight-semibold);\n color: var(--st-color-text-strong);\n font-size: var(--st-text-xl);\n }\n\n .role {\n font-size: var(--st-text-sm);\n color: var(--st-color-text-faint);\n }\n\n .link {\n display: inline-flex;\n align-items: center;\n gap: var(--st-space-8);\n margin-top: auto;\n font-weight: var(--st-font-weight-semibold);\n color: var(--st-color-text-strong);\n text-decoration: none;\n }\n\n .author + .link {\n margin-top: 0;\n }\n\n .link:hover {\n text-decoration: underline;\n text-underline-offset: 3px;\n }\n\n .link svg {\n transition: transform 0.2s ease;\n }\n\n .link:hover svg {\n transform: translateX(3px);\n }\n\n /* ---- layout=\"carousel\" ---- */\n\n :host([layout='carousel']) .header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--st-space-24);\n text-align: left;\n margin-bottom: var(--st-space-32);\n }\n\n :host([layout='carousel']) .subtitle {\n margin: 0;\n }\n\n .controls {\n display: flex;\n align-items: center;\n gap: var(--st-space-12);\n flex: none;\n }\n\n .section-link {\n margin-right: var(--st-space-12);\n }\n\n :host([inverted]) .section-link {\n color: var(--st-color-on-solid);\n }\n\n .arrow {\n ${buttonResetStyles}\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--st-size-40);\n height: var(--st-size-40);\n border-radius: var(--st-radius-circle);\n border: 1px solid var(--st-color-border-strong);\n color: var(--st-color-text-strong);\n background: var(--st-color-surface);\n transition:\n background 0.2s ease,\n opacity 0.2s ease;\n }\n\n .arrow:hover:not(:disabled) {\n background: var(--st-color-hover);\n }\n\n .arrow:disabled {\n opacity: 0.4;\n cursor: default;\n }\n\n .track {\n display: flex;\n gap: var(--st-space-24);\n overflow-x: auto;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n scrollbar-width: none;\n /* Room for the cards' shadow and focus rings. */\n padding: var(--st-space-4) var(--st-space-4) var(--st-space-12);\n margin: calc(-1 * var(--st-space-4));\n }\n\n .track::-webkit-scrollbar {\n display: none;\n }\n\n .track > .card {\n flex: 0 0 min(380px, 85%);\n scroll-snap-align: start;\n }\n\n /* The section link sits under the grid; in the carousel it is next to the arrows instead, and\n only drops below the row on a narrow screen. */\n .section-footer {\n margin-top: var(--st-space-32);\n text-align: center;\n }\n\n :host([inverted]) .section-footer .link {\n color: var(--st-color-on-solid);\n }\n\n :host([layout='carousel']) .section-footer {\n margin-top: 0;\n text-align: left;\n }\n\n .footer-link {\n display: none;\n }\n\n @media (max-width: 768px) {\n :host {\n padding: var(--st-space-40) var(--st-space-20);\n }\n .grid {\n grid-template-columns: 1fr;\n }\n :host([layout='carousel']) .header {\n flex-direction: column;\n align-items: flex-start;\n }\n .section-link {\n display: none;\n }\n .footer-link {\n display: inline-flex;\n margin-top: var(--st-space-24);\n }\n }\n\n ${reducedMotionStyles}\n @media (prefers-reduced-motion: reduce) {\n .track {\n scroll-behavior: auto;\n }\n }\n `;\n\n @property({ type: String })\n title = '';\n\n @property({ type: String })\n subtitle = '';\n\n @property({ attribute: false })\n items: TestimonialItem[] = [];\n\n @property({ type: Boolean, reflect: true })\n inverted = false;\n\n /** `grid` (default) or `carousel`: one scrolling row with previous/next buttons. */\n @property({ type: String, reflect: true })\n layout: 'grid' | 'carousel' = 'grid';\n\n /** Default text of each card's story link. */\n @property({ type: String, attribute: 'link-label' })\n linkLabel = 'See full story';\n\n /** Section-level link text, e.g. \"Explore customer stories\". */\n @property({ type: String, attribute: 'action-label' })\n actionLabel = '';\n\n @property({ type: String, attribute: 'action-href' })\n actionHref = '';\n\n @state() private atStart = true;\n @state() private atEnd = false;\n\n private get track(): HTMLElement | null {\n return this.renderRoot.querySelector('.track');\n }\n\n private resizeObserver?: ResizeObserver;\n\n protected updated(changed: Map<string, unknown>): void {\n if (changed.has('layout') || changed.has('items')) {\n this.resizeObserver?.disconnect();\n const track = this.track;\n if (track) {\n this.resizeObserver = new ResizeObserver(this.syncArrows);\n this.resizeObserver.observe(track);\n }\n this.syncArrows();\n }\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n super.disconnectedCallback();\n }\n\n private syncArrows = (): void => {\n const track = this.track;\n if (!track) return;\n this.atStart = track.scrollLeft <= 1;\n this.atEnd = track.scrollLeft + track.clientWidth >= track.scrollWidth - 1;\n };\n\n private scrollByCard(direction: 1 | -1): void {\n const track = this.track;\n const card = track?.querySelector<HTMLElement>('.card');\n if (!track || !card) return;\n const gap = parseFloat(getComputedStyle(track).columnGap) || 0;\n track.scrollBy({ left: direction * (card.offsetWidth + gap) });\n }\n\n private onLinkClick(event: MouseEvent, href: string): void {\n const link = new CustomEvent<TestimonialsLinkEventDetail>('testimonials-link', {\n detail: { href },\n bubbles: true,\n composed: true,\n cancelable: true\n });\n this.dispatchEvent(link);\n if (link.defaultPrevented) event.preventDefault();\n }\n\n private renderLink(label: string, href: string, className: string, part: string) {\n return html`<a class=\"link ${className}\" part=${part} href=${href} @click=${(event: MouseEvent) => this.onLinkClick(event, href)}>\n ${label} ${chevronIcon('right', 14)}\n </a>`;\n }\n\n private renderItem(item: TestimonialItem) {\n const story = !!(item.headline || item.logoSrc);\n const rating = item.rating ?? (item.quote && !story ? 5 : 0);\n const metrics = item.metrics ?? [];\n return html`\n <article class=\"card\" part=\"card\">\n ${item.mediaSrc ? html`<div class=\"media\" part=\"media\"><img src=${item.mediaSrc} alt=\"\" loading=\"lazy\" /></div>` : nothing}\n <div class=\"body\" part=\"body\">\n ${item.logoSrc ? html`<img class=\"logo\" part=\"logo\" src=${item.logoSrc} alt=${item.company || item.name || ''} />` : nothing}\n ${item.headline ? html`<h3 class=\"headline\" part=\"headline\">${item.headline}</h3>` : nothing}\n ${rating > 0\n ? html`<div class=\"stars\" part=\"stars\" role=\"img\" aria-label=\"${rating} / 5\">\n ${Array.from({ length: rating }, () => html`<iconify-icon icon=\"mdi:star\"></iconify-icon>`)}\n </div>`\n : nothing}\n ${item.quote ? html`<blockquote class=\"quote\" part=\"quote\">\"${item.quote}\"</blockquote>` : nothing}\n ${metrics.length\n ? html`<dl class=\"metrics\" part=\"metrics\">\n ${metrics.map(metric => html`<div class=\"metric\"><dt>${metric.label}</dt><dd>${metric.value}</dd></div>`)}\n </dl>`\n : nothing}\n ${item.name\n ? html`<div class=\"author\" part=\"author\">\n ${item.imageSrc\n ? html`<img class=\"avatar\" part=\"avatar\" src=${item.imageSrc} alt=${item.name} />`\n : html`<div class=\"avatar avatar-placeholder\" part=\"avatar\">${item.name.charAt(0)}</div>`}\n <span class=\"author-info\">\n <span class=\"name\" part=\"name\">${item.name}</span>\n ${item.role || item.company\n ? html`<span class=\"role\" part=\"role\">${[item.role, item.company].filter(Boolean).join(' at ')}</span>`\n : nothing}\n </span>\n </div>`\n : nothing}\n ${item.href ? this.renderLink(item.linkLabel || this.linkLabel, item.href, '', 'link') : nothing}\n </div>\n </article>\n `;\n }\n\n render() {\n const carousel = this.layout === 'carousel';\n const sectionLink = this.actionLabel && this.actionHref;\n return html`\n <div class=\"container\" part=\"container\">\n <div class=\"header\" part=\"header\">\n <div>\n <h2 class=\"title\" part=\"title\">${this.title}</h2>\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n </div>\n ${carousel\n ? html`<div class=\"controls\" part=\"controls\">\n ${sectionLink ? this.renderLink(this.actionLabel, this.actionHref, 'section-link', 'action') : nothing}\n <button class=\"arrow\" part=\"arrow prev\" type=\"button\" aria-label=\"Previous\" ?disabled=${this.atStart} @click=${() => this.scrollByCard(-1)}>\n ${chevronIcon('left', 16)}\n </button>\n <button class=\"arrow\" part=\"arrow next\" type=\"button\" aria-label=\"Next\" ?disabled=${this.atEnd} @click=${() => this.scrollByCard(1)}>\n ${chevronIcon('right', 16)}\n </button>\n </div>`\n : nothing}\n </div>\n ${carousel\n ? html`<div class=\"track\" part=\"track\" role=\"region\" aria-label=${this.title || 'Stories'} tabindex=\"0\" @scroll=${this.syncArrows}>\n ${this.items.map(item => this.renderItem(item))}\n </div>`\n : html`<div class=\"grid\" part=\"grid\">${this.items.map(item => this.renderItem(item))}</div>`}\n ${sectionLink\n ? html`<div class=\"section-footer\">${this.renderLink(this.actionLabel, this.actionHref, carousel ? 'footer-link' : '', 'action')}</div>`\n : nothing}\n </div>\n `;\n }\n}\n"],"mappings":"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AAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkMf,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAqFnB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5Uf,aA6UX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA/Uf,aAgVX;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAlVnB,aAmVX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArV/B,aAsVX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAzV9B,aA0VX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GA7VxC,aA8VX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAjW1C,aAkWX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GApWzC,aAqWX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GAvWI,aAuWM;AACA;AAAA,EAAhB,MAAM;AAAA,GAxWI,aAwWM;AAxWN,eAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/feature-split/FeatureSplit.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { controlBaseStyles, ctaButtonStyles, fontFamilyStyles } from '../shared/styles';\r\nimport '../markdown';\r\nimport {\r\n cardTitleStyles,\r\n iconTileStyles,\r\n reducedMotionStyles,\r\n sectionTitleStyles,\r\n} from '../shared/section-styles';\r\nimport type { FeatureSplitActionEventDetail } from './FeatureSplitEvents';\r\n\r\nexport interface FeatureSplitItem {\r\n /** Iconify icon name, e.g. `mdi:check`. */\r\n icon?: string;\r\n title: string;\r\n /** Markdown. */\r\n description: string;\r\n}\r\n\r\nexport type FeatureSplitImagePosition = 'left' | 'right' | 'top';\r\n\r\n/** A title/markdown-subtitle/feature-list block beside (or under) an image. */\r\n@customElement('st-feature-split')\r\nexport class FeatureSplit extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n padding: var(--st-space-24);\r\n background: var(--st-color-page);\r\n ${fontFamilyStyles}\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n }\r\n\r\n .container {\r\n max-width: var(--st-cms-container-max);\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: var(--st-space-48);\r\n align-items: center;\r\n }\r\n\r\n :host([image-position='left']) .container {\r\n direction: rtl;\r\n }\r\n\r\n :host([image-position='left']) .content {\r\n direction: ltr;\r\n }\r\n\r\n :host([image-position='top']) .container {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n }\r\n\r\n :host([image-position='top']) .content {\r\n align-items: center;\r\n }\r\n\r\n :host([image-position='top']) .image-wrapper {\r\n order: -1;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .content {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-32);\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n margin: 0;\r\n }\r\n\r\n .subtitle {\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-base);\r\n line-height: 1.6;\r\n }\r\n\r\n .list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-24);\r\n margin-top: var(--st-space-16);\r\n }\r\n\r\n .item {\r\n display: flex;\r\n gap: var(--st-space-16);\r\n align-items: flex-start;\r\n text-align: left;\r\n }\r\n\r\n .icon {\r\n ${iconTileStyles}\r\n width: var(--st-space-48);\r\n height: var(--st-space-48);\r\n font-size: 24px;\r\n }\r\n\r\n .item-title {\r\n ${cardTitleStyles}\r\n }\r\n\r\n .item-description {\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-sm);\r\n line-height: 1.5;\r\n }\r\n\r\n .action {\r\n ${ctaButtonStyles}\r\n justify-self: start;\r\n padding: var(--st-space-16);\r\n border-radius: var(--st-radius-lg);\r\n }\r\n\r\n .image-wrapper {\r\n width: 100%;\r\n height: 100%;\r\n min-height: 400px;\r\n border-radius: var(--st-space-24);\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px -12px var(--st-shadow-color-md);\r\n }\r\n\r\n .image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .image:hover {\r\n transform: scale(1.02);\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .item-title {\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n :host([inverted]) .subtitle,\r\n :host([inverted]) .item-description {\r\n color: var(--st-color-border);\r\n }\r\n\r\n :host([inverted]) .icon {\r\n background: var(--st-color-text);\r\n color: var(--st-color-border);\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .container {\r\n gap: var(--st-space-40);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-space-48) var(--st-space-24);\r\n }\r\n\r\n .container {\r\n grid-template-columns: 1fr;\r\n direction: ltr !important;\r\n }\r\n\r\n .image-wrapper {\r\n min-height: 300px;\r\n order: -1;\r\n }\r\n }\r\n\r\n ${reducedMotionStyles}\r\n `;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n /** Markdown. */\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n @property({ attribute: false })\r\n items: FeatureSplitItem[] = [];\r\n\r\n @property({ type: String, attribute: 'image-src' })\r\n imageSrc = '';\r\n\r\n @property({ type: String, attribute: 'image-alt' })\r\n imageAlt = '';\r\n\r\n @property({ type: String, attribute: 'image-position', reflect: true })\r\n imagePosition: FeatureSplitImagePosition = 'right';\r\n\r\n @property({ type: String, attribute: 'action-label' })\r\n actionLabel = '';\r\n\r\n @property({ type: String })\r\n href = '';\r\n\r\n private onAction() {\r\n const event = new CustomEvent<FeatureSplitActionEventDetail>('feature-split-action', {\r\n detail: { href: this.href },\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n });\r\n if (this.dispatchEvent(event)) window.location.href = this.href;\r\n }\r\n\r\n render() {\r\n return html`\r\n <div class=\"container\" part=\"container\">\r\n <div class=\"content\" part=\"content\">\r\n <h2 class=\"title\" part=\"title\">${this.title}</h2>\r\n ${this.subtitle\r\n ? html`<div class=\"subtitle\" part=\"subtitle\"><st-markdown .content=${this.subtitle}></st-markdown></div>`\r\n : nothing}\r\n ${this.items.length > 0\r\n ? html`<div class=\"list\" part=\"list\">\r\n ${this.items.map(\r\n (item) => html`\r\n <div class=\"item\" part=\"item\">\r\n ${item.icon\r\n ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>`\r\n : nothing}\r\n <div>\r\n <h3 class=\"item-title\" part=\"item-title\">${item.title}</h3>\r\n <div class=\"item-description\" part=\"item-description\">\r\n <st-markdown .content=${item.description}></st-markdown>\r\n </div>\r\n </div>\r\n </div>\r\n `,\r\n )}\r\n </div>`\r\n : nothing}\r\n ${this.actionLabel && this.href\r\n ? html`<button class=\"action\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>`\r\n : nothing}\r\n </div>\r\n <div class=\"image-wrapper\" part=\"image-wrapper\">\r\n <img class=\"image\" part=\"image\" src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/items-accordion/ItemsAccordion.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport {\r\n reducedMotionStyles,\r\n sectionHeaderStyles,\r\n sectionSubtitleStyles,\r\n sectionTitleStyles,\r\n} from '../shared/section-styles';\r\nimport type { AccordionToggleEventDetail } from './ItemsAccordionEvents';\r\n\r\nexport interface AccordionItem {\r\n id: string;\r\n title: string;\r\n content: string;\r\n}\r\n\r\n/** A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`. */\r\n@customElement('st-items-accordion')\r\nexport class ItemsAccordion extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n padding: var(--st-cms-section-padding) var(--st-space-24);\r\n background: var(--st-color-page);\r\n ${fontFamilyStyles}\r\n }\r\n\r\n .container {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .header {\r\n ${sectionHeaderStyles}\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n font-size: var(--st-text-2xl);\r\n margin-bottom: var(--st-space-12);\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n font-size: var(--st-text-base);\r\n margin: 0;\r\n }\r\n\r\n .list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--st-space-16);\r\n }\r\n\r\n .item {\r\n border: 1px solid var(--st-color-border);\r\n border-radius: var(--st-radius-lg);\r\n background: var(--st-color-surface);\r\n overflow: hidden;\r\n transition:\r\n border-color 0.2s ease,\r\n box-shadow 0.2s ease;\r\n }\r\n\r\n .item.open {\r\n border-color: var(--st-color-border-strong);\r\n box-shadow: 0 4px 6px -1px var(--st-shadow-color-sm);\r\n }\r\n\r\n .trigger {\r\n ${buttonResetStyles}\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: var(--st-space-24);\r\n text-align: left;\r\n font-size: var(--st-text-lg);\r\n font-weight: var(--st-font-weight-semibold);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n .trigger:hover {\r\n background: var(--st-color-hover);\r\n }\r\n\r\n .chevron {\r\n flex-shrink: 0;\r\n margin-left: var(--st-space-16);\r\n font-size: 24px;\r\n color: var(--st-color-text-faint);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .open .chevron {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .content {\r\n display: grid;\r\n grid-template-rows: 0fr;\r\n transition: grid-template-rows 0.3s ease;\r\n }\r\n\r\n .open .content {\r\n grid-template-rows: 1fr;\r\n }\r\n\r\n .content-clip {\r\n overflow: hidden;\r\n min-height: 0;\r\n }\r\n\r\n .content-inner {\r\n padding: 0 var(--st-space-24) var(--st-space-24);\r\n color: var(--st-color-text);\r\n line-height: 1.6;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-space-48) var(--st-space-20);\r\n }\r\n\r\n .title {\r\n font-size: var(--st-text-xl);\r\n }\r\n }\r\n\r\n ${reducedMotionStyles}\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n @property({ attribute: false })\r\n items: AccordionItem[] = [];\r\n\r\n @property({ type: Boolean, attribute: 'allow-multiple' })\r\n allowMultiple = false;\r\n\r\n @state() private openIds = new Set<string>();\r\n\r\n private toggle(id: string) {\r\n const wasOpen = this.openIds.has(id);\r\n const next = new Set(this.allowMultiple ? this.openIds : []);\r\n if (wasOpen) next.delete(id);\r\n else next.add(id);\r\n this.openIds = next;\r\n this.dispatchEvent(\r\n new CustomEvent<AccordionToggleEventDetail>('accordion-toggle', {\r\n detail: { id, open: !wasOpen },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n render() {\r\n return html`\r\n <div class=\"container\" part=\"container\">\r\n ${this.title || this.subtitle\r\n ? html`<div class=\"header\" part=\"header\">\r\n ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\r\n ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\r\n </div>`\r\n : nothing}\r\n <div class=\"list\" part=\"list\">\r\n ${this.items.map((item) => {\r\n const open = this.openIds.has(item.id);\r\n return html`\r\n <div class=\"item ${open ? 'open' : ''}\" part=\"item\">\r\n <button\r\n class=\"trigger\"\r\n part=\"trigger\"\r\n type=\"button\"\r\n aria-expanded=${open ? 'true' : 'false'}\r\n aria-controls=\"content-${item.id}\"\r\n @click=${() => this.toggle(item.id)}\r\n >\r\n <span>${item.title}</span>\r\n <iconify-icon class=\"chevron\" icon=\"mdi:chevron-down\"></iconify-icon>\r\n </button>\r\n <div class=\"content\" id=\"content-${item.id}\" part=\"content\" role=\"region\" ?inert=${!open}>\r\n <div class=\"content-clip\">\r\n <div class=\"content-inner\">${item.content}</div>\r\n </div>\r\n </div>\r\n </div>\r\n `;\r\n })}\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":[]}
@@ -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';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\r\nimport './FeatureItem';\r\n\r\n/** Data for one tile when using the `items` property (mirrors `st-feature-item`'s properties). */\r\nexport interface FeatureItemData {\r\n icon?: string;\r\n title: string;\r\n description: string;\r\n href?: string;\r\n}\r\n\r\n/**\r\n * A titled grid of feature tiles. Ports `SankhyaUI`'s React `FeaturesSection`: tiles come from the\r\n * `items` property, from slotted `st-feature-item` elements (the source's `children`), or both\r\n * (slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`\r\n * is passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.\r\n */\r\n@customElement('st-features-section')\r\nexport class FeaturesSection extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n padding: var(--st-cms-section-padding) var(--st-space-24);\r\n background: var(--st-color-surface);\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n }\r\n\r\n .container {\r\n max-width: var(--st-cms-container-max);\r\n margin: 0 auto;\r\n }\r\n\r\n .header {\r\n ${sectionHeaderStyles}\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n margin: 0;\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n margin: 0 auto;\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .subtitle {\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .grid {\r\n display: grid;\r\n grid-template-columns: repeat(var(--features-columns, 2), 1fr);\r\n gap: var(--st-space-32);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-space-48) var(--st-space-16);\r\n }\r\n\r\n .grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n /** Applied to every tile built from `items`. */\r\n @property({ type: String, attribute: 'action-label' })\r\n actionLabel = 'Learn more';\r\n\r\n @property({ type: Number })\r\n columns = 0;\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n /** Tiles to render (property only). */\r\n @property({ attribute: false })\r\n items: FeatureItemData[] = [];\r\n\r\n render() {\r\n const gridStyle = this.columns ? `--features-columns: ${this.columns}` : nothing;\r\n return html`\r\n <section class=\"container\" part=\"container\">\r\n <div class=\"header\" part=\"header\">\r\n <div class=\"title\" part=\"title\">${this.title}</div>\r\n ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\r\n </div>\r\n <div class=\"grid\" part=\"grid\" style=${gridStyle}>\r\n <slot></slot>\r\n ${this.items.map(\r\n (item) => html`\r\n <st-feature-item\r\n .icon=${item.icon ?? ''}\r\n .title=${item.title}\r\n .description=${item.description}\r\n .href=${item.href ?? ''}\r\n .actionLabel=${this.actionLabel}\r\n ?inverted=${this.inverted}\r\n ></st-feature-item>\r\n `\r\n )}\r\n </div>\r\n </section>\r\n `;\r\n }\r\n}\r\n","import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport 'iconify-icon';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport { cardDescriptionStyles, cardTitleStyles } from '../shared/section-styles';\r\nimport '../card';\r\nimport '../markdown';\r\n\r\n/**\r\n * One feature tile for `st-features-section`: optional icon, title, Markdown description and an\r\n * optional \"Learn more\" link, rendered on an `st-card`. `icon` is an Iconify name (e.g.\r\n * `mdi:rocket`). The link is a plain `<a>` (the source used react-router's `Link` for non-http\r\n * hrefs; there is no Lit equivalent). The click is composed, so an SPA router can intercept it\r\n * (e.g. via `event.composedPath()`) and navigate client-side; `http(s)` links open in a new tab.\r\n */\r\n@customElement('st-feature-item')\r\nexport class FeatureItem extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n }\r\n\r\n st-card {\r\n height: 100%;\r\n }\r\n\r\n .content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--st-space-16);\r\n height: 100%;\r\n }\r\n\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 48px;\r\n height: 48px;\r\n border-radius: var(--st-radius-lg);\r\n background: var(--st-color-subtle);\r\n color: var(--st-color-text-strong);\r\n margin-bottom: var(--st-space-8);\r\n font-size: 24px;\r\n }\r\n\r\n :host([inverted]) .icon {\r\n background: var(--st-color-text-muted);\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .title {\r\n ${cardTitleStyles}\r\n margin: 0;\r\n }\r\n\r\n .description {\r\n ${cardDescriptionStyles}\r\n margin: 0;\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .description {\r\n color: inherit;\r\n }\r\n\r\n .link {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--st-space-4);\r\n margin-top: auto;\r\n color: var(--st-color-text-muted);\r\n font-weight: var(--st-font-weight-medium);\r\n font-size: var(--st-text-md);\r\n text-decoration: none;\r\n transition: color 0.2s ease;\r\n }\r\n\r\n .link:hover {\r\n color: var(--st-color-text-strong);\r\n text-decoration: underline;\r\n }\r\n\r\n :host([inverted]) .link,\r\n :host([inverted]) .link:hover {\r\n color: inherit;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .link {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** Iconify icon name, e.g. `mdi:rocket`. */\r\n @property({ type: String })\r\n icon = '';\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n /** Markdown. */\r\n @property({ type: String })\r\n description = '';\r\n\r\n @property({ type: String })\r\n href = '';\r\n\r\n @property({ type: String, attribute: 'action-label' })\r\n actionLabel = 'Learn more';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n render() {\r\n const external = this.href.startsWith('http');\r\n return html`\r\n <st-card hoverable elevation=\"sm\" ?inverted=${this.inverted} part=\"card\">\r\n <div class=\"content\" part=\"content\">\r\n ${this.icon\r\n ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${this.icon}></iconify-icon></div>`\r\n : nothing}\r\n <h3 class=\"title\" part=\"title\">${this.title}</h3>\r\n <st-markdown class=\"description\" part=\"description\" .content=${this.description}></st-markdown>\r\n ${this.href\r\n ? html`\r\n <a\r\n class=\"link\"\r\n part=\"link\"\r\n href=${this.href}\r\n target=${external ? '_blank' : '_self'}\r\n rel=${external ? 'noopener noreferrer' : nothing}\r\n >\r\n ${this.actionLabel} <span>&rarr;</span>\r\n </a>\r\n `\r\n : nothing}\r\n </div>\r\n </st-card>\r\n `;\r\n }\r\n}\r\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { DropdownToggleEventDetail } from './DropdownEvents';\r\n\r\n/**\r\n * A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\r\n * action menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\r\n * React `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\r\n * (`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\r\n *\r\n * - only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\r\n * provider element is needed);\r\n * - a mousedown outside, Escape, or a click inside the panel closes it;\r\n * - an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\r\n * - `inline` opens the panel in the flow, the source's `.touch-device` layout.\r\n *\r\n * Colors and the panel's surface come from the suite theme (the source left those to the\r\n * consumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\r\n * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\r\n * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\r\n * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\r\n * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event.\r\n */\r\n@customElement('st-dropdown')\r\nexport class Dropdown extends LitElement {\r\n /** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */\r\n private static openDropdown: Dropdown | null = null;\r\n\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: inline-block;\r\n position: relative;\r\n ${fontFamilyStyles}\r\n }\r\n\r\n .menu-title {\r\n ${buttonResetStyles}\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n min-height: 40px;\r\n padding: 12px;\r\n gap: 8px;\r\n text-align: center;\r\n width: fit-content;\r\n border-radius: var(--st-radius-sm);\r\n /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\r\n color: var(--st-nav-color, var(--st-color-text));\r\n font-size: 0.875rem;\r\n text-decoration: none;\r\n white-space: nowrap;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .menu-title:hover,\r\n .menu-title[aria-expanded='true'] {\r\n background: var(--st-nav-hover-bg, var(--st-color-hover));\r\n color: var(--st-nav-color, var(--st-color-text-strong));\r\n }\r\n\r\n :host([active]) .menu-title {\r\n background: var(--st-color-accent-subtle);\r\n color: var(--st-color-accent-text);\r\n }\r\n\r\n :host([disabled]) .menu-title {\r\n color: var(--st-color-text-muted);\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n\r\n .icon {\r\n display: inline-flex;\r\n flex: none;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .icon[hidden] {\r\n display: none;\r\n }\r\n\r\n .arrow {\r\n display: inline-block;\r\n margin-left: 8px;\r\n font-size: 0.75rem;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .menu-title[aria-expanded='true'] .arrow {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .menu-dropdown {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n z-index: 100;\r\n padding: 16px;\r\n background: var(--st-color-surface);\r\n color: var(--st-color-text);\r\n /* The panel has its own surface: items in it never take the bar's nav colours. */\r\n --st-nav-color: initial;\r\n --st-nav-hover-bg: initial;\r\n border: 1px solid var(--st-color-border);\r\n border-radius: var(--st-radius-sm);\r\n box-shadow: 0 4px 16px var(--st-shadow-color-sm);\r\n opacity: 0;\r\n visibility: hidden;\r\n transform: translateY(-10px);\r\n /* visibility flips at once on open (so keyboard focus can move into the panel on the same\r\n frame) and only after the 0.3s fade on close. */\r\n transition:\r\n opacity 0.3s ease,\r\n transform 0.3s ease,\r\n visibility 0s linear 0.3s;\r\n pointer-events: none;\r\n }\r\n\r\n .menu-dropdown.align-right {\r\n left: auto;\r\n right: 0;\r\n }\r\n\r\n .menu-dropdown.show {\r\n opacity: 1;\r\n visibility: visible;\r\n transform: translateY(0);\r\n pointer-events: auto;\r\n transition-delay: 0s;\r\n }\r\n\r\n /* Inline: the panel opens in the flow under its trigger and pushes what follows down, instead\r\n of floating — the source's .touch-device layout. st-header turns this on for its menu while\r\n the hamburger panel is showing. */\r\n :host([inline]) {\r\n display: block;\r\n }\r\n\r\n :host([inline]) .menu-title {\r\n width: 100%;\r\n justify-content: flex-start;\r\n }\r\n\r\n :host([inline]) .arrow {\r\n margin-left: auto;\r\n }\r\n\r\n :host([inline]) .menu-dropdown {\r\n display: none;\r\n position: relative;\r\n top: auto;\r\n left: auto;\r\n right: auto;\r\n width: 100%;\r\n box-sizing: border-box;\r\n box-shadow: none;\r\n opacity: 1;\r\n visibility: visible;\r\n transform: none;\r\n }\r\n\r\n :host([inline]) .menu-dropdown.show {\r\n display: block;\r\n pointer-events: auto;\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .menu-dropdown,\r\n .arrow {\r\n transition: none;\r\n }\r\n }\r\n `;\r\n\r\n /** Trigger label text (source: `title`, renamed because `title` is the native tooltip\r\n * attribute). Leave empty to show only `slot=\"icon\"`. */\r\n @property({ type: String })\r\n label = '';\r\n\r\n /** Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in\r\n * the source); with none it navigates. */\r\n @property({ type: String })\r\n href = '';\r\n\r\n @property({ type: String, attribute: 'icon-position' })\r\n iconPosition: 'left' | 'right' = 'left';\r\n\r\n /** Inline `width`/`height` of the `slot=\"icon\"` wrapper (source: `iconSize`, default `1.2rem`). */\r\n @property({ type: String, attribute: 'icon-size' })\r\n iconSize = '1.2rem';\r\n\r\n /** Inline `color` of the `slot=\"icon\"` wrapper (source: `iconColor`). */\r\n @property({ type: String, attribute: 'icon-color' })\r\n iconColor = 'currentColor';\r\n\r\n /** Which edge of the trigger the panel lines up with. */\r\n @property({ type: String })\r\n align: 'left' | 'right' = 'left';\r\n\r\n /** `target` of an `href` trigger (source default `_self`). */\r\n @property({ type: String })\r\n target = '_self';\r\n\r\n /** Extra class(es) on the trigger (source: `className`; a `class` on `st-dropdown` styles the host). */\r\n @property({ type: String, attribute: 'trigger-class-name' })\r\n triggerClassName = '';\r\n\r\n /** Extra class(es) on the panel (source: `itemGroupClassName`). */\r\n @property({ type: String, attribute: 'item-group-class-name' })\r\n itemGroupClassName = '';\r\n\r\n /** Unused, as in the source (`itemClassName` is never read there); kept for prop parity. */\r\n @property({ type: String, attribute: 'item-class-name' })\r\n itemClassName = '';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n disabled = false;\r\n\r\n /** Highlights the trigger as the current section (e.g. the current page is one of its items). */\r\n @property({ type: Boolean, reflect: true })\r\n active = false;\r\n\r\n /** Opens the panel in the flow under the trigger instead of floating over the page (see the\r\n * styles). `st-header` sets this on its own menu's dropdowns while its hamburger panel shows. */\r\n @property({ type: Boolean, reflect: true })\r\n inline = false;\r\n\r\n /** Whether the panel is showing. Follows user toggles; may also be set from outside. */\r\n @property({ type: Boolean, reflect: true })\r\n open = false;\r\n\r\n /** Whether the default slot has content — the source's `children` check. */\r\n @state() private hasContent = false;\r\n\r\n /** Whether `slot=\"icon\"` has content. */\r\n @state() private hasIcon = false;\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n document.addEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n window.addEventListener('keydown', this.closeOnEscape);\r\n }\r\n\r\n disconnectedCallback(): void {\r\n document.removeEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n window.removeEventListener('keydown', this.closeOnEscape);\r\n if (Dropdown.openDropdown === this) Dropdown.openDropdown = null;\r\n super.disconnectedCallback();\r\n }\r\n\r\n protected updated(changed: Map<string, unknown>): void {\r\n if (!changed.has('open')) return;\r\n if (this.open) {\r\n const previous = Dropdown.openDropdown;\r\n Dropdown.openDropdown = this;\r\n if (previous && previous !== this) previous.setOpen(false);\r\n } else if (Dropdown.openDropdown === this) {\r\n Dropdown.openDropdown = null;\r\n }\r\n }\r\n\r\n private setOpen(open: boolean): void {\r\n if (this.open === open) return;\r\n this.open = open;\r\n this.dispatchEvent(new CustomEvent<DropdownToggleEventDetail>('dropdown-toggle', { detail: { open }, bubbles: true, composed: true }));\r\n }\r\n\r\n private closeOnOutsideMouseDown = (event: Event): void => {\r\n if (this.open && !event.composedPath().includes(this)) this.setOpen(false);\r\n };\r\n\r\n private closeOnEscape = (event: KeyboardEvent): void => {\r\n if (!this.open || event.key !== 'Escape') return;\r\n const focusWasInside = event.composedPath().includes(this);\r\n this.setOpen(false);\r\n if (focusWasInside) this.trigger()?.focus();\r\n };\r\n\r\n private trigger(): HTMLElement | null {\r\n return this.renderRoot.querySelector<HTMLElement>('.menu-title');\r\n }\r\n\r\n /** Keyboard-reachable entries in the panel, in order: menu items (they delegate focus to their\r\n * own link) plus any plain links/buttons/tabbable elements a caller slots in. */\r\n private panelItems(): HTMLElement[] {\r\n const slot = this.renderRoot.querySelector<HTMLSlotElement>('.menu-dropdown slot');\r\n if (!slot) return [];\r\n const selector =\r\n 'st-menu-item, st-menu-grid-item, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\r\n const items: HTMLElement[] = [];\r\n for (const el of slot.assignedElements({ flatten: true })) {\r\n if (el.matches(selector)) items.push(el as HTMLElement);\r\n items.push(...Array.from(el.querySelectorAll<HTMLElement>(selector)));\r\n }\r\n return items;\r\n }\r\n\r\n /** Moves focus into the panel once it has become visible (it is `visibility: hidden` until the\r\n * `show` class lands, and hidden elements can't take focus). */\r\n private focusItem(pick: (items: HTMLElement[]) => HTMLElement | undefined): void {\r\n void this.updateComplete.then(() => pick(this.panelItems())?.focus());\r\n }\r\n\r\n /** Enter/Space/ArrowDown open the panel and focus its first entry; ArrowUp its last. */\r\n private onTitleKeyDown = (event: KeyboardEvent): void => {\r\n if (!this.hasContent || this.disabled) return;\r\n if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.setOpen(true);\r\n this.focusItem((items) => items[0]);\r\n } else if (event.key === 'ArrowUp') {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this.setOpen(true);\r\n this.focusItem((items) => items[items.length - 1]);\r\n }\r\n };\r\n\r\n /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */\r\n private onPanelKeyDown = (event: KeyboardEvent): void => {\r\n if (event.key === 'Tab') {\r\n this.setOpen(false);\r\n return;\r\n }\r\n if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\r\n const items = this.panelItems();\r\n if (items.length === 0) return;\r\n event.preventDefault();\r\n event.stopPropagation();\r\n const path = event.composedPath();\r\n const current = items.findIndex((item) => path.includes(item));\r\n const last = items.length - 1;\r\n const next =\r\n event.key === 'Home'\r\n ? 0\r\n : event.key === 'End'\r\n ? last\r\n : event.key === 'ArrowDown'\r\n ? current < 0 || current === last ? 0 : current + 1\r\n : current <= 0 ? last : current - 1;\r\n items[next].focus();\r\n };\r\n\r\n private onTitleClick = (event: Event): void => {\r\n event.stopPropagation();\r\n if (!this.hasContent) return;\r\n event.preventDefault();\r\n this.setOpen(!this.open);\r\n };\r\n\r\n /** A click anywhere inside the panel closes it, as in the source. */\r\n private onPanelClick = (): void => {\r\n this.setOpen(false);\r\n };\r\n\r\n private onContentSlotChange = (event: Event): void => {\r\n this.hasContent = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).some(\r\n (node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim()\r\n );\r\n };\r\n\r\n private onIconSlotChange = (event: Event): void => {\r\n this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n };\r\n\r\n render() {\r\n const icon = html`<span\r\n class=\"icon ${this.iconPosition === 'left' ? 'icon-left' : 'icon-right'}\"\r\n ?hidden=${!this.hasIcon}\r\n style=\"width:${this.iconSize};height:${this.iconSize};color:${this.iconColor}\"\r\n ><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot\r\n ></span>`;\r\n const titleContent = html`\r\n ${this.iconPosition === 'left' ? icon : nothing} ${this.label ? html`<span part=\"label\">${this.label}</span>` : nothing}\r\n ${this.iconPosition === 'right' ? icon : nothing}\r\n ${this.hasContent ? html`<span class=\"arrow\" part=\"caret\" aria-hidden=\"true\">▼</span>` : nothing}\r\n `;\r\n const titleClass = `menu-title ${this.triggerClassName} ${this.open ? 'active' : ''}`;\r\n\r\n return html`\r\n <div class=\"menu\" part=\"menu\">\r\n ${this.href\r\n ? html`\r\n <a\r\n part=\"trigger\"\r\n class=${titleClass}\r\n href=${this.href}\r\n target=${this.target}\r\n aria-haspopup=${this.hasContent ? 'true' : 'false'}\r\n aria-expanded=${this.open}\r\n aria-disabled=${this.disabled ? 'true' : nothing}\r\n @click=${this.onTitleClick}\r\n @keydown=${this.onTitleKeyDown}\r\n >\r\n ${titleContent}\r\n </a>\r\n `\r\n : html`\r\n <button\r\n part=\"trigger\"\r\n class=${titleClass}\r\n type=\"button\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=${this.open}\r\n ?disabled=${this.disabled}\r\n @click=${this.onTitleClick}\r\n @keydown=${this.onTitleKeyDown}\r\n >\r\n ${titleContent}\r\n </button>\r\n `}\r\n <div\r\n part=\"panel\"\r\n class=\"menu-dropdown align-${this.align} ${this.itemGroupClassName} ${this.open ? 'show' : ''}\"\r\n role=\"menu\"\r\n @click=${this.onPanelClick}\r\n @keydown=${this.onPanelKeyDown}\r\n >\r\n <slot @slotchange=${this.onContentSlotChange}></slot>\r\n </div>\r\n </div>\r\n `;\r\n }\r\n}\r\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';\r\nimport { customElement, property } from 'lit/decorators.js';\r\n\r\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport { sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\r\nimport '../markdown';\r\n\r\n/**\r\n * A long-form article section: centered title/subtitle, an optional featured image with caption,\r\n * then Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\r\n * `content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\r\n * block works without a fetch); `content-src` wins when both are set.\r\n */\r\n@customElement('st-content-block')\r\nexport class ContentBlock extends LitElement {\r\n static styles = css`\r\n ${controlBaseStyles}\r\n\r\n :host {\r\n display: block;\r\n ${fontFamilyStyles}\r\n padding: var(--st-space-24);\r\n background: var(--st-color-surface);\r\n color: var(--st-color-text-strong);\r\n }\r\n\r\n :host([inverted]) {\r\n background: var(--st-color-text-strong);\r\n color: var(--st-color-on-solid);\r\n }\r\n\r\n .container {\r\n max-width: var(--st-cms-container-max);\r\n padding: 0 var(--st-space-48);\r\n margin: 0 auto;\r\n }\r\n\r\n .header {\r\n ${sectionHeaderStyles}\r\n }\r\n\r\n .title {\r\n ${sectionTitleStyles}\r\n line-height: 1.1;\r\n }\r\n\r\n .subtitle {\r\n ${sectionSubtitleStyles}\r\n }\r\n\r\n :host([inverted]) .title,\r\n :host([inverted]) .subtitle {\r\n color: inherit;\r\n }\r\n\r\n .featured-image {\r\n margin: 0 0 var(--st-space-48);\r\n border-radius: var(--st-radius-lg);\r\n overflow: hidden;\r\n }\r\n\r\n .featured-image img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n }\r\n\r\n figcaption {\r\n padding: var(--st-space-12);\r\n text-align: center;\r\n color: var(--st-color-text-muted);\r\n font-size: var(--st-text-xs);\r\n }\r\n\r\n st-markdown {\r\n color: var(--st-color-text);\r\n font-size: var(--st-text-xl);\r\n }\r\n\r\n :host([inverted]) st-markdown {\r\n color: inherit;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n :host {\r\n padding: var(--st-space-48) var(--st-space-24);\r\n }\r\n\r\n .container {\r\n padding: 0;\r\n }\r\n }\r\n `;\r\n\r\n @property({ type: String })\r\n title = '';\r\n\r\n @property({ type: String })\r\n subtitle = '';\r\n\r\n /** URL of a Markdown file. */\r\n @property({ type: String, attribute: 'content-src' })\r\n contentSrc = '';\r\n\r\n /** Inline Markdown, used when `content-src` is not set. */\r\n @property({ type: String })\r\n content = '';\r\n\r\n @property({ type: String, attribute: 'image-src' })\r\n imageSrc = '';\r\n\r\n @property({ type: String, attribute: 'image-alt' })\r\n imageAlt = '';\r\n\r\n @property({ type: String, attribute: 'image-caption' })\r\n imageCaption = '';\r\n\r\n @property({ type: Boolean, reflect: true })\r\n inverted = false;\r\n\r\n render() {\r\n return html`\r\n <section class=\"container\" part=\"container\">\r\n <div class=\"header\" part=\"header\">\r\n ${this.title ? html`<div class=\"title\" part=\"title\">${this.title}</div>` : nothing}\r\n ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\r\n </div>\r\n ${this.imageSrc\r\n ? html`\r\n <figure class=\"featured-image\" part=\"image\">\r\n <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />\r\n ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}\r\n </figure>\r\n `\r\n : nothing}\r\n <st-markdown part=\"body\" .src=${this.contentSrc} .content=${this.content}></st-markdown>\r\n </section>\r\n `;\r\n }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAajC,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAiFL,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;AA7Ha,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,QAkBhB,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,GAhFf,aAiFX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAnFf,aAoFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GAvFzC,aAwFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3Ff,aA4FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GA9FvC,aA+FX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAjGvC,aAkGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GApG3C,aAqGX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvG/B,aAwGX;AAxGW,eAAN;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB;","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 * @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 padding: var(--st-section-space-m) var(--st-space-24);\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-color-text-strong));\n color: var(--st-color-on-solid);\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); }\n :host([spacing-above='s']) { padding-top: var(--st-section-space-s); }\n :host([spacing-above='l']) { padding-top: var(--st-section-space-l); }\n :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl); }\n :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl); }\n\n :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none); }\n :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s); }\n :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l); }\n :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl); }\n :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl); }\n\n :host([width='full']) {\n padding-left: 0;\n padding-right: 0;\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 :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 padding-left: var(--st-space-20);\n padding-right: 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;AAiBjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AAqIL,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;AAhLa,QACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBf,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;AAwB3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApIf,QAqIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvIf,QAwIX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1If,QA2IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9I9B,QA+IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GAlJ1D,QAmJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GAtJ1D,QAuJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1J9B,QA2JX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GA9J3D,QA+JX;AA/JW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}