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

package/src/tokens/viking-tokens.json

@@ -0,0 +1,318 @@
+{
+  "$schema": "./viking-tokens.schema.json",
+  "meta": {
+    "name": "viking-ui",
+    "version": "2.1.0",
+    "description": "Canonical DEML design tokens — single source of truth for primitives, semantic aliases, and component foundations",
+    "canonicalScss": "../styles/_variables.scss",
+    "documentation": "../../../THEME.md"
+  },
+  "color": {
+    "navy": {
+      "1000": "#01030a",
+      "950": "#030818",
+      "900": "#0a1024",
+      "800": "#101b33",
+      "700": "#162544",
+      "600": "#1e3054",
+      "500": "#284068",
+      "400": "#39547f",
+      "300": "#58719e",
+      "200": "#8fa2c2",
+      "100": "#d7e0ef"
+    },
+    "charcoal": {
+      "950": "{color.navy.950}",
+      "900": "{color.navy.900}",
+      "800": "{color.navy.800}",
+      "700": "{color.navy.700}",
+      "600": "{color.navy.600}",
+      "500": "{color.navy.500}",
+      "400": "{color.navy.400}",
+      "300": "{color.navy.300}",
+      "200": "{color.navy.200}",
+      "100": "{color.navy.100}"
+    },
+    "electric": {
+      "900": "#04225f",
+      "800": "#073a99",
+      "700": "#0a4fd4",
+      "600": "#1565f0",
+      "500": "#2176ff",
+      "400": "#4d94ff",
+      "300": "#7ab0ff",
+      "200": "#b6d3ff",
+      "100": "#e7f1ff"
+    },
+    "metallic": {
+      "600": "#555555",
+      "500": "#666666",
+      "400": "#777777",
+      "300": "#999999",
+      "200": "#aaaaaa",
+      "100": "#bbbbbb",
+      "050": "#e6e8ec"
+    },
+    "teal": {
+      "700": "{color.electric.700}",
+      "600": "{color.electric.600}",
+      "500": "{color.electric.500}",
+      "400": "{color.electric.400}",
+      "300": "{color.electric.300}"
+    },
+    "crimson": {
+      "700": "#7a2231",
+      "600": "#922b3e",
+      "500": "#a83344",
+      "400": "#c44355",
+      "300": "#dc6b78",
+      "100": "#fde8ec"
+    },
+    "cyan": { "600": "#168aad", "500": "#1fa2c9", "400": "#47bee0" },
+    "violet": { "600": "#6f5bd7", "500": "#8674f0" },
+    "amber": { "600": "#a77912", "500": "#d69e2e" },
+    "green": { "500": "#2a9d8f" },
+    "gold": { "500": "#c4a035" },
+    "blue": { "500": "{color.electric.400}" },
+    "red": { "500": "{color.crimson.500}" },
+    "ink": {
+      "1000": "#000000",
+      "950": "#050609",
+      "900": "#0c0f14",
+      "800": "#151a22",
+      "700": "#202735"
+    },
+    "slate": { "100": "#f4f7fb", "050": "#fbfcfe" },
+    "white": "#f5f5f5",
+    "whitePure": "#ffffff",
+    "black": "#000000"
+  },
+  "series": {
+    "1": {
+      "hex": "#2176ff",
+      "token": "--viking-series-1",
+      "role": "Primary series, default selection"
+    },
+    "2": {
+      "hex": "#922b3e",
+      "token": "--viking-series-2",
+      "role": "Secondary / comparison series"
+    },
+    "3": {
+      "hex": "#2a9d8f",
+      "token": "--viking-series-3",
+      "role": "Success / stable metrics"
+    },
+    "4": {
+      "hex": "#c4a035",
+      "token": "--viking-series-4",
+      "role": "Warning / threshold proximity"
+    },
+    "5": {
+      "hex": "#a83344",
+      "token": "--viking-series-5",
+      "role": "Critical / anomaly series"
+    },
+    "6": {
+      "hex": "#4d94ff",
+      "token": "--viking-series-6",
+      "role": "Info / auxiliary series"
+    },
+    "7": {
+      "hex": "#162544",
+      "token": "--viking-series-7",
+      "role": "Baseline / muted series"
+    },
+    "8": {
+      "hex": "#666666",
+      "token": "--viking-series-8",
+      "role": "Disabled / archived series"
+    },
+    "default": "#2176ff"
+  },
+  "semantic": {
+    "dark": {
+      "bg": "navy.900",
+      "bgSubtle": "ink.950",
+      "surface": "navy.800",
+      "surfaceAlt": "navy.700",
+      "surfaceInset": "navy.950",
+      "surfaceRaised": "navy.600",
+      "surfaceOverlay": "ink.800",
+      "text": "white",
+      "textMuted": "metallic.200",
+      "textSubtle": "metallic.300",
+      "textDisabled": "metallic.400",
+      "textLink": "electric.300",
+      "accent": "electric.500",
+      "accentHover": "electric.400",
+      "accentActive": "electric.700",
+      "accentSoft": "color-mix(in srgb, #2176ff 18%, transparent)",
+      "accentSecondary": "crimson.600",
+      "success": "green.500",
+      "warning": "gold.500",
+      "danger": "crimson.500",
+      "info": "blue.500",
+      "ring": "electric.400"
+    },
+    "light": {
+      "bg": "slate.050",
+      "bgSubtle": "slate.100",
+      "surface": "whitePure",
+      "surfaceAlt": "slate.100",
+      "surfaceInset": "metallic.050",
+      "surfaceRaised": "whitePure",
+      "surfaceOverlay": "whitePure",
+      "text": "navy.900",
+      "textMuted": "metallic.500",
+      "textSubtle": "metallic.400",
+      "textDisabled": "metallic.300",
+      "textLink": "electric.700",
+      "accent": "electric.600",
+      "accentHover": "electric.500",
+      "accentActive": "electric.700",
+      "accentSoft": "color-mix(in srgb, #1565f0 14%, transparent)",
+      "accentSecondary": "crimson.700",
+      "success": "green.500",
+      "warning": "gold.500",
+      "danger": "crimson.500",
+      "info": "blue.500",
+      "ring": "electric.500"
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "sans": "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+      "mono": "ui-monospace, 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, monospace"
+    },
+    "fontSize": {
+      "2xs": "11px",
+      "xs": "12px",
+      "sm": "14px",
+      "base": "16px",
+      "md": "18px",
+      "lg": "20px",
+      "xl": "24px",
+      "2xl": "30px",
+      "3xl": "36px",
+      "4xl": "48px",
+      "5xl": "60px",
+      "6xl": "72px"
+    },
+    "fontWeight": {
+      "regular": 400,
+      "medium": 500,
+      "semibold": 600,
+      "bold": 700,
+      "extrabold": 800
+    },
+    "lineHeight": {
+      "tight": 1.25,
+      "snug": 1.375,
+      "normal": 1.5,
+      "relaxed": 1.625,
+      "loose": 1.75
+    },
+    "letterSpacing": {
+      "tighter": "-0.03em",
+      "tight": "-0.02em",
+      "normal": "0",
+      "wide": "0.025em",
+      "wider": "0.05em",
+      "caps": "0.08em"
+    }
+  },
+  "spacing": {
+    "gridUnit": "4px",
+    "spaceUnit": "8px",
+    "0": "0",
+    "px": "1px",
+    "half": "4px",
+    "0.5": "4px",
+    "1": "8px",
+    "1.5": "12px",
+    "2": "16px",
+    "2.5": "20px",
+    "3": "24px",
+    "4": "32px",
+    "5": "40px",
+    "6": "48px",
+    "7": "56px",
+    "8": "64px",
+    "8.5": "72px",
+    "9": "80px",
+    "10": "96px",
+    "11": "112px",
+    "12": "128px",
+    "14": "160px",
+    "16": "192px",
+    "20": "256px",
+    "24": "320px"
+  },
+  "radius": {
+    "xs": "4px",
+    "sm": "6px",
+    "DEFAULT": "8px",
+    "md": "10px",
+    "lg": "12px",
+    "xl": "16px",
+    "2xl": "24px",
+    "pill": "999px",
+    "full": "999px"
+  },
+  "shadow": {
+    "xs": "0 1px 2px rgba(0, 0, 0, 0.2)",
+    "sm": "0 1px 2px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04)",
+    "md": "0 2px 4px rgba(0,0,0,0.16), 0 4px 8px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05)",
+    "lg": "0 4px 8px rgba(0,0,0,0.14), 0 12px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06)",
+    "inner": "inset 0 1px 2px rgba(0, 0, 0, 0.14)",
+    "hover": "0 8px 16px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.06)",
+    "focus": "0 0 0 var(--viking-ring-offset) var(--viking-bg), 0 0 0 calc(var(--viking-ring-offset) + var(--viking-ring-width)) var(--viking-ring)",
+    "surfaceHighlight": "inset 0 1px 0 rgba(255,255,255,0.06)"
+  },
+  "motion": {
+    "ease": {
+      "default": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "in": "cubic-bezier(0.4, 0, 1, 1)",
+      "out": "cubic-bezier(0, 0, 0.2, 1)",
+      "emphasized": "cubic-bezier(0.2, 0, 0, 1)"
+    },
+    "duration": {
+      "instant": "75ms",
+      "fast": "150ms",
+      "DEFAULT": "250ms",
+      "slow": "350ms",
+      "slower": "500ms"
+    },
+    "state": {
+      "hoverLift": "-1px",
+      "activeScale": "0.985",
+      "disabledOpacity": "0.48"
+    }
+  },
+  "layout": {
+    "containerMaxWidth": "1260px",
+    "navbarHeight": "64px",
+    "sidebarWidth": "256px",
+    "controlHeight": "40px",
+    "controlHeightSm": "32px",
+    "controlHeightXs": "24px",
+    "btnMinWidth": "120px",
+    "touchTargetMin": "44px",
+    "pageGutter": "16px",
+    "pageGutterLg": "24px",
+    "pageStackGap": "24px",
+    "pageSectionGap": "32px",
+    "cardPadding": "24px",
+    "cardPaddingCompact": "16px",
+    "panelPadding": "24px",
+    "formMaxWidth": "42rem",
+    "formNarrowMaxWidth": "28rem",
+    "contentReadableMaxWidth": "48rem"
+  },
+  "zIndex": {
+    "overlay": 1000,
+    "toast": 1100,
+    "tooltip": 1200
+  }
+}

