@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (246) hide show
  1. package/README.md +35 -11
  2. package/dist/README.md +35 -11
  3. package/dist/design-tokens.css +300 -85
  4. package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs +100 -64
  5. package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs.map +1 -1
  6. package/dist/icons.js +306 -0
  7. package/dist/package.json +24 -5
  8. package/{src/lib/site-drakkar/site-drakkar.config.ts → dist/site-drakkar.js} +64 -130
  9. package/dist/src/tokens/viking-tokens.json +9 -7
  10. package/dist/types/dataengineeringformachinelearning-viking-ui.d.ts +97 -3
  11. package/dist/viking-components.css +161 -70
  12. package/dist/viking-tokens.json +9 -7
  13. package/dist/viking-ui-elements.js +44 -32
  14. package/dist/viking-ui.css +1 -1
  15. package/dist/web-components.js +44 -32
  16. package/package.json +30 -8
  17. package/dist/scripts/build-web-components.mjs +0 -37
  18. package/dist/src/web/badge/viking-badge-wc.ts +0 -116
  19. package/dist/src/web/button/viking-button-wc.ts +0 -165
  20. package/dist/src/web/callout/viking-callout-wc.ts +0 -105
  21. package/dist/src/web/card/viking-card-wc.ts +0 -67
  22. package/dist/src/web/core/base.ts +0 -56
  23. package/dist/src/web/core/dom.ts +0 -53
  24. package/dist/src/web/core/icons-inline.ts +0 -44
  25. package/dist/src/web/core/styles.ts +0 -1261
  26. package/dist/src/web/core/types.ts +0 -19
  27. package/dist/src/web/field/viking-field-wc.ts +0 -154
  28. package/dist/src/web/index.ts +0 -73
  29. package/dist/src/web/input/viking-input-wc.ts +0 -211
  30. package/dist/src/web/modal/viking-modal-wc.ts +0 -187
  31. package/dist/src/web/search-palette/viking-search-palette-wc.ts +0 -495
  32. package/dist/src/web/select/viking-select-wc.ts +0 -218
  33. package/dist/src/web/suite-header/viking-suite-header-wc.ts +0 -729
  34. package/dist/src/web/suite-search-palette/viking-suite-search-palette-wc.ts +0 -234
  35. package/dist/src/web/theme-toggle/viking-theme-toggle-wc.ts +0 -139
  36. package/dist/src/web/types.ts +0 -37
  37. package/dist/src/web/web-components.spec.ts +0 -297
  38. package/src/assets/drakkar-favicon.svg +0 -17
  39. package/src/assets/fonts/inter/InterVariable-Italic.woff2 +0 -0
  40. package/src/assets/fonts/inter/InterVariable.woff2 +0 -0
  41. package/src/core/brand/deml-lockup.svg +0 -5
  42. package/src/core/brand/deml-mark-compact.svg +0 -4
  43. package/src/core/brand/deml-mark-filled.svg +0 -3
  44. package/src/core/brand/deml-mark-outline.svg +0 -4
  45. package/src/core/brand-icons.ts +0 -62
  46. package/src/core/icons.spec.ts +0 -52
  47. package/src/core/icons.ts +0 -206
  48. package/src/core/integration-brand-icons.ts +0 -77
  49. package/src/core/lucide-paths.generated.ts +0 -130
  50. package/src/core/types.ts +0 -85
  51. package/src/core/uid.ts +0 -7
  52. package/src/elements/button/viking-button.ts +0 -201
  53. package/src/elements/card/viking-card.ts +0 -60
  54. package/src/elements/core/dom.ts +0 -33
  55. package/src/elements/core/styles.ts +0 -28
  56. package/src/elements/modal/viking-modal.ts +0 -154
  57. package/src/index.ts +0 -1
  58. package/src/lib/accordion/accordion.ts +0 -126
  59. package/src/lib/app-header/app-header.scss +0 -274
  60. package/src/lib/app-header/app-header.ts +0 -43
  61. package/src/lib/app-sidebar/app-sidebar.scss +0 -415
  62. package/src/lib/app-sidebar/app-sidebar.ts +0 -29
  63. package/src/lib/auth-panel/auth-panel.spec.ts +0 -132
  64. package/src/lib/auth-panel/auth-panel.ts +0 -228
  65. package/src/lib/autocomplete/autocomplete.ts +0 -223
  66. package/src/lib/avatar/avatar.ts +0 -126
  67. package/src/lib/badge/badge.ts +0 -182
  68. package/src/lib/bar/bar.ts +0 -31
  69. package/src/lib/brand/brand.ts +0 -60
  70. package/src/lib/breadcrumbs/breadcrumbs.ts +0 -81
  71. package/src/lib/button/button-group.ts +0 -40
  72. package/src/lib/button/button.scss +0 -119
  73. package/src/lib/button/button.ts +0 -98
  74. package/src/lib/calendar/calendar.ts +0 -253
  75. package/src/lib/callout/callout.ts +0 -211
  76. package/src/lib/card/card-title.spec.ts +0 -27
  77. package/src/lib/card/card-title.ts +0 -50
  78. package/src/lib/card/card.ts +0 -200
  79. package/src/lib/carousel/carousel.ts +0 -206
  80. package/src/lib/chart/chart-zoom.spec.ts +0 -65
  81. package/src/lib/chart/chart-zoom.ts +0 -71
  82. package/src/lib/chart/chart.ts +0 -1257
  83. package/src/lib/chart-card-header/chart-card-header.ts +0 -80
  84. package/src/lib/chart-empty-state/chart-empty-state.ts +0 -146
  85. package/src/lib/chart-panel/chart-panel.ts +0 -133
  86. package/src/lib/checkbox/checkbox.ts +0 -139
  87. package/src/lib/color-picker/color-picker.ts +0 -148
  88. package/src/lib/command/command.ts +0 -260
  89. package/src/lib/composer/composer.ts +0 -180
  90. package/src/lib/confirm-dialog/confirm-dialog.ts +0 -163
  91. package/src/lib/confirm-dialog/dialog.service.ts +0 -79
  92. package/src/lib/context/context.ts +0 -75
  93. package/src/lib/core/brand-icons.ts +0 -62
  94. package/src/lib/core/cva.ts +0 -33
  95. package/src/lib/core/icons.ts +0 -206
  96. package/src/lib/core/integration-brand-icons.ts +0 -77
  97. package/src/lib/core/lucide-paths.generated.ts +0 -130
  98. package/src/lib/date-picker/date-picker.ts +0 -139
  99. package/src/lib/dropdown/dropdown.ts +0 -188
  100. package/src/lib/editor/editor.ts +0 -170
  101. package/src/lib/empty-state/empty-state.ts +0 -100
  102. package/src/lib/fab/fab.ts +0 -76
  103. package/src/lib/field/field.ts +0 -111
  104. package/src/lib/file-upload/file-upload.ts +0 -208
  105. package/src/lib/footer/footer.scss +0 -162
  106. package/src/lib/footer/footer.ts +0 -28
  107. package/src/lib/form-section/form-section.ts +0 -200
  108. package/src/lib/forms.spec.ts +0 -92
  109. package/src/lib/gauge-arc/gauge-arc.ts +0 -85
  110. package/src/lib/hud-panel/hud-panel.ts +0 -27
  111. package/src/lib/icon/icon.ts +0 -284
  112. package/src/lib/icon-badge/icon-badge.ts +0 -87
  113. package/src/lib/icon-heading/icon-heading.spec.ts +0 -32
  114. package/src/lib/icon-heading/icon-heading.ts +0 -38
  115. package/src/lib/icon-text/icon-text.ts +0 -120
  116. package/src/lib/input/input.ts +0 -119
  117. package/src/lib/kanban/kanban.ts +0 -211
  118. package/src/lib/kbd/kbd.ts +0 -32
  119. package/src/lib/label/label.ts +0 -39
  120. package/src/lib/loading-overlay/loading-overlay.ts +0 -80
  121. package/src/lib/menubar/menubar.ts +0 -77
  122. package/src/lib/metric-card/metric-card.ts +0 -33
  123. package/src/lib/modal/modal.ts +0 -207
  124. package/src/lib/native-select/native-select.ts +0 -124
  125. package/src/lib/navbar/navbar.ts +0 -124
  126. package/src/lib/navigation-menu/navigation-menu.ts +0 -116
  127. package/src/lib/otp-input/otp-input.ts +0 -164
  128. package/src/lib/page-back-link/page-back-link.ts +0 -74
  129. package/src/lib/page-header/page-header.ts +0 -70
  130. package/src/lib/pagination/pagination.ts +0 -157
  131. package/src/lib/pillbox/pillbox.ts +0 -157
  132. package/src/lib/popover/popover.ts +0 -92
  133. package/src/lib/profile/profile.ts +0 -73
  134. package/src/lib/progress/progress.ts +0 -123
  135. package/src/lib/radio/radio.ts +0 -132
  136. package/src/lib/ring-gauge/ring-gauge.ts +0 -75
  137. package/src/lib/scroll-area/scroll-area.ts +0 -57
  138. package/src/lib/search-palette/search-palette.scss +0 -288
  139. package/src/lib/search-palette/search-palette.ts +0 -114
  140. package/src/lib/select/select.ts +0 -292
  141. package/src/lib/separator/separator.ts +0 -59
  142. package/src/lib/sheet/sheet.ts +0 -192
  143. package/src/lib/sidebar-nav/sidebar-nav.scss +0 -218
  144. package/src/lib/sidebar-nav/sidebar-nav.ts +0 -158
  145. package/src/lib/site-drakkar/site-footer.ts +0 -133
  146. package/src/lib/site-drakkar/site-navbar.scss +0 -2
  147. package/src/lib/site-drakkar/site-navbar.ts +0 -286
  148. package/src/lib/site-drakkar/suite-search-items.spec.ts +0 -61
  149. package/src/lib/site-drakkar/suite-search-items.ts +0 -246
  150. package/src/lib/skeleton/skeleton.ts +0 -51
  151. package/src/lib/slider/slider.ts +0 -133
  152. package/src/lib/spinner/spinner.ts +0 -75
  153. package/src/lib/status-metric-row/status-metric-row.ts +0 -74
  154. package/src/lib/suite-search-palette/suite-search-palette.ts +0 -95
  155. package/src/lib/switch/switch.ts +0 -131
  156. package/src/lib/table/table.ts +0 -137
  157. package/src/lib/tabs/tab-panel.ts +0 -61
  158. package/src/lib/tabs/tab.ts +0 -107
  159. package/src/lib/tabs/tabs.ts +0 -109
  160. package/src/lib/textarea/textarea.ts +0 -103
  161. package/src/lib/theme-toggle/theme-toggle.spec.ts +0 -40
  162. package/src/lib/theme-toggle/theme-toggle.ts +0 -40
  163. package/src/lib/time-picker/time-picker.ts +0 -197
  164. package/src/lib/timeline/timeline.ts +0 -152
  165. package/src/lib/toast/toast.ts +0 -196
  166. package/src/lib/toggle/toggle-group.ts +0 -60
  167. package/src/lib/toggle/toggle.ts +0 -101
  168. package/src/lib/tooltip/tooltip.ts +0 -119
  169. package/src/lib/typography/heading.ts +0 -52
  170. package/src/lib/typography/text.ts +0 -51
  171. package/src/lib/uptime-bar/uptime-bar.ts +0 -55
  172. package/src/lib/verification-code-field/verification-code-field.ts +0 -149
  173. package/src/lib/whitepaper-cta/whitepaper-cta.scss +0 -130
  174. package/src/lib/whitepaper-cta/whitepaper-cta.ts +0 -78
  175. package/src/lib/wizard/wizard.ts +0 -80
  176. package/src/public-api.ts +0 -172
  177. package/src/styles/_buttons.scss +0 -386
  178. package/src/styles/_component-primitives.scss +0 -183
  179. package/src/styles/_drakkar-buttons.scss +0 -85
  180. package/src/styles/_fonts.scss +0 -22
  181. package/src/styles/_forms.scss +0 -66
  182. package/src/styles/_input.scss +0 -106
  183. package/src/styles/_layout-enforcement.scss +0 -229
  184. package/src/styles/_layout-rhythm.scss +0 -158
  185. package/src/styles/_legacy-aliases.scss +0 -212
  186. package/src/styles/_series-colors.scss +0 -24
  187. package/src/styles/_static-primitives.scss +0 -857
  188. package/src/styles/_typography.scss +0 -87
  189. package/src/styles/_variables.scss +0 -527
  190. package/src/styles/components/a11y.scss +0 -90
  191. package/src/styles/components/badges.scss +0 -102
  192. package/src/styles/components/extracted-utilities.scss +0 -459
  193. package/src/styles/components/footer.scss +0 -168
  194. package/src/styles/components/icon-heading.scss +0 -47
  195. package/src/styles/components/icon-inline.scss +0 -101
  196. package/src/styles/components/layout.scss +0 -59
  197. package/src/styles/components/utilities.scss +0 -131
  198. package/src/styles/components/viking-inspired.scss +0 -204
  199. package/src/styles/components/whitepaper-cta.scss +0 -130
  200. package/src/styles/components-bundle.scss +0 -9
  201. package/src/styles/components.scss +0 -442
  202. package/src/styles/deml-components.scss +0 -10
  203. package/src/styles/index.scss +0 -8
  204. package/src/styles/layout-shell.scss +0 -111
  205. package/src/styles/page-shell.scss +0 -859
  206. package/src/styles/static-navbar.scss +0 -1250
  207. package/src/styles/surfaces/backend.scss +0 -154
  208. package/src/styles/surfaces/docs-global.scss +0 -73
  209. package/src/styles/surfaces/docs-shell.scss +0 -437
  210. package/src/styles/surfaces/docs-showcase.scss +0 -1153
  211. package/src/styles/surfaces/marketing-cta.scss +0 -62
  212. package/src/styles/surfaces/marketing-docs-bento.scss +0 -67
  213. package/src/styles/surfaces/marketing-global.scss +0 -748
  214. package/src/styles/surfaces/marketing-landing.scss +0 -1526
  215. package/src/styles/surfaces/marketing-publication.scss +0 -535
  216. package/src/styles/surfaces/marketing-theme.scss +0 -14
  217. package/src/styles/surfaces/swagger-ui.scss +0 -1013
  218. package/src/styles/tokens-export.scss +0 -18
  219. package/src/styles/tokens.scss +0 -5
  220. package/src/styles/viking-ui-bundle.scss +0 -23
  221. package/src/styles/viking-ui.scss +0 -272
  222. package/src/tokens/series-presets.ts +0 -15
  223. package/src/tokens/tailwind.preset.js +0 -209
  224. package/src/tokens/viking-tokens.json +0 -318
  225. package/src/viking-ui.spec.ts +0 -416
  226. package/src/web/badge/viking-badge-wc.ts +0 -116
  227. package/src/web/button/viking-button-wc.ts +0 -165
  228. package/src/web/callout/viking-callout-wc.ts +0 -105
  229. package/src/web/card/viking-card-wc.ts +0 -67
  230. package/src/web/core/base.ts +0 -56
  231. package/src/web/core/dom.ts +0 -53
  232. package/src/web/core/icons-inline.ts +0 -44
  233. package/src/web/core/styles.ts +0 -1261
  234. package/src/web/core/types.ts +0 -19
  235. package/src/web/field/viking-field-wc.ts +0 -154
  236. package/src/web/index.ts +0 -73
  237. package/src/web/input/viking-input-wc.ts +0 -211
  238. package/src/web/modal/viking-modal-wc.ts +0 -187
  239. package/src/web/search-palette/viking-search-palette-wc.ts +0 -495
  240. package/src/web/select/viking-select-wc.ts +0 -218
  241. package/src/web/suite-header/viking-suite-header-wc.ts +0 -729
  242. package/src/web/suite-search-palette/viking-suite-search-palette-wc.ts +0 -234
  243. package/src/web/theme-toggle/viking-theme-toggle-wc.ts +0 -139
  244. package/src/web/types.ts +0 -37
  245. package/src/web/web-components.spec.ts +0 -297
  246. package/src/web-components/index.ts +0 -1
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # Viking-UI
2
2
 
