@dataengineeringformachinelearning/viking-ui 1.0.1 → 3.0.0-alpha.2

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 (129) hide show
  1. package/README.md +180 -37
  2. package/dist/deml-components.css +1122 -0
  3. package/dist/design-tokens.css +688 -0
  4. package/dist/elements/button/viking-button.d.ts +14 -0
  5. package/dist/elements/card/viking-card.d.ts +8 -0
  6. package/dist/elements/core/dom.d.ts +4 -0
  7. package/dist/elements/core/styles.d.ts +2 -0
  8. package/dist/elements/modal/viking-modal.d.ts +15 -0
  9. package/dist/fonts/inter/InterVariable-Italic.woff2 +0 -0
  10. package/dist/fonts/inter/InterVariable.woff2 +0 -0
  11. package/dist/index.d.ts +1 -0
  12. package/dist/index.js +4051 -0
  13. package/dist/lib/core/brand-icons.d.ts +29 -0
  14. package/dist/lib/core/icons.d.ts +132 -0
  15. package/dist/lib/core/integration-brand-icons.d.ts +18 -0
  16. package/dist/lib/core/lucide-paths.generated.d.ts +90 -0
  17. package/dist/lib/site-drakkar/site-drakkar.config.d.ts +50 -0
  18. package/dist/lib/site-drakkar/suite-search-items.d.ts +17 -0
  19. package/dist/viking-components.css +1837 -0
  20. package/dist/viking-tokens.json +318 -0
  21. package/dist/viking-ui-elements.js +1750 -0
  22. package/dist/viking-ui.css +1 -0
  23. package/dist/web/badge/viking-badge-wc.d.ts +28 -0
  24. package/dist/web/button/viking-button-wc.d.ts +28 -0
  25. package/dist/web/callout/viking-callout-wc.d.ts +27 -0
  26. package/dist/web/card/viking-card-wc.d.ts +29 -0
  27. package/dist/web/core/base.d.ts +12 -0
  28. package/dist/web/core/dom.d.ts +11 -0
  29. package/dist/web/core/icons-inline.d.ts +7 -0
  30. package/dist/web/core/styles.d.ts +12 -0
  31. package/dist/web/core/types.d.ts +10 -0
  32. package/dist/web/field/viking-field-wc.d.ts +32 -0
  33. package/dist/web/index.d.ts +15 -0
  34. package/dist/web/input/viking-input-wc.d.ts +32 -0
  35. package/dist/web/modal/viking-modal-wc.d.ts +50 -0
  36. package/dist/web/search-palette/viking-search-palette-wc.d.ts +64 -0
  37. package/dist/web/select/viking-select-wc.d.ts +48 -0
  38. package/dist/web/suite-header/viking-suite-header-wc.d.ts +36 -0
  39. package/dist/web/suite-search-palette/viking-suite-search-palette-wc.d.ts +39 -0
  40. package/dist/web/theme-toggle/viking-theme-toggle-wc.d.ts +19 -0
  41. package/dist/web/types.d.ts +40 -0
  42. package/dist/web-components/index.d.ts +1 -0
  43. package/dist/web-components.js +1750 -0
  44. package/dist/widget.js +1182 -0
  45. package/package.json +89 -30
  46. package/src/assets/fonts/inter/InterVariable-Italic.woff2 +0 -0
  47. package/src/assets/fonts/inter/InterVariable.woff2 +0 -0
  48. package/src/elements/button/viking-button.ts +201 -0
  49. package/src/elements/card/viking-card.ts +60 -0
  50. package/src/elements/core/dom.ts +33 -0
  51. package/src/elements/core/styles.ts +28 -0
  52. package/src/elements/modal/viking-modal.ts +154 -0
  53. package/src/index.ts +1 -0
  54. package/src/lib/core/brand-icons.ts +62 -0
  55. package/src/lib/core/icons.ts +206 -0
  56. package/src/lib/core/integration-brand-icons.ts +77 -0
  57. package/src/lib/core/lucide-paths.generated.ts +130 -0
  58. package/src/lib/site-drakkar/site-drakkar.config.ts +295 -0
  59. package/src/lib/site-drakkar/suite-search-items.ts +246 -0
  60. package/src/styles/_buttons.scss +301 -0
  61. package/src/styles/_component-primitives.scss +183 -0
  62. package/src/styles/_drakkar-buttons.scss +85 -0
  63. package/src/styles/_fonts.scss +22 -0
  64. package/src/styles/_forms.scss +66 -0
  65. package/src/styles/_input.scss +106 -0
  66. package/src/styles/_layout-enforcement.scss +166 -0
  67. package/src/styles/_layout-rhythm.scss +158 -0
  68. package/src/styles/_legacy-aliases.scss +212 -0
  69. package/src/styles/_series-colors.scss +24 -0
  70. package/src/styles/_static-primitives.scss +857 -0
  71. package/src/styles/_typography.scss +87 -0
  72. package/src/styles/_variables.scss +527 -0
  73. package/src/styles/components/a11y.scss +90 -0
  74. package/src/styles/components/badges.scss +102 -0
  75. package/src/styles/components/extracted-utilities.scss +459 -0
  76. package/src/styles/components/footer.scss +155 -0
  77. package/src/styles/components/icon-heading.scss +47 -0
  78. package/src/styles/components/icon-inline.scss +78 -0
  79. package/src/styles/components/layout.scss +59 -0
  80. package/src/styles/components/utilities.scss +131 -0
  81. package/src/styles/components/viking-inspired.scss +204 -0
  82. package/src/styles/components/whitepaper-cta.scss +130 -0
  83. package/src/styles/components-bundle.scss +9 -0
  84. package/src/styles/components.scss +175 -0
  85. package/src/styles/deml-components.scss +10 -0
  86. package/src/styles/index.scss +8 -0
  87. package/src/styles/layout-shell.scss +39 -11
  88. package/src/styles/page-shell.scss +663 -33
  89. package/src/styles/static-navbar.scss +862 -146
  90. package/src/styles/surfaces/backend.scss +142 -0
  91. package/src/styles/surfaces/docs-global.scss +73 -0
  92. package/src/styles/surfaces/docs-shell.scss +412 -0
  93. package/src/styles/surfaces/docs-showcase.scss +1051 -0
  94. package/src/styles/surfaces/marketing-cta.scss +62 -0
  95. package/src/styles/surfaces/marketing-docs-bento.scss +67 -0
  96. package/src/styles/surfaces/marketing-global.scss +748 -0
  97. package/src/styles/surfaces/marketing-landing.scss +1260 -0
  98. package/src/styles/surfaces/marketing-publication.scss +535 -0
  99. package/src/styles/surfaces/marketing-theme.scss +14 -0
  100. package/src/styles/surfaces/swagger-ui.scss +921 -0
  101. package/src/styles/tokens-export.scss +18 -0
  102. package/src/styles/tokens.scss +5 -0
  103. package/src/styles/viking-ui-bundle.scss +21 -2
  104. package/src/styles/viking-ui.scss +213 -51
  105. package/src/tokens/viking-tokens.json +318 -0
  106. package/src/web/badge/viking-badge-wc.ts +116 -0
  107. package/src/web/button/viking-button-wc.ts +165 -0
  108. package/src/web/callout/viking-callout-wc.ts +105 -0
  109. package/src/web/card/viking-card-wc.ts +66 -0
  110. package/src/web/core/base.ts +56 -0
  111. package/src/web/core/dom.ts +53 -0
  112. package/src/web/core/icons-inline.ts +44 -0
  113. package/src/web/core/styles.ts +1138 -0
  114. package/src/web/core/types.ts +19 -0
  115. package/src/web/field/viking-field-wc.ts +154 -0
  116. package/src/web/index.ts +73 -0
  117. package/src/web/input/viking-input-wc.ts +211 -0
  118. package/src/web/modal/viking-modal-wc.ts +187 -0
  119. package/src/web/search-palette/viking-search-palette-wc.ts +494 -0
  120. package/src/web/select/viking-select-wc.ts +218 -0
  121. package/src/web/suite-header/viking-suite-header-wc.ts +714 -0
  122. package/src/web/suite-search-palette/viking-suite-search-palette-wc.ts +234 -0
  123. package/src/web/theme-toggle/viking-theme-toggle-wc.ts +139 -0
  124. package/src/web/types.ts +37 -0
  125. package/src/web-components/index.ts +1 -0
  126. package/fesm2022/dataengineeringformachinelearning-viking-ui.mjs +0 -5949
  127. package/fesm2022/dataengineeringformachinelearning-viking-ui.mjs.map +0 -1
  128. package/types/dataengineeringformachinelearning-viking-ui.d.ts +0 -1374
  129. package/viking.manifest.json +0 -189