package/src/web/badge/viking-badge-wc.ts

@@ -0,0 +1,116 @@
+import { attachShadowStyles } from "../core/base";
+import {
+  defineCustomElement,
+  defineCustomElementAlias,
+  HTMLElementBase,
+} from "../core/dom";
+import { renderInlineIcon, TONE_ICON_NAMES } from "../core/icons-inline";
+import { VIKING_BADGE_STYLES } from "../core/styles";
+import type { VikingWcTone } from "../core/types";
+
+const TONES = new Set<VikingWcTone>([
+  "accent",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "muted",
+  "subtle",
+]);
+
+/**
+ * Framework-agnostic Viking badge Web Component.
+ * Tag: `viking-badge` (legacy alias: `viking-badge-wc`)
+ *
+ * @attr tone - Semantic color: accent | secondary | success | warning | danger | info | muted
+ * @attr size - Compact density: sm
+ * @attr icon - Viking icon registry name (pairs with label for a11y)
+ * @attr removable - Shows remove control; dispatches `viking-removed`
+ *
+ * @example
+ * <viking-badge-wc tone="success" icon="check">Healthy</viking-badge-wc>
+ */
+export class VikingBadgeWc extends HTMLElementBase {
+  static readonly tag = "viking-badge";
+  static readonly legacyTag = "viking-badge-wc";
+
+  static get observedAttributes(): string[] {
+    return ["tone", "size", "icon", "removable"];
+  }
+
+  private readonly shadow: ShadowRoot;
+
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    attachShadowStyles(this.shadow, VIKING_BADGE_STYLES);
+  }
+
+  connectedCallback(): void {
+    this.render();
+  }
+
+  attributeChangedCallback(): void {
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+
+  private get tone(): VikingWcTone | null {
+    const value = (this.getAttribute("tone") ?? "") as VikingWcTone;
+    return TONES.has(value) ? value : null;
+  }
+
+  private get size(): "sm" | null {
+    return this.getAttribute("size") === "sm" ? "sm" : null;
+  }
+
+  private get removable(): boolean {
+    return (
+      this.hasAttribute("removable") &&
+      this.getAttribute("removable") !== "false"
+    );
+  }
+
+  private readonly onRemove = (): void => {
+    this.dispatchEvent(
+      new CustomEvent("viking-removed", { bubbles: true, composed: true }),
+    );
+  };
+
+  private render(): void {
+    const tone = this.tone;
+    if (tone && this.getAttribute("tone") !== tone) {
+      this.setAttribute("tone", tone);
+    } else if (!tone && this.hasAttribute("tone")) {
+      this.removeAttribute("tone");
+    }
+
+    const size = this.size;
+    if (size && this.getAttribute("size") !== size) {
+      this.setAttribute("size", size);
+    } else if (!size && this.hasAttribute("size")) {
+      this.removeAttribute("size");
+    }
+
+    const iconName =
+      this.getAttribute("icon") ?? (tone ? TONE_ICON_NAMES[tone] : null);
+    const iconMarkup = iconName ? renderInlineIcon(iconName, 16) : "";
+
+    this.shadow.innerHTML = `
+      ${iconMarkup}
+      <span part="label"><slot></slot></span>
+      ${this.removable ? `<button type="button" class="viking-badge-remove" part="remove" aria-label="Remove">${renderInlineIcon("x", 14)}</button>` : ""}
+    `;
+
+    this.shadow
+      .querySelector(".viking-badge-remove")
+      ?.addEventListener("click", this.onRemove);
+  }
+}
+
+export const registerVikingBadgeWc = (): void => {
+  defineCustomElement(VikingBadgeWc.tag, VikingBadgeWc);
+  defineCustomElementAlias(VikingBadgeWc.legacyTag, VikingBadgeWc);
+};