3
- Published package: **`@dataengineeringformachinelearning/viking-ui@4.0.3`**
4
- Single source of truth: **`packages/viking-ui/`** (framework-agnostic primitives, styles, web components, and Angular wrapper entrypoints are consolidated here).
3
+ Publish target: **`@dataengineeringformachinelearning/viking-ui@4.0.5`**
4
+ Single source of truth: **`packages/viking-ui/`** (framework-agnostic styles, tokens, Web Components, and Angular wrapper entrypoints are consolidated here).
5
5
 
6
6
  Universal DEML component library for Astro, Angular, and Django.
7
7
 
@@ -12,8 +12,11 @@ This release reflects the Lockheed Martin × The Northman battlefield visual dir
12
12
  - `src/styles/_variables.scss` defines the canonical `--viking-*` design tokens.
13
13
  - `src/styles/components-bundle.scss` defines static CSS primitives shared by every app.
14
14
  - `src/tokens/viking-tokens.json` exposes the same token contract for tooling.
15
- - `src/elements/` contains framework-neutral Web Components with Shadow DOM style isolation.
16
- - `dist/design-tokens.css`, `dist/viking-components.css`, `dist/deml-components.css`, `dist/viking-ui.css`, `dist/viking-tokens.json`, and `dist/viking-ui-elements.js` are the built artifacts.
15
+ - `src/web/` contains framework-neutral Web Components with Shadow DOM style isolation.
16
+ - `src/web-components/index.ts` is the script-bundle entry that registers those Web Components for Astro, Django, static HTML, and external hosts.
17
+ - `src/lib/` contains Angular standalone wrappers, services, and CVA helpers exported from the package root and `./angular`.
18
+ - `dist/icons.js` and `dist/site-drakkar.js` are framework-neutral utility bundles for static-site consumers that should not load Angular.
19
+ - `dist/design-tokens.css`, `dist/viking-components.css`, `dist/deml-components.css`, `dist/viking-ui.css`, `dist/viking-tokens.json`, `dist/web-components.js`, `dist/viking-ui-elements.js`, and `dist/widget.js` are the built artifacts.
17
20
  - `dist/viking-ui.css` is the full app bundle. Load it once per surface; do not stack it with the split CSS artifacts.