package/dist/index.js ADDED
@@ -0,0 +1,4051 @@
1
+ // src/web/core/base.ts
2
+ var attachShadowStyles = (shadow, css) => {
3
+ if ("adoptedStyleSheets" in Document.prototype && "replaceSync" in CSSStyleSheet.prototype) {
4
+ const sheet = new CSSStyleSheet();
5
+ sheet.replaceSync(css);
6
+ shadow.adoptedStyleSheets = [sheet];
7
+ return;
8
+ }
9
+ const style = document.createElement("style");
10
+ style.textContent = css;
11
+ shadow.append(style);
12
+ };
13
+ var readBoolAttr = (el, name) => el.hasAttribute(name) && el.getAttribute(name) !== "false";
14
+ var setFormValue = (internals, value) => {
15
+ if (internals && typeof internals.setFormValue === "function") {
16
+ internals.setFormValue(value);
17
+ }
18
+ };
19
+ var attachElementInternals = (el) => {
20
+ const attachInternals = el.attachInternals;
21
+ return typeof attachInternals === "function" ? attachInternals.call(el) : null;
22
+ };
23
+ var showModalDialog = (dialog) => {
24
+ if (dialog && typeof dialog.showModal === "function" && !dialog.open) {
25
+ dialog.showModal();
26
+ }
27
+ };
28
+ var closeModalDialog = (dialog) => {
29
+ if (dialog && typeof dialog.close === "function" && dialog.open) {
30
+ dialog.close();
31
+ }
32
+ };
33
+
34
+ // src/web/core/dom.ts
35
+ var HTMLElementBase = typeof HTMLElement === "undefined" ? class {
36
+ } : HTMLElement;
37
+ var vikingWcUid = (prefix) => `${prefix}-${Math.random().toString(36).slice(2, 9)}`;
38
+ var escapeHtml = (value) => {
39
+ const entities = {
40
+ "&": "&",
41
+ "<": "&lt;",
42
+ ">": "&gt;",
43
+ '"': "&quot;",
44
+ "'": "&#39;"
45
+ };
46
+ return value.replace(
47
+ /[&<>"']/g,
48
+ (character) => entities[character] ?? character
49
+ );
50
+ };
51
+ var modKeyLabel = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.platform) ? "\u2318" : "Ctrl";
52
+ var defineCustomElement = (tag, ctor) => {
53
+ if (typeof customElements === "undefined" || customElements.get(tag)) {
54
+ return;
55
+ }
56
+ customElements.define(tag, ctor);
57
+ };
58
+ var defineCustomElementAlias = (tag, ctor) => {
59
+ if (typeof customElements === "undefined" || customElements.get(tag)) {
60
+ return;
61
+ }
62
+ customElements.define(tag, class extends ctor {
63
+ });
64
+ };
65
+
66
+ // src/lib/core/lucide-paths.generated.ts
67
+ var LUCIDE_ICON_PATHS = {
68
+ "alert-circle": '<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>',
69
+ "alert-triangle": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
70
+ "arrow-left": '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
71
+ "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
72
+ "arrow-up-right": '<path d="M7 7h10v10"/><path d="M7 17 17 7"/>',
73
+ "bar-chart": '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
74
+ bell: '<path d="M10.268 21a2 2 0 0 0 3.464 0"/><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"/>',
75
+ bold: '<path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"/>',
76
+ bolt: '<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>',
77
+ brain: '<path d="M12 18V5"/><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"/><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"/><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"/><path d="M18 18a4 4 0 0 0 2-7.464"/><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"/><path d="M6 18a4 4 0 0 1-2-7.464"/><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"/>',
78
+ bug: '<path d="M12 20v-9"/><path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/><path d="M14.12 3.88 16 2"/><path d="M21 21a4 4 0 0 0-3.81-4"/><path d="M21 5a4 4 0 0 1-3.55 3.97"/><path d="M22 13h-4"/><path d="M3 21a4 4 0 0 1 3.81-4"/><path d="M3 5a4 4 0 0 0 3.55 3.97"/><path d="M6 13H2"/><path d="m8 2 1.88 1.88"/><path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/>',
79
+ building: '<path d="M12 10h.01"/><path d="M12 14h.01"/><path d="M12 6h.01"/><path d="M16 10h.01"/><path d="M16 14h.01"/><path d="M16 6h.01"/><path d="M8 10h.01"/><path d="M8 14h.01"/><path d="M8 6h.01"/><path d="M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/><rect x="4" y="2" width="16" height="20" rx="2"/>',
80
+ calendar: '<path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/>',
81
+ check: '<path d="M20 6 9 17l-5-5"/>',
82
+ "check-circle": '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
83
+ "chevron-down": '<path d="m6 9 6 6 6-6"/>',
84
+ "chevron-left": '<path d="m15 18-6-6 6-6"/>',
85
+ "chevron-right": '<path d="m9 18 6-6-6-6"/>',
86
+ "chevron-up": '<path d="m18 15-6-6-6 6"/>',
87
+ chip: '<path d="M12 20v2"/><path d="M12 2v2"/><path d="M17 20v2"/><path d="M17 2v2"/><path d="M2 12h2"/><path d="M2 17h2"/><path d="M2 7h2"/><path d="M20 12h2"/><path d="M20 17h2"/><path d="M20 7h2"/><path d="M7 20v2"/><path d="M7 2v2"/><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1"/>',
88
+ clock: '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>',
89
+ cloud: '<path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"/>',
90
+ cookie: '<path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"/><path d="M8.5 8.5v.01"/><path d="M16 15.5v.01"/><path d="M12 12v.01"/><path d="M11 17v.01"/><path d="M7 14v.01"/>',
91
+ copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
92
+ "dots-horizontal": '<circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="5" cy="12" r="1" fill="currentColor" stroke="none"/>',
93
+ "dots-vertical": '<circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="12" cy="5" r="1" fill="currentColor" stroke="none"/><circle cx="12" cy="19" r="1" fill="currentColor" stroke="none"/>',
94
+ download: '<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/>',
95
+ external: '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
96
+ eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
97
+ "eye-off": '<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/>',
98
+ file: '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/>',
99
+ filter: '<path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/>',
100
+ fingerprint: '<path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path d="M2 12a10 10 0 0 1 18-6"/><path d="M2 16h.01"/><path d="M21.8 16c.2-2 .131-5.354 0-6"/><path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"/><path d="M8.65 22c.21-.66.45-1.32.57-2"/><path d="M9 6.8a6 6 0 0 1 9 5.2v2"/>',
101
+ folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
102
+ globe: '<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>',
103
+ "grip-vertical": '<circle cx="9" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="9" cy="5" r="1" fill="currentColor" stroke="none"/><circle cx="9" cy="19" r="1" fill="currentColor" stroke="none"/><circle cx="15" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="15" cy="5" r="1" fill="currentColor" stroke="none"/><circle cx="15" cy="19" r="1" fill="currentColor" stroke="none"/>',
104
+ heart: '<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>',
105
+ home: '<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
106
+ image: '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
107
+ info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
108
+ insights: '<path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m19 9-5 5-4-4-3 3"/>',
109
+ italic: '<line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/>',
110
+ key: '<path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/>',
111
+ link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
112
+ list: '<path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/>',
113
+ "list-ordered": '<path d="M11 5h10"/><path d="M11 12h10"/><path d="M11 19h10"/><path d="M4 4h1v5"/><path d="M4 9h2"/><path d="M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"/>',
114
+ loader: '<path d="M21 12a9 9 0 1 1-6.219-8.56"/>',
115
+ lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
116
+ "log-in": '<path d="m10 17 5-5-5-5"/><path d="M15 12H3"/><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>',
117
+ "log-out": '<path d="m16 17 5-5-5-5"/><path d="M21 12H9"/><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>',
118
+ mail: '<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/>',
119
+ menu: '<path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/>',
120
+ minus: '<path d="M5 12h14"/>',
121
+ moon: '<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/>',
122
+ network: '<rect x="16" y="16" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="9" y="2" width="6" height="6" rx="1"/><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"/><path d="M12 12V8"/>',
123
+ paperclip: '<path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"/>',
124
+ pencil: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
125
+ phone: '<path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/>',
126
+ play: '<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" fill="currentColor" stroke="none"/>',
127
+ plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
128
+ policy: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
129
+ refresh: '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
130
+ rocket: '<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"/><path d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"/>',
131
+ search: '<path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/>',
132
+ "search-off": '<path d="m13.5 8.5-5 5"/><path d="m8.5 8.5 5 5"/><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
133
+ send: '<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>',
134
+ server: '<rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/>',
135
+ settings: '<path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/>',
136
+ shield: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
137
+ ship: '<path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>',
138
+ sparkle: '<path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/>',
139
+ speed: '<path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>',
140
+ star: '<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>',
141
+ sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>',
142
+ terminal: '<path d="M12 19h8"/><path d="m4 17 6-6-6-6"/>',
143
+ trash: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
144
+ "trending-up": '<path d="M16 7h6v6"/><path d="m22 7-8.5 8.5-5-5L2 17"/>',
145
+ underline: '<path d="M6 4v6a6 6 0 0 0 12 0V4"/><line x1="4" x2="20" y1="20" y2="20"/>',
146
+ upload: '<path d="M12 3v12"/><path d="m17 8-5-5-5 5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>',
147
+ user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
148
+ "user-shield": '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M6.376 18.91a6 6 0 0 1 11.249.003"/><circle cx="12" cy="11" r="4"/>',
149
+ x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>'
150
+ };
151
+
152
+ // src/lib/core/brand-icons.ts
153
+ var VIKING_BRAND_ICON_PATHS = {
154
+ /** Primary bar-chart mark in rounded frame (outline). */
155
+ deml: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 17V13M12 17V8M16 17V11"/>',
156
+ /** Compact monogram for favicons and dense Drakkar shell. */
157
+ "deml-compact": '<rect x="4" y="4" width="16" height="16" rx="3"/><path d="M9 16V12M12 16V9M15 16V13"/>',
158
+ /** Lockup mark with baseline accent bar. */
159
+ "deml-lockup": '<rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 17V13M12 17V8M16 17V11"/><path d="M3 20h18"/>'
160
+ };
161
+ var VIKING_DRAKKAR_ICON_PATHS = {
162
+ /** Primary Drakkar longship mark (outline). */
163
+ drakkar: '<path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>',
164
+ /** Compact tile for favicons and dense navbar chrome. */
165
+ "drakkar-compact": '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>',
166
+ /** Lockup mark with baseline accent bar. */
167
+ "drakkar-lockup": '<path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M3 21h18"/>'
168
+ };
169
+ var VIKING_BRAND_ICON_FILLED_PATHS = {
170
+ deml: '<path d="M5 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4zM8 13h2.5v4H8v-4zM12 8h2.5v9H12V8zM16 11h2.5v6H16v-6z"/>',
171
+ "deml-compact": '<path d="M6 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5zM9 12h1.5v4H9v-4zM12 9h1.5v7H12V9zM15 11h1.5v5H15v-5z"/>',
172
+ "deml-lockup": '<path d="M4 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4zM8 13h2.5v4H8v-4zM12 8h2.5v9H12V8zM16 11h2.5v6H16v-6z"/><rect x="3" y="19" width="18" height="2" rx="1"/>'
173
+ };
174
+ var VIKING_DRAKKAR_ICON_FILLED_PATHS = {
175
+ drakkar: '<path d="M7 5h10a2 2 0 0 1 2 2v3.5L20.8 14.2l-7.8-3.5a1.8 1.8 0 0 0-1.4 0L3.2 14.2a10.5 10.5 0 0 0 2.6 7.2L5.2 13V7a2 2 0 0 0-2-2z"/><rect x="10.85" y="2" width="2.3" height="12" rx="0.4"/>',
176
+ "drakkar-compact": '<path d="M3 3h18a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M7.5 12.5 12 9.8l4.5 2.7v2.2c0 .8-.5 1.4-1.2 1.7L12 17.8l-3.3-1.6c-.7-.3-1.2-.9-1.2-1.7v-2.2z"/><rect x="11" y="6" width="2" height="5.5" rx="0.35"/>',
177
+ "drakkar-lockup": '<path d="M7 5h10a2 2 0 0 1 2 2v3.5L20.8 14.2l-7.8-3.5a1.8 1.8 0 0 0-1.4 0L3.2 14.2a10.5 10.5 0 0 0 2.6 7.2L5.2 13V7a2 2 0 0 0-2-2z"/><rect x="10.85" y="2" width="2.3" height="12" rx="0.4"/><rect x="3" y="20" width="18" height="2" rx="1"/>'
178
+ };
179
+ var VIKING_BRAND_ICON_NAMES_LIST = Object.keys(
180
+ VIKING_BRAND_ICON_PATHS
181
+ );
182
+ var VIKING_DRAKKAR_ICON_NAMES_LIST = Object.keys(
183
+ VIKING_DRAKKAR_ICON_PATHS
184
+ );
185
+
186
+ // src/lib/core/integration-brand-icons.ts
187
+ var VIKING_INTEGRATION_BRAND_COLORS = {
188
+ kubernetes: "#326CE5",
189
+ tensorflow: "#FF6F00",
190
+ pytorch: "#EE4C2C",
191
+ "apache-spark": "#E25A1C",
192
+ databricks: "#FF3621",
193
+ "aws-redshift": "#8C4FFF"
194
+ };
195
+ var VIKING_INTEGRATION_BRAND_NAMES = Object.keys(
196
+ VIKING_INTEGRATION_BRAND_COLORS
197
+ );
198
+ var VIKING_INTEGRATION_BRAND_PATHS = {
199
+ kubernetes: "M10.204 14.35l.007.01-.999 2.413a5.171 5.171 0 0 1-2.075-2.597l2.578-.437.004.005a.44.44 0 0 1 .484.606zm-.833-2.129a.44.44 0 0 0 .173-.756l.002-.011L7.585 9.7a5.143 5.143 0 0 0-.73 3.255l2.514-.725.002-.009zm1.145-1.98a.44.44 0 0 0 .699-.337l.01-.005.15-2.62a5.144 5.144 0 0 0-3.01 1.442l2.147 1.523.004-.002zm.76 2.75l.723.349.722-.347.18-.78-.5-.623h-.804l-.5.623.179.779zm1.5-3.095a.44.44 0 0 0 .7.336l.008.003 2.134-1.513a5.188 5.188 0 0 0-2.992-1.442l.148 2.615.002.001zm10.876 5.97l-5.773 7.181a1.6 1.6 0 0 1-1.248.594l-9.261.003a1.6 1.6 0 0 1-1.247-.596l-5.776-7.18a1.583 1.583 0 0 1-.307-1.34L2.1 5.573c.108-.47.425-.864.863-1.073L11.305.513a1.606 1.606 0 0 1 1.385 0l8.345 3.985c.438.209.755.604.863 1.073l2.062 8.955c.108.47-.005.963-.308 1.34zm-3.289-2.057c-.042-.01-.103-.026-.145-.034-.174-.033-.315-.025-.479-.038-.35-.037-.638-.067-.895-.148-.105-.04-.18-.165-.216-.216l-.201-.059a6.45 6.45 0 0 0-.105-2.332 6.465 6.465 0 0 0-.936-2.163c.052-.047.15-.133.177-.159.008-.09.001-.183.094-.282.197-.185.444-.338.743-.522.142-.084.273-.137.415-.242.032-.024.076-.062.11-.089.24-.191.295-.52.123-.736-.172-.216-.506-.236-.745-.045-.034.027-.08.062-.111.088-.134.116-.217.23-.33.35-.246.25-.45.458-.673.609-.097.056-.239.037-.303.033l-.19.135a6.545 6.545 0 0 0-4.146-2.003l-.012-.223c-.065-.062-.143-.115-.163-.25-.022-.268.015-.557.057-.905.023-.163.061-.298.068-.475.001-.04-.001-.099-.001-.142 0-.306-.224-.555-.5-.555-.275 0-.499.249-.499.555l.001.014c0 .041-.002.092 0 .128.006.177.044.312.067.475.042.348.078.637.056.906a.545.545 0 0 1-.162.258l-.012.211a6.424 6.424 0 0 0-4.166 2.003 8.373 8.373 0 0 1-.18-.128c-.09.012-.18.04-.297-.029-.223-.15-.427-.358-.673-.608-.113-.12-.195-.234-.329-.349-.03-.026-.077-.062-.111-.088a.594.594 0 0 0-.348-.132.481.481 0 0 0-.398.176c-.172.216-.117.546.123.737l.007.005.104.083c.142.105.272.159.414.242.299.185.546.338.743.522.076.082.09.226.1.288l.16.143a6.462 6.462 0 0 0-1.02 4.506l-.208.06c-.055.072-.133.184-.215.217-.257.081-.546.11-.895.147-.164.014-.305.006-.48.039-.037.007-.09.02-.133.03l-.004.002-.007.002c-.295.071-.484.342-.423.608.061.267.349.429.645.365l.007-.001.01-.003.129-.029c.17-.046.294-.113.448-.172.33-.118.604-.217.87-.256.112-.009.23.069.288.101l.217-.037a6.5 6.5 0 0 0 2.88 3.596l-.09.218c.033.084.069.199.044.282-.097.252-.263.517-.452.813-.091.136-.185.242-.268.399-.02.037-.045.095-.064.134-.128.275-.034.591.213.71.248.12.556-.007.69-.282v-.002c.02-.039.046-.09.062-.127.07-.162.094-.301.144-.458.132-.332.205-.68.387-.897.05-.06.13-.082.215-.105l.113-.205a6.453 6.453 0 0 0 4.609.012l.106.192c.086.028.18.042.256.155.136.232.229.507.342.84.05.156.074.295.145.457.016.037.043.09.062.129.133.276.442.402.69.282.247-.118.341-.435.213-.71-.02-.039-.045-.096-.065-.134-.083-.156-.177-.261-.268-.398-.19-.296-.346-.541-.443-.793-.04-.13.007-.21.038-.294-.018-.022-.059-.144-.083-.202a6.499 6.499 0 0 0 2.88-3.622c.064.01.176.03.213.038.075-.05.144-.114.28-.104.266.039.54.138.87.256.154.06.277.128.448.173.036.01.088.019.13.028l.009.003.007.001c.297.064.584-.098.645-.365.06-.266-.128-.537-.423-.608zM16.4 9.701l-1.95 1.746v.005a.44.44 0 0 0 .173.757l.003.01 2.526.728a5.199 5.199 0 0 0-.108-1.674A5.208 5.208 0 0 0 16.4 9.7zm-4.013 5.325a.437.437 0 0 0-.404-.232.44.44 0 0 0-.372.233h-.002l-1.268 2.292a5.164 5.164 0 0 0 3.326.003l-1.27-2.296h-.01zm1.888-1.293a.44.44 0 0 0-.27.036.44.44 0 0 0-.214.572l-.003.004 1.01 2.438a5.15 5.15 0 0 0 2.081-2.615l-2.6-.44-.004.005z",
200
+ tensorflow: "M1.292 5.856L11.54 0v24l-4.095-2.378V7.603l-6.168 3.564.015-5.31zm21.43 5.311l-.014-5.31L12.46 0v24l4.095-2.378V14.87l3.092 1.788-.018-4.618-3.074-1.756V7.603l6.168 3.564z",
201
+ pytorch: "M12.005 0L4.952 7.053a9.865 9.865 0 000 14.022 9.866 9.866 0 0014.022 0c3.984-3.9 3.986-10.205.085-14.023l-1.744 1.743c2.904 2.905 2.904 7.634 0 10.538s-7.634 2.904-10.538 0-2.904-7.634 0-10.538l4.647-4.646.582-.665zm3.568 3.899a1.327 1.327 0 00-1.327 1.327 1.327 1.327 0 001.327 1.328A1.327 1.327 0 0016.9 5.226 1.327 1.327 0 0015.573 3.9z",
202
+ "apache-spark": "M10.812 0c-.425.013-.845.215-1.196.605a3.593 3.593 0 00-.493.722c-.355.667-.425 1.415-.556 2.143a551.9 551.9 0 00-.726 4.087c-.027.16-.096.227-.244.273C5.83 8.386 4.06 8.94 2.3 9.514c-.387.125-.773.289-1.114.506-1.042.665-1.196 1.753-.415 2.71.346.422.79.715 1.284.936 1.1.49 2.202.976 3.3 1.47.019.01.036.013.053.019h-.004l1.306.535c0 .023.002.045 0 .073-.2 2.03-.39 4.063-.58 6.095-.04.419-.012.831.134 1.23.317.87 1.065 1.148 1.881.701.372-.204.666-.497.937-.818 1.372-1.623 2.746-3.244 4.113-4.872.111-.133.205-.15.363-.098.349.117.697.231 1.045.347h.001c.02.012.045.02.073.03l.142.042c1.248.416 2.68.775 3.929 1.19.4.132.622.164 1.045.098.311-.048.592-.062.828-.236.602-.33.995-.957.988-1.682-.005-.427-.154-.813-.35-1.186-.82-1.556-1.637-3.113-2.461-4.666-.078-.148-.076-.243.037-.375 1.381-1.615 2.756-3.236 4.133-4.855.272-.32.513-.658.653-1.058.308-.878-.09-1.57-1-1.741a2.783 2.783 0 00-1.235.069c-1.974.521-3.947 1.041-5.918 1.57-.175.047-.26.015-.355-.144a353.08 353.08 0 00-2.421-4.018 4.61 4.61 0 00-.652-.849c-.371-.37-.802-.549-1.227-.536zm.172 3.703a.592.592 0 01.189.211c.87 1.446 1.742 2.89 2.609 4.338.07.118.135.16.277.121 1.525-.41 3.052-.813 4.579-1.217.367-.098.735-.193 1.103-.289a.399.399 0 01-.1.2c-1.259 1.48-2.516 2.962-3.779 4.438-.11.13-.12.22-.04.37.937 1.803 1.768 3.309 2.498 4.76l-3.696-1.019c-.538-.18-1.077-.358-1.615-.539-.163-.055-.25-.03-.36.1-1.248 1.488-2.504 2.97-3.759 4.454a.398.398 0 01-.18.132c.035-.378.068-.757.104-1.136.149-1.572.297-3.144.451-4.716-.03-.318.117-.405-.322-.545-1.493-.593-3.346-1.321-4.816-1.905a.595.595 0 01.24-.134c1.797-.57 3.595-1.14 5.394-1.705.127-.04.199-.092.211-.233.013-.148.05-.294.076-.441.241-1.363.483-2.726.726-4.088.068-.386.14-.771.21-1.157z",
203
+ databricks: "M.95 14.184L12 20.403l9.919-5.55v2.21L12 22.662l-10.484-5.96-.565.308v.77L12 24l11.05-6.218v-4.317l-.515-.309L12 19.118l-9.867-5.653v-2.21L12 16.805l11.05-6.218V6.32l-.515-.308L12 11.974 2.647 6.681 12 1.388l7.76 4.368.668-.411v-.566L12 0 .95 6.27v.72L12 13.207l9.919-5.55v2.26L12 15.52 1.516 9.56l-.565.308Z",
204
+ "aws-redshift": "M16.639 9.932a.822.822 0 0 1-.822-.82.823.823 0 0 1 1.645 0c0 .452-.37.82-.823.82m-2.086 4.994a.823.823 0 0 1-.822-.822.822.822 0 0 1 1.645 0 .822.822 0 0 1-.823.822m-5.004-.833a.822.822 0 1 1 .002-1.644.822.822 0 0 1-.002 1.644m-2.083 4.578a.823.823 0 0 1-.823-.82.823.823 0 0 1 1.645 0c0 .452-.37.82-.822.82m9.173-11.236a1.68 1.68 0 0 0-1.68 1.676c0 .566.285 1.066.718 1.37l-.782 1.982a1.674 1.674 0 0 0-1.923 1.104l-1.753-.398a1.675 1.675 0 0 0-3.348.103c0 .432.169.823.438 1.12l-.764 1.79c-.028-.001-.053-.008-.08-.008a1.68 1.68 0 0 0-1.68 1.676 1.68 1.68 0 0 0 3.36 0c0-.593-.312-1.112-.778-1.41l.674-1.579c.161.052.33.088.508.088.661 0 1.228-.386 1.502-.94l1.856.42a1.68 1.68 0 0 0 3.327-.325c0-.5-.224-.943-.574-1.25l.822-2.083c.053.005.104.016.157.016a1.68 1.68 0 0 0 1.68-1.676 1.68 1.68 0 0 0-1.68-1.676M12 23.145c-4.17 0-7.286-1.252-7.286-2.37V4.79C6.14 5.938 9.131 6.547 12 6.547c2.869 0 5.86-.609 7.286-1.756v15.983c0 1.12-3.116 2.37-7.286 2.37M12 .856c4.293 0 7.286 1.274 7.286 2.419 0 1.143-2.993 2.418-7.286 2.418-4.293 0-7.286-1.275-7.286-2.418C4.714 2.129 7.707.855 12 .855m8.143 2.419C20.143 1.147 15.947 0 12 0 8.052 0 3.857 1.147 3.857 3.274l.002.01h-.002v17.49C3.857 22.87 8.052 24 12 24c3.947 0 8.143-1.13 8.143-3.226V3.284h-.002l.002-.01"
205
+ };
206
+ var integrationBrandSvg = (name) => {
207
+ const fill = VIKING_INTEGRATION_BRAND_COLORS[name];
208
+ const d = VIKING_INTEGRATION_BRAND_PATHS[name];
209
+ return `<path fill="${fill}" d="${d}"/>`;
210
+ };
211
+ var VIKING_INTEGRATION_BRAND_SVGS = {
212
+ kubernetes: integrationBrandSvg("kubernetes"),
213
+ tensorflow: integrationBrandSvg("tensorflow"),
214
+ pytorch: integrationBrandSvg("pytorch"),
215
+ "apache-spark": integrationBrandSvg("apache-spark"),
216
+ databricks: integrationBrandSvg("databricks"),
217
+ "aws-redshift": integrationBrandSvg("aws-redshift")
218
+ };
219
+ var VIKING_INTEGRATION_ICON_PATHS = Object.fromEntries(
220
+ Object.entries(VIKING_INTEGRATION_BRAND_PATHS).map(([name, d]) => [name, `<path d="${d}"/>`])
221
+ );
222
+
223
+ // src/lib/core/icons.ts
224
+ var VIKING_CUSTOM_ICON_PATHS = {
225
+ hub: '<circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/>',
226
+ model: '<rect x="4" y="8" width="16" height="10" rx="2"/><path d="M8 8V6a4 4 0 0 1 8 0v2"/>',
227
+ google: '<path d="M12 11.2v2.4h6.6c-.3 1.5-1.8 4.4-6.6 4.4-4 0-7.2-3.3-7.2-7.3S8 3.4 12 3.4c2.3 0 3.9 1 4.8 1.8l3.2-3.1C17.5.8 14.9 0 12 0 5.4 0 0 5.4 0 12s5.4 12 12 12c6.9 0 11.5-4.8 11.5-11.6 0-.8-.1-1.4-.2-1.9H12z"/>',
228
+ apple: '<path d="M16.365 12.14c.02 2.53 2.21 3.38 2.23 3.39-.02.07-.35 1.21-1.16 2.4-.7 1.02-1.43 2.03-2.58 2.05-1.13.02-1.49-.67-2.78-.67-1.29 0-1.69.65-2.75.69-1.11.04-1.95-1.12-2.66-2.13-1.44-2.08-2.54-5.87-1.07-8.43.73-1.27 2.04-2.08 3.46-2.1 1.08-.02 2.1.72 2.78.72.67 0 2.14-.89 3.61-.76.61.03 2.33.25 3.44 1.88-.09.06-2.05 1.2-2.03 3.55M13.75 3.64c.59-.71 1-1.7.89-2.68-.86.03-1.9.57-2.52 1.28-.55.63-1.03 1.65-.9 2.62.95.07 1.92-.49 2.53-1.22"/>'
229
+ };
230
+ var VIKING_ICON_PATHS = {
231
+ ...LUCIDE_ICON_PATHS,
232
+ ...VIKING_BRAND_ICON_PATHS,
233
+ ...VIKING_DRAKKAR_ICON_PATHS,
234
+ ...VIKING_INTEGRATION_ICON_PATHS,
235
+ ...VIKING_CUSTOM_ICON_PATHS
236
+ };
237
+ var VIKING_ICON_FILLED_PATHS = {
238
+ ...VIKING_BRAND_ICON_FILLED_PATHS,
239
+ ...VIKING_DRAKKAR_ICON_FILLED_PATHS
240
+ };
241
+ var MATERIAL_ICON_ALIASES = {
242
+ analytics: "deml",
243
+ security: "shield",
244
+ link: "link",
245
+ visibility: "eye",
246
+ shield: "shield",
247
+ trending_up: "trending-up",
248
+ lock: "lock",
249
+ fingerprint: "fingerprint",
250
+ gpp_maybe: "shield",
251
+ verified_user: "user-shield",
252
+ bolt: "bolt",
253
+ cloud: "cloud",
254
+ lan: "network",
255
+ hub: "hub",
256
+ speed: "speed",
257
+ rocket_launch: "rocket",
258
+ insights: "insights",
259
+ check: "check",
260
+ description: "file",
261
+ vpn_key: "key",
262
+ policy: "policy",
263
+ bug_report: "bug",
264
+ search: "search",
265
+ chevron_left: "chevron-left",
266
+ chevron_right: "chevron-right",
267
+ verified: "check-circle",
268
+ warning: "alert-triangle",
269
+ close: "x",
270
+ account_balance: "building",
271
+ send: "send",
272
+ check_circle: "check-circle",
273
+ play_circle: "play",
274
+ input: "terminal",
275
+ model_training: "model",
276
+ auto_awesome: "sparkle",
277
+ error_outline: "alert-circle",
278
+ home: "home",
279
+ cookie: "cookie",
280
+ search_off: "search-off",
281
+ person_add: "user",
282
+ storage: "aws-redshift",
283
+ data_object: "aws-redshift",
284
+ memory: "tensorflow",
285
+ psychology: "pytorch",
286
+ dns: "server",
287
+ login: "log-in"
288
+ };
289
+ var VIKING_FILLED_ICON_NAMES = [
290
+ "play",
291
+ "dots-horizontal",
292
+ "dots-vertical",
293
+ "grip-vertical"
294
+ ];
295
+ var VIKING_BRAND_ICON_NAMES = [
296
+ "google",
297
+ "apple",
298
+ ...VIKING_BRAND_ICON_NAMES_LIST
299
+ ];
300
+ var VIKING_ICON_PATH_KEYS = new Set(Object.keys(VIKING_ICON_PATHS));
301
+ var resolveVikingIcon = (name) => {
302
+ const normalized = name.trim().toLowerCase().replace(/\s+/g, "_");
303
+ if (VIKING_ICON_PATH_KEYS.has(normalized)) {
304
+ return normalized;
305
+ }
306
+ const alias = MATERIAL_ICON_ALIASES[normalized];
307
+ if (alias) {
308
+ return alias;
309
+ }
310
+ return "info";
311
+ };
312
+ var VIKING_ICON_NAMES = Object.keys(
313
+ VIKING_ICON_PATHS
314
+ );
315
+ var VIKING_LUCIDE_ICON_NAMES = Object.keys(
316
+ LUCIDE_ICON_PATHS
317
+ );
318
+
319
+ // src/web/core/icons-inline.ts
320
+ var FILLED_ICON_SET = new Set(VIKING_FILLED_ICON_NAMES);
321
+ var renderInlineIcon = (name, size = 16, className = "viking-wc-icon") => {
322
+ const resolved = resolveVikingIcon(name);
323
+ const filled = FILLED_ICON_SET.has(resolved);
324
+ const paths = filled ? VIKING_ICON_FILLED_PATHS[resolved] ?? VIKING_ICON_PATHS[resolved] : VIKING_ICON_PATHS[resolved];
325
+ if (filled) {
326
+ return `<svg class="${className}" width="${size}" height="${size}" viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd" aria-hidden="true">${paths}</svg>`;
327
+ }
328
+ return `<svg class="${className}" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
329
+ };
330
+ var TONE_ICON_NAMES = {
331
+ accent: "info",
332
+ secondary: "info",
333
+ success: "check-circle",
334
+ warning: "alert-triangle",
335
+ danger: "alert-circle",
336
+ info: "info",
337
+ muted: "info",
338
+ subtle: "info"
339
+ };
340
+
341
+ // src/web/core/styles.ts
342
+ var VIKING_BUTTON_STYLES = `
343
+ :host {
344
+ display: inline-flex;
345
+ font-family: var(--viking-font-family);
346
+ }
347
+
348
+ :host([full-width]) {
349
+ display: flex;
350
+ width: 100%;
351
+ }
352
+
353
+ :host([full-width]) .viking-btn {
354
+ width: 100%;
355
+ min-width: 0;
356
+ }
357
+
358
+ :host([compact]) .viking-btn {
359
+ min-width: 0;
360
+ }
361
+
362
+ :host([square]) {
363
+ flex: 0 0 auto;
364
+ }
365
+
366
+ .viking-btn {
367
+ font-family: inherit;
368
+ font-size: var(--viking-font-size-ui, var(--viking-font-size-sm));
369
+ font-weight: var(--viking-font-weight-semibold);
370
+ letter-spacing: var(--viking-letter-spacing-wide);
371
+ line-height: var(--viking-line-height-snug);
372
+ display: inline-flex;
373
+ align-items: center;
374
+ justify-content: center;
375
+ gap: var(--viking-space-1);
376
+ min-height: var(--viking-control-height);
377
+ padding: 0 var(--viking-control-padding-x);
378
+ border-radius: var(--viking-radius);
379
+ border: 1px solid transparent;
380
+ cursor: pointer;
381
+ text-decoration: none;
382
+ transition: var(--viking-transition-interactive);
383
+ width: auto;
384
+ min-width: var(--viking-btn-min-width, 120px);
385
+ white-space: nowrap;
386
+ position: relative;
387
+ user-select: none;
388
+ -webkit-tap-highlight-color: transparent;
389
+ box-sizing: border-box;
390
+ }
391
+
392
+ .viking-btn:focus-visible {
393
+ outline: var(--viking-ring-width) solid var(--viking-ring);
394
+ outline-offset: var(--viking-ring-offset);
395
+ z-index: 1;
396
+ }
397
+
398
+ .viking-btn:disabled,
399
+ .viking-btn[aria-busy='true'] {
400
+ opacity: var(--viking-state-disabled-opacity);
401
+ cursor: not-allowed;
402
+ transform: none !important;
403
+ box-shadow: none !important;
404
+ }
405
+
406
+ .viking-btn-sm {
407
+ min-height: var(--viking-control-height-sm);
408
+ padding: 0 var(--viking-space-2);
409
+ font-size: var(--viking-font-size-xs);
410
+ min-width: auto;
411
+ }
412
+
413
+ .viking-btn-xs {
414
+ min-height: var(--viking-control-height-xs);
415
+ padding: 0 var(--viking-space-1);
416
+ font-size: var(--viking-font-size-xs);
417
+ min-width: auto;
418
+ }
419
+
420
+ .viking-btn-square {
421
+ display: inline-grid;
422
+ place-items: center;
423
+ width: var(--viking-control-height);
424
+ min-width: var(--viking-control-height);
425
+ max-width: var(--viking-control-height);
426
+ height: var(--viking-control-height);
427
+ min-height: var(--viking-control-height);
428
+ padding: 0;
429
+ line-height: 1;
430
+ }
431
+
432
+ .viking-btn-square.viking-btn-sm {
433
+ width: var(--viking-control-height-sm);
434
+ min-width: var(--viking-control-height-sm);
435
+ max-width: var(--viking-control-height-sm);
436
+ height: var(--viking-control-height-sm);
437
+ min-height: var(--viking-control-height-sm);
438
+ }
439
+
440
+ .viking-btn-square.viking-btn-xs {
441
+ width: var(--viking-control-height-xs);
442
+ min-width: var(--viking-control-height-xs);
443
+ max-width: var(--viking-control-height-xs);
444
+ height: var(--viking-control-height-xs);
445
+ min-height: var(--viking-control-height-xs);
446
+ }
447
+
448
+ .viking-btn-square .viking-btn-label {
449
+ display: inline-grid;
450
+ place-items: center;
451
+ width: 100%;
452
+ height: 100%;
453
+ line-height: 1;
454
+ }
455
+
456
+ .viking-btn-square ::slotted(*) {
457
+ display: inline-flex;
458
+ align-items: center;
459
+ justify-content: center;
460
+ margin: 0;
461
+ line-height: 1;
462
+ }
463
+
464
+ .viking-btn-square ::slotted(svg),
465
+ .viking-btn-square ::slotted([data-viking-icon]) {
466
+ width: var(--viking-icon-size-md, 20px);
467
+ height: var(--viking-icon-size-md, 20px);
468
+ }
469
+
470
+ .viking-btn-outline {
471
+ background: var(--viking-surface);
472
+ color: var(--viking-text);
473
+ border-color: var(--viking-border-strong);
474
+ box-shadow: var(--viking-shadow-sm);
475
+ }
476
+
477
+ .viking-btn-outline:hover:not(:disabled):not([aria-busy='true']) {
478
+ background: var(--viking-surface-alt);
479
+ border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border-strong));
480
+ box-shadow: var(--viking-shadow-md);
481
+ transform: translateY(var(--viking-state-hover-lift));
482
+ }
483
+
484
+ .viking-btn-primary {
485
+ background: var(--viking-accent);
486
+ color: var(--viking-accent-content);
487
+ border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
488
+ box-shadow: var(--viking-shadow-sm);
489
+ }
490
+
491
+ .viking-btn-primary:hover:not(:disabled):not([aria-busy='true']) {
492
+ background: var(--viking-accent-hover);
493
+ border-color: var(--viking-accent-hover);
494
+ box-shadow: var(--viking-shadow-hover);
495
+ transform: translateY(var(--viking-state-hover-lift));
496
+ }
497
+
498
+ .viking-btn-secondary {
499
+ background: var(--viking-accent-secondary);
500
+ color: var(--viking-accent-secondary-content);
501
+ border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
502
+ box-shadow: var(--viking-shadow-sm);
503
+ }
504
+
505
+ .viking-btn-secondary:hover:not(:disabled):not([aria-busy='true']) {
506
+ background: var(--viking-accent-secondary-hover);
507
+ border-color: var(--viking-accent-secondary-hover);
508
+ box-shadow: var(--viking-shadow-hover);
509
+ transform: translateY(var(--viking-state-hover-lift));
510
+ }
511
+
512
+ .viking-btn-filled {
513
+ background: var(--viking-surface-alt);
514
+ color: var(--viking-text);
515
+ border-color: var(--viking-border);
516
+ box-shadow: var(--viking-shadow-xs);
517
+ }
518
+
519
+ .viking-btn-filled:hover:not(:disabled):not([aria-busy='true']) {
520
+ border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border));
521
+ background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface-alt));
522
+ box-shadow: var(--viking-shadow-sm);
523
+ transform: translateY(var(--viking-state-hover-lift));
524
+ }
525
+
526
+ .viking-btn-danger {
527
+ background: var(--viking-danger);
528
+ color: var(--viking-on-danger);
529
+ border-color: color-mix(in srgb, var(--viking-danger) 85%, var(--viking-black));
530
+ box-shadow: var(--viking-shadow-sm);
531
+ }
532
+
533
+ .viking-btn-danger:hover:not(:disabled):not([aria-busy='true']) {
534
+ background: color-mix(in srgb, var(--viking-danger) 88%, var(--viking-white));
535
+ box-shadow: var(--viking-shadow-hover);
536
+ transform: translateY(var(--viking-state-hover-lift));
537
+ }
538
+
539
+ .viking-btn-ghost {
540
+ background: transparent;
541
+ color: var(--viking-text);
542
+ min-width: auto;
543
+ box-shadow: none;
544
+ border-color: transparent;
545
+ }
546
+
547
+ .viking-btn-ghost:hover:not(:disabled):not([aria-busy='true']) {
548
+ background: var(--viking-accent-soft);
549
+ color: var(--viking-accent-strong);
550
+ }
551
+
552
+ .viking-btn-subtle {
553
+ background: transparent;
554
+ color: var(--viking-text-muted);
555
+ border-color: var(--viking-border-subtle);
556
+ min-width: auto;
557
+ box-shadow: none;
558
+ }
559
+
560
+ .viking-btn-subtle:hover:not(:disabled):not([aria-busy='true']) {
561
+ color: var(--viking-text);
562
+ background: var(--viking-accent-soft);
563
+ border-color: var(--viking-border-strong);
564
+ }
565
+
566
+ .viking-btn:active:not(:disabled):not([aria-busy='true']) {
567
+ transform: translateY(0) scale(var(--viking-state-active-scale));
568
+ }
569
+
570
+ .viking-btn-label {
571
+ display: inline-flex;
572
+ align-items: center;
573
+ line-height: inherit;
574
+ }
575
+
576
+ .viking-btn-spinner {
577
+ width: 1.125rem;
578
+ height: 1.125rem;
579
+ border: 2px solid currentColor;
580
+ border-right-color: transparent;
581
+ border-radius: 50%;
582
+ animation: viking-spin 0.8s linear infinite;
583
+ }
584
+
585
+ @keyframes viking-spin {
586
+ to { transform: rotate(360deg); }
587
+ }
588
+
589
+ @media (prefers-reduced-motion: reduce) {
590
+ .viking-btn-spinner { animation-duration: 0.01ms; }
591
+ .viking-btn { transition-duration: 0.01ms; }
592
+ }
593
+ `;
594
+ var VIKING_INPUT_STYLES = `
595
+ :host {
596
+ display: block;
597
+ font-family: var(--viking-font-family);
598
+ }
599
+
600
+ .viking-input-shell {
601
+ display: flex;
602
+ align-items: center;
603
+ gap: var(--viking-space-1);
604
+ min-height: var(--viking-control-height);
605
+ padding: 0 var(--viking-space-2);
606
+ font-family: inherit;
607
+ font-size: var(--viking-font-size);
608
+ color: var(--viking-text);
609
+ background: var(--viking-surface-alt);
610
+ border: 1px solid var(--viking-border);
611
+ border-radius: var(--viking-radius-sm);
612
+ box-shadow: var(--viking-shadow-xs);
613
+ transition: var(--viking-transition-interactive);
614
+ width: 100%;
615
+ min-width: 0;
616
+ box-sizing: border-box;
617
+ }
618
+
619
+ .viking-input-shell:hover:not(.viking-disabled):not(.viking-loading) {
620
+ border-color: color-mix(in srgb, var(--viking-accent) 35%, var(--viking-border-strong));
621
+ box-shadow: var(--viking-shadow-sm);
622
+ }
623
+
624
+ .viking-input-shell:focus-within:not(.viking-loading) {
625
+ outline: var(--viking-ring-width) solid var(--viking-ring);
626
+ outline-offset: var(--viking-ring-offset);
627
+ border-color: var(--viking-accent);
628
+ box-shadow: var(--viking-shadow-sm);
629
+ }
630
+
631
+ .viking-input-shell.viking-disabled,
632
+ .viking-input-shell.viking-loading {
633
+ opacity: var(--viking-state-disabled-opacity);
634
+ }
635
+
636
+ .viking-input-shell.viking-loading {
637
+ cursor: wait;
638
+ }
639
+
640
+ .viking-input-native {
641
+ flex: 1;
642
+ min-width: 0;
643
+ width: 100%;
644
+ border: none;
645
+ outline: none !important;
646
+ background: transparent;
647
+ color: var(--viking-text);
648
+ font-family: inherit;
649
+ font-size: inherit;
650
+ padding: 0;
651
+ }
652
+
653
+ .viking-input-native::placeholder {
654
+ color: var(--viking-text-muted);
655
+ }
656
+
657
+ input {
658
+ flex: 1;
659
+ min-width: 0;
660
+ border: none;
661
+ outline: none !important;
662
+ background: transparent;
663
+ color: var(--viking-text);
664
+ font-family: inherit;
665
+ font-size: inherit;
666
+ padding: 0;
667
+ }
668
+
669
+ input::placeholder {
670
+ color: var(--viking-text-muted);
671
+ }
672
+
673
+ input:disabled {
674
+ cursor: not-allowed;
675
+ }
676
+
677
+ .viking-input-clear {
678
+ display: inline-flex;
679
+ align-items: center;
680
+ justify-content: center;
681
+ min-width: var(--viking-touch-target-comfort, 44px);
682
+ min-height: var(--viking-touch-target-comfort, 44px);
683
+ border: none;
684
+ background: transparent;
685
+ color: var(--viking-text-muted);
686
+ cursor: pointer;
687
+ padding: var(--viking-space-half);
688
+ border-radius: var(--viking-radius-pill);
689
+ transition: var(--viking-transition-interactive);
690
+ flex-shrink: 0;
691
+ -webkit-tap-highlight-color: transparent;
692
+ }
693
+
694
+ .viking-input-clear:hover {
695
+ color: var(--viking-text);
696
+ background: var(--viking-accent-soft);
697
+ }
698
+
699
+ .viking-input-clear:focus-visible {
700
+ outline: var(--viking-ring-width) solid var(--viking-ring);
701
+ outline-offset: var(--viking-ring-offset);
702
+ }
703
+
704
+ .viking-input-spinner {
705
+ width: 1rem;
706
+ height: 1rem;
707
+ border: 2px solid var(--viking-text-muted);
708
+ border-right-color: transparent;
709
+ border-radius: 50%;
710
+ animation: viking-spin 0.8s linear infinite;
711
+ flex-shrink: 0;
712
+ }
713
+
714
+ @keyframes viking-spin {
715
+ to { transform: rotate(360deg); }
716
+ }
717
+ `;
718
+ var VIKING_FIELD_STYLES = `
719
+ :host {
720
+ display: block;
721
+ font-family: var(--viking-font-family);
722
+ color: var(--viking-text);
723
+ min-width: 0;
724
+ }
725
+
726
+ :host([hidden]) {
727
+ display: none;
728
+ }
729
+
730
+ :host([width='full']) {
731
+ width: 100%;
732
+ }
733
+
734
+ :host([width='half']) {
735
+ width: 100%;
736
+ max-width: var(--viking-select-half-max-width, min(100%, 24rem));
737
+ }
738
+
739
+ .viking-field {
740
+ display: flex;
741
+ flex-direction: column;
742
+ gap: var(--viking-space-1);
743
+ }
744
+
745
+ .viking-field-label-row {
746
+ display: flex;
747
+ align-items: baseline;
748
+ justify-content: space-between;
749
+ gap: var(--viking-space-2);
750
+ }
751
+
752
+ .viking-field-label {
753
+ display: inline-flex;
754
+ align-items: center;
755
+ gap: var(--viking-space-half);
756
+ font-size: var(--viking-font-size-ui);
757
+ font-weight: var(--viking-font-weight-bold);
758
+ color: var(--viking-text);
759
+ line-height: var(--viking-line-height-snug);
760
+ cursor: pointer;
761
+ }
762
+
763
+ .viking-field-required {
764
+ color: var(--viking-danger-text);
765
+ }
766
+
767
+ .viking-field-control {
768
+ min-width: 0;
769
+ }
770
+
771
+ .viking-field-description,
772
+ .viking-field-error {
773
+ margin: 0;
774
+ font-size: var(--viking-font-size-xs);
775
+ line-height: var(--viking-line-height-relaxed);
776
+ }
777
+
778
+ .viking-field-description {
779
+ color: var(--viking-text-muted);
780
+ }
781
+
782
+ .viking-field-error {
783
+ color: var(--viking-danger-text);
784
+ }
785
+ `;
786
+ var VIKING_BADGE_STYLES = `
787
+ :host {
788
+ display: inline-flex;
789
+ align-items: center;
790
+ gap: var(--viking-space-half);
791
+ padding: var(--viking-space-half) var(--viking-space-1);
792
+ font-family: var(--viking-font-family);
793
+ font-size: var(--viking-font-size-xs);
794
+ font-weight: var(--viking-font-weight-semibold);
795
+ letter-spacing: var(--viking-letter-spacing-wide);
796
+ line-height: var(--viking-line-height-snug);
797
+ border-radius: var(--viking-radius-pill);
798
+ border: 1px solid var(--viking-border);
799
+ background: var(--viking-surface-alt);
800
+ color: var(--viking-text);
801
+ white-space: nowrap;
802
+ transition: var(--viking-transition-interactive);
803
+ box-shadow: var(--viking-shadow-xs);
804
+ }
805
+
806
+ :host([size='sm']) {
807
+ padding: 0 var(--viking-space-1);
808
+ font-size: var(--viking-font-size-2xs);
809
+ }
810
+
811
+ :host([tone='accent']) {
812
+ background: var(--viking-accent);
813
+ border-color: color-mix(in srgb, var(--viking-accent) 80%, var(--viking-black));
814
+ color: var(--viking-accent-content);
815
+ box-shadow: var(--viking-shadow-sm);
816
+ }
817
+
818
+ :host([tone='secondary']) {
819
+ background: color-mix(in srgb, var(--viking-accent-secondary) 16%, var(--viking-surface));
820
+ border-color: color-mix(in srgb, var(--viking-accent-secondary) 55%, transparent);
821
+ color: var(--viking-accent-secondary);
822
+ }
823
+
824
+ :host([tone='success']) {
825
+ background: color-mix(in srgb, var(--viking-success) 16%, var(--viking-surface));
826
+ border-color: color-mix(in srgb, var(--viking-success) 55%, transparent);
827
+ color: var(--viking-success);
828
+ }
829
+
830
+ :host([tone='warning']) {
831
+ background: color-mix(in srgb, var(--viking-warning) 18%, var(--viking-surface));
832
+ border-color: color-mix(in srgb, var(--viking-warning) 55%, transparent);
833
+ color: var(--viking-warning);
834
+ }
835
+
836
+ :host([tone='danger']) {
837
+ background: color-mix(in srgb, var(--viking-danger) 14%, var(--viking-surface));
838
+ border-color: color-mix(in srgb, var(--viking-danger) 50%, transparent);
839
+ color: var(--viking-danger-text);
840
+ }
841
+
842
+ :host([tone='info']) {
843
+ background: color-mix(in srgb, var(--viking-info) 14%, var(--viking-surface));
844
+ border-color: color-mix(in srgb, var(--viking-info) 50%, transparent);
845
+ color: var(--viking-info);
846
+ }
847
+
848
+ :host([tone='muted']),
849
+ :host([tone='subtle']) {
850
+ color: var(--viking-text-muted);
851
+ background: var(--viking-surface);
852
+ border-color: var(--viking-border-subtle);
853
+ }
854
+
855
+ .viking-wc-icon {
856
+ flex-shrink: 0;
857
+ }
858
+
859
+ .viking-badge-remove {
860
+ display: inline-flex;
861
+ align-items: center;
862
+ justify-content: center;
863
+ min-width: var(--viking-touch-target-comfort, 44px);
864
+ min-height: var(--viking-touch-target-comfort, 44px);
865
+ border: none;
866
+ background: transparent;
867
+ color: currentColor;
868
+ cursor: pointer;
869
+ padding: var(--viking-space-half);
870
+ border-radius: var(--viking-radius-pill);
871
+ transition: var(--viking-transition-interactive);
872
+ margin-left: calc(var(--viking-space-half) * -1);
873
+ }
874
+
875
+ .viking-badge-remove:hover {
876
+ background: color-mix(in srgb, currentColor 12%, transparent);
877
+ }
878
+
879
+ .viking-badge-remove:focus-visible {
880
+ outline: var(--viking-ring-width) solid var(--viking-ring);
881
+ outline-offset: var(--viking-ring-offset);
882
+ }
883
+ `;
884
+ var VIKING_CALLOUT_STYLES = `
885
+ :host {
886
+ display: block;
887
+ font-family: var(--viking-font-family);
888
+ }
889
+
890
+ :host([hidden]) {
891
+ display: none;
892
+ }
893
+
894
+ .viking-callout {
895
+ display: flex;
896
+ align-items: flex-start;
897
+ gap: var(--viking-space-2);
898
+ padding: var(--viking-space-2);
899
+ border-radius: var(--viking-radius-lg);
900
+ border: 1px solid var(--viking-border);
901
+ border-left-width: 3px;
902
+ background: var(--viking-surface-alt);
903
+ color: var(--viking-text);
904
+ font-size: var(--viking-font-size-sm);
905
+ box-shadow: var(--viking-shadow-sm);
906
+ }
907
+
908
+ .viking-callout-icon {
909
+ flex-shrink: 0;
910
+ margin-top: 2px;
911
+ color: var(--viking-text-muted);
912
+ }
913
+
914
+ .viking-callout-body {
915
+ flex: 1;
916
+ min-width: 0;
917
+ }
918
+
919
+ .viking-callout-heading {
920
+ margin: 0 0 var(--viking-space-half);
921
+ font-size: var(--viking-font-size-ui);
922
+ font-weight: var(--viking-font-weight-bold);
923
+ color: var(--viking-text);
924
+ }
925
+
926
+ .viking-callout-text {
927
+ margin: 0;
928
+ color: var(--viking-text);
929
+ line-height: var(--viking-line-height-relaxed);
930
+ }
931
+
932
+ .viking-callout-close {
933
+ display: inline-flex;
934
+ align-items: center;
935
+ justify-content: center;
936
+ min-width: var(--viking-touch-target-comfort, 44px);
937
+ min-height: var(--viking-touch-target-comfort, 44px);
938
+ border: none;
939
+ background: transparent;
940
+ color: var(--viking-text-muted);
941
+ cursor: pointer;
942
+ padding: var(--viking-space-half);
943
+ border-radius: var(--viking-radius);
944
+ transition: var(--viking-transition-interactive);
945
+ flex-shrink: 0;
946
+ }
947
+
948
+ .viking-callout-close:hover {
949
+ color: var(--viking-text);
950
+ background: color-mix(in srgb, currentColor 8%, transparent);
951
+ }
952
+
953
+ .viking-callout-close:focus-visible {
954
+ outline: var(--viking-ring-width) solid var(--viking-ring);
955
+ outline-offset: var(--viking-ring-offset);
956
+ }
957
+
958
+ .viking-callout-accent {
959
+ border-color: var(--viking-accent);
960
+ border-left-color: var(--viking-accent);
961
+ background: var(--viking-accent-soft);
962
+ }
963
+
964
+ .viking-callout-accent .viking-callout-icon {
965
+ color: var(--viking-accent);
966
+ }
967
+
968
+ .viking-callout-secondary {
969
+ border-color: color-mix(in srgb, var(--viking-accent-secondary) 45%, transparent);
970
+ border-left-color: var(--viking-accent-secondary);
971
+ background: var(--viking-accent-secondary-soft);
972
+ }
973
+
974
+ .viking-callout-secondary .viking-callout-icon {
975
+ color: var(--viking-accent-secondary);
976
+ }
977
+
978
+ .viking-callout-info {
979
+ border-color: color-mix(in srgb, var(--viking-info) 45%, transparent);
980
+ border-left-color: var(--viking-info);
981
+ background: color-mix(in srgb, var(--viking-info) 10%, var(--viking-surface));
982
+ }
983
+
984
+ .viking-callout-info .viking-callout-icon {
985
+ color: var(--viking-info);
986
+ }
987
+
988
+ .viking-callout-success {
989
+ border-color: color-mix(in srgb, var(--viking-success) 45%, transparent);
990
+ border-left-color: var(--viking-success);
991
+ background: color-mix(in srgb, var(--viking-success) 10%, var(--viking-surface));
992
+ }
993
+
994
+ .viking-callout-success .viking-callout-icon {
995
+ color: var(--viking-success);
996
+ }
997
+
998
+ .viking-callout-warning {
999
+ border-color: color-mix(in srgb, var(--viking-warning) 45%, transparent);
1000
+ border-left-color: var(--viking-warning);
1001
+ background: color-mix(in srgb, var(--viking-warning) 12%, var(--viking-surface));
1002
+ }
1003
+
1004
+ .viking-callout-warning .viking-callout-icon {
1005
+ color: var(--viking-warning);
1006
+ }
1007
+
1008
+ .viking-callout-danger {
1009
+ border-color: var(--viking-danger);
1010
+ border-left-color: var(--viking-danger);
1011
+ background: color-mix(in srgb, var(--viking-crimson-600) 22%, var(--viking-surface));
1012
+ color: var(--viking-white);
1013
+ }
1014
+
1015
+ .viking-callout-danger .viking-callout-icon {
1016
+ color: var(--viking-crimson-400);
1017
+ }
1018
+
1019
+ .viking-callout-danger .viking-callout-text {
1020
+ color: var(--viking-white);
1021
+ }
1022
+ `;
1023
+ var VIKING_SELECT_STYLES = `
1024
+ :host {
1025
+ display: block;
1026
+ font-family: var(--viking-font-family);
1027
+ min-width: 0;
1028
+ }
1029
+
1030
+ :host([width='full']) {
1031
+ width: 100%;
1032
+ }
1033
+
1034
+ :host([width='half']) {
1035
+ width: 100%;
1036
+ max-width: var(--viking-select-half-max-width, min(100%, 24rem));
1037
+ }
1038
+
1039
+ .viking-field {
1040
+ display: flex;
1041
+ flex-direction: column;
1042
+ gap: var(--viking-space-1);
1043
+ }
1044
+
1045
+ .viking-field-label {
1046
+ font-size: var(--viking-font-size-ui);
1047
+ font-weight: var(--viking-font-weight-bold);
1048
+ color: var(--viking-text);
1049
+ }
1050
+
1051
+ .viking-field-description {
1052
+ margin: 0;
1053
+ font-size: var(--viking-font-size-xs);
1054
+ color: var(--viking-text-muted);
1055
+ }
1056
+
1057
+ .viking-field-error {
1058
+ margin: 0;
1059
+ font-size: var(--viking-font-size-xs);
1060
+ color: var(--viking-danger);
1061
+ }
1062
+
1063
+ .viking-select-native {
1064
+ width: 100%;
1065
+ min-height: var(--viking-control-height);
1066
+ padding: 0 var(--viking-space-2);
1067
+ border: 1px solid var(--viking-border-strong);
1068
+ border-radius: var(--viking-radius);
1069
+ background: var(--viking-surface);
1070
+ color: var(--viking-text);
1071
+ font-family: inherit;
1072
+ font-size: var(--viking-font-size);
1073
+ cursor: pointer;
1074
+ transition: var(--viking-transition-interactive);
1075
+ box-shadow: var(--viking-shadow-sm);
1076
+ }
1077
+
1078
+ .viking-select-native:hover:not(:disabled) {
1079
+ border-color: var(--viking-accent-strong);
1080
+ box-shadow: var(--viking-shadow-md);
1081
+ }
1082
+
1083
+ .viking-select-native:focus-visible {
1084
+ outline: var(--viking-ring-width) solid var(--viking-ring);
1085
+ outline-offset: var(--viking-ring-offset);
1086
+ }
1087
+
1088
+ .viking-select-native:disabled {
1089
+ opacity: var(--viking-state-disabled-opacity);
1090
+ cursor: not-allowed;
1091
+ }
1092
+
1093
+ .viking-select-native[aria-invalid='true'] {
1094
+ border-color: var(--viking-danger);
1095
+ }
1096
+ `;
1097
+ var VIKING_MODAL_STYLES = `
1098
+ :host {
1099
+ display: contents;
1100
+ }
1101
+
1102
+ .viking-modal-backdrop {
1103
+ position: fixed;
1104
+ inset: 0;
1105
+ z-index: var(--viking-z-overlay, 10001);
1106
+ display: flex;
1107
+ align-items: center;
1108
+ justify-content: center;
1109
+ padding: var(--viking-space-3);
1110
+ background: var(--viking-overlay-backdrop);
1111
+ backdrop-filter: blur(8px);
1112
+ -webkit-backdrop-filter: blur(8px);
1113
+ border: none;
1114
+ animation: viking-backdrop-in var(--viking-duration-fast) var(--viking-ease-out);
1115
+ }
1116
+
1117
+ .viking-modal-panel {
1118
+ display: flex;
1119
+ flex-direction: column;
1120
+ gap: var(--viking-space-2);
1121
+ width: min(522px, calc(100vw - var(--viking-space-4)));
1122
+ max-height: calc(100vh - var(--viking-space-6));
1123
+ padding: var(--viking-space-3);
1124
+ border: 1px solid var(--viking-border-strong);
1125
+ border-radius: var(--viking-radius-lg);
1126
+ background: var(--viking-surface);
1127
+ color: var(--viking-text);
1128
+ box-shadow: var(--viking-shadow-lg);
1129
+ font-family: var(--viking-font-family);
1130
+ position: relative;
1131
+ overflow: hidden;
1132
+ animation: viking-modal-in var(--viking-duration) var(--viking-ease-default);
1133
+ }
1134
+
1135
+ .viking-modal-panel::before {
1136
+ content: '';
1137
+ position: absolute;
1138
+ inset: 0 0 auto;
1139
+ height: 1px;
1140
+ background: linear-gradient(
1141
+ 90deg,
1142
+ transparent,
1143
+ color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),
1144
+ transparent
1145
+ );
1146
+ pointer-events: none;
1147
+ }
1148
+
1149
+ .viking-modal-header {
1150
+ display: flex;
1151
+ align-items: flex-start;
1152
+ justify-content: space-between;
1153
+ gap: var(--viking-space-2);
1154
+ padding-bottom: var(--viking-space-1);
1155
+ border-bottom: 1px solid var(--viking-border-subtle);
1156
+ }
1157
+
1158
+ .viking-modal-heading {
1159
+ margin: 0;
1160
+ font-size: var(--viking-font-size-md);
1161
+ font-weight: var(--viking-font-weight-bold);
1162
+ letter-spacing: var(--viking-letter-spacing-tight);
1163
+ color: var(--viking-text);
1164
+ line-height: var(--viking-line-height-tight);
1165
+ }
1166
+
1167
+ .viking-modal-close {
1168
+ display: inline-flex;
1169
+ align-items: center;
1170
+ justify-content: center;
1171
+ min-width: var(--viking-touch-target-comfort, 44px);
1172
+ min-height: var(--viking-touch-target-comfort, 44px);
1173
+ border: 1px solid transparent;
1174
+ background: transparent;
1175
+ color: var(--viking-text-muted);
1176
+ cursor: pointer;
1177
+ border-radius: var(--viking-radius);
1178
+ transition: var(--viking-transition-interactive);
1179
+ flex-shrink: 0;
1180
+ }
1181
+
1182
+ .viking-modal-close:hover {
1183
+ color: var(--viking-text);
1184
+ background: var(--viking-accent-soft);
1185
+ border-color: var(--viking-border-subtle);
1186
+ }
1187
+
1188
+ .viking-modal-close:focus-visible {
1189
+ outline: var(--viking-ring-width) solid var(--viking-ring);
1190
+ outline-offset: var(--viking-ring-offset);
1191
+ }
1192
+
1193
+ .viking-modal-body {
1194
+ overflow-y: auto;
1195
+ color: var(--viking-text-muted);
1196
+ font-size: var(--viking-font-size);
1197
+ line-height: var(--viking-line-height-relaxed);
1198
+ }
1199
+
1200
+ .viking-modal-footer {
1201
+ display: flex;
1202
+ flex-wrap: wrap;
1203
+ gap: var(--viking-space-2);
1204
+ justify-content: flex-end;
1205
+ padding-top: var(--viking-space-2);
1206
+ border-top: 1px solid var(--viking-border-subtle);
1207
+ }
1208
+
1209
+ .viking-modal-footer:empty {
1210
+ display: none;
1211
+ }
1212
+
1213
+ @keyframes viking-backdrop-in {
1214
+ from { opacity: 0; }
1215
+ to { opacity: 1; }
1216
+ }
1217
+
1218
+ @keyframes viking-modal-in {
1219
+ from {
1220
+ opacity: 0;
1221
+ transform: translateY(var(--viking-space-1)) scale(0.98);
1222
+ }
1223
+ to {
1224
+ opacity: 1;
1225
+ transform: translateY(0) scale(1);
1226
+ }
1227
+ }
1228
+
1229
+ @media (prefers-reduced-motion: reduce) {
1230
+ .viking-modal-backdrop,
1231
+ .viking-modal-panel {
1232
+ animation: none;
1233
+ }
1234
+ }
1235
+ `;
1236
+ var VIKING_SEARCH_PALETTE_STYLES = `
1237
+ :host {
1238
+ display: contents;
1239
+ }
1240
+
1241
+ .viking-search-palette-backdrop {
1242
+ position: fixed;
1243
+ inset: 0;
1244
+ z-index: var(--viking-z-overlay, 10001);
1245
+ display: flex;
1246
+ align-items: flex-start;
1247
+ justify-content: center;
1248
+ padding: 10vh var(--viking-space-2) var(--viking-space-2);
1249
+ background: var(--viking-overlay-backdrop);
1250
+ backdrop-filter: blur(8px);
1251
+ -webkit-backdrop-filter: blur(8px);
1252
+ border: none;
1253
+ animation: viking-backdrop-in var(--viking-duration-fast) var(--viking-ease-out);
1254
+ }
1255
+
1256
+ .viking-search-palette-backdrop:not([open]) {
1257
+ display: none !important;
1258
+ pointer-events: none;
1259
+ }
1260
+
1261
+ .viking-search-palette {
1262
+ display: flex;
1263
+ flex-direction: column;
1264
+ background: var(--viking-surface-raised, var(--viking-surface));
1265
+ border: 1px solid var(--viking-border-strong);
1266
+ border-radius: var(--viking-radius-lg);
1267
+ box-shadow: var(--viking-shadow-lg);
1268
+ overflow: hidden;
1269
+ max-width: 600px;
1270
+ width: min(100%, 600px);
1271
+ margin: 0 auto;
1272
+ font-family: var(--viking-font-family);
1273
+ color: var(--viking-text);
1274
+ animation: viking-modal-in var(--viking-duration) var(--viking-ease-default);
1275
+ position: relative;
1276
+ isolation: isolate;
1277
+ }
1278
+
1279
+ .viking-search-palette::before {
1280
+ content: '';
1281
+ position: absolute;
1282
+ inset: 0 0 auto;
1283
+ height: 1px;
1284
+ background: linear-gradient(
1285
+ 90deg,
1286
+ transparent,
1287
+ color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),
1288
+ transparent
1289
+ );
1290
+ pointer-events: none;
1291
+ z-index: 1;
1292
+ }
1293
+
1294
+ .viking-search-palette-header {
1295
+ display: flex;
1296
+ align-items: center;
1297
+ padding: var(--viking-space-2);
1298
+ border-bottom: 1px solid var(--viking-border);
1299
+ gap: var(--viking-space-1);
1300
+ background: color-mix(in srgb, var(--viking-bg) 26%, var(--viking-surface-raised));
1301
+ }
1302
+
1303
+ .viking-search-palette-header:focus-within {
1304
+ border-bottom-color: var(--viking-accent);
1305
+ box-shadow: inset 0 -2px 0 var(--viking-accent-soft);
1306
+ }
1307
+
1308
+ .viking-search-palette-icon {
1309
+ color: var(--viking-text-muted);
1310
+ flex-shrink: 0;
1311
+ }
1312
+
1313
+ .viking-search-palette-input {
1314
+ flex: 1;
1315
+ background: none;
1316
+ border: none;
1317
+ outline: none;
1318
+ font-size: calc(var(--viking-font-size) * 1.05);
1319
+ color: var(--viking-text);
1320
+ font-family: inherit;
1321
+ min-width: 0;
1322
+ }
1323
+
1324
+ .viking-search-palette-input::placeholder {
1325
+ color: var(--viking-text-muted);
1326
+ }
1327
+
1328
+ .viking-search-palette-close {
1329
+ display: inline-flex;
1330
+ align-items: center;
1331
+ justify-content: center;
1332
+ min-width: var(--viking-touch-target-comfort, 44px);
1333
+ min-height: var(--viking-touch-target-comfort, 44px);
1334
+ border: none;
1335
+ background: transparent;
1336
+ color: var(--viking-text-muted);
1337
+ cursor: pointer;
1338
+ padding: var(--viking-space-half);
1339
+ border-radius: var(--viking-radius);
1340
+ transition: var(--viking-transition-interactive);
1341
+ flex-shrink: 0;
1342
+ }
1343
+
1344
+ .viking-search-palette-close:hover {
1345
+ color: var(--viking-text);
1346
+ background: var(--viking-accent-soft);
1347
+ }
1348
+
1349
+ .viking-search-palette-close:focus-visible {
1350
+ outline: var(--viking-ring-width) solid var(--viking-ring);
1351
+ outline-offset: var(--viking-ring-offset);
1352
+ }
1353
+
1354
+ .viking-search-palette-body {
1355
+ max-height: 50vh;
1356
+ overflow-y: auto;
1357
+ padding: var(--viking-space-2);
1358
+ }
1359
+
1360
+ .viking-search-palette-footer {
1361
+ display: flex;
1362
+ align-items: center;
1363
+ justify-content: center;
1364
+ gap: var(--viking-space-1);
1365
+ padding: var(--viking-space-1) var(--viking-space-2);
1366
+ border-top: 1px solid var(--viking-border);
1367
+ font-size: calc(var(--viking-font-size) * 0.85);
1368
+ color: var(--viking-text-muted);
1369
+ }
1370
+
1371
+ .viking-kbd {
1372
+ display: inline-flex;
1373
+ align-items: center;
1374
+ justify-content: center;
1375
+ min-width: 1.5rem;
1376
+ padding: 2px 6px;
1377
+ font-family: inherit;
1378
+ font-size: calc(var(--viking-font-size) * 0.75);
1379
+ border-radius: calc(var(--viking-radius) / 2);
1380
+ border: 1px solid var(--viking-border);
1381
+ background: var(--viking-surface-alt);
1382
+ }
1383
+
1384
+ .viking-search-results {
1385
+ display: flex;
1386
+ flex-direction: column;
1387
+ gap: var(--viking-space-1);
1388
+ }
1389
+
1390
+ .viking-search-group-label {
1391
+ margin: var(--viking-space-1) 0 var(--viking-space-half);
1392
+ padding: 0 var(--viking-space-1);
1393
+ font-size: var(--viking-font-size-2xs);
1394
+ font-weight: var(--viking-font-weight-semibold);
1395
+ letter-spacing: var(--viking-letter-spacing-caps);
1396
+ text-transform: uppercase;
1397
+ color: var(--viking-text-muted);
1398
+ }
1399
+
1400
+ .viking-search-result {
1401
+ display: flex;
1402
+ align-items: center;
1403
+ min-height: var(--viking-control-height-sm, 36px);
1404
+ padding: var(--viking-space-1) var(--viking-space-2);
1405
+ border-radius: var(--viking-radius);
1406
+ background: var(--viking-surface-alt);
1407
+ border: 1px solid var(--viking-border-subtle);
1408
+ cursor: pointer;
1409
+ transition: var(--viking-transition-interactive);
1410
+ gap: var(--viking-space-1);
1411
+ text-decoration: none;
1412
+ color: inherit;
1413
+ }
1414
+
1415
+ .viking-search-result:hover,
1416
+ .viking-search-result.is-selected {
1417
+ background: color-mix(in srgb, var(--viking-accent) 10%, var(--viking-surface-alt));
1418
+ border-color: color-mix(in srgb, var(--viking-accent) 42%, var(--viking-border-strong));
1419
+ box-shadow: var(--viking-shadow-sm);
1420
+ }
1421
+
1422
+ .viking-search-result:focus-visible {
1423
+ outline: var(--viking-ring-width) solid var(--viking-ring);
1424
+ outline-offset: var(--viking-ring-offset);
1425
+ }
1426
+
1427
+ .viking-search-result-title {
1428
+ font-size: var(--viking-font-size-sm);
1429
+ font-weight: var(--viking-font-weight-semibold);
1430
+ color: var(--viking-text);
1431
+ }
1432
+
1433
+ .viking-search-result-snippet {
1434
+ font-size: var(--viking-font-size-xs);
1435
+ color: var(--viking-text-muted);
1436
+ }
1437
+
1438
+ .viking-search-empty {
1439
+ padding: var(--viking-space-3);
1440
+ text-align: center;
1441
+ color: var(--viking-text-muted);
1442
+ font-size: var(--viking-font-size-sm);
1443
+ }
1444
+
1445
+ @keyframes viking-backdrop-in {
1446
+ from { opacity: 0; }
1447
+ to { opacity: 1; }
1448
+ }
1449
+
1450
+ @keyframes viking-modal-in {
1451
+ from {
1452
+ opacity: 0;
1453
+ transform: translateY(var(--viking-space-1)) scale(0.98);
1454
+ }
1455
+ to {
1456
+ opacity: 1;
1457
+ transform: translateY(0) scale(1);
1458
+ }
1459
+ }
1460
+
1461
+ @media (prefers-reduced-motion: reduce) {
1462
+ .viking-search-palette-backdrop,
1463
+ .viking-search-palette {
1464
+ animation: none;
1465
+ }
1466
+ }
1467
+ `;
1468
+
1469
+ // src/web/badge/viking-badge-wc.ts
1470
+ var TONES = /* @__PURE__ */ new Set([
1471
+ "accent",
1472
+ "secondary",
1473
+ "success",
1474
+ "warning",
1475
+ "danger",
1476
+ "info",
1477
+ "muted",
1478
+ "subtle"
1479
+ ]);
1480
+ var VikingBadgeWc = class extends HTMLElementBase {
1481
+ static tag = "viking-badge";
1482
+ static legacyTag = "viking-badge-wc";
1483
+ static get observedAttributes() {
1484
+ return ["tone", "size", "icon", "removable"];
1485
+ }
1486
+ shadow;
1487
+ constructor() {
1488
+ super();
1489
+ this.shadow = this.attachShadow({ mode: "open" });
1490
+ attachShadowStyles(this.shadow, VIKING_BADGE_STYLES);
1491
+ }
1492
+ connectedCallback() {
1493
+ this.render();
1494
+ }
1495
+ attributeChangedCallback() {
1496
+ if (this.isConnected) {
1497
+ this.render();
1498
+ }
1499
+ }
1500
+ get tone() {
1501
+ const value = this.getAttribute("tone") ?? "";
1502
+ return TONES.has(value) ? value : null;
1503
+ }
1504
+ get size() {
1505
+ return this.getAttribute("size") === "sm" ? "sm" : null;
1506
+ }
1507
+ get removable() {
1508
+ return this.hasAttribute("removable") && this.getAttribute("removable") !== "false";
1509
+ }
1510
+ onRemove = () => {
1511
+ this.dispatchEvent(
1512
+ new CustomEvent("viking-removed", { bubbles: true, composed: true })
1513
+ );
1514
+ };
1515
+ render() {
1516
+ const tone = this.tone;
1517
+ if (tone && this.getAttribute("tone") !== tone) {
1518
+ this.setAttribute("tone", tone);
1519
+ } else if (!tone && this.hasAttribute("tone")) {
1520
+ this.removeAttribute("tone");
1521
+ }
1522
+ const size = this.size;
1523
+ if (size && this.getAttribute("size") !== size) {
1524
+ this.setAttribute("size", size);
1525
+ } else if (!size && this.hasAttribute("size")) {
1526
+ this.removeAttribute("size");
1527
+ }
1528
+ const iconName = this.getAttribute("icon") ?? (tone ? TONE_ICON_NAMES[tone] : null);
1529
+ const iconMarkup = iconName ? renderInlineIcon(iconName, 16) : "";
1530
+ this.shadow.innerHTML = `
1531
+ ${iconMarkup}
1532
+ <span part="label"><slot></slot></span>
1533
+ ${this.removable ? `<button type="button" class="viking-badge-remove" part="remove" aria-label="Remove">${renderInlineIcon("x", 14)}</button>` : ""}
1534
+ `;
1535
+ this.shadow.querySelector(".viking-badge-remove")?.addEventListener("click", this.onRemove);
1536
+ }
1537
+ };
1538
+ var registerVikingBadgeWc = () => {
1539
+ defineCustomElement(VikingBadgeWc.tag, VikingBadgeWc);
1540
+ defineCustomElementAlias(VikingBadgeWc.legacyTag, VikingBadgeWc);
1541
+ };
1542
+
1543
+ // src/web/button/viking-button-wc.ts
1544
+ var VARIANTS = /* @__PURE__ */ new Set([
1545
+ "outline",
1546
+ "primary",
1547
+ "secondary",
1548
+ "filled",
1549
+ "danger",
1550
+ "ghost",
1551
+ "subtle"
1552
+ ]);
1553
+ var SIZES = /* @__PURE__ */ new Set(["sm", "xs"]);
1554
+ var VikingButtonWc = class extends HTMLElementBase {
1555
+ static tag = "viking-button";
1556
+ static legacyTag = "viking-button-wc";
1557
+ static get observedAttributes() {
1558
+ return [
1559
+ "variant",
1560
+ "size",
1561
+ "type",
1562
+ "disabled",
1563
+ "loading",
1564
+ "href",
1565
+ "target",
1566
+ "aria-label",
1567
+ "aria-busy",
1568
+ "square",
1569
+ "full-width",
1570
+ "compact"
1571
+ ];
1572
+ }
1573
+ shadow;
1574
+ control = null;
1575
+ constructor() {
1576
+ super();
1577
+ this.shadow = this.attachShadow({ mode: "open" });
1578
+ attachShadowStyles(this.shadow, VIKING_BUTTON_STYLES);
1579
+ }
1580
+ connectedCallback() {
1581
+ this.render();
1582
+ this.syncHostSemantics();
1583
+ this.control?.addEventListener("click", this.onClick);
1584
+ }
1585
+ disconnectedCallback() {
1586
+ this.control?.removeEventListener("click", this.onClick);
1587
+ }
1588
+ attributeChangedCallback() {
1589
+ if (this.isConnected) {
1590
+ this.render();
1591
+ this.syncHostSemantics();
1592
+ }
1593
+ }
1594
+ onClick = (event) => {
1595
+ if (this.disabled || this.loading) {
1596
+ event.preventDefault();
1597
+ event.stopPropagation();
1598
+ return;
1599
+ }
1600
+ this.dispatchEvent(
1601
+ new CustomEvent("viking-press", {
1602
+ bubbles: true,
1603
+ composed: true,
1604
+ detail: event
1605
+ })
1606
+ );
1607
+ };
1608
+ get variant() {
1609
+ const value = this.getAttribute("variant") ?? "outline";
1610
+ return VARIANTS.has(value) ? value : "outline";
1611
+ }
1612
+ get size() {
1613
+ const value = this.getAttribute("size");
1614
+ return value && SIZES.has(value) ? value : null;
1615
+ }
1616
+ get disabled() {
1617
+ return readBoolAttr(this, "disabled");
1618
+ }
1619
+ get loading() {
1620
+ return readBoolAttr(this, "loading");
1621
+ }
1622
+ get square() {
1623
+ return readBoolAttr(this, "square");
1624
+ }
1625
+ syncHostSemantics() {
1626
+ if (!this.hasAttribute("role")) {
1627
+ this.setAttribute("role", this.getAttribute("href") ? "link" : "button");
1628
+ }
1629
+ }
1630
+ render() {
1631
+ const href = this.getAttribute("href");
1632
+ const isLink = Boolean(href);
1633
+ const tag = isLink ? "a" : "button";
1634
+ const classes = [
1635
+ "viking-btn",
1636
+ `viking-btn-${this.variant}`,
1637
+ this.size ? `viking-btn-${this.size}` : "",
1638
+ this.square ? "viking-btn-square" : ""
1639
+ ].filter(Boolean).join(" ");
1640
+ const label = this.getAttribute("aria-label") ?? "";
1641
+ const busy = this.getAttribute("aria-busy") === "true" || this.loading ? "true" : null;
1642
+ const type = escapeHtml(this.getAttribute("type") ?? "button");
1643
+ const hrefValue = href ? escapeHtml(href) : "";
1644
+ const target = this.getAttribute("target");
1645
+ const safeTarget = target ? escapeHtml(target) : "";
1646
+ this.shadow.innerHTML = `
1647
+ <${tag}
1648
+ class="${classes}"
1649
+ part="control"
1650
+ ${isLink ? `href="${hrefValue}"` : `type="${type}"`}
1651
+ ${isLink && safeTarget ? `target="${safeTarget}"` : ""}
1652
+ ${isLink && target === "_blank" ? 'rel="noopener noreferrer"' : ""}
1653
+ ${this.disabled || this.loading ? "disabled" : ""}
1654
+ ${label ? `aria-label="${escapeHtml(label)}"` : ""}
1655
+ ${busy ? `aria-busy="${busy}"` : ""}
1656
+ ${this.disabled && isLink ? 'aria-disabled="true" tabindex="-1"' : ""}
1657
+ >
1658
+ ${this.loading ? '<span class="viking-btn-spinner" aria-hidden="true"></span>' : ""}
1659
+ <span class="viking-btn-label" part="label"><slot></slot></span>
1660
+ </${tag}>
1661
+ `;
1662
+ this.control = this.shadow.querySelector(tag);
1663
+ }
1664
+ };
1665
+ var registerVikingButtonWc = () => {
1666
+ defineCustomElement(VikingButtonWc.tag, VikingButtonWc);
1667
+ defineCustomElementAlias(VikingButtonWc.legacyTag, VikingButtonWc);
1668
+ };
1669
+
1670
+ // src/web/callout/viking-callout-wc.ts
1671
+ var TONES2 = /* @__PURE__ */ new Set([
1672
+ "accent",
1673
+ "secondary",
1674
+ "success",
1675
+ "warning",
1676
+ "danger",
1677
+ "info",
1678
+ "muted"
1679
+ ]);
1680
+ var VikingCalloutWc = class extends HTMLElementBase {
1681
+ static tag = "viking-callout";
1682
+ static legacyTag = "viking-callout-wc";
1683
+ static get observedAttributes() {
1684
+ return ["tone", "heading", "icon", "dismissible", "hidden"];
1685
+ }
1686
+ shadow;
1687
+ constructor() {
1688
+ super();
1689
+ this.shadow = this.attachShadow({ mode: "open" });
1690
+ attachShadowStyles(this.shadow, VIKING_CALLOUT_STYLES);
1691
+ }
1692
+ connectedCallback() {
1693
+ this.render();
1694
+ }
1695
+ attributeChangedCallback() {
1696
+ if (this.isConnected) {
1697
+ this.render();
1698
+ }
1699
+ }
1700
+ get tone() {
1701
+ const value = this.getAttribute("tone") ?? "info";
1702
+ return TONES2.has(value) ? value : "info";
1703
+ }
1704
+ get dismissible() {
1705
+ return this.hasAttribute("dismissible") && this.getAttribute("dismissible") !== "false";
1706
+ }
1707
+ onDismiss = () => {
1708
+ this.setAttribute("hidden", "");
1709
+ this.dispatchEvent(
1710
+ new CustomEvent("viking-close", { bubbles: true, composed: true })
1711
+ );
1712
+ };
1713
+ render() {
1714
+ const heading = this.getAttribute("heading") ?? "";
1715
+ const iconName = this.getAttribute("icon") ?? TONE_ICON_NAMES[this.tone] ?? "info";
1716
+ const iconMarkup = renderInlineIcon(iconName, 22, "viking-callout-icon");
1717
+ this.shadow.innerHTML = `
1718
+ <div class="viking-callout viking-callout-${this.tone}" role="note" part="surface">
1719
+ <span part="icon">${iconMarkup}</span>
1720
+ <div class="viking-callout-body" part="body">
1721
+ ${heading ? `<p class="viking-callout-heading" part="heading">${escapeHtml(heading)}</p>` : ""}
1722
+ <div class="viking-callout-text" part="text"><slot></slot></div>
1723
+ </div>
1724
+ ${this.dismissible ? `<button type="button" class="viking-callout-close" part="close" aria-label="Dismiss">${renderInlineIcon("x", 18)}</button>` : ""}
1725
+ </div>
1726
+ `;
1727
+ this.shadow.querySelector(".viking-callout-close")?.addEventListener("click", this.onDismiss);
1728
+ }
1729
+ };
1730
+ var registerVikingCalloutWc = () => {
1731
+ defineCustomElement(VikingCalloutWc.tag, VikingCalloutWc);
1732
+ defineCustomElementAlias(VikingCalloutWc.legacyTag, VikingCalloutWc);
1733
+ };
1734
+
1735
+ // src/web/card/viking-card-wc.ts
1736
+ var VikingCardWc = class extends HTMLElementBase {
1737
+ static tag = "viking-card";
1738
+ static legacyTag = "viking-card-wc";
1739
+ static get observedAttributes() {
1740
+ return ["compact", "interactive", "title"];
1741
+ }
1742
+ connectedCallback() {
1743
+ this.syncClasses();
1744
+ }
1745
+ attributeChangedCallback() {
1746
+ if (this.isConnected) {
1747
+ this.syncClasses();
1748
+ }
1749
+ }
1750
+ syncClasses() {
1751
+ this.classList.add("viking-card");
1752
+ this.classList.toggle("viking-card-compact", this.hasAttribute("compact"));
1753
+ this.classList.toggle(
1754
+ "viking-card-interactive",
1755
+ this.hasAttribute("interactive")
1756
+ );
1757
+ const title = this.getAttribute("title");
1758
+ if (title) {
1759
+ this.setAttribute("role", "region");
1760
+ this.setAttribute("aria-label", title);
1761
+ } else {
1762
+ this.removeAttribute("role");
1763
+ this.removeAttribute("aria-label");
1764
+ }
1765
+ }
1766
+ };
1767
+ var registerVikingCardWc = () => {
1768
+ defineCustomElement(VikingCardWc.tag, VikingCardWc);
1769
+ defineCustomElementAlias(VikingCardWc.legacyTag, VikingCardWc);
1770
+ };
1771
+
1772
+ // src/web/field/viking-field-wc.ts
1773
+ var VikingFieldWc = class extends HTMLElementBase {
1774
+ static tag = "viking-field";
1775
+ static legacyTag = "viking-field-wc";
1776
+ static get observedAttributes() {
1777
+ return ["label", "description", "error", "required", "width"];
1778
+ }
1779
+ shadow;
1780
+ labelId = vikingWcUid("viking-field-label");
1781
+ descriptionId = vikingWcUid("viking-field-description");
1782
+ errorId = vikingWcUid("viking-field-error");
1783
+ slotEl = null;
1784
+ constructor() {
1785
+ super();
1786
+ this.shadow = this.attachShadow({ mode: "open" });
1787
+ attachShadowStyles(this.shadow, VIKING_FIELD_STYLES);
1788
+ }
1789
+ connectedCallback() {
1790
+ this.render();
1791
+ this.syncControlA11y();
1792
+ }
1793
+ disconnectedCallback() {
1794
+ this.slotEl?.removeEventListener("slotchange", this.syncControlA11y);
1795
+ }
1796
+ attributeChangedCallback() {
1797
+ if (this.isConnected) {
1798
+ this.render();
1799
+ this.syncControlA11y();
1800
+ }
1801
+ }
1802
+ get control() {
1803
+ const assigned = this.slotEl?.assignedElements({ flatten: true }) ?? [];
1804
+ return assigned.find(
1805
+ (node) => node instanceof HTMLElement
1806
+ ) ?? null;
1807
+ }
1808
+ focusControl = () => {
1809
+ const control = this.control;
1810
+ control?.focus?.();
1811
+ };
1812
+ syncControlA11y = () => {
1813
+ const control = this.control;
1814
+ if (!control) {
1815
+ return;
1816
+ }
1817
+ const description = [
1818
+ this.getAttribute("description") ?? "",
1819
+ this.getAttribute("error") ?? ""
1820
+ ].filter(Boolean).join(" ");
1821
+ const label = this.getAttribute("label") ?? "";
1822
+ if (label && !control.hasAttribute("aria-label")) {
1823
+ control.setAttribute("aria-label", label);
1824
+ }
1825
+ if (description) {
1826
+ control.setAttribute("aria-description", description);
1827
+ } else {
1828
+ control.removeAttribute("aria-description");
1829
+ }
1830
+ if (this.getAttribute("error")) {
1831
+ control.setAttribute("aria-invalid", "true");
1832
+ control.setAttribute("error", this.getAttribute("error") ?? "");
1833
+ } else {
1834
+ control.removeAttribute("aria-invalid");
1835
+ if (control.getAttribute("error") === "") {
1836
+ control.removeAttribute("error");
1837
+ }
1838
+ }
1839
+ if (readBoolAttr(this, "required")) {
1840
+ control.setAttribute("required", "");
1841
+ }
1842
+ };
1843
+ render() {
1844
+ const label = this.getAttribute("label") ?? "";
1845
+ const description = this.getAttribute("description") ?? "";
1846
+ const error = this.getAttribute("error") ?? "";
1847
+ const required = readBoolAttr(this, "required");
1848
+ this.shadow.innerHTML = `
1849
+ <div class="viking-field" part="field" role="group" aria-labelledby="${this.labelId}">
1850
+ ${label ? `<div class="viking-field-label-row" part="label-row">
1851
+ <span class="viking-field-label" part="label" id="${this.labelId}">
1852
+ <span>${escapeHtml(label)}</span>
1853
+ ${required ? `<span class="viking-field-required" aria-label="required">*</span>` : ""}
1854
+ </span>
1855
+ </div>` : `<span id="${this.labelId}" hidden>Form field</span>`}
1856
+ <div class="viking-field-control" part="control"><slot></slot></div>
1857
+ ${description ? `<p id="${this.descriptionId}" class="viking-field-description" part="description">${escapeHtml(description)}</p>` : ""}
1858
+ ${error ? `<p id="${this.errorId}" class="viking-field-error" part="error" role="alert">${escapeHtml(error)}</p>` : ""}
1859
+ </div>
1860
+ `;
1861
+ this.slotEl = this.shadow.querySelector("slot");
1862
+ this.slotEl?.addEventListener("slotchange", this.syncControlA11y);
1863
+ this.shadow.querySelector(".viking-field-label")?.addEventListener("click", this.focusControl);
1864
+ }
1865
+ };
1866
+ var registerVikingFieldWc = () => {
1867
+ defineCustomElement(VikingFieldWc.tag, VikingFieldWc);
1868
+ defineCustomElementAlias(VikingFieldWc.legacyTag, VikingFieldWc);
1869
+ };
1870
+
1871
+ // src/web/input/viking-input-wc.ts
1872
+ var VikingInputWc = class extends HTMLElementBase {
1873
+ static formAssociated = true;
1874
+ static tag = "viking-input";
1875
+ static legacyTag = "viking-input-wc";
1876
+ static get observedAttributes() {
1877
+ return [
1878
+ "type",
1879
+ "placeholder",
1880
+ "value",
1881
+ "disabled",
1882
+ "loading",
1883
+ "clearable",
1884
+ "name",
1885
+ "autocomplete",
1886
+ "required",
1887
+ "readonly",
1888
+ "minlength",
1889
+ "maxlength",
1890
+ "pattern",
1891
+ "error",
1892
+ "aria-label",
1893
+ "aria-describedby",
1894
+ "bare"
1895
+ ];
1896
+ }
1897
+ shadow;
1898
+ internals;
1899
+ input = null;
1900
+ constructor() {
1901
+ super();
1902
+ this.shadow = this.attachShadow({ mode: "open" });
1903
+ this.internals = attachElementInternals(this);
1904
+ attachShadowStyles(this.shadow, VIKING_INPUT_STYLES);
1905
+ }
1906
+ connectedCallback() {
1907
+ this.render();
1908
+ this.syncFormValue();
1909
+ }
1910
+ attributeChangedCallback(name) {
1911
+ if (!this.isConnected) {
1912
+ return;
1913
+ }
1914
+ if (name === "value" && this.input) {
1915
+ this.input.value = this.getAttribute("value") ?? "";
1916
+ this.syncFormValue();
1917
+ return;
1918
+ }
1919
+ this.render();
1920
+ }
1921
+ get value() {
1922
+ return this.input?.value ?? this.getAttribute("value") ?? "";
1923
+ }
1924
+ set value(next) {
1925
+ const normalized = next ?? "";
1926
+ this.setAttribute("value", normalized);
1927
+ if (this.input) {
1928
+ this.input.value = normalized;
1929
+ }
1930
+ this.syncFormValue();
1931
+ }
1932
+ get disabled() {
1933
+ return readBoolAttr(this, "disabled");
1934
+ }
1935
+ get loading() {
1936
+ return readBoolAttr(this, "loading");
1937
+ }
1938
+ get clearable() {
1939
+ return readBoolAttr(this, "clearable");
1940
+ }
1941
+ get bare() {
1942
+ return readBoolAttr(this, "bare");
1943
+ }
1944
+ onInput = () => {
1945
+ const next = this.input?.value ?? "";
1946
+ this.setAttribute("value", next);
1947
+ this.syncFormValue();
1948
+ this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
1949
+ this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
1950
+ };
1951
+ onBlur = () => {
1952
+ this.dispatchEvent(new Event("blur", { bubbles: true, composed: true }));
1953
+ };
1954
+ onClear = () => {
1955
+ this.value = "";
1956
+ this.input?.focus();
1957
+ this.dispatchEvent(
1958
+ new CustomEvent("viking-cleared", { bubbles: true, composed: true })
1959
+ );
1960
+ this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
1961
+ };
1962
+ syncFormValue() {
1963
+ setFormValue(this.internals, this.value);
1964
+ }
1965
+ render() {
1966
+ const shellClasses = [
1967
+ "viking-input-shell",
1968
+ this.disabled ? "viking-disabled" : "",
1969
+ this.loading ? "viking-loading" : ""
1970
+ ].filter(Boolean).join(" ");
1971
+ const type = escapeHtml(this.getAttribute("type") ?? "text");
1972
+ const rawPlaceholder = this.getAttribute("placeholder") ?? "";
1973
+ const placeholder = escapeHtml(rawPlaceholder);
1974
+ const value = escapeHtml(this.getAttribute("value") ?? "");
1975
+ const label = this.getAttribute("aria-label") ?? (rawPlaceholder || "Text input");
1976
+ const autocomplete = escapeHtml(this.getAttribute("autocomplete") ?? "");
1977
+ const describedBy = escapeHtml(this.getAttribute("aria-describedby") ?? "");
1978
+ const minLength = escapeHtml(this.getAttribute("minlength") ?? "");
1979
+ const maxLength = escapeHtml(this.getAttribute("maxlength") ?? "");
1980
+ const pattern = escapeHtml(this.getAttribute("pattern") ?? "");
1981
+ const error = this.getAttribute("error") ?? "";
1982
+ const required = readBoolAttr(this, "required");
1983
+ const readonly = readBoolAttr(this, "readonly");
1984
+ const showClear = this.clearable && value.length > 0 && !this.loading && !this.bare;
1985
+ const nativeAttrs = `
1986
+ ${this.disabled || this.loading ? "disabled" : ""}
1987
+ ${required ? "required" : ""}
1988
+ ${readonly ? "readonly" : ""}
1989
+ aria-label="${escapeHtml(label)}"
1990
+ ${describedBy ? `aria-describedby="${describedBy}"` : ""}
1991
+ ${this.loading ? 'aria-busy="true"' : ""}
1992
+ ${error ? 'aria-invalid="true"' : ""}
1993
+ ${autocomplete ? `autocomplete="${autocomplete}"` : ""}
1994
+ ${minLength ? `minlength="${minLength}"` : ""}
1995
+ ${maxLength ? `maxlength="${maxLength}"` : ""}
1996
+ ${pattern ? `pattern="${pattern}"` : ""}
1997
+ `;
1998
+ if (this.bare) {
1999
+ this.shadow.innerHTML = `
2000
+ <input
2001
+ part="input"
2002
+ class="viking-input-native"
2003
+ type="${type}"
2004
+ placeholder="${placeholder}"
2005
+ value="${value}"
2006
+ ${nativeAttrs}
2007
+ />
2008
+ `;
2009
+ } else {
2010
+ this.shadow.innerHTML = `
2011
+ <div class="${shellClasses}" part="shell">
2012
+ <slot name="leading"></slot>
2013
+ <input
2014
+ part="input"
2015
+ type="${type}"
2016
+ placeholder="${placeholder}"
2017
+ value="${value}"
2018
+ ${nativeAttrs}
2019
+ />
2020
+ ${this.loading ? '<span class="viking-input-spinner" aria-hidden="true"></span>' : ""}
2021
+ ${showClear ? '<button type="button" class="viking-input-clear" aria-label="Clear input" part="clear">\xD7</button>' : ""}
2022
+ <slot name="trailing"></slot>
2023
+ </div>
2024
+ `;
2025
+ }
2026
+ this.input = this.shadow.querySelector("input");
2027
+ this.input?.addEventListener("input", this.onInput);
2028
+ this.input?.addEventListener("blur", this.onBlur);
2029
+ const clearBtn = this.shadow.querySelector(".viking-input-clear");
2030
+ clearBtn?.addEventListener("click", this.onClear);
2031
+ }
2032
+ };
2033
+ var registerVikingInputWc = () => {
2034
+ defineCustomElement(VikingInputWc.tag, VikingInputWc);
2035
+ defineCustomElementAlias(VikingInputWc.legacyTag, VikingInputWc);
2036
+ };
2037
+
2038
+ // src/web/modal/viking-modal-wc.ts
2039
+ var VikingModalWc = class extends HTMLElementBase {
2040
+ static tag = "viking-modal";
2041
+ static legacyTag = "viking-modal-wc";
2042
+ static dialogTag = "viking-dialog";
2043
+ static get observedAttributes() {
2044
+ return ["open", "title", "dismissible"];
2045
+ }
2046
+ shadow;
2047
+ dialogEl = null;
2048
+ constructor() {
2049
+ super();
2050
+ this.shadow = this.attachShadow({ mode: "open" });
2051
+ attachShadowStyles(this.shadow, VIKING_MODAL_STYLES);
2052
+ }
2053
+ connectedCallback() {
2054
+ this.render();
2055
+ this.syncOpen();
2056
+ this.dialogEl?.addEventListener("close", this.onClose);
2057
+ this.dialogEl?.addEventListener("click", this.onBackdropClick);
2058
+ }
2059
+ disconnectedCallback() {
2060
+ this.dialogEl?.removeEventListener("close", this.onClose);
2061
+ this.dialogEl?.removeEventListener("click", this.onBackdropClick);
2062
+ }
2063
+ attributeChangedCallback(name) {
2064
+ if (!this.isConnected) {
2065
+ return;
2066
+ }
2067
+ if (name === "open") {
2068
+ this.syncOpen();
2069
+ return;
2070
+ }
2071
+ if (name === "title") {
2072
+ this.updateTitle();
2073
+ return;
2074
+ }
2075
+ if (name === "dismissible") {
2076
+ this.render();
2077
+ this.syncOpen();
2078
+ }
2079
+ }
2080
+ /** Opens the modal dialog. */
2081
+ openModal() {
2082
+ this.setAttribute("open", "");
2083
+ this.syncOpen();
2084
+ }
2085
+ /** Closes the modal dialog. */
2086
+ closeModal() {
2087
+ this.removeAttribute("open");
2088
+ closeModalDialog(this.dialogEl);
2089
+ }
2090
+ /** @deprecated Use openModal() */
2091
+ open() {
2092
+ this.openModal();
2093
+ }
2094
+ /** @deprecated Use closeModal() */
2095
+ close() {
2096
+ this.closeModal();
2097
+ }
2098
+ get dismissible() {
2099
+ return this.getAttribute("dismissible") !== "false";
2100
+ }
2101
+ onClose = () => {
2102
+ this.removeAttribute("open");
2103
+ this.dispatchEvent(
2104
+ new CustomEvent("viking-close", { bubbles: true, composed: true })
2105
+ );
2106
+ };
2107
+ onBackdropClick = (event) => {
2108
+ if (!this.dismissible) {
2109
+ return;
2110
+ }
2111
+ if (event.target === this.dialogEl) {
2112
+ this.closeModal();
2113
+ }
2114
+ };
2115
+ syncOpen() {
2116
+ if (!this.dialogEl) {
2117
+ return;
2118
+ }
2119
+ const shouldOpen = this.hasAttribute("open");
2120
+ if (shouldOpen && !this.dialogEl.open) {
2121
+ showModalDialog(this.dialogEl);
2122
+ queueMicrotask(() => {
2123
+ const closeBtn = this.shadow.querySelector(
2124
+ ".viking-modal-close"
2125
+ );
2126
+ (closeBtn ?? this.dialogEl)?.focus();
2127
+ });
2128
+ } else if (!shouldOpen && this.dialogEl.open) {
2129
+ closeModalDialog(this.dialogEl);
2130
+ }
2131
+ }
2132
+ updateTitle() {
2133
+ const title = this.getAttribute("title") ?? "Dialog";
2134
+ const heading = this.shadow.querySelector(".viking-modal-heading");
2135
+ if (heading) {
2136
+ heading.textContent = title;
2137
+ }
2138
+ this.dialogEl?.setAttribute("aria-label", title);
2139
+ }
2140
+ render() {
2141
+ const title = this.getAttribute("title") ?? "Dialog";
2142
+ this.shadow.innerHTML = `
2143
+ <dialog class="viking-modal-backdrop" aria-label="${escapeHtml(title)}" aria-modal="true">
2144
+ <div class="viking-modal-panel" part="panel" role="document">
2145
+ <header class="viking-modal-header" part="header">
2146
+ <h2 class="viking-modal-heading" part="title">${escapeHtml(title)}</h2>
2147
+ ${this.dismissible ? `<button type="button" class="viking-modal-close" part="close" aria-label="Close dialog">${renderInlineIcon("x", 20)}</button>` : ""}
2148
+ </header>
2149
+ <div class="viking-modal-body" part="body"><slot></slot></div>
2150
+ <footer class="viking-modal-footer" part="footer"><slot name="actions"></slot></footer>
2151
+ </div>
2152
+ </dialog>
2153
+ `;
2154
+ this.dialogEl = this.shadow.querySelector("dialog");
2155
+ this.shadow.querySelector(".viking-modal-close")?.addEventListener("click", () => this.closeModal());
2156
+ this.dialogEl?.addEventListener("keydown", (event) => {
2157
+ if (event.key === "Escape" && this.dismissible) {
2158
+ event.preventDefault();
2159
+ this.closeModal();
2160
+ }
2161
+ });
2162
+ }
2163
+ };
2164
+ var registerVikingModalWc = () => {
2165
+ defineCustomElement(VikingModalWc.tag, VikingModalWc);
2166
+ defineCustomElementAlias(VikingModalWc.legacyTag, VikingModalWc);
2167
+ defineCustomElementAlias(VikingModalWc.dialogTag, VikingModalWc);
2168
+ };
2169
+
2170
+ // src/web/search-palette/viking-search-palette-wc.ts
2171
+ var parseItems = (el) => {
2172
+ const raw = el.getAttribute("items");
2173
+ if (!raw) {
2174
+ return [];
2175
+ }
2176
+ try {
2177
+ const parsed = JSON.parse(raw);
2178
+ return Array.isArray(parsed) ? parsed : [];
2179
+ } catch {
2180
+ return [];
2181
+ }
2182
+ };
2183
+ var matchesQuery = (item, query) => {
2184
+ const haystack = [
2185
+ item.title,
2186
+ item.snippet ?? "",
2187
+ item.group ?? "",
2188
+ item.href,
2189
+ ...item.keywords ?? []
2190
+ ].join(" ").toLowerCase();
2191
+ return haystack.includes(query);
2192
+ };
2193
+ var filterItems = (items, query) => {
2194
+ const q = query.trim().toLowerCase();
2195
+ if (!q) {
2196
+ return items;
2197
+ }
2198
+ return items.filter((item) => matchesQuery(item, q));
2199
+ };
2200
+ var groupItems = (items) => {
2201
+ const groups = /* @__PURE__ */ new Map();
2202
+ items.forEach((item) => {
2203
+ const key = item.group ?? null;
2204
+ const bucket = groups.get(key) ?? [];
2205
+ bucket.push(item);
2206
+ groups.set(key, bucket);
2207
+ });
2208
+ return Array.from(groups.entries()).map(([group, grouped]) => ({
2209
+ group,
2210
+ items: grouped
2211
+ }));
2212
+ };
2213
+ var VikingSearchPaletteWc = class extends HTMLElementBase {
2214
+ static tag = "viking-command-palette";
2215
+ static searchTag = "viking-search-palette";
2216
+ static legacyTag = "viking-search-palette-wc";
2217
+ static get observedAttributes() {
2218
+ return ["open", "placeholder", "items", "global-shortcut"];
2219
+ }
2220
+ shadow;
2221
+ dialogEl = null;
2222
+ inputEl = null;
2223
+ resultsEl = null;
2224
+ globalKeyHandler = null;
2225
+ resultsId = vikingWcUid("viking-search-results");
2226
+ inputId = vikingWcUid("viking-search-input");
2227
+ query = "";
2228
+ activeIndex = 0;
2229
+ flatResults = [];
2230
+ constructor() {
2231
+ super();
2232
+ this.shadow = this.attachShadow({ mode: "open" });
2233
+ attachShadowStyles(this.shadow, VIKING_SEARCH_PALETTE_STYLES);
2234
+ }
2235
+ connectedCallback() {
2236
+ this.render();
2237
+ this.syncOpen();
2238
+ this.bindGlobalShortcut();
2239
+ this.dialogEl?.addEventListener("close", this.onClose);
2240
+ this.dialogEl?.addEventListener("click", this.onBackdropClick);
2241
+ this.inputEl?.addEventListener("input", this.onInput);
2242
+ this.inputEl?.addEventListener("keydown", this.onInputKeydown);
2243
+ }
2244
+ disconnectedCallback() {
2245
+ this.dialogEl?.removeEventListener("close", this.onClose);
2246
+ this.dialogEl?.removeEventListener("click", this.onBackdropClick);
2247
+ this.inputEl?.removeEventListener("input", this.onInput);
2248
+ this.inputEl?.removeEventListener("keydown", this.onInputKeydown);
2249
+ this.unbindGlobalShortcut();
2250
+ }
2251
+ attributeChangedCallback(name) {
2252
+ if (!this.isConnected) {
2253
+ return;
2254
+ }
2255
+ if (name === "open") {
2256
+ this.syncOpen();
2257
+ }
2258
+ if (name === "global-shortcut") {
2259
+ this.unbindGlobalShortcut();
2260
+ this.bindGlobalShortcut();
2261
+ }
2262
+ if (name === "items" || name === "placeholder") {
2263
+ if (name === "placeholder" && this.inputEl) {
2264
+ const placeholder = this.getAttribute("placeholder") ?? "Search documentation, dashboard, API\u2026";
2265
+ this.inputEl.placeholder = placeholder;
2266
+ this.inputEl.setAttribute("aria-label", placeholder);
2267
+ } else {
2268
+ this.renderResults();
2269
+ }
2270
+ }
2271
+ }
2272
+ /** Opens the command palette. */
2273
+ openPalette() {
2274
+ this.setAttribute("open", "");
2275
+ this.syncOpen();
2276
+ }
2277
+ /** Closes the command palette. */
2278
+ closePalette() {
2279
+ this.removeAttribute("open");
2280
+ closeModalDialog(this.dialogEl);
2281
+ }
2282
+ /** Sets the query string and re-renders filtered results. */
2283
+ search(query) {
2284
+ this.query = query;
2285
+ if (this.inputEl) {
2286
+ this.inputEl.value = query;
2287
+ }
2288
+ this.activeIndex = 0;
2289
+ this.renderResults();
2290
+ this.dispatchEvent(
2291
+ new CustomEvent("viking-query", {
2292
+ bubbles: true,
2293
+ composed: true,
2294
+ detail: { query: this.query }
2295
+ })
2296
+ );
2297
+ }
2298
+ onClose = () => {
2299
+ this.removeAttribute("open");
2300
+ this.query = "";
2301
+ this.activeIndex = 0;
2302
+ if (this.inputEl) {
2303
+ this.inputEl.value = "";
2304
+ }
2305
+ this.dispatchEvent(
2306
+ new CustomEvent("viking-close", { bubbles: true, composed: true })
2307
+ );
2308
+ };
2309
+ onBackdropClick = (event) => {
2310
+ if (event.target === this.dialogEl) {
2311
+ this.closePalette();
2312
+ }
2313
+ };
2314
+ onInput = (event) => {
2315
+ this.query = event.target.value ?? this.inputEl?.value ?? "";
2316
+ this.activeIndex = 0;
2317
+ this.renderResults();
2318
+ this.dispatchEvent(
2319
+ new CustomEvent("viking-query", {
2320
+ bubbles: true,
2321
+ composed: true,
2322
+ detail: { query: this.query }
2323
+ })
2324
+ );
2325
+ };
2326
+ onInputKeydown = (event) => {
2327
+ if (this.flatResults.length === 0) {
2328
+ if (event.key === "Escape") {
2329
+ event.preventDefault();
2330
+ this.closePalette();
2331
+ }
2332
+ return;
2333
+ }
2334
+ if (event.key === "ArrowDown") {
2335
+ event.preventDefault();
2336
+ this.activeIndex = Math.min(
2337
+ this.flatResults.length - 1,
2338
+ this.activeIndex + 1
2339
+ );
2340
+ this.renderResults();
2341
+ this.scrollActiveIntoView();
2342
+ return;
2343
+ }
2344
+ if (event.key === "ArrowUp") {
2345
+ event.preventDefault();
2346
+ this.activeIndex = Math.max(0, this.activeIndex - 1);
2347
+ this.renderResults();
2348
+ this.scrollActiveIntoView();
2349
+ return;
2350
+ }
2351
+ if (event.key === "Enter") {
2352
+ event.preventDefault();
2353
+ const item = this.flatResults[this.activeIndex];
2354
+ if (item) {
2355
+ this.activateItem(item);
2356
+ }
2357
+ }
2358
+ };
2359
+ bindGlobalShortcut() {
2360
+ if (!readBoolAttr(this, "global-shortcut")) {
2361
+ return;
2362
+ }
2363
+ this.globalKeyHandler = (event) => {
2364
+ if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
2365
+ event.preventDefault();
2366
+ if (this.hasAttribute("open")) {
2367
+ this.closePalette();
2368
+ } else {
2369
+ this.openPalette();
2370
+ }
2371
+ }
2372
+ };
2373
+ document.addEventListener("keydown", this.globalKeyHandler);
2374
+ }
2375
+ unbindGlobalShortcut() {
2376
+ if (this.globalKeyHandler) {
2377
+ document.removeEventListener("keydown", this.globalKeyHandler);
2378
+ this.globalKeyHandler = null;
2379
+ }
2380
+ }
2381
+ syncOpen() {
2382
+ if (!this.dialogEl) {
2383
+ return;
2384
+ }
2385
+ const shouldOpen = this.hasAttribute("open");
2386
+ if (shouldOpen && !this.dialogEl.open) {
2387
+ this.dialogEl.removeAttribute("aria-hidden");
2388
+ showModalDialog(this.dialogEl);
2389
+ this.activeIndex = 0;
2390
+ this.renderResults();
2391
+ queueMicrotask(() => this.inputEl?.focus());
2392
+ } else if (!shouldOpen && this.dialogEl.open) {
2393
+ closeModalDialog(this.dialogEl);
2394
+ this.dialogEl.setAttribute("aria-hidden", "true");
2395
+ } else if (!shouldOpen) {
2396
+ this.dialogEl.setAttribute("aria-hidden", "true");
2397
+ }
2398
+ }
2399
+ scrollActiveIntoView() {
2400
+ const active = this.resultsEl?.querySelector(
2401
+ ".viking-search-result.is-selected"
2402
+ );
2403
+ active?.scrollIntoView({ block: "nearest" });
2404
+ }
2405
+ activateItem(item) {
2406
+ this.dispatchEvent(
2407
+ new CustomEvent("viking-select", {
2408
+ bubbles: true,
2409
+ composed: true,
2410
+ detail: { item }
2411
+ })
2412
+ );
2413
+ this.closePalette();
2414
+ if (item.action === "cookie-settings") {
2415
+ const widgets = globalThis.DemlWidgets;
2416
+ widgets?.openCookieSettings?.();
2417
+ return;
2418
+ }
2419
+ if (item.action === "bug-report") {
2420
+ const widgets = globalThis.DemlWidgets;
2421
+ if (widgets?.openBugReport) {
2422
+ widgets.openBugReport();
2423
+ return;
2424
+ }
2425
+ }
2426
+ if (item.href && item.href !== "#") {
2427
+ window.location.assign(item.href);
2428
+ }
2429
+ }
2430
+ renderResults() {
2431
+ if (!this.resultsEl) {
2432
+ return;
2433
+ }
2434
+ const items = parseItems(this);
2435
+ const q = this.query.trim().toLowerCase();
2436
+ const filtered = filterItems(items, q);
2437
+ this.flatResults = filtered;
2438
+ if (filtered.length === 0) {
2439
+ const q2 = this.query.trim();
2440
+ this.resultsEl.innerHTML = `<p class="viking-search-empty" role="status">${q2 ? "No results found" : "Start typing to search\u2026"}</p>`;
2441
+ this.inputEl?.removeAttribute("aria-activedescendant");
2442
+ return;
2443
+ }
2444
+ if (this.activeIndex >= filtered.length) {
2445
+ this.activeIndex = filtered.length - 1;
2446
+ }
2447
+ let resultIndex = 0;
2448
+ const grouped = groupItems(filtered);
2449
+ const markup = grouped.map(({ group, items: groupItemsList }) => {
2450
+ const groupLabel = group ? `<p class="viking-search-group-label" role="presentation">${escapeHtml(group)}</p>` : "";
2451
+ const rows = groupItemsList.map((item) => {
2452
+ const id = `${this.resultsId}-result-${resultIndex}`;
2453
+ const selected = resultIndex === this.activeIndex;
2454
+ resultIndex += 1;
2455
+ return `
2456
+ <a
2457
+ id="${id}"
2458
+ class="viking-search-result${selected ? " is-selected" : ""}"
2459
+ role="option"
2460
+ aria-selected="${selected}"
2461
+ href="${escapeHtml(item.href)}"
2462
+ part="result"
2463
+ data-index="${resultIndex - 1}"
2464
+ >
2465
+ <div>
2466
+ <div class="viking-search-result-title">${escapeHtml(item.title)}</div>
2467
+ ${item.snippet ? `<div class="viking-search-result-snippet">${escapeHtml(item.snippet)}</div>` : ""}
2468
+ </div>
2469
+ </a>`;
2470
+ }).join("");
2471
+ return `${groupLabel}${rows}`;
2472
+ }).join("");
2473
+ this.resultsEl.innerHTML = `<div class="viking-search-results" id="${this.resultsId}" role="listbox" aria-label="Search results">${markup}</div>`;
2474
+ const activeId = `${this.resultsId}-result-${this.activeIndex}`;
2475
+ this.inputEl?.setAttribute("aria-activedescendant", activeId);
2476
+ this.inputEl?.setAttribute("role", "combobox");
2477
+ this.inputEl?.setAttribute("aria-expanded", "true");
2478
+ this.inputEl?.setAttribute("aria-controls", this.resultsId);
2479
+ this.resultsEl.querySelectorAll(".viking-search-result").forEach((node) => {
2480
+ node.addEventListener("click", (event) => {
2481
+ event.preventDefault();
2482
+ const index = Number(node.dataset["index"] ?? 0);
2483
+ const item = this.flatResults[index];
2484
+ if (item) {
2485
+ this.activateItem(item);
2486
+ }
2487
+ });
2488
+ node.addEventListener("mouseenter", () => {
2489
+ const index = Number(node.dataset["index"] ?? 0);
2490
+ this.activeIndex = index;
2491
+ this.renderResults();
2492
+ });
2493
+ });
2494
+ }
2495
+ render() {
2496
+ const placeholder = this.getAttribute("placeholder") ?? "Search documentation, dashboard, API\u2026";
2497
+ const mod = modKeyLabel();
2498
+ this.shadow.innerHTML = `
2499
+ <dialog class="viking-search-palette-backdrop" aria-label="Search" aria-hidden="true">
2500
+ <div class="viking-search-palette" part="panel" role="document">
2501
+ <div class="viking-search-palette-header" part="header">
2502
+ <span class="viking-search-palette-icon" aria-hidden="true">${renderInlineIcon("search", 24)}</span>
2503
+ <input
2504
+ id="${this.inputId}"
2505
+ type="search"
2506
+ class="viking-search-palette-input"
2507
+ part="input"
2508
+ placeholder="${escapeHtml(placeholder)}"
2509
+ aria-label="${escapeHtml(placeholder)}"
2510
+ aria-autocomplete="list"
2511
+ autocomplete="off"
2512
+ spellcheck="false"
2513
+ />
2514
+ <button type="button" class="viking-search-palette-close" part="close" aria-label="Close search">${renderInlineIcon("x", 20)}</button>
2515
+ </div>
2516
+ <div class="viking-search-palette-body" part="body">
2517
+ <slot></slot>
2518
+ <div class="viking-search-results-host"></div>
2519
+ </div>
2520
+ <footer class="viking-search-palette-footer" part="footer">
2521
+ <span class="viking-kbd">${mod}</span><span class="viking-kbd">K</span> toggle \xB7
2522
+ <span class="viking-kbd">\u2191</span><span class="viking-kbd">\u2193</span> navigate \xB7
2523
+ <span class="viking-kbd">Enter</span> open \xB7
2524
+ <span class="viking-kbd">Esc</span> close
2525
+ </footer>
2526
+ </div>
2527
+ </dialog>
2528
+ `;
2529
+ this.dialogEl = this.shadow.querySelector("dialog");
2530
+ this.inputEl = this.shadow.querySelector("input");
2531
+ this.resultsEl = this.shadow.querySelector(".viking-search-results-host");
2532
+ this.shadow.querySelector(".viking-search-palette-close")?.addEventListener("click", () => this.closePalette());
2533
+ this.dialogEl?.addEventListener("keydown", (event) => {
2534
+ if (event.key === "Escape") {
2535
+ event.preventDefault();
2536
+ this.closePalette();
2537
+ }
2538
+ });
2539
+ }
2540
+ };
2541
+ var registerVikingSearchPaletteWc = () => {
2542
+ defineCustomElement(VikingSearchPaletteWc.tag, VikingSearchPaletteWc);
2543
+ defineCustomElementAlias(
2544
+ VikingSearchPaletteWc.searchTag,
2545
+ VikingSearchPaletteWc
2546
+ );
2547
+ defineCustomElementAlias(
2548
+ VikingSearchPaletteWc.legacyTag,
2549
+ VikingSearchPaletteWc
2550
+ );
2551
+ };
2552
+
2553
+ // src/lib/site-drakkar/site-drakkar.config.ts
2554
+ var SITE_NAV_LINKS = [
2555
+ {
2556
+ id: "explore",
2557
+ label: "Explore",
2558
+ icon: "globe",
2559
+ appHref: "/explore",
2560
+ marketingHref: "/explore",
2561
+ platform: true
2562
+ },
2563
+ {
2564
+ id: "documentation",
2565
+ label: "Documentation",
2566
+ icon: "file",
2567
+ appHref: "https://dataengineeringformachinelearning.com/documentation/",
2568
+ marketingHref: "/documentation"
2569
+ },
2570
+ {
2571
+ id: "dashboard",
2572
+ label: "Dashboard",
2573
+ icon: "home",
2574
+ appHref: "/dashboard",
2575
+ marketingHref: "/dashboard",
2576
+ requireAuth: true,
2577
+ platform: true
2578
+ },
2579
+ {
2580
+ id: "sites",
2581
+ label: "Sites",
2582
+ icon: "building",
2583
+ appHref: "/settings",
2584
+ marketingHref: "/settings",
2585
+ requireAuth: true,
2586
+ platform: true
2587
+ },
2588
+ {
2589
+ id: "account",
2590
+ label: "Account",
2591
+ icon: "user",
2592
+ appHref: "/account",
2593
+ marketingHref: "/account",
2594
+ requireAuth: true,
2595
+ platform: true
2596
+ }
2597
+ ];
2598
+ var SITE_FOOTER_COLUMNS = [
2599
+ {
2600
+ title: "Platform",
2601
+ links: [
2602
+ {
2603
+ label: "Explore",
2604
+ appHref: "/explore",
2605
+ marketingHref: "/explore",
2606
+ platform: true
2607
+ },
2608
+ {
2609
+ label: "Dashboard",
2610
+ appHref: "/dashboard",
2611
+ marketingHref: "/dashboard",
2612
+ platform: true
2613
+ },
2614
+ {
2615
+ label: "Sites",
2616
+ appHref: "/settings",
2617
+ marketingHref: "/settings",
2618
+ platform: true
2619
+ },
2620
+ {
2621
+ label: "Account",
2622
+ appHref: "/account",
2623
+ marketingHref: "/account",
2624
+ platform: true
2625
+ },
2626
+ {
2627
+ label: "Platform Status",
2628
+ appHref: "/status/platform-status",
2629
+ marketingHref: "/status/platform-status",
2630
+ platform: true
2631
+ }
2632
+ ]
2633
+ },
2634
+ {
2635
+ title: "Resources",
2636
+ links: [
2637
+ {
2638
+ label: "Documentation",
2639
+ appHref: "https://dataengineeringformachinelearning.com/documentation/",
2640
+ marketingHref: "/documentation"
2641
+ },
2642
+ {
2643
+ label: "Whitepaper",
2644
+ appHref: "https://dataengineeringformachinelearning.com/whitepaper/",
2645
+ marketingHref: "/whitepaper"
2646
+ },
2647
+ {
2648
+ label: "Book",
2649
+ appHref: "https://dataengineeringformachinelearning.com/book/",
2650
+ marketingHref: "/book"
2651
+ }
2652
+ ]
2653
+ },
2654
+ {
2655
+ title: "Support",
2656
+ links: [
2657
+ {
2658
+ label: "Platform Status",
2659
+ appHref: "/status/platform-status",
2660
+ marketingHref: "/status/platform-status",
2661
+ platform: true
2662
+ },
2663
+ {
2664
+ label: "Report a Bug",
2665
+ appHref: "#",
2666
+ marketingHref: "#",
2667
+ action: "bug-report"
2668
+ }
2669
+ ]
2670
+ },
2671
+ {
2672
+ title: "Legal & Compliance",
2673
+ links: [
2674
+ {
2675
+ label: "Privacy Policy",
2676
+ appHref: "https://dataengineeringformachinelearning.com/privacy/",
2677
+ marketingHref: "/privacy"
2678
+ },
2679
+ {
2680
+ label: "Terms of Service",
2681
+ appHref: "https://dataengineeringformachinelearning.com/terms/",
2682
+ marketingHref: "/terms"
2683
+ },
2684
+ {
2685
+ label: "SOC2 Compliance",
2686
+ appHref: "https://dataengineeringformachinelearning.com/compliance/",
2687
+ marketingHref: "/compliance"
2688
+ },
2689
+ {
2690
+ label: "GDPR Compliance",
2691
+ appHref: "https://dataengineeringformachinelearning.com/privacy/#gdpr",
2692
+ marketingHref: "/privacy#gdpr"
2693
+ },
2694
+ {
2695
+ label: "Cookie Settings",
2696
+ appHref: "#",
2697
+ marketingHref: "#",
2698
+ action: "cookie-settings"
2699
+ }
2700
+ ]
2701
+ }
2702
+ ];
2703
+ var BUG_REPORT_QUERY = "reportBug=1";
2704
+ var COOKIE_SETTINGS_QUERY = "cookieSettings=1";
2705
+ var isAbsoluteUrl = (href) => /^https?:\/\//i.test(href);
2706
+ var joinBase = (base, path) => {
2707
+ if (isAbsoluteUrl(path)) {
2708
+ return path;
2709
+ }
2710
+ const normalizedBase = base.replace(/\/$/, "");
2711
+ const normalizedPath = path.startsWith("/") ? path : `/${path}`;
2712
+ return `${normalizedBase}${normalizedPath}`;
2713
+ };
2714
+ var bugReportHref = (urls) => `${joinBase(urls.app, "/")}?${BUG_REPORT_QUERY}`;
2715
+ var cookieSettingsHref = (urls) => `${joinBase(urls.marketing, "/")}?${COOKIE_SETTINGS_QUERY}`;
2716
+ var resolveMarketingContentHref = (href, urls) => {
2717
+ if (isAbsoluteUrl(href)) {
2718
+ return href;
2719
+ }
2720
+ if (href.startsWith("mailto:")) {
2721
+ return href;
2722
+ }
2723
+ return href.startsWith("/") ? href : joinBase(urls.marketing, href);
2724
+ };
2725
+ var resolvePlatformHref = (href, context, urls) => {
2726
+ if (context === "app") {
2727
+ return href;
2728
+ }
2729
+ return joinBase(urls.app, href);
2730
+ };
2731
+ var resolveNavHref = (link, context, urls) => {
2732
+ if (link.platform) {
2733
+ return resolvePlatformHref(link.appHref, context, urls);
2734
+ }
2735
+ if (context === "app") {
2736
+ return link.appHref;
2737
+ }
2738
+ return resolveMarketingContentHref(link.marketingHref, urls);
2739
+ };
2740
+ var resolveFooterHref = (link, context, urls) => {
2741
+ if (link.action === "bug-report") {
2742
+ return context === "app" ? "#" : bugReportHref(urls);
2743
+ }
2744
+ if (link.action === "cookie-settings") {
2745
+ return cookieSettingsHref(urls);
2746
+ }
2747
+ if (link.platform) {
2748
+ return resolvePlatformHref(link.appHref, context, urls);
2749
+ }
2750
+ if (context === "app") {
2751
+ return link.appHref;
2752
+ }
2753
+ return resolveMarketingContentHref(link.marketingHref, urls);
2754
+ };
2755
+ var resolveBrandHref = (context, urls) => {
2756
+ if (context === "marketing") {
2757
+ return "/";
2758
+ }
2759
+ return urls.marketing;
2760
+ };
2761
+ var visibleNavLinks = (links, isAuthenticated = false) => links.filter((link) => !link.requireAuth || isAuthenticated);
2762
+ var DEFAULT_SITE_URLS = {
2763
+ app: "https://deml.app",
2764
+ marketing: "https://dataengineeringformachinelearning.com",
2765
+ backend: "https://backend.deml.app"
2766
+ };
2767
+
2768
+ // src/lib/site-drakkar/suite-search-items.ts
2769
+ var dedupeItems = (items) => {
2770
+ const seen = /* @__PURE__ */ new Set();
2771
+ return items.filter((item) => {
2772
+ const key = `${item.title}:${item.href}:${item.action ?? ""}`;
2773
+ if (seen.has(key)) {
2774
+ return false;
2775
+ }
2776
+ seen.add(key);
2777
+ return true;
2778
+ });
2779
+ };
2780
+ var navItem = (link, context, urls) => ({
2781
+ title: link.label,
2782
+ href: resolveNavHref(link, context, urls),
2783
+ snippet: `Open ${link.label}`,
2784
+ group: "Platform",
2785
+ keywords: [link.id, link.label.toLowerCase(), "navigate", "go"]
2786
+ });
2787
+ var footerItem = (link, columnTitle, context, urls) => {
2788
+ if (link.action === "cookie-settings") {
2789
+ return {
2790
+ title: link.label,
2791
+ href: cookieSettingsHref(urls),
2792
+ snippet: "Manage analytics and cookie preferences",
2793
+ group: columnTitle,
2794
+ keywords: ["cookies", "consent", "privacy", "gdpr"],
2795
+ action: "cookie-settings"
2796
+ };
2797
+ }
2798
+ if (link.action === "bug-report") {
2799
+ return {
2800
+ title: link.label,
2801
+ href: context === "app" ? "#" : bugReportHref(urls),
2802
+ snippet: "Submit a product issue or regression",
2803
+ group: columnTitle,
2804
+ keywords: ["bug", "issue", "support", "feedback"],
2805
+ action: "bug-report"
2806
+ };
2807
+ }
2808
+ return {
2809
+ title: link.label,
2810
+ href: resolveFooterHref(link, context, urls),
2811
+ snippet: `Open ${link.label}`,
2812
+ group: columnTitle,
2813
+ keywords: [link.label.toLowerCase(), columnTitle.toLowerCase()]
2814
+ };
2815
+ };
2816
+ var SUITE_SEARCH_EXTRAS = [
2817
+ {
2818
+ title: "Viking-UI Components",
2819
+ snippet: "Browse the design system showcase",
2820
+ group: "Resources",
2821
+ keywords: ["viking", "ui", "design system", "components", "showcase"]
2822
+ },
2823
+ {
2824
+ title: "Design tokens",
2825
+ snippet: "Canonical --viking-* token matrix",
2826
+ group: "Resources",
2827
+ keywords: ["tokens", "theme", "css", "variables"]
2828
+ },
2829
+ {
2830
+ title: "API reference",
2831
+ snippet: "OpenAPI schema and REST endpoints",
2832
+ group: "Resources",
2833
+ keywords: ["api", "openapi", "swagger", "rest"]
2834
+ }
2835
+ ];
2836
+ var resolveExtraHref = (extra, context, urls) => {
2837
+ switch (extra.title) {
2838
+ case "Viking-UI Components":
2839
+ return "https://ui.dataengineeringformachinelearning.com/components";
2840
+ case "Design tokens":
2841
+ return "https://ui.dataengineeringformachinelearning.com/tokens";
2842
+ case "API reference":
2843
+ return `${urls.backend.replace(/\/$/, "")}/api/docs`;
2844
+ default:
2845
+ return context === "app" ? urls.app : urls.marketing;
2846
+ }
2847
+ };
2848
+ var DOCS_SEARCH_EXTRAS = [
2849
+ {
2850
+ title: "Components",
2851
+ href: "/components",
2852
+ snippet: "Browse all documented primitives",
2853
+ group: "Viking-UI",
2854
+ keywords: ["components", "showcase", "registry"]
2855
+ },
2856
+ {
2857
+ title: "Playground",
2858
+ href: "/playground",
2859
+ snippet: "Live Web Component sandbox",
2860
+ group: "Viking-UI",
2861
+ keywords: ["playground", "sandbox", "demo"]
2862
+ },
2863
+ {
2864
+ title: "Architecture",
2865
+ href: "/architecture",
2866
+ snippet: "CSS + WC + Angular layers",
2867
+ group: "Viking-UI",
2868
+ keywords: ["architecture", "layers", "web component"]
2869
+ },
2870
+ {
2871
+ title: "Design tokens",
2872
+ href: "/tokens",
2873
+ snippet: "Canonical --viking-* token matrix",
2874
+ group: "Viking-UI",
2875
+ keywords: ["tokens", "theme", "css", "variables"]
2876
+ },
2877
+ {
2878
+ title: "Theming",
2879
+ href: "/theming",
2880
+ snippet: "Light/dark mode and sync pipeline",
2881
+ group: "Viking-UI",
2882
+ keywords: ["theming", "dark", "light", "mode"]
2883
+ },
2884
+ {
2885
+ title: "Framework guides",
2886
+ href: "/frameworks",
2887
+ snippet: "Angular, Astro, Django setup",
2888
+ group: "Viking-UI",
2889
+ keywords: ["frameworks", "angular", "astro", "django"]
2890
+ },
2891
+ {
2892
+ title: "Contributing",
2893
+ href: "/contributing",
2894
+ snippet: "Extend the Viking-UI kit",
2895
+ group: "Viking-UI",
2896
+ keywords: ["contributing", "extend", "primitives"]
2897
+ }
2898
+ ];
2899
+ var resolveDocsHref = (href, docsOrigin) => href.startsWith("http") ? href : `${docsOrigin.replace(/\/$/, "")}${href.startsWith("/") ? href : `/${href}`}`;
2900
+ var buildSuiteSearchItems = (context, urls, options) => {
2901
+ const paletteContext = context === "docs" ? "marketing" : context;
2902
+ const items = [
2903
+ ...SITE_NAV_LINKS.map((link) => navItem(link, paletteContext, urls)),
2904
+ ...SITE_FOOTER_COLUMNS.flatMap(
2905
+ (column) => column.links.map(
2906
+ (link) => footerItem(link, column.title, paletteContext, urls)
2907
+ )
2908
+ ),
2909
+ ...SUITE_SEARCH_EXTRAS.map((extra) => ({
2910
+ ...extra,
2911
+ href: resolveExtraHref(extra, paletteContext, urls)
2912
+ }))
2913
+ ];
2914
+ if (context === "app") {
2915
+ items.push(
2916
+ {
2917
+ title: "Settings",
2918
+ href: "/settings",
2919
+ snippet: "Workspace domains, billing, and security",
2920
+ group: "Platform",
2921
+ keywords: ["settings", "sites", "workspace", "configuration"]
2922
+ },
2923
+ {
2924
+ title: "Billing & subscription",
2925
+ href: "/settings/billing",
2926
+ snippet: "Manage plan, invoices, and payment methods",
2927
+ group: "Platform",
2928
+ keywords: ["billing", "stripe", "subscription", "payment"]
2929
+ },
2930
+ {
2931
+ title: "Security settings",
2932
+ href: "/settings/security",
2933
+ snippet: "Keys, sessions, and access controls",
2934
+ group: "Platform",
2935
+ keywords: ["security", "keys", "auth", "rbac"]
2936
+ }
2937
+ );
2938
+ }
2939
+ if (context === "docs") {
2940
+ const docsOrigin = options?.docsOrigin ?? "https://ui.dataengineeringformachinelearning.com";
2941
+ items.push(
2942
+ ...DOCS_SEARCH_EXTRAS.map((extra) => ({
2943
+ ...extra,
2944
+ href: resolveDocsHref(extra.href, docsOrigin)
2945
+ }))
2946
+ );
2947
+ }
2948
+ return dedupeItems(items);
2949
+ };
2950
+
2951
+ // src/web/suite-search-palette/viking-suite-search-palette-wc.ts
2952
+ var VALID_CONTEXTS = /* @__PURE__ */ new Set([
2953
+ "app",
2954
+ "marketing",
2955
+ "backend",
2956
+ "docs"
2957
+ ]);
2958
+ var detectContext = () => {
2959
+ const explicit = document.documentElement.getAttribute("data-deml-context");
2960
+ if (explicit && VALID_CONTEXTS.has(explicit)) {
2961
+ return explicit;
2962
+ }
2963
+ const host = window.location.hostname;
2964
+ if (host.startsWith("ui.")) {
2965
+ return "docs";
2966
+ }
2967
+ if (host.includes("deml.app") && !host.startsWith("backend.")) {
2968
+ return "app";
2969
+ }
2970
+ if (host.startsWith("backend.")) {
2971
+ return "backend";
2972
+ }
2973
+ return "marketing";
2974
+ };
2975
+ var readUrls = (el) => {
2976
+ const env = globalThis.__DEML ?? {};
2977
+ return {
2978
+ app: el.getAttribute("app-url") ?? env.app ?? DEFAULT_SITE_URLS.app,
2979
+ marketing: el.getAttribute("marketing-url") ?? env.marketing ?? DEFAULT_SITE_URLS.marketing,
2980
+ backend: el.getAttribute("backend-url") ?? env.backend ?? DEFAULT_SITE_URLS.backend
2981
+ };
2982
+ };
2983
+ var readContext = (el) => {
2984
+ const raw = el.getAttribute("context");
2985
+ if (raw && VALID_CONTEXTS.has(raw)) {
2986
+ return raw;
2987
+ }
2988
+ return detectContext();
2989
+ };
2990
+ var VikingSuiteSearchPaletteWc = class extends HTMLElementBase {
2991
+ static tag = "viking-suite-command-palette";
2992
+ static searchTag = "viking-suite-search-palette";
2993
+ static legacyTag = "viking-suite-search-palette-wc";
2994
+ static get observedAttributes() {
2995
+ return [
2996
+ "context",
2997
+ "app-url",
2998
+ "marketing-url",
2999
+ "backend-url",
3000
+ "placeholder",
3001
+ "global-shortcut"
3002
+ ];
3003
+ }
3004
+ paletteEl = null;
3005
+ itemsLoaded = false;
3006
+ connectedCallback() {
3007
+ registerVikingSearchPaletteWc();
3008
+ this.ensurePalette();
3009
+ void this.loadItems();
3010
+ }
3011
+ attributeChangedCallback(name) {
3012
+ if (!this.isConnected) {
3013
+ return;
3014
+ }
3015
+ if (name === "placeholder" && this.paletteEl) {
3016
+ const placeholder = this.getAttribute("placeholder") ?? "Search documentation, dashboard, settings\u2026";
3017
+ this.paletteEl.setAttribute("placeholder", placeholder);
3018
+ return;
3019
+ }
3020
+ if (name === "global-shortcut" && this.paletteEl) {
3021
+ if (readBoolAttr(this, "global-shortcut") || !this.hasAttribute("global-shortcut")) {
3022
+ this.paletteEl.setAttribute("global-shortcut", "");
3023
+ } else {
3024
+ this.paletteEl.removeAttribute("global-shortcut");
3025
+ }
3026
+ return;
3027
+ }
3028
+ if (name === "context" || name === "app-url" || name === "marketing-url" || name === "backend-url") {
3029
+ void this.loadItems(true);
3030
+ }
3031
+ }
3032
+ /** Opens the unified command palette. */
3033
+ openPalette() {
3034
+ this.ensurePalette();
3035
+ void this.loadItems().then(() => this.paletteEl?.openPalette());
3036
+ }
3037
+ /** Closes the unified command palette. */
3038
+ closePalette() {
3039
+ this.paletteEl?.closePalette();
3040
+ }
3041
+ ensurePalette() {
3042
+ if (this.paletteEl) {
3043
+ return;
3044
+ }
3045
+ this.paletteEl = document.createElement(
3046
+ "viking-command-palette"
3047
+ );
3048
+ this.paletteEl.id = "deml-command-palette";
3049
+ const placeholder = this.getAttribute("placeholder") ?? "Search documentation, dashboard, settings\u2026";
3050
+ this.paletteEl.setAttribute("placeholder", placeholder);
3051
+ if (readBoolAttr(this, "global-shortcut") || !this.hasAttribute("global-shortcut")) {
3052
+ this.paletteEl.setAttribute("global-shortcut", "");
3053
+ }
3054
+ this.append(this.paletteEl);
3055
+ }
3056
+ async loadItems(force = false) {
3057
+ if (!this.paletteEl || this.itemsLoaded && !force) {
3058
+ return;
3059
+ }
3060
+ const context = readContext(this);
3061
+ const urls = readUrls(this);
3062
+ let items = buildSuiteSearchItems(
3063
+ context,
3064
+ urls,
3065
+ {
3066
+ docsOrigin: window.location.origin
3067
+ }
3068
+ );
3069
+ try {
3070
+ const response = await fetch("/assets/site-drakkar.json", {
3071
+ cache: "no-cache"
3072
+ });
3073
+ if (response.ok) {
3074
+ const drakkar = await response.json();
3075
+ if (drakkar.navLinks?.length || drakkar.footerColumns?.length) {
3076
+ items = buildSuiteSearchItems(context, urls, {
3077
+ docsOrigin: window.location.origin
3078
+ });
3079
+ }
3080
+ }
3081
+ } catch {
3082
+ }
3083
+ this.paletteEl.setAttribute("items", JSON.stringify(items));
3084
+ this.itemsLoaded = true;
3085
+ }
3086
+ };
3087
+ var registerVikingSuiteSearchPaletteWc = () => {
3088
+ defineCustomElement(
3089
+ VikingSuiteSearchPaletteWc.tag,
3090
+ VikingSuiteSearchPaletteWc
3091
+ );
3092
+ defineCustomElementAlias(
3093
+ VikingSuiteSearchPaletteWc.searchTag,
3094
+ VikingSuiteSearchPaletteWc
3095
+ );
3096
+ defineCustomElementAlias(
3097
+ VikingSuiteSearchPaletteWc.legacyTag,
3098
+ VikingSuiteSearchPaletteWc
3099
+ );
3100
+ };
3101
+
3102
+ // src/web/theme-toggle/viking-theme-toggle-wc.ts
3103
+ var VIKING_THEME_TOGGLE_STYLES = `
3104
+ :host {
3105
+ display: inline-flex;
3106
+ }
3107
+
3108
+ .theme-toggle-btn {
3109
+ display: inline-flex;
3110
+ align-items: center;
3111
+ justify-content: center;
3112
+ flex-shrink: 0;
3113
+ width: var(--viking-control-height, 40px);
3114
+ height: var(--viking-control-height, 40px);
3115
+ min-width: var(--viking-control-height, 40px);
3116
+ padding: 0;
3117
+ border: 1px solid color-mix(in srgb, var(--viking-accent, var(--viking-accent)) 32%, var(--viking-border-strong, var(--viking-border)));
3118
+ border-radius: var(--viking-radius);
3119
+ background: color-mix(in srgb, var(--viking-accent, var(--viking-accent)) 8%, var(--viking-surface));
3120
+ color: var(--viking-accent-strong, var(--viking-ring));
3121
+ box-shadow: var(--viking-shadow-sm);
3122
+ cursor: pointer;
3123
+ transition: var(--viking-transition-interactive);
3124
+ -webkit-tap-highlight-color: transparent;
3125
+ }
3126
+
3127
+ .theme-toggle-btn:hover {
3128
+ border-color: var(--viking-accent-strong, var(--viking-ring));
3129
+ background: color-mix(in srgb, var(--viking-accent, var(--viking-accent)) 14%, var(--viking-surface-alt));
3130
+ color: var(--viking-accent-strong, var(--viking-ring));
3131
+ box-shadow: var(--viking-shadow-md);
3132
+ }
3133
+
3134
+ .theme-toggle-btn:focus-visible {
3135
+ outline: var(--viking-ring-width, 2px) solid var(--viking-ring);
3136
+ outline-offset: var(--viking-ring-offset, 2px);
3137
+ }
3138
+
3139
+ .theme-toggle-btn:active {
3140
+ transform: scale(var(--viking-state-active-scale, 0.98));
3141
+ }
3142
+
3143
+ .theme-icon {
3144
+ display: none;
3145
+ }
3146
+
3147
+ .theme-icon.is-visible {
3148
+ display: block;
3149
+ }
3150
+ `;
3151
+ var applyTheme = (theme) => {
3152
+ document.documentElement.setAttribute("data-theme", theme);
3153
+ document.documentElement.classList.toggle("dark", theme === "dark");
3154
+ localStorage.setItem("theme", theme);
3155
+ };
3156
+ var readTheme = () => {
3157
+ const saved = localStorage.getItem("theme");
3158
+ if (saved === "light" || saved === "dark") return saved;
3159
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
3160
+ };
3161
+ var VikingThemeToggleWc = class extends HTMLElementBase {
3162
+ static tag = "viking-theme-toggle-wc";
3163
+ shadow;
3164
+ button = null;
3165
+ sunIcon = null;
3166
+ moonIcon = null;
3167
+ constructor() {
3168
+ super();
3169
+ this.shadow = this.attachShadow({ mode: "open" });
3170
+ attachShadowStyles(this.shadow, VIKING_THEME_TOGGLE_STYLES);
3171
+ }
3172
+ connectedCallback() {
3173
+ if (!this.hasAttribute("role")) {
3174
+ this.setAttribute("role", "button");
3175
+ }
3176
+ this.render();
3177
+ this.syncIcons();
3178
+ this.button?.addEventListener("click", this.onClick);
3179
+ }
3180
+ disconnectedCallback() {
3181
+ this.button?.removeEventListener("click", this.onClick);
3182
+ }
3183
+ onClick = () => {
3184
+ const next = readTheme() === "light" ? "dark" : "light";
3185
+ applyTheme(next);
3186
+ this.syncIcons();
3187
+ this.dispatchEvent(
3188
+ new CustomEvent("viking-theme-change", {
3189
+ bubbles: true,
3190
+ composed: true,
3191
+ detail: { theme: next }
3192
+ })
3193
+ );
3194
+ };
3195
+ syncIcons = () => {
3196
+ const isLight = readTheme() === "light";
3197
+ this.sunIcon?.classList.toggle("is-visible", isLight);
3198
+ this.moonIcon?.classList.toggle("is-visible", !isLight);
3199
+ };
3200
+ render() {
3201
+ const label = this.getAttribute("aria-label") ?? "Toggle light and dark theme";
3202
+ this.shadow.innerHTML = `
3203
+ <button type="button" class="theme-toggle-btn" part="control" aria-label="${label}">
3204
+ <svg class="theme-icon theme-icon-sun" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
3205
+ <circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/>
3206
+ <path stroke="currentColor" stroke-width="2" d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
3207
+ </svg>
3208
+ <svg class="theme-icon theme-icon-moon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
3209
+ <path fill="currentColor" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
3210
+ </svg>
3211
+ </button>
3212
+ `;
3213
+ this.button = this.shadow.querySelector("button");
3214
+ this.sunIcon = this.shadow.querySelector(".theme-icon-sun");
3215
+ this.moonIcon = this.shadow.querySelector(".theme-icon-moon");
3216
+ }
3217
+ };
3218
+ var registerVikingThemeToggleWc = () => {
3219
+ defineCustomElement(VikingThemeToggleWc.tag, VikingThemeToggleWc);
3220
+ };
3221
+
3222
+ // src/web/suite-header/viking-suite-header-wc.ts
3223
+ var VALID_CONTEXTS2 = /* @__PURE__ */ new Set([
3224
+ "app",
3225
+ "marketing",
3226
+ "backend",
3227
+ "docs"
3228
+ ]);
3229
+ var VIKING_SUITE_HEADER_STYLES = `
3230
+ :host {
3231
+ display: block;
3232
+ position: sticky;
3233
+ top: 0;
3234
+ z-index: var(--viking-z-sticky, 50);
3235
+ color: var(--viking-text);
3236
+ font-family: var(--viking-font-family);
3237
+ }
3238
+
3239
+ * {
3240
+ box-sizing: border-box;
3241
+ }
3242
+
3243
+ .suite-header {
3244
+ width: 100%;
3245
+ min-height: var(--viking-navbar-height, var(--viking-space-8));
3246
+ background: var(--viking-surface);
3247
+ border-bottom: var(--viking-border-width, 1px) solid var(--viking-border);
3248
+ box-shadow: var(--viking-shadow-xs);
3249
+ isolation: isolate;
3250
+ }
3251
+
3252
+ .suite-header__bar {
3253
+ display: grid;
3254
+ grid-template-columns: minmax(max-content, auto) minmax(0, 1fr) max-content;
3255
+ align-items: center;
3256
+ gap: var(--viking-space-1);
3257
+ width: 100%;
3258
+ max-width: var(--viking-container-max-width);
3259
+ min-height: var(--viking-navbar-height, var(--viking-space-8));
3260
+ margin-inline: auto;
3261
+ padding-inline: var(--viking-page-gutter);
3262
+ }
3263
+
3264
+ .suite-header__brand {
3265
+ display: inline-flex;
3266
+ align-items: center;
3267
+ justify-content: center;
3268
+ gap: var(--viking-space-1);
3269
+ min-width: 0;
3270
+ min-height: var(--viking-control-height);
3271
+ color: var(--viking-text);
3272
+ text-decoration: none;
3273
+ border-radius: var(--viking-radius);
3274
+ }
3275
+
3276
+ .suite-header__brand:focus-visible,
3277
+ .suite-header__link:focus-visible,
3278
+ .suite-header__icon-button:focus-visible,
3279
+ .suite-header__auth-link:focus-visible,
3280
+ .suite-header__user-trigger:focus-visible,
3281
+ .suite-header__menu-link:focus-visible,
3282
+ .suite-header__menu-button:focus-visible {
3283
+ outline: var(--viking-ring-width) solid var(--viking-ring);
3284
+ outline-offset: var(--viking-ring-offset);
3285
+ }
3286
+
3287
+ .suite-header__mark {
3288
+ display: inline-flex;
3289
+ align-items: center;
3290
+ justify-content: center;
3291
+ width: var(--viking-space-4);
3292
+ height: var(--viking-space-4);
3293
+ color: var(--viking-accent);
3294
+ flex: 0 0 auto;
3295
+ }
3296
+
3297
+ .suite-header__lockup {
3298
+ display: none;
3299
+ min-width: 0;
3300
+ color: var(--viking-text);
3301
+ font-size: var(--viking-font-size-sm);
3302
+ font-weight: var(--viking-font-weight-bold);
3303
+ line-height: var(--viking-line-height-tight);
3304
+ letter-spacing: var(--viking-letter-spacing-caps);
3305
+ text-transform: uppercase;
3306
+ white-space: nowrap;
3307
+ }
3308
+
3309
+ .suite-header__nav {
3310
+ display: none;
3311
+ align-items: center;
3312
+ justify-content: center;
3313
+ gap: var(--viking-space-half);
3314
+ min-width: 0;
3315
+ overflow: hidden;
3316
+ }
3317
+
3318
+ .suite-header__link {
3319
+ display: inline-flex;
3320
+ align-items: center;
3321
+ justify-content: center;
3322
+ gap: var(--viking-space-half);
3323
+ min-width: 0;
3324
+ height: var(--viking-control-height);
3325
+ padding-inline: var(--viking-space-1-5);
3326
+ color: var(--viking-text-muted);
3327
+ border-radius: var(--viking-radius) var(--viking-radius) 0 0;
3328
+ font-size: var(--viking-font-size-sm);
3329
+ font-weight: var(--viking-font-weight-semibold);
3330
+ line-height: var(--viking-line-height-none);
3331
+ letter-spacing: var(--viking-letter-spacing-caps);
3332
+ text-decoration: none;
3333
+ text-transform: uppercase;
3334
+ white-space: nowrap;
3335
+ transition: var(--viking-transition-interactive);
3336
+ }
3337
+
3338
+ .suite-header__link:hover,
3339
+ .suite-header__link[aria-current='page'] {
3340
+ color: var(--viking-text);
3341
+ background: var(--viking-surface-alt);
3342
+ }
3343
+
3344
+ .suite-header__actions {
3345
+ display: inline-flex;
3346
+ align-items: center;
3347
+ justify-content: flex-end;
3348
+ gap: var(--viking-space-1);
3349
+ min-width: 0;
3350
+ }
3351
+
3352
+ .suite-header__icon-button,
3353
+ .suite-header__menu-button,
3354
+ .suite-header__user-trigger,
3355
+ .suite-header__auth-link {
3356
+ min-height: var(--viking-control-height);
3357
+ border: var(--viking-border-width, 1px) solid var(--viking-border-strong);
3358
+ border-radius: var(--viking-radius);
3359
+ background: var(--viking-surface);
3360
+ color: var(--viking-text);
3361
+ box-shadow: var(--viking-shadow-sm);
3362
+ cursor: pointer;
3363
+ font-family: inherit;
3364
+ transition: var(--viking-transition-interactive);
3365
+ -webkit-tap-highlight-color: transparent;
3366
+ }
3367
+
3368
+ .suite-header__icon-button,
3369
+ .suite-header__menu-button {
3370
+ display: inline-flex;
3371
+ align-items: center;
3372
+ justify-content: center;
3373
+ width: var(--viking-control-height);
3374
+ min-width: var(--viking-control-height);
3375
+ padding: 0;
3376
+ }
3377
+
3378
+ .suite-header__icon-button:hover,
3379
+ .suite-header__menu-button:hover,
3380
+ .suite-header__user-trigger:hover,
3381
+ .suite-header__auth-link:hover {
3382
+ border-color: var(--viking-accent-strong);
3383
+ background: var(--viking-surface-alt);
3384
+ box-shadow: var(--viking-shadow-md);
3385
+ }
3386
+
3387
+ .suite-header__auth-link {
3388
+ display: none;
3389
+ align-items: center;
3390
+ justify-content: center;
3391
+ gap: var(--viking-space-half);
3392
+ min-width: max-content;
3393
+ padding-inline: var(--viking-space-2);
3394
+ background: var(--viking-accent);
3395
+ border-color: var(--viking-accent);
3396
+ color: var(--viking-accent-content);
3397
+ font-size: var(--viking-font-size-sm);
3398
+ font-weight: var(--viking-font-weight-bold);
3399
+ line-height: var(--viking-line-height-none);
3400
+ letter-spacing: var(--viking-letter-spacing-caps);
3401
+ text-decoration: none;
3402
+ text-transform: uppercase;
3403
+ }
3404
+
3405
+ .suite-header__auth-link:hover {
3406
+ background: var(--viking-accent-hover);
3407
+ color: var(--viking-accent-content);
3408
+ }
3409
+
3410
+ .suite-header__user {
3411
+ position: relative;
3412
+ display: none;
3413
+ }
3414
+
3415
+ .suite-header__user-trigger {
3416
+ display: inline-flex;
3417
+ align-items: center;
3418
+ justify-content: center;
3419
+ gap: var(--viking-space-1);
3420
+ min-width: max-content;
3421
+ padding-inline: var(--viking-space-1);
3422
+ }
3423
+
3424
+ .suite-header__avatar {
3425
+ display: inline-flex;
3426
+ align-items: center;
3427
+ justify-content: center;
3428
+ width: var(--viking-space-3);
3429
+ height: var(--viking-space-3);
3430
+ border-radius: var(--viking-radius-full);
3431
+ background: var(--viking-accent-soft);
3432
+ color: var(--viking-accent-strong);
3433
+ }
3434
+
3435
+ .suite-header__user-text {
3436
+ display: none;
3437
+ max-width: var(--viking-space-16);
3438
+ overflow: hidden;
3439
+ color: var(--viking-text);
3440
+ font-size: var(--viking-font-size-sm);
3441
+ font-weight: var(--viking-font-weight-semibold);
3442
+ line-height: var(--viking-line-height-tight);
3443
+ text-overflow: ellipsis;
3444
+ white-space: nowrap;
3445
+ }
3446
+
3447
+ .suite-header__menu {
3448
+ position: absolute;
3449
+ inset-block-start: calc(100% + var(--viking-space-1));
3450
+ inset-inline-end: 0;
3451
+ display: none;
3452
+ min-width: var(--viking-space-24);
3453
+ padding: var(--viking-space-1);
3454
+ background: var(--viking-surface);
3455
+ border: var(--viking-border-width, 1px) solid var(--viking-border-strong);
3456
+ border-radius: var(--viking-radius);
3457
+ box-shadow: var(--viking-shadow-lg);
3458
+ }
3459
+
3460
+ .suite-header__user[data-open='true'] .suite-header__menu {
3461
+ display: grid;
3462
+ gap: var(--viking-space-half);
3463
+ }
3464
+
3465
+ .suite-header__menu-label {
3466
+ padding: var(--viking-space-1);
3467
+ color: var(--viking-text-muted);
3468
+ font-size: var(--viking-font-size-xs);
3469
+ line-height: var(--viking-line-height-tight);
3470
+ }
3471
+
3472
+ .suite-header__menu-label strong {
3473
+ display: block;
3474
+ color: var(--viking-text);
3475
+ font-size: var(--viking-font-size-sm);
3476
+ }
3477
+
3478
+ .suite-header__menu-link,
3479
+ .suite-header__menu-button {
3480
+ display: inline-flex;
3481
+ align-items: center;
3482
+ justify-content: flex-start;
3483
+ gap: var(--viking-space-1);
3484
+ width: 100%;
3485
+ min-height: var(--viking-control-height);
3486
+ padding-inline: var(--viking-space-1);
3487
+ background: transparent;
3488
+ border: 0;
3489
+ border-radius: var(--viking-radius-sm);
3490
+ box-shadow: none;
3491
+ color: var(--viking-text);
3492
+ font: inherit;
3493
+ text-align: start;
3494
+ text-decoration: none;
3495
+ }
3496
+
3497
+ .suite-header__menu-link:hover,
3498
+ .suite-header__menu-button:hover {
3499
+ background: var(--viking-surface-alt);
3500
+ }
3501
+
3502
+ .suite-header__mobile {
3503
+ display: none;
3504
+ width: 100%;
3505
+ max-width: var(--viking-container-max-width);
3506
+ margin-inline: auto;
3507
+ padding: 0 var(--viking-page-gutter) var(--viking-space-2);
3508
+ }
3509
+
3510
+ .suite-header[data-menu-open='true'] .suite-header__mobile {
3511
+ display: grid;
3512
+ gap: var(--viking-space-1);
3513
+ }
3514
+
3515
+ .suite-header__mobile .suite-header__link,
3516
+ .suite-header__mobile .suite-header__auth-link,
3517
+ .suite-header__mobile .suite-header__menu-button {
3518
+ display: inline-flex;
3519
+ justify-content: flex-start;
3520
+ width: 100%;
3521
+ border-radius: var(--viking-radius);
3522
+ }
3523
+
3524
+ .suite-header__mobile .suite-header__auth-link {
3525
+ justify-content: center;
3526
+ margin-block-start: var(--viking-space-1);
3527
+ }
3528
+
3529
+ viking-suite-command-palette {
3530
+ display: contents;
3531
+ }
3532
+
3533
+ @media (min-width: 520px) {
3534
+ .suite-header__lockup,
3535
+ .suite-header__user-text {
3536
+ display: inline;
3537
+ }
3538
+ }
3539
+
3540
+ @media (min-width: 768px) {
3541
+ .suite-header__bar {
3542
+ padding-inline: var(--viking-page-gutter-lg);
3543
+ }
3544
+
3545
+ .suite-header__nav {
3546
+ display: flex;
3547
+ }
3548
+
3549
+ .suite-header__auth-link,
3550
+ .suite-header__user {
3551
+ display: inline-flex;
3552
+ }
3553
+
3554
+ .suite-header__menu-button {
3555
+ display: none;
3556
+ }
3557
+ }
3558
+ `;
3559
+ var detectContext2 = () => {
3560
+ const explicit = document.documentElement.getAttribute("data-deml-context");
3561
+ if (explicit && VALID_CONTEXTS2.has(explicit)) {
3562
+ return explicit;
3563
+ }
3564
+ const host = window.location.hostname;
3565
+ if (host.startsWith("ui.")) {
3566
+ return "docs";
3567
+ }
3568
+ if (host.startsWith("backend.")) {
3569
+ return "backend";
3570
+ }
3571
+ if (host.includes("deml.app")) {
3572
+ return "app";
3573
+ }
3574
+ return "marketing";
3575
+ };
3576
+ var readContext2 = (el) => {
3577
+ const raw = el.getAttribute("context");
3578
+ if (raw && VALID_CONTEXTS2.has(raw)) {
3579
+ return raw;
3580
+ }
3581
+ return detectContext2();
3582
+ };
3583
+ var readUrls2 = (el) => {
3584
+ const env = globalThis.__DEML ?? {};
3585
+ return {
3586
+ app: el.getAttribute("app-url") ?? env.app ?? DEFAULT_SITE_URLS.app,
3587
+ marketing: el.getAttribute("marketing-url") ?? env.marketing ?? DEFAULT_SITE_URLS.marketing,
3588
+ backend: el.getAttribute("backend-url") ?? env.backend ?? DEFAULT_SITE_URLS.backend
3589
+ };
3590
+ };
3591
+ var isCurrentHref = (href) => {
3592
+ try {
3593
+ const url = new URL(href, window.location.origin);
3594
+ return url.origin === window.location.origin && url.pathname === window.location.pathname;
3595
+ } catch {
3596
+ return false;
3597
+ }
3598
+ };
3599
+ var VikingSuiteHeaderWc = class extends HTMLElementBase {
3600
+ static tag = "viking-suite-header";
3601
+ static get observedAttributes() {
3602
+ return [
3603
+ "context",
3604
+ "app-url",
3605
+ "marketing-url",
3606
+ "backend-url",
3607
+ "authenticated",
3608
+ "user-name",
3609
+ "user-email",
3610
+ "sign-in-href",
3611
+ "dashboard-href"
3612
+ ];
3613
+ }
3614
+ shadow;
3615
+ menuOpen = false;
3616
+ userMenuOpen = false;
3617
+ paletteEl = null;
3618
+ constructor() {
3619
+ super();
3620
+ this.shadow = this.attachShadow({ mode: "open" });
3621
+ attachShadowStyles(this.shadow, VIKING_SUITE_HEADER_STYLES);
3622
+ }
3623
+ connectedCallback() {
3624
+ registerVikingThemeToggleWc();
3625
+ registerVikingSuiteSearchPaletteWc();
3626
+ this.render();
3627
+ document.addEventListener("click", this.onDocumentClick);
3628
+ }
3629
+ disconnectedCallback() {
3630
+ document.removeEventListener("click", this.onDocumentClick);
3631
+ }
3632
+ attributeChangedCallback() {
3633
+ if (this.isConnected) {
3634
+ this.render();
3635
+ }
3636
+ }
3637
+ openSearch() {
3638
+ this.paletteEl?.openPalette();
3639
+ this.dispatchEvent(
3640
+ new CustomEvent("viking-search-open", { bubbles: true, composed: true })
3641
+ );
3642
+ }
3643
+ onDocumentClick = (event) => {
3644
+ if (event.composedPath().includes(this)) {
3645
+ return;
3646
+ }
3647
+ if (this.menuOpen || this.userMenuOpen) {
3648
+ this.menuOpen = false;
3649
+ this.userMenuOpen = false;
3650
+ this.syncOpenState();
3651
+ }
3652
+ };
3653
+ onSearchClick = () => {
3654
+ this.openSearch();
3655
+ };
3656
+ onMenuClick = () => {
3657
+ this.menuOpen = !this.menuOpen;
3658
+ this.syncOpenState();
3659
+ };
3660
+ onUserClick = () => {
3661
+ this.userMenuOpen = !this.userMenuOpen;
3662
+ this.syncOpenState();
3663
+ };
3664
+ onSignInClick = (event) => {
3665
+ const signInEvent = new CustomEvent("viking-sign-in", {
3666
+ bubbles: true,
3667
+ cancelable: true,
3668
+ composed: true,
3669
+ detail: event
3670
+ });
3671
+ this.dispatchEvent(signInEvent);
3672
+ if (signInEvent.defaultPrevented) {
3673
+ event.preventDefault();
3674
+ }
3675
+ };
3676
+ onSignOutClick = () => {
3677
+ this.userMenuOpen = false;
3678
+ this.menuOpen = false;
3679
+ this.syncOpenState();
3680
+ this.dispatchEvent(
3681
+ new CustomEvent("viking-sign-out", { bubbles: true, composed: true })
3682
+ );
3683
+ };
3684
+ syncOpenState() {
3685
+ const header = this.shadow.querySelector(".suite-header");
3686
+ const menuButton = this.shadow.querySelector("[data-menu-toggle]");
3687
+ const user = this.shadow.querySelector(".suite-header__user");
3688
+ const userButton = this.shadow.querySelector("[data-user-toggle]");
3689
+ header?.setAttribute("data-menu-open", String(this.menuOpen));
3690
+ menuButton?.setAttribute("aria-expanded", String(this.menuOpen));
3691
+ user?.setAttribute("data-open", String(this.userMenuOpen));
3692
+ userButton?.setAttribute("aria-expanded", String(this.userMenuOpen));
3693
+ }
3694
+ renderNavLinks(context, urls, authenticated) {
3695
+ return visibleNavLinks(SITE_NAV_LINKS, authenticated).map((link) => {
3696
+ const href = resolveNavHref(link, context, urls);
3697
+ const current = isCurrentHref(href) ? ' aria-current="page"' : "";
3698
+ return `
3699
+ <a class="suite-header__link" href="${escapeHtml(href)}"${current}>
3700
+ ${renderInlineIcon(link.icon, 16, "suite-header__link-icon")}
3701
+ <span>${escapeHtml(link.label)}</span>
3702
+ </a>
3703
+ `;
3704
+ }).join("");
3705
+ }
3706
+ renderAuth(urls, authenticated, mobile = false) {
3707
+ if (!authenticated) {
3708
+ const signInHref = this.getAttribute("sign-in-href") ?? `${urls.app}/login`;
3709
+ return `
3710
+ <a class="suite-header__auth-link" href="${escapeHtml(signInHref)}" data-sign-in>
3711
+ <span>Sign In</span>
3712
+ ${renderInlineIcon("arrow-right", 16, "suite-header__auth-icon")}
3713
+ </a>
3714
+ `;
3715
+ }
3716
+ if (mobile) {
3717
+ return `
3718
+ <a class="suite-header__menu-link" href="${escapeHtml(this.getDashboardHref(urls))}">
3719
+ ${renderInlineIcon("home", 16, "suite-header__menu-icon")}
3720
+ <span>Dashboard</span>
3721
+ </a>
3722
+ <button class="suite-header__menu-button" type="button" data-sign-out>
3723
+ ${renderInlineIcon("log-out", 16, "suite-header__menu-icon")}
3724
+ <span>Sign Out</span>
3725
+ </button>
3726
+ `;
3727
+ }
3728
+ const userName = this.getAttribute("user-name") ?? "Account";
3729
+ const userEmail = this.getAttribute("user-email") ?? "";
3730
+ return `
3731
+ <div class="suite-header__user" data-open="${String(this.userMenuOpen)}">
3732
+ <button
3733
+ class="suite-header__user-trigger"
3734
+ type="button"
3735
+ aria-haspopup="menu"
3736
+ aria-expanded="${String(this.userMenuOpen)}"
3737
+ data-user-toggle
3738
+ >
3739
+ <span class="suite-header__avatar" aria-hidden="true">
3740
+ ${renderInlineIcon("user", 16, "suite-header__avatar-icon")}
3741
+ </span>
3742
+ <span class="suite-header__user-text">${escapeHtml(userName)}</span>
3743
+ ${renderInlineIcon("chevron-down", 16, "suite-header__chevron")}
3744
+ </button>
3745
+ <div class="suite-header__menu" role="menu">
3746
+ <div class="suite-header__menu-label">
3747
+ <strong>${escapeHtml(userName)}</strong>
3748
+ ${userEmail ? `<span>${escapeHtml(userEmail)}</span>` : ""}
3749
+ </div>
3750
+ <a class="suite-header__menu-link" role="menuitem" href="${escapeHtml(
3751
+ this.getDashboardHref(urls)
3752
+ )}">
3753
+ ${renderInlineIcon("home", 16, "suite-header__menu-icon")}
3754
+ <span>Dashboard</span>
3755
+ </a>
3756
+ <button class="suite-header__menu-button" type="button" role="menuitem" data-sign-out>
3757
+ ${renderInlineIcon("log-out", 16, "suite-header__menu-icon")}
3758
+ <span>Sign Out</span>
3759
+ </button>
3760
+ </div>
3761
+ </div>
3762
+ `;
3763
+ }
3764
+ getDashboardHref(urls) {
3765
+ return this.getAttribute("dashboard-href") ?? `${urls.app}/dashboard`;
3766
+ }
3767
+ render() {
3768
+ const context = readContext2(this);
3769
+ const urls = readUrls2(this);
3770
+ const authenticated = readBoolAttr(this, "authenticated");
3771
+ const navLinks = this.renderNavLinks(context, urls, authenticated);
3772
+ const brandHref = resolveBrandHref(context, urls);
3773
+ const shortcut = `${modKeyLabel()}K`;
3774
+ this.shadow.innerHTML = `
3775
+ <header class="suite-header" data-menu-open="${String(this.menuOpen)}">
3776
+ <div class="suite-header__bar">
3777
+ <a class="suite-header__brand" href="${escapeHtml(
3778
+ brandHref
3779
+ )}" aria-label="Data Engineering for Machine Learning home">
3780
+ <span class="suite-header__mark" aria-hidden="true">
3781
+ ${renderInlineIcon("drakkar", 28, "suite-header__brand-icon")}
3782
+ </span>
3783
+ <span class="suite-header__lockup">DEML</span>
3784
+ </a>
3785
+
3786
+ <nav class="suite-header__nav" aria-label="Main navigation">
3787
+ ${navLinks}
3788
+ </nav>
3789
+
3790
+ <div class="suite-header__actions">
3791
+ <button
3792
+ class="suite-header__icon-button"
3793
+ type="button"
3794
+ aria-label="Open command palette (${shortcut})"
3795
+ title="Open command palette (${shortcut})"
3796
+ data-search-trigger
3797
+ >
3798
+ ${renderInlineIcon("search", 18, "suite-header__action-icon")}
3799
+ </button>
3800
+ ${this.renderAuth(urls, authenticated)}
3801
+ <viking-theme-toggle-wc></viking-theme-toggle-wc>
3802
+ <button
3803
+ class="suite-header__menu-button"
3804
+ type="button"
3805
+ aria-label="Toggle navigation menu"
3806
+ aria-expanded="${String(this.menuOpen)}"
3807
+ data-menu-toggle
3808
+ >
3809
+ ${renderInlineIcon(this.menuOpen ? "x" : "menu", 18, "suite-header__action-icon")}
3810
+ </button>
3811
+ </div>
3812
+ </div>
3813
+
3814
+ <nav class="suite-header__mobile" aria-label="Mobile navigation">
3815
+ ${navLinks}
3816
+ ${this.renderAuth(urls, authenticated, true)}
3817
+ </nav>
3818
+ </header>
3819
+ <viking-suite-command-palette
3820
+ context="${context}"
3821
+ app-url="${escapeHtml(urls.app)}"
3822
+ marketing-url="${escapeHtml(urls.marketing)}"
3823
+ backend-url="${escapeHtml(urls.backend)}"
3824
+ global-shortcut
3825
+ ></viking-suite-command-palette>
3826
+ `;
3827
+ this.paletteEl = this.shadow.querySelector("viking-suite-command-palette");
3828
+ this.shadow.querySelector("[data-search-trigger]")?.addEventListener("click", this.onSearchClick);
3829
+ this.shadow.querySelector("[data-menu-toggle]")?.addEventListener("click", this.onMenuClick);
3830
+ this.shadow.querySelector("[data-user-toggle]")?.addEventListener("click", this.onUserClick);
3831
+ this.shadow.querySelectorAll("[data-sign-in]").forEach(
3832
+ (control) => control.addEventListener("click", this.onSignInClick)
3833
+ );
3834
+ this.shadow.querySelectorAll("[data-sign-out]").forEach(
3835
+ (control) => control.addEventListener("click", this.onSignOutClick)
3836
+ );
3837
+ }
3838
+ };
3839
+ var registerVikingSuiteHeaderWc = () => {
3840
+ defineCustomElement(VikingSuiteHeaderWc.tag, VikingSuiteHeaderWc);
3841
+ };
3842
+
3843
+ // src/web/select/viking-select-wc.ts
3844
+ var VikingSelectWc = class extends HTMLElementBase {
3845
+ static formAssociated = true;
3846
+ static tag = "viking-select";
3847
+ static legacyTag = "viking-select-wc";
3848
+ static get observedAttributes() {
3849
+ return [
3850
+ "label",
3851
+ "name",
3852
+ "value",
3853
+ "placeholder",
3854
+ "description",
3855
+ "error",
3856
+ "width",
3857
+ "disabled",
3858
+ "required"
3859
+ ];
3860
+ }
3861
+ shadow;
3862
+ internals;
3863
+ selectEl = null;
3864
+ optionObserver = null;
3865
+ controlId = vikingWcUid("viking-select");
3866
+ constructor() {
3867
+ super();
3868
+ this.shadow = this.attachShadow({ mode: "open" });
3869
+ this.internals = attachElementInternals(this);
3870
+ attachShadowStyles(this.shadow, VIKING_SELECT_STYLES);
3871
+ }
3872
+ connectedCallback() {
3873
+ this.render();
3874
+ this.syncOptions();
3875
+ this.observeOptions();
3876
+ this.selectEl?.addEventListener("change", this.onChange);
3877
+ }
3878
+ disconnectedCallback() {
3879
+ this.selectEl?.removeEventListener("change", this.onChange);
3880
+ this.optionObserver?.disconnect();
3881
+ this.optionObserver = null;
3882
+ }
3883
+ attributeChangedCallback(name) {
3884
+ if (!this.isConnected) {
3885
+ return;
3886
+ }
3887
+ if (name === "value" && this.selectEl) {
3888
+ this.selectEl.value = this.getAttribute("value") ?? "";
3889
+ this.syncFormValue();
3890
+ return;
3891
+ }
3892
+ if (name === "error" || name === "description" || name === "label") {
3893
+ this.render();
3894
+ this.syncOptions();
3895
+ return;
3896
+ }
3897
+ this.render();
3898
+ this.syncOptions();
3899
+ }
3900
+ get value() {
3901
+ return this.selectEl?.value ?? this.getAttribute("value") ?? "";
3902
+ }
3903
+ set value(next) {
3904
+ this.setAttribute("value", next);
3905
+ if (this.selectEl) {
3906
+ this.selectEl.value = next;
3907
+ }
3908
+ this.syncFormValue();
3909
+ }
3910
+ onChange = () => {
3911
+ const value = this.selectEl?.value ?? "";
3912
+ this.setAttribute("value", value);
3913
+ this.syncFormValue();
3914
+ this.dispatchEvent(
3915
+ new CustomEvent("viking-change", {
3916
+ bubbles: true,
3917
+ composed: true,
3918
+ detail: { value }
3919
+ })
3920
+ );
3921
+ };
3922
+ syncFormValue() {
3923
+ setFormValue(this.internals, this.value);
3924
+ }
3925
+ observeOptions() {
3926
+ this.optionObserver?.disconnect();
3927
+ this.optionObserver = new MutationObserver(() => this.syncOptions());
3928
+ this.optionObserver.observe(this, {
3929
+ childList: true,
3930
+ subtree: true,
3931
+ characterData: true
3932
+ });
3933
+ }
3934
+ render() {
3935
+ const label = this.getAttribute("label") ?? "";
3936
+ const name = this.getAttribute("name") ?? "";
3937
+ const disabled = this.hasAttribute("disabled");
3938
+ const required = this.hasAttribute("required");
3939
+ const error = this.getAttribute("error") ?? "";
3940
+ const description = this.getAttribute("description") ?? "";
3941
+ const describedBy = [
3942
+ description && `${this.controlId}-desc`,
3943
+ error && `${this.controlId}-error`
3944
+ ].filter(Boolean).join(" ");
3945
+ this.shadow.innerHTML = `
3946
+ <div class="viking-field" part="field">
3947
+ ${label ? `<label class="viking-field-label" part="label" for="${this.controlId}">${escapeHtml(label)}</label>` : ""}
3948
+ <select
3949
+ id="${this.controlId}"
3950
+ class="viking-select-native"
3951
+ part="control"
3952
+ ${name ? `name="${escapeHtml(name)}"` : ""}
3953
+ ${disabled ? "disabled" : ""}
3954
+ ${required ? "required" : ""}
3955
+ ${error ? 'aria-invalid="true"' : ""}
3956
+ ${describedBy ? `aria-describedby="${describedBy}"` : ""}
3957
+ ></select>
3958
+ ${description ? `<p id="${this.controlId}-desc" class="viking-field-description" part="description">${escapeHtml(description)}</p>` : ""}
3959
+ ${error ? `<p id="${this.controlId}-error" class="viking-field-error" part="error" role="alert">${escapeHtml(error)}</p>` : ""}
3960
+ </div>
3961
+ `;
3962
+ this.selectEl = this.shadow.querySelector("select");
3963
+ const value = this.getAttribute("value");
3964
+ if (this.selectEl && value) {
3965
+ this.selectEl.value = value;
3966
+ }
3967
+ this.syncFormValue();
3968
+ }
3969
+ syncOptions() {
3970
+ if (!this.selectEl) {
3971
+ return;
3972
+ }
3973
+ const currentValue = this.selectEl.value;
3974
+ this.selectEl.innerHTML = "";
3975
+ const options = this.querySelectorAll("option");
3976
+ if (options.length === 0) {
3977
+ const placeholder = this.getAttribute("placeholder") ?? "Select\u2026";
3978
+ const opt = document.createElement("option");
3979
+ opt.value = "";
3980
+ opt.textContent = placeholder;
3981
+ opt.disabled = true;
3982
+ opt.selected = !this.getAttribute("value");
3983
+ this.selectEl.append(opt);
3984
+ return;
3985
+ }
3986
+ options.forEach((opt) => {
3987
+ this.selectEl?.append(opt.cloneNode(true));
3988
+ });
3989
+ const value = this.getAttribute("value");
3990
+ if (value) {
3991
+ this.selectEl.value = value;
3992
+ } else if (currentValue) {
3993
+ this.selectEl.value = currentValue;
3994
+ }
3995
+ this.syncFormValue();
3996
+ }
3997
+ };
3998
+ var registerVikingSelectWc = () => {
3999
+ defineCustomElement(VikingSelectWc.tag, VikingSelectWc);
4000
+ defineCustomElementAlias(VikingSelectWc.legacyTag, VikingSelectWc);
4001
+ };
4002
+
4003
+ // src/web/index.ts
4004
+ var registerVikingElements = () => {
4005
+ registerVikingButtonWc();
4006
+ registerVikingFieldWc();
4007
+ registerVikingInputWc();
4008
+ registerVikingBadgeWc();
4009
+ registerVikingCalloutWc();
4010
+ registerVikingCardWc();
4011
+ registerVikingSelectWc();
4012
+ registerVikingModalWc();
4013
+ registerVikingSearchPaletteWc();
4014
+ registerVikingSuiteHeaderWc();
4015
+ registerVikingSuiteSearchPaletteWc();
4016
+ registerVikingThemeToggleWc();
4017
+ };
4018
+ if (typeof globalThis !== "undefined" && typeof document !== "undefined") {
4019
+ if (document.readyState === "loading") {
4020
+ document.addEventListener("DOMContentLoaded", registerVikingElements);
4021
+ } else {
4022
+ registerVikingElements();
4023
+ }
4024
+ }
4025
+ export {
4026
+ VikingBadgeWc,
4027
+ VikingButtonWc,
4028
+ VikingCalloutWc,
4029
+ VikingCardWc,
4030
+ VikingFieldWc,
4031
+ VikingInputWc,
4032
+ VikingModalWc,
4033
+ VikingSearchPaletteWc,
4034
+ VikingSelectWc,
4035
+ VikingSuiteHeaderWc,
4036
+ VikingSuiteSearchPaletteWc,
4037
+ VikingThemeToggleWc,
4038
+ registerVikingBadgeWc,
4039
+ registerVikingButtonWc,
4040
+ registerVikingCalloutWc,
4041
+ registerVikingCardWc,
4042
+ registerVikingElements,
4043
+ registerVikingFieldWc,
4044
+ registerVikingInputWc,
4045
+ registerVikingModalWc,
4046
+ registerVikingSearchPaletteWc,
4047
+ registerVikingSelectWc,
4048
+ registerVikingSuiteHeaderWc,
4049
+ registerVikingSuiteSearchPaletteWc,
4050
+ registerVikingThemeToggleWc
4051
+ };