@dataengineeringformachinelearning/viking-ui 1.0.2 → 3.0.0-alpha.4

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if distributed along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the LICENSE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!) The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+    Copyright 2026 Joe Alongi (Data Engineering for Machine Learning Contributors)
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.

package/README.md

@@ -1,69 +1,248 @@
-# @dataengineeringformachinelearning/viking-ui
+# Viking-UI
 
-**Viking-UI** is DEML's clinical Angular design system — lab-coat aesthetics on THEME.md tokens.
+Universal DEML component library for Astro, Angular, and Django.
 
-- **8px grid** spacing (`--space-1` … `--space-8`)
-- **16px** main content / **14px** UI chrome typography
-- **Crayola blue** (`#2176ff`) primary, **blue-bell** (`#33a1fd`) accents
-- Zero-dependency components (`viking-*` selectors, `--viking-*` tokens)
-- WCAG 2.1 AA focus rings, axe-core tested templates
+## Architecture
 
-## Install
+- `src/styles/_variables.scss` defines the canonical `--viking-*` design tokens.
+- `src/styles/components-bundle.scss` defines static CSS primitives shared by every app.
+- `src/tokens/viking-tokens.json` exposes the same token contract for tooling.
+- `src/elements/` contains framework-neutral Web Components with Shadow DOM style isolation.
+- `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.
+- `dist/viking-ui.css` is the full app bundle. Load it once per surface; do not stack it with the split CSS artifacts.
+
+## Build
 
 ```bash
-npm install @dataengineeringformachinelearning/viking-ui
+npm run build --prefix packages/viking-ui
+npm run test:viking-ui:package
+```
+
+## Versioning
+
+Viking-UI uses Changesets from the repository root:
+
+```bash
+npm run changeset
+npm run version:viking-ui
+```
+
+See [docs/viking-ui-release.md](../../docs/viking-ui-release.md) for the full
+release, visual regression, and propagation workflow.
+
+## Consumption
+
+### 1) NPM usage (recommended for apps)
+
+Use this for app-first surfaces such as deml.app, internal dashboards, and any build chain that supports package installs.
+
+```ts
+import "@dataengineeringformachinelearning/viking-ui/viking-ui.css";
+```
+
+```ts
+import {
+  VikingButton,
+  VikingInput,
+  VikingModal,
+} from "@dataengineeringformachinelearning/viking-ui";
 ```
 
-Peer dependencies: `@angular/core` ^22, `@angular/common` ^22, `@angular/forms` ^22.
+```bash
+npm install @dataengineeringformachinelearning/viking-ui
+```
 
-## Usage
+For Angular components, continue using the exported Angular APIs and theme tokens as normal.
 
-```typescript
+```ts
 import {
   VikingButton,
-  VikingField,
   VikingInput,
-} from '@dataengineeringformachinelearning/viking-ui';
+  VikingModal,
+} from "@dataengineeringformachinelearning/viking-ui";
+
+// or when building custom element demos:
+import "@dataengineeringformachinelearning/viking-ui/web-components.js";
+import "@dataengineeringformachinelearning/viking-ui/viking-ui.css";
 ```
 
-Load static CSS for non-Angular surfaces (marketing, Django templates):
+### 2) jsDelivr CDN usage (recommended for widgets and quick embeds)
+
+Use this for external websites, marketing snippets, and widget-style integrations that should load without npm.
+
+The package artifacts are published in `dist/`, so you can load them directly from jsDelivr:
+
+### 1) CSS only
 
 ```html
-<link rel="stylesheet" href="/assets/design-tokens.css" />
-<link rel="stylesheet" href="/assets/viking-ui.css" />
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/viking-ui.css"
+/>
 ```
 
-## Build
+### 2) Web Components only
 
-```bash
-npm run build:viking-ui
-npm run build:viking-ui-css
-npm run serve:viking-ui-showcase
+```html
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/web-components.js"
+></script>
 ```
 
-## Version bump
+### 3) CSS + Web Components together
 
-Bump `package.json` in this directory before every publish (npm will not overwrite an existing version).
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/viking-ui.css"
+/>
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/web-components.js"
+></script>
+```
+
+### 4) Version pinning
+
+Use `@latest` for latest stable assets, or replace it with a concrete version for locked
+builds.
+
+```html
+<!-- Latest -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/viking-ui.css"
+/>
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/web-components.js"
+></script>
+```
+
+```html
+<!-- Pinned -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@3.0.0-alpha.3/dist/viking-ui.css"
+/>
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@3.0.0-alpha.3/dist/web-components.js"
+></script>
+```
+
+### 5) Full minimal HTML example (copy/paste)
+
+```html
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Viking-UI CDN demo</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/viking-ui.css"
+    />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/web-components.js"
+    ></script>
+  </head>
+  <body>
+    <main
+      style="max-width: 680px; margin: 2rem auto; display: grid; gap: 1rem;"
+    >
+      <h1 class="viking-heading viking-heading-xl">Viking widget</h1>
+      <viking-card-wc compact>
+        <h2 class="viking-heading viking-heading-sm">Widget card</h2>
+        <p class="viking-text-muted">
+          Works in marketing pages and external websites.
+        </p>
+      </viking-card-wc>
+      <viking-button-wc variant="primary">Open dashboard</viking-button-wc>
+    </main>
+  </body>
+</html>
+```
+
+### 3) When to use the sync script
+
+Use `scripts/sync_design_system.py` when you need synced static assets instead of npm:
 
 ```bash
-cd frontend/projects/viking-ui
-npm version patch --no-git-tag-version   # or minor / major
+python scripts/sync_design_system.py
 ```
 