18
21
 
19
22
  ## Build
@@ -23,6 +26,21 @@ npm run build --prefix packages/viking-ui
23
26
  npm run test:viking-ui:package
24
27
  ```
25
28
 
29
+ ## Storybook and Chromatic
30
+
31
+ Storybook is the release-grade visual cockpit for the Web Component layer and
32
+ publishing workflow.
33
+
34
+ ```bash
35
+ npm run build-storybook --workspace @dataengineeringformachinelearning/viking-ui
36
+
37
+ # Requires CHROMATIC_PROJECT_TOKEN
38
+ npm run chromatic --workspace @dataengineeringformachinelearning/viking-ui
39
+ ```
40
+
41
+ Chromatic snapshots publish from `packages/viking-ui/storybook-static` and cover
42
+ mobile, tablet, and desktop widths.
43
+
26
44
  ## Versioning
27
45
 
28
46
  Viking-UI uses Changesets from the repository root:
@@ -71,6 +89,14 @@ import "@dataengineeringformachinelearning/viking-ui/web-components.js";
71
89
  import "@dataengineeringformachinelearning/viking-ui/viking-ui.css";
72
90
  ```
73
91
 
92
+ Framework-neutral utility imports are available without pulling in Angular:
93
+
94
+ ```ts
95
+ import { resolveVikingIcon } from "@dataengineeringformachinelearning/viking-ui/icons";
96
+ import { SITE_NAV_LINKS } from "@dataengineeringformachinelearning/viking-ui/site-drakkar";
97
+ import tokens from "@dataengineeringformachinelearning/viking-ui/tokens.json";
98
+ ```
99
+
74
100
  ### 2) jsDelivr CDN usage (recommended for widgets and quick embeds)
