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

package/dist/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/dist/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/dist/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);
+};

package/dist/src/web/card/viking-card-wc.ts

@@ -0,0 +1,66 @@
+import {
+  defineCustomElement,
+  defineCustomElementAlias,
+  HTMLElementBase,
+} from "../core/dom";
+
+/**
+ * Framework-agnostic Viking card Web Component (light DOM — inherits global viking-card CSS).
+ * Tag: `viking-card` (legacy alias: `viking-card-wc`)
+ *
+ * Uses light DOM so slotted content inherits `viking-card`, `viking-card-header`, and related
+ * classes from the synced static CSS bundle.
+ *
+ * @attr compact - Applies `viking-card-compact` padding
+ * @attr interactive - Hover lift for clickable cards
+ * @attr title - Accessible name when the card is a landmark region
+ *
+ * @example
+ * <viking-card-wc compact title="Event throughput">
+ *   <div class="viking-card-header">
+ *     <h3 class="viking-heading viking-heading-sm">Event throughput</h3>
+ *   </div>
+ *   <p class="viking-text-muted">8.2K events/sec</p>
+ * </viking-card-wc>
+ */
+export class VikingCardWc extends HTMLElementBase {
+  static readonly tag = "viking-card";
+  static readonly legacyTag = "viking-card-wc";
+
+  static get observedAttributes(): string[] {
+    return ["compact", "interactive", "title"];
+  }
+
+  connectedCallback(): void {
+    this.syncClasses();
+  }
+
+  attributeChangedCallback(): void {
+    if (this.isConnected) {
+      this.syncClasses();
+    }
+  }
+
+  private syncClasses(): void {
+    this.classList.add("viking-card");
+    this.classList.toggle("viking-card-compact", this.hasAttribute("compact"));
+    this.classList.toggle(
+      "viking-card-interactive",
+      this.hasAttribute("interactive"),
+    );
+
+    const title = this.getAttribute("title");
+    if (title) {
+      this.setAttribute("role", "region");
+      this.setAttribute("aria-label", title);
+    } else {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-label");
+    }
+  }
+}
+
+export const registerVikingCardWc = (): void => {
+  defineCustomElement(VikingCardWc.tag, VikingCardWc);
+  defineCustomElementAlias(VikingCardWc.legacyTag, VikingCardWc);
+};

package/dist/src/web/core/base.ts

@@ -0,0 +1,56 @@
+/** Attaches constructable stylesheet to a shadow root (with fallback). */
+export const attachShadowStyles = (shadow: ShadowRoot, css: string): void => {
+  if (
+    "adoptedStyleSheets" in Document.prototype &&
+    "replaceSync" in CSSStyleSheet.prototype
+  ) {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+    shadow.adoptedStyleSheets = [sheet];
+    return;
+  }
+
+  const style = document.createElement("style");
+  style.textContent = css;
+  shadow.append(style);
+};
+
+/** Reads a boolean attribute presence/value. */
+export const readBoolAttr = (el: HTMLElement, name: string): boolean =>
+  el.hasAttribute(name) && el.getAttribute(name) !== "false";
+
+/** Safely sets form value when ElementInternals is fully supported (e.g. not in jsdom). */
+export const setFormValue = (
+  internals: ElementInternals | null,
+  value: string,
+): void => {
+  if (internals && typeof internals.setFormValue === "function") {
+    internals.setFormValue(value);
+  }
+};
+
+/** Attaches ElementInternals where available without breaking older WebKit or test DOMs. */
+export const attachElementInternals = (
+  el: HTMLElement,
+): ElementInternals | null => {
+  const attachInternals = (
+    el as HTMLElement & { attachInternals?: () => ElementInternals }
+  ).attachInternals;
+  return typeof attachInternals === "function"
+    ? attachInternals.call(el)
+    : null;
+};
+
+/** Opens a native dialog when showModal is available. */
+export const showModalDialog = (dialog: HTMLDialogElement | null): void => {
+  if (dialog && typeof dialog.showModal === "function" && !dialog.open) {
+    dialog.showModal();
+  }
+};
+
+/** Closes a native dialog when close is available. */
+export const closeModalDialog = (dialog: HTMLDialogElement | null): void => {
+  if (dialog && typeof dialog.close === "function" && dialog.open) {
+    dialog.close();
+  }
+};

package/dist/src/web/core/dom.ts

@@ -0,0 +1,53 @@
+export const HTMLElementBase: typeof HTMLElement =
+  typeof HTMLElement === "undefined"
+    ? (class {} as unknown as typeof HTMLElement)
+    : HTMLElement;
+
+/** Stable unique id for associating labels and controls. */
+export const vikingWcUid = (prefix: string): string =>
+  `${prefix}-${Math.random().toString(36).slice(2, 9)}`;
+
+/** Escape text for safe innerHTML insertion. */
+export const escapeHtml = (value: string): string => {
+  const entities: Record<string, string> = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+  };
+
+  return value.replace(
+    /[&<>"']/g,
+    (character) => entities[character] ?? character,
+  );
+};
+
+/** Platform modifier label for keyboard shortcut hints. */
+export const modKeyLabel = (): string =>
+  typeof navigator !== "undefined" &&
+  /Mac|iPhone|iPad/i.test(navigator.platform)
+    ? "⌘"
+    : "Ctrl";
+
+/** Register a custom element when the runtime supports it (skip during SSR/prerender). */
+export const defineCustomElement = (
+  tag: string,
+  ctor: CustomElementConstructor,
+): void => {
+  if (typeof customElements === "undefined" || customElements.get(tag)) {
+    return;
+  }
+  customElements.define(tag, ctor);
+};
+
+/** Register an alias tag with a fresh subclass; customElements disallows reusing constructors. */
+export const defineCustomElementAlias = <T extends CustomElementConstructor>(
+  tag: string,
+  ctor: T,
+): void => {
+  if (typeof customElements === "undefined" || customElements.get(tag)) {
+    return;
+  }
+  customElements.define(tag, class extends ctor {});
+};

package/dist/src/web/core/icons-inline.ts

@@ -0,0 +1,44 @@
+import {
+  resolveVikingIcon,
+  VIKING_FILLED_ICON_NAMES,
+  VIKING_ICON_FILLED_PATHS,
+  VIKING_ICON_PATHS,
+  type VikingIconName,
+} from "../../lib/core/icons";
+
+const FILLED_ICON_SET = new Set<string>(VIKING_FILLED_ICON_NAMES);
+
+/**
+ * Renders a zero-dependency inline SVG icon for Web Components.
+ * Uses the same registry as `viking-icon` in Angular.
+ */
+export const renderInlineIcon = (
+  name: string,
+  size = 16,
+  className = "viking-wc-icon",
+): string => {
+  const resolved = resolveVikingIcon(name);
+  const filled = FILLED_ICON_SET.has(resolved);
+  const paths = filled
+    ? (VIKING_ICON_FILLED_PATHS[resolved as VikingIconName] ??
+      VIKING_ICON_PATHS[resolved])
+    : VIKING_ICON_PATHS[resolved];
+
+  if (filled) {
+    return `<svg class="${className}" width="${size}" height="${size}" viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd" aria-hidden="true">${paths}</svg>`;
+  }
+
+  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>`;
+};
+
+/** Default tone → icon mapping shared by callout and badge surfaces. */
+export const TONE_ICON_NAMES: Record<string, string> = {
+  accent: "info",
+  secondary: "info",
+  success: "check-circle",
+  warning: "alert-triangle",
+  danger: "alert-circle",
+  info: "info",
+  muted: "info",
+  subtle: "info",
+};