package/src/web/button/viking-button-wc.ts

@@ -0,0 +1,165 @@
+import { attachShadowStyles, readBoolAttr } from "../core/base";
+import {
+  defineCustomElement,
+  defineCustomElementAlias,
+  escapeHtml,
+  HTMLElementBase,
+} from "../core/dom";
+import { VIKING_BUTTON_STYLES } from "../core/styles";
+
+const VARIANTS = new Set([
+  "outline",
+  "primary",
+  "secondary",
+  "filled",
+  "danger",
+  "ghost",
+  "subtle",
+]);
+
+const SIZES = new Set(["sm", "xs"]);
+
+/**
+ * Framework-agnostic Viking button Web Component.
+ * Tag: `viking-button` (legacy alias: `viking-button-wc`)
+ *
+ * @example
+ * <viking-button variant="primary">Launch</viking-button>
+ */
+export class VikingButtonWc extends HTMLElementBase {
+  static readonly tag = "viking-button";
+  static readonly legacyTag = "viking-button-wc";
+
+  static get observedAttributes(): string[] {
+    return [
+      "variant",
+      "size",
+      "type",
+      "disabled",
+      "loading",
+      "href",
+      "target",
+      "aria-label",
+      "aria-busy",
+      "square",
+      "full-width",
+      "compact",
+    ];
+  }
+
+  private readonly shadow: ShadowRoot;
+  private control: HTMLButtonElement | HTMLAnchorElement | null = null;
+
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    attachShadowStyles(this.shadow, VIKING_BUTTON_STYLES);
+  }
+
+  connectedCallback(): void {
+    this.render();
+    this.syncHostSemantics();
+    this.control?.addEventListener("click", this.onClick);
+  }
+
+  disconnectedCallback(): void {
+    this.control?.removeEventListener("click", this.onClick);
+  }
+
+  attributeChangedCallback(): void {
+    if (this.isConnected) {
+      this.render();
+      this.syncHostSemantics();
+    }
+  }
+
+  private readonly onClick = (event: Event): void => {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("viking-press", {
+        bubbles: true,
+        composed: true,
+        detail: event,
+      }),
+    );
+  };
+
+  private get variant(): string {
+    const value = this.getAttribute("variant") ?? "outline";
+    return VARIANTS.has(value) ? value : "outline";
+  }
+
+  private get size(): string | null {
+    const value = this.getAttribute("size");
+    return value && SIZES.has(value) ? value : null;
+  }
+
+  private get disabled(): boolean {
+    return readBoolAttr(this, "disabled");
+  }
+
+  private get loading(): boolean {
+    return readBoolAttr(this, "loading");
+  }
+
+  private get square(): boolean {
+    return readBoolAttr(this, "square");
+  }
+
+  private syncHostSemantics(): void {
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", this.getAttribute("href") ? "link" : "button");
+    }
+  }
+
+  private render(): void {
+    const href = this.getAttribute("href");
+    const isLink = Boolean(href);
+    const tag = isLink ? "a" : "button";
+
+    const classes = [
+      "viking-btn",
+      `viking-btn-${this.variant}`,
+      this.size ? `viking-btn-${this.size}` : "",
+      this.square ? "viking-btn-square" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const label = this.getAttribute("aria-label") ?? "";
+    const busy =
+      this.getAttribute("aria-busy") === "true" || this.loading ? "true" : null;
+    const type = escapeHtml(this.getAttribute("type") ?? "button");
+    const hrefValue = href ? escapeHtml(href) : "";
+    const target = this.getAttribute("target");
+    const safeTarget = target ? escapeHtml(target) : "";
+
+    this.shadow.innerHTML = `
+      <${tag}
+        class="${classes}"
+        part="control"
+        ${isLink ? `href="${hrefValue}"` : `type="${type}"`}
+        ${isLink && safeTarget ? `target="${safeTarget}"` : ""}
+        ${isLink && target === "_blank" ? 'rel="noopener noreferrer"' : ""}
+        ${this.disabled || this.loading ? "disabled" : ""}
+        ${label ? `aria-label="${escapeHtml(label)}"` : ""}
+        ${busy ? `aria-busy="${busy}"` : ""}
+        ${this.disabled && isLink ? 'aria-disabled="true" tabindex="-1"' : ""}
+      >
+        ${this.loading ? '<span class="viking-btn-spinner" aria-hidden="true"></span>' : ""}
+        <span class="viking-btn-label" part="label"><slot></slot></span>
+      </${tag}>
+    `;
+
+    this.control = this.shadow.querySelector(tag);
+  }
+}
+
+export const registerVikingButtonWc = (): void => {
+  defineCustomElement(VikingButtonWc.tag, VikingButtonWc);
+  defineCustomElementAlias(VikingButtonWc.legacyTag, VikingButtonWc);
+};