75
101
 
76
102
  Use this for external websites, marketing snippets, and widget-style integrations that should load without npm.
@@ -129,11 +155,11 @@ builds.
129
155
  <!-- Pinned -->
130
156
  <link
131
157
  rel="stylesheet"
132
- href="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.3/dist/viking-ui.css"
158
+ href="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.5/dist/viking-ui.css"
133
159
  />
134
160
  <script
135
161
  type="module"
136
- src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.3/dist/web-components.js"
162
+ src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.5/dist/web-components.js"
137
163
  ></script>
138
164
  ```
139
165
 
@@ -156,9 +182,7 @@ builds.
156
182
  ></script>
157
183
  </head>
158
184
  <body>
159
- <main
160
- style="max-width: 680px; margin: 2rem auto; display: grid; gap: 1rem;"
161
- >
185
+ <main class="page-inner-wrapper viking-stack viking-stack--loose">
162
186
  <h1 class="viking-heading viking-heading-xl">Viking widget</h1>
163
187
  <viking-card-wc compact>
164
188
  <h2 class="viking-heading viking-heading-sm">Widget card</h2>
@@ -219,7 +243,7 @@ Pinned release example:
219
243
 
220
244
  ```html
221
245
  <script
222
- src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.3/dist/widget.js"
246
+ src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.5/dist/widget.js"
223
247
  async
