@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6

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

@@ -1,105 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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", "loading"];
-  }
-
-  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"),
-    );
-    this.classList.toggle("viking-card-loading", this.hasAttribute("loading"));
-
-    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

@@ -1,56 +0,0 @@
-/** 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

@@ -1,53 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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",
-};