-| Bump  | When                                     |
-| ----- | ---------------------------------------- |
-| patch | Bug fixes, token/CSS tweaks, a11y fixes  |
-| minor | New components, additive APIs            |
-| major | Breaking input/output or removed exports |
+This path remains for surfaces that are not using package installs directly, especially
+legacy or Django-rendered templates that consume `/assets/viking-ui.css` and shared class names.
 
-## Publish
+### 6) Status widget via jsDelivr (no npm install)
 
-Requires membership in the npm org `dataengineeringformachinelearning` (scope `@dataengineeringformachinelearning`).
+Use this when embedding a live status badge on external pages:
+
+```html
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>DEML Status Widget</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/viking-ui.css"
+    />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/web-components.js"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@latest/dist/widget.js"
+      async
+      defer
+      data-page-id="platform-status"
+      data-backend-url="https://api.example.com"
+      data-frontend-url="https://deml.app"
+    ></script>
+  </head>
+  <body></body>
+</html>
+```
+
+Pinned release example:
+
+```html
+<script
+  src="https://cdn.jsdelivr.net/npm/@dataengineeringformachinelearning/viking-ui@3.0.0-alpha.3/dist/widget.js"
+  async
+  defer
+  data-page-id="platform-status"
+  data-backend-url="https://api.example.com"
+  data-frontend-url="https://deml.app"
+></script>
+```
+
+Replace `api.example.com` with your backend URL and update `data-page-id` / `data-frontend-url` for your status page.
+
+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.
+
+Angular app shells consume the package CSS from `angular.json`:
+
+```json
+{
+  "styles": [
+    "@dataengineeringformachinelearning/viking-ui/viking-ui.css",
+    "src/styles.scss"
+  ]
+}
+```
+
+Django, marketing, and showcase static assets are copied from `packages/viking-ui/dist` by:
 
 ```bash
-cd frontend
-npm run test:viking-ui
-npm run build:viking-ui
-cd dist/viking-ui
-npm publish --access public --otp=YOUR_CODE
+python scripts/sync_design_system.py
+node scripts/validate_viking_ui_assets.mjs
 ```
+
+See [MIGRATION_PLAN.md](./MIGRATION_PLAN.md) for the rebuild phases.

package/dist/core/brand-icons.d.ts

@@ -0,0 +1,29 @@
+/**
+ * DEML branded icon paths — optimized SVG geometry (not sourced from Lucide).
+ * Use via viking-icon name="deml" | "deml-compact" | "deml-lockup".
+ */
+export declare const VIKING_BRAND_ICON_PATHS: {
+    /** Primary bar-chart mark in rounded frame (outline). */
+    readonly deml: "<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M8 17V13M12 17V8M16 17V11\"/>";
+    /** Compact monogram for favicons and dense Drakkar shell. */
+    readonly "deml-compact": "<rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"3\"/><path d=\"M9 16V12M12 16V9M15 16V13\"/>";
+    /** Lockup mark with baseline accent bar. */
+    readonly "deml-lockup": "<rect x=\"3\" y=\"3\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"M8 17V13M12 17V8M16 17V11\"/><path d=\"M3 20h18\"/>";
+};
+/** Drakkar — Viking-UI / site shell brand marks (Lucide ship, build-time inlined). */
+export declare const VIKING_DRAKKAR_ICON_PATHS: {
+    /** Primary Drakkar longship mark (outline). */
+    readonly 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\"/>";
+    /** Compact tile for favicons and dense navbar chrome. */
+    readonly "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\"/>";
+    /** Lockup mark with baseline accent bar. */
+    readonly "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\"/>";
+};
+/** Filled-path overrides for DEML brand marks. */
+export declare const VIKING_BRAND_ICON_FILLED_PATHS: Partial<Record<keyof typeof VIKING_BRAND_ICON_PATHS, string>>;
+/** Filled-path overrides for Drakkar brand marks. */
+export declare const VIKING_DRAKKAR_ICON_FILLED_PATHS: Partial<Record<keyof typeof VIKING_DRAKKAR_ICON_PATHS, string>>;
+export type VikingBrandIconName = keyof typeof VIKING_BRAND_ICON_PATHS;
+export type VikingDrakkarIconName = keyof typeof VIKING_DRAKKAR_ICON_PATHS;
+export declare const VIKING_BRAND_ICON_NAMES_LIST: VikingBrandIconName[];
+export declare const VIKING_DRAKKAR_ICON_NAMES_LIST: VikingDrakkarIconName[];