224
248
  defer
225
249
  data-page-id="platform-status"
@@ -230,7 +254,7 @@ Pinned release example:
230
254
 
231
255
  Replace `api.example.com` with your backend URL and update `data-page-id` / `data-frontend-url` for your status page.
232
256
 
233
- This package is the source of truth. Angular wrappers now live in `packages/viking-ui/src/lib` while canonical source files and token/build artifacts are also in `packages/viking-ui`; Astro and Django consume the package artifacts directly through synced static assets.
257
+ This package is the source of truth. Angular wrappers live in `packages/viking-ui/src/lib`, framework-neutral Web Components live in `packages/viking-ui/src/web`, shared utility exports live under `packages/viking-ui/src/core`, and token/build artifacts are emitted from this package. Astro and Django consume package artifacts directly through npm, CDN, or synced static assets.
234
258
 
235
259
  Angular app shells consume the package CSS from `angular.json`:
236
260
 
package/dist/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # Viking-UI
2
2
 
3
- Published package: **`@dataengineeringformachinelearning/viking-ui@4.0.3`**
4
- Single source of truth: **`packages/viking-ui/`** (framework-agnostic primitives, styles, web components, and Angular wrapper entrypoints are consolidated here).
3
+ Publish target: **`@dataengineeringformachinelearning/viking-ui@4.0.5`**
4
+ Single source of truth: **`packages/viking-ui/`** (framework-agnostic styles, tokens, Web Components, and Angular wrapper entrypoints are consolidated here).
5
5
 