package/src/web/callout/viking-callout-wc.ts

@@ -0,0 +1,105 @@
+import { attachShadowStyles } from "../core/base";
+import {
+  defineCustomElement,
+  defineCustomElementAlias,
+  escapeHtml,
+  HTMLElementBase,
+} from "../core/dom";
+import { renderInlineIcon, TONE_ICON_NAMES } from "../core/icons-inline";
+import { VIKING_CALLOUT_STYLES } from "../core/styles";
+import type { VikingWcTone } from "../core/types";
+
+const TONES = new Set<VikingWcTone>([
+  "accent",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "muted",
+]);
+
+/**
+ * Framework-agnostic Viking callout Web Component.
+ * Tag: `viking-callout` (legacy alias: `viking-callout-wc`)
+ *
+ * @attr tone - Semantic tone (default: info)
+ * @attr heading - Bold callout title
+ * @attr icon - Override leading icon from the Viking registry
+ * @attr dismissible - Shows dismiss control; dispatches `viking-close`
+ *
+ * @example
+ * <viking-callout-wc tone="warning" heading="Degraded worker">Lag exceeds 3s.</viking-callout-wc>
+ */
+export class VikingCalloutWc extends HTMLElementBase {
+  static readonly tag = "viking-callout";
+  static readonly legacyTag = "viking-callout-wc";
+
+  static get observedAttributes(): string[] {
+    return ["tone", "heading", "icon", "dismissible", "hidden"];
+  }
+
+  private readonly shadow: ShadowRoot;
+
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    attachShadowStyles(this.shadow, VIKING_CALLOUT_STYLES);
+  }
+
+  connectedCallback(): void {
+    this.render();
+  }
+
+  attributeChangedCallback(): void {
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+
+  private get tone(): VikingWcTone {
+    const value = (this.getAttribute("tone") ?? "info") as VikingWcTone;
+    return TONES.has(value) ? value : "info";
+  }
+
+  private get dismissible(): boolean {
+    return (
+      this.hasAttribute("dismissible") &&
+      this.getAttribute("dismissible") !== "false"
+    );
+  }
+
+  private readonly onDismiss = (): void => {
+    this.setAttribute("hidden", "");
+    this.dispatchEvent(
+      new CustomEvent("viking-close", { bubbles: true, composed: true }),
+    );
+  };
+
+  private render(): void {
+    const heading = this.getAttribute("heading") ?? "";
+    const iconName =
+      this.getAttribute("icon") ?? TONE_ICON_NAMES[this.tone] ?? "info";
+    const iconMarkup = renderInlineIcon(iconName, 22, "viking-callout-icon");
+
+    this.shadow.innerHTML = `
+      <div class="viking-callout viking-callout-${this.tone}" role="note" part="surface">
+        <span part="icon">${iconMarkup}</span>
+        <div class="viking-callout-body" part="body">
+          ${heading ? `<p class="viking-callout-heading" part="heading">${escapeHtml(heading)}</p>` : ""}
+          <div class="viking-callout-text" part="text"><slot></slot></div>
+        </div>
+        ${this.dismissible ? `<button type="button" class="viking-callout-close" part="close" aria-label="Dismiss">${renderInlineIcon("x", 18)}</button>` : ""}
+      </div>
+    `;
+
+    this.shadow
+      .querySelector(".viking-callout-close")
+      ?.addEventListener("click", this.onDismiss);
+  }
+}
+
+export const registerVikingCalloutWc = (): void => {
+  defineCustomElement(VikingCalloutWc.tag, VikingCalloutWc);
+  defineCustomElementAlias(VikingCalloutWc.legacyTag, VikingCalloutWc);
+};