6
6
  Universal DEML component library for Astro, Angular, and Django.
7
7
 
@@ -12,8 +12,11 @@ This release reflects the Lockheed Martin × The Northman battlefield visual dir
12
12
  - `src/styles/_variables.scss` defines the canonical `--viking-*` design tokens.
13
13
  - `src/styles/components-bundle.scss` defines static CSS primitives shared by every app.
14
14
  - `src/tokens/viking-tokens.json` exposes the same token contract for tooling.
15
- - `src/elements/` contains framework-neutral Web Components with Shadow DOM style isolation.
16
- - `dist/design-tokens.css`, `dist/viking-components.css`, `dist/deml-components.css`, `dist/viking-ui.css`, `dist/viking-tokens.json`, and `dist/viking-ui-elements.js` are the built artifacts.
15
+ - `src/web/` contains framework-neutral Web Components with Shadow DOM style isolation.
16
+ - `src/web-components/index.ts` is the script-bundle entry that registers those Web Components for Astro, Django, static HTML, and external hosts.
17
+ - `src/lib/` contains Angular standalone wrappers, services, and CVA helpers exported from the package root and `./angular`.
18
+ - `dist/icons.js` and `dist/site-drakkar.js` are framework-neutral utility bundles for static-site consumers that should not load Angular.
19
+ - `dist/design-tokens.css`, `dist/viking-components.css`, `dist/deml-components.css`, `dist/viking-ui.css`, `dist/viking-tokens.json`, `dist/web-components.js`, `dist/viking-ui-elements.js`, and `dist/widget.js` are the built artifacts.
17
20
  - `dist/viking-ui.css` is the full app bundle. Load it once per surface; do not stack it with the split CSS artifacts.
18
21
 
19
22
  ## Build
@@ -23,6 +26,21 @@ npm run build --prefix packages/viking-ui
23
26
  npm run test:viking-ui:package
24
27
  ```
25
28
 
29
+ ## Storybook and Chromatic
30
+
31
+ Storybook is the release-grade visual cockpit for the Web Component layer and
32
+ publishing workflow.
33
+
34
+ ```bash
35
+ npm run build-storybook --workspace @dataengineeringformachinelearning/viking-ui
36
+
37
+ # Requires CHROMATIC_PROJECT_TOKEN
38
+ npm run chromatic --workspace @dataengineeringformachinelearning/viking-ui
39
+ ```
40
+
41
+ Chromatic snapshots publish from `packages/viking-ui/storybook-static` and cover
42
+ mobile, tablet, and desktop widths.
43
+
26
44
  ## Versioning
27
45
 
28
46
  Viking-UI uses Changesets from the repository root:
@@ -71,6 +89,14 @@ import "@dataengineeringformachinelearning/viking-ui/web-components.js";
71
89
  import "@dataengineeringformachinelearning/viking-ui/viking-ui.css";
72
90
  ```
73
91
 
92
+ Framework-neutral utility imports are available without pulling in Angular:
93
+
94
+ ```ts
95
+ import { resolveVikingIcon } from "@dataengineeringformachinelearning/viking-ui/icons";
96
+ import { SITE_NAV_LINKS } from "@dataengineeringformachinelearning/viking-ui/site-drakkar";
97
+ import tokens from "@dataengineeringformachinelearning/viking-ui/tokens.json";
98
+ ```
99
+
74
100
  ### 2) jsDelivr CDN usage (recommended for widgets and quick embeds)
75
101
 
76
102
  Use this for external websites, marketing snippets, and widget-style integrations that should load without npm.
@@ -129,11 +155,11 @@ builds.
129
155
  <!-- Pinned -->
130
156
  <link
131
157
  rel="stylesheet"
132
- href="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.3/dist/viking-ui.css"
158
+ href="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.5/dist/viking-ui.css"
133
159
  />
134
160
  <script
135
161
  type="module"
136
- src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.3/dist/web-components.js"
162
+ src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.5/dist/web-components.js"
137
163
  ></script>
138
164
  ```
139
165
 
@@ -156,9 +182,7 @@ builds.
156
182
  ></script>
157
183
  </head>
158
184
  <body>
159
- <main
160
- style="max-width: 680px; margin: 2rem auto; display: grid; gap: 1rem;"
161
- >
185
+ <main class="page-inner-wrapper viking-stack viking-stack--loose">
162
186
  <h1 class="viking-heading viking-heading-xl">Viking widget</h1>
163
187
  <viking-card-wc compact>
164
188
  <h2 class="viking-heading viking-heading-sm">Widget card</h2>
@@ -219,7 +243,7 @@ Pinned release example:
219
243
 
220
244
  ```html
221
245
  <script
222
- src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.3/dist/widget.js"
246
+ src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@4.0.5/dist/widget.js"
223
247
  async
224
248
  defer
225
249
  data-page-id="platform-status"
@@ -230,7 +254,7 @@ Pinned release example:
230
254
 
231
255
  Replace `api.example.com` with your backend URL and update `data-page-id` / `data-frontend-url` for your status page.
232
256
 
233
- This package is the source of truth. Angular wrappers now live in `packages/viking-ui/src/lib` while canonical source files and token/build artifacts are also in `packages/viking-ui`; Astro and Django consume the package artifacts directly through synced static assets.
257
+ This package is the source of truth. Angular wrappers live in `packages/viking-ui/src/lib`, framework-neutral Web Components live in `packages/viking-ui/src/web`, shared utility exports live under `packages/viking-ui/src/core`, and token/build artifacts are emitted from this package. Astro and Django consume package artifacts directly through npm, CDN, or synced static assets.
234
258
 
235
259
  Angular app shells consume the package CSS from `angular.json`:
236
260