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

package/src/web/core/types.ts

@@ -0,0 +1,19 @@
+/** Shared Web Component item types. */
+export type VikingSearchPaletteItem = {
+  title: string;
+  href: string;
+  snippet?: string;
+  group?: string;
+  keywords?: string[];
+  action?: "cookie-settings" | "bug-report";
+};
+
+export type VikingWcTone =
+  | "accent"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "muted"
+  | "subtle";

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

@@ -0,0 +1,154 @@
+import { attachShadowStyles, readBoolAttr } from "../core/base";
+import {
+  defineCustomElement,
+  defineCustomElementAlias,
+  escapeHtml,
+  HTMLElementBase,
+  vikingWcUid,
+} from "../core/dom";
+import { VIKING_FIELD_STYLES } from "../core/styles";
+
+/**
+ * Framework-agnostic Viking field stack Web Component.
+ * Tag: `viking-field` (legacy alias: `viking-field-wc`)
+ *
+ * @attr label - Visible field label
+ * @attr description - Helper text below the control
+ * @attr error - Validation message; sets aria-invalid on the slotted control
+ * @attr required - Adds a non-color-only required marker
+ * @attr width - full | half
+ *
+ * @slot default - Form control, usually `viking-input`, `viking-select`, or native input/select
+ */
+export class VikingFieldWc extends HTMLElementBase {
+  static readonly tag = "viking-field";
+  static readonly legacyTag = "viking-field-wc";
+
+  static get observedAttributes(): string[] {
+    return ["label", "description", "error", "required", "width"];
+  }
+
+  private readonly shadow: ShadowRoot;
+  private readonly labelId = vikingWcUid("viking-field-label");
+  private readonly descriptionId = vikingWcUid("viking-field-description");
+  private readonly errorId = vikingWcUid("viking-field-error");
+  private slotEl: HTMLSlotElement | null = null;
+
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    attachShadowStyles(this.shadow, VIKING_FIELD_STYLES);
+  }
+
+  connectedCallback(): void {
+    this.render();
+    this.syncControlA11y();
+  }
+
+  disconnectedCallback(): void {
+    this.slotEl?.removeEventListener("slotchange", this.syncControlA11y);
+  }
+
+  attributeChangedCallback(): void {
+    if (this.isConnected) {
+      this.render();
+      this.syncControlA11y();
+    }
+  }
+
+  private get control(): HTMLElement | null {
+    const assigned = this.slotEl?.assignedElements({ flatten: true }) ?? [];
+    return (
+      assigned.find(
+        (node): node is HTMLElement => node instanceof HTMLElement,
+      ) ?? null
+    );
+  }
+
+  private readonly focusControl = (): void => {
+    const control = this.control as HTMLElement & { focus?: () => void };
+    control?.focus?.();
+  };
+
+  private readonly syncControlA11y = (): void => {
+    const control = this.control;
+    if (!control) {
+      return;
+    }
+
+    const description = [
+      this.getAttribute("description") ?? "",
+      this.getAttribute("error") ?? "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const label = this.getAttribute("label") ?? "";
+    if (label && !control.hasAttribute("aria-label")) {
+      control.setAttribute("aria-label", label);
+    }
+    if (description) {
+      control.setAttribute("aria-description", description);
+    } else {
+      control.removeAttribute("aria-description");
+    }
+
+    if (this.getAttribute("error")) {
+      control.setAttribute("aria-invalid", "true");
+      control.setAttribute("error", this.getAttribute("error") ?? "");
+    } else {
+      control.removeAttribute("aria-invalid");
+      if (control.getAttribute("error") === "") {
+        control.removeAttribute("error");
+      }
+    }
+
+    if (readBoolAttr(this, "required")) {
+      control.setAttribute("required", "");
+    }
+  };
+
+  private render(): void {
+    const label = this.getAttribute("label") ?? "";
+    const description = this.getAttribute("description") ?? "";
+    const error = this.getAttribute("error") ?? "";
+    const required = readBoolAttr(this, "required");
+
+    this.shadow.innerHTML = `
+      <div class="viking-field" part="field" role="group" aria-labelledby="${this.labelId}">
+        ${
+          label
+            ? `<div class="viking-field-label-row" part="label-row">
+                <span class="viking-field-label" part="label" id="${this.labelId}">
+                  <span>${escapeHtml(label)}</span>
+                  ${required ? `<span class="viking-field-required" aria-label="required">*</span>` : ""}
+                </span>
+              </div>`
+            : `<span id="${this.labelId}" hidden>Form field</span>`
+        }
+        <div class="viking-field-control" part="control"><slot></slot></div>
+        ${
+          description
+            ? `<p id="${this.descriptionId}" class="viking-field-description" part="description">${escapeHtml(description)}</p>`
+            : ""
+        }
+        ${
+          error
+            ? `<p id="${this.errorId}" class="viking-field-error" part="error" role="alert">${escapeHtml(error)}</p>`
+            : ""
+        }
+      </div>
+    `;
+
+    this.slotEl = this.shadow.querySelector("slot");
+    this.slotEl?.addEventListener("slotchange", this.syncControlA11y);
+    this.shadow
+      .querySelector(".viking-field-label")
+      ?.addEventListener("click", this.focusControl);
+  }
+}
+
+export const registerVikingFieldWc = (): void => {
+  defineCustomElement(VikingFieldWc.tag, VikingFieldWc);
+  defineCustomElementAlias(VikingFieldWc.legacyTag, VikingFieldWc);
+};

package/src/web/index.ts

@@ -0,0 +1,73 @@
+import { registerVikingBadgeWc } from "./badge/viking-badge-wc";
+import { registerVikingButtonWc } from "./button/viking-button-wc";
+import { registerVikingCalloutWc } from "./callout/viking-callout-wc";
+import { registerVikingCardWc } from "./card/viking-card-wc";
+import { registerVikingFieldWc } from "./field/viking-field-wc";
+import { registerVikingInputWc } from "./input/viking-input-wc";
+import { registerVikingModalWc } from "./modal/viking-modal-wc";
+import { registerVikingSearchPaletteWc } from "./search-palette/viking-search-palette-wc";
+import { registerVikingSuiteHeaderWc } from "./suite-header/viking-suite-header-wc";
+import { registerVikingSuiteSearchPaletteWc } from "./suite-search-palette/viking-suite-search-palette-wc";
+import { registerVikingSelectWc } from "./select/viking-select-wc";
+import { registerVikingThemeToggleWc } from "./theme-toggle/viking-theme-toggle-wc";
+
+export { VikingBadgeWc, registerVikingBadgeWc } from "./badge/viking-badge-wc";
+export {
+  VikingButtonWc,
+  registerVikingButtonWc,
+} from "./button/viking-button-wc";
+export {
+  VikingCalloutWc,
+  registerVikingCalloutWc,
+} from "./callout/viking-callout-wc";
+export { VikingCardWc, registerVikingCardWc } from "./card/viking-card-wc";
+export { VikingFieldWc, registerVikingFieldWc } from "./field/viking-field-wc";
+export { VikingInputWc, registerVikingInputWc } from "./input/viking-input-wc";
+export { VikingModalWc, registerVikingModalWc } from "./modal/viking-modal-wc";
+export {
+  VikingSearchPaletteWc,
+  registerVikingSearchPaletteWc,
+  type VikingSearchPaletteItem,
+} from "./search-palette/viking-search-palette-wc";
+export {
+  VikingSuiteSearchPaletteWc,
+  registerVikingSuiteSearchPaletteWc,
+} from "./suite-search-palette/viking-suite-search-palette-wc";
+export {
+  VikingSuiteHeaderWc,
+  registerVikingSuiteHeaderWc,
+} from "./suite-header/viking-suite-header-wc";
+export {
+  VikingSelectWc,
+  registerVikingSelectWc,
+} from "./select/viking-select-wc";
+export {
+  VikingThemeToggleWc,
+  registerVikingThemeToggleWc,
+} from "./theme-toggle/viking-theme-toggle-wc";
+export type { VikingWcTone } from "./core/types";
+
+/** Register all Viking-UI Web Components. Safe to call multiple times. */
+export const registerVikingElements = (): void => {
+  registerVikingButtonWc();
+  registerVikingFieldWc();
+  registerVikingInputWc();
+  registerVikingBadgeWc();
+  registerVikingCalloutWc();
+  registerVikingCardWc();
+  registerVikingSelectWc();
+  registerVikingModalWc();
+  registerVikingSearchPaletteWc();
+  registerVikingSuiteHeaderWc();
+  registerVikingSuiteSearchPaletteWc();
+  registerVikingThemeToggleWc();
+};
+
+// Auto-register when loaded as a script bundle (Astro, Django, static HTML).
+if (typeof globalThis !== "undefined" && typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", registerVikingElements);
+  } else {
+    registerVikingElements();
+  }
+}

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

@@ -0,0 +1,211 @@
+import {
+  attachElementInternals,
+  attachShadowStyles,
+  readBoolAttr,
+  setFormValue,
+} from "../core/base";
+import {
+  defineCustomElement,
+  defineCustomElementAlias,
+  escapeHtml,
+  HTMLElementBase,
+} from "../core/dom";
+import { VIKING_INPUT_STYLES } from "../core/styles";
+
+/**
+ * Framework-agnostic Viking input Web Component with form association.
+ * Tag: `viking-input` (legacy alias: `viking-input-wc`)
+ *
+ * @example
+ * <viking-input placeholder="Email" name="email" type="email"></viking-input>
+ */
+export class VikingInputWc extends HTMLElementBase {
+  static readonly formAssociated = true;
+  static readonly tag = "viking-input";
+  static readonly legacyTag = "viking-input-wc";
+
+  static get observedAttributes(): string[] {
+    return [
+      "type",
+      "placeholder",
+      "value",
+      "disabled",
+      "loading",
+      "clearable",
+      "name",
+      "autocomplete",
+      "required",
+      "readonly",
+      "minlength",
+      "maxlength",
+      "pattern",
+      "error",
+      "aria-label",
+      "aria-describedby",
+      "bare",
+    ];
+  }
+
+  private readonly shadow: ShadowRoot;
+  private readonly internals: ElementInternals | null;
+  private input: HTMLInputElement | null = null;
+
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.internals = attachElementInternals(this);
+    attachShadowStyles(this.shadow, VIKING_INPUT_STYLES);
+  }
+
+  connectedCallback(): void {
+    this.render();
+    this.syncFormValue();
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (!this.isConnected) {
+      return;
+    }
+    if (name === "value" && this.input) {
+      this.input.value = this.getAttribute("value") ?? "";
+      this.syncFormValue();
+      return;
+    }
+    this.render();
+  }
+
+  get value(): string {
+    return this.input?.value ?? this.getAttribute("value") ?? "";
+  }
+
+  set value(next: string) {
+    const normalized = next ?? "";
+    this.setAttribute("value", normalized);
+    if (this.input) {
+      this.input.value = normalized;
+    }
+    this.syncFormValue();
+  }
+
+  private get disabled(): boolean {
+    return readBoolAttr(this, "disabled");
+  }
+
+  private get loading(): boolean {
+    return readBoolAttr(this, "loading");
+  }
+
+  private get clearable(): boolean {
+    return readBoolAttr(this, "clearable");
+  }
+
+  private get bare(): boolean {
+    return readBoolAttr(this, "bare");
+  }
+
+  private readonly onInput = (): void => {
+    const next = this.input?.value ?? "";
+    this.setAttribute("value", next);
+    this.syncFormValue();
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  };
+
+  private readonly onBlur = (): void => {
+    this.dispatchEvent(new Event("blur", { bubbles: true, composed: true }));
+  };
+
+  private readonly onClear = (): void => {
+    this.value = "";
+    this.input?.focus();
+    this.dispatchEvent(
+      new CustomEvent("viking-cleared", { bubbles: true, composed: true }),
+    );
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+  };
+
+  private syncFormValue(): void {
+    setFormValue(this.internals, this.value);
+  }
+
+  private render(): void {
+    const shellClasses = [
+      "viking-input-shell",
+      this.disabled ? "viking-disabled" : "",
+      this.loading ? "viking-loading" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const type = escapeHtml(this.getAttribute("type") ?? "text");
+    const rawPlaceholder = this.getAttribute("placeholder") ?? "";
+    const placeholder = escapeHtml(rawPlaceholder);
+    const value = escapeHtml(this.getAttribute("value") ?? "");
+    const label =
+      this.getAttribute("aria-label") ?? (rawPlaceholder || "Text input");
+    const autocomplete = escapeHtml(this.getAttribute("autocomplete") ?? "");
+    const describedBy = escapeHtml(this.getAttribute("aria-describedby") ?? "");
+    const minLength = escapeHtml(this.getAttribute("minlength") ?? "");
+    const maxLength = escapeHtml(this.getAttribute("maxlength") ?? "");
+    const pattern = escapeHtml(this.getAttribute("pattern") ?? "");
+    const error = this.getAttribute("error") ?? "";
+    const required = readBoolAttr(this, "required");
+    const readonly = readBoolAttr(this, "readonly");
+    const showClear =
+      this.clearable && value.length > 0 && !this.loading && !this.bare;
+    const nativeAttrs = `
+      ${this.disabled || this.loading ? "disabled" : ""}
+      ${required ? "required" : ""}
+      ${readonly ? "readonly" : ""}
+      aria-label="${escapeHtml(label)}"
+      ${describedBy ? `aria-describedby="${describedBy}"` : ""}
+      ${this.loading ? 'aria-busy="true"' : ""}
+      ${error ? 'aria-invalid="true"' : ""}
+      ${autocomplete ? `autocomplete="${autocomplete}"` : ""}
+      ${minLength ? `minlength="${minLength}"` : ""}
+      ${maxLength ? `maxlength="${maxLength}"` : ""}
+      ${pattern ? `pattern="${pattern}"` : ""}
+    `;
+
+    if (this.bare) {
+      this.shadow.innerHTML = `
+        <input
+          part="input"
+          class="viking-input-native"
+          type="${type}"
+          placeholder="${placeholder}"
+          value="${value}"
+          ${nativeAttrs}
+        />
+      `;
+    } else {
+      this.shadow.innerHTML = `
+        <div class="${shellClasses}" part="shell">
+          <slot name="leading"></slot>
+          <input
+            part="input"
+            type="${type}"
+            placeholder="${placeholder}"
+            value="${value}"
+            ${nativeAttrs}
+          />
+          ${this.loading ? '<span class="viking-input-spinner" aria-hidden="true"></span>' : ""}
+          ${showClear ? '<button type="button" class="viking-input-clear" aria-label="Clear input" part="clear">×</button>' : ""}
+          <slot name="trailing"></slot>
+        </div>
+      `;
+    }
+
+    this.input = this.shadow.querySelector("input");
+    this.input?.addEventListener("input", this.onInput);
+    this.input?.addEventListener("blur", this.onBlur);
+
+    const clearBtn = this.shadow.querySelector(".viking-input-clear");
+    clearBtn?.addEventListener("click", this.onClear);
+  }
+}
+
+export const registerVikingInputWc = (): void => {
+  defineCustomElement(VikingInputWc.tag, VikingInputWc);
+  defineCustomElementAlias(VikingInputWc.legacyTag, VikingInputWc);
+};

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

@@ -0,0 +1,187 @@
+import {
+  attachShadowStyles,
+  closeModalDialog,
+  showModalDialog,
+} from "../core/base";
+import {
+  defineCustomElement,
+  defineCustomElementAlias,
+  escapeHtml,
+  HTMLElementBase,
+} from "../core/dom";
+import { renderInlineIcon } from "../core/icons-inline";
+import { VIKING_MODAL_STYLES } from "../core/styles";
+
+/**
+ * Framework-agnostic modal Web Component using native `<dialog>` semantics.
+ * Tag: `viking-modal` (legacy aliases: `viking-modal-wc`, `viking-dialog`)
+ *
+ * @attr open - When present, shows the modal
+ * @attr title - Dialog title for aria-label / heading
+ * @attr dismissible - Allow Escape and backdrop click to close (default: true)
+ *
+ * @slot default - Modal body content
+ * @slot actions - Footer action buttons
+ *
+ * @method openModal() - Programmatically open
+ * @method closeModal() - Programmatically close
+ *
+ * @event viking-close - Fired when the dialog closes
+ *
+ * @example
+ * <viking-modal title="Confirm deploy">
+ *   <p>Push v2.0.0 to production?</p>
+ *   <viking-button slot="actions" variant="primary">Deploy</viking-button>
+ * </viking-modal>
+ */
+export class VikingModalWc extends HTMLElementBase {
+  static readonly tag = "viking-modal";
+  static readonly legacyTag = "viking-modal-wc";
+  static readonly dialogTag = "viking-dialog";
+
+  static get observedAttributes(): string[] {
+    return ["open", "title", "dismissible"];
+  }
+
+  private readonly shadow: ShadowRoot;
+  private dialogEl: HTMLDialogElement | null = null;
+
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    attachShadowStyles(this.shadow, VIKING_MODAL_STYLES);
+  }
+
+  connectedCallback(): void {
+    this.render();
+    this.syncOpen();
+    this.dialogEl?.addEventListener("close", this.onClose);
+    this.dialogEl?.addEventListener("click", this.onBackdropClick);
+  }
+
+  disconnectedCallback(): void {
+    this.dialogEl?.removeEventListener("close", this.onClose);
+    this.dialogEl?.removeEventListener("click", this.onBackdropClick);
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (!this.isConnected) {
+      return;
+    }
+    if (name === "open") {
+      this.syncOpen();
+      return;
+    }
+    if (name === "title") {
+      this.updateTitle();
+      return;
+    }
+    if (name === "dismissible") {
+      this.render();
+      this.syncOpen();
+    }
+  }
+
+  /** Opens the modal dialog. */
+  openModal(): void {
+    this.setAttribute("open", "");
+    this.syncOpen();
+  }
+
+  /** Closes the modal dialog. */
+  closeModal(): void {
+    this.removeAttribute("open");
+    closeModalDialog(this.dialogEl);
+  }
+
+  /** @deprecated Use openModal() */
+  open(): void {
+    this.openModal();
+  }
+
+  /** @deprecated Use closeModal() */
+  close(): void {
+    this.closeModal();
+  }
+
+  private get dismissible(): boolean {
+    return this.getAttribute("dismissible") !== "false";
+  }
+
+  private readonly onClose = (): void => {
+    this.removeAttribute("open");
+    this.dispatchEvent(
+      new CustomEvent("viking-close", { bubbles: true, composed: true }),
+    );
+  };
+
+  private readonly onBackdropClick = (event: MouseEvent): void => {
+    if (!this.dismissible) {
+      return;
+    }
+    if (event.target === this.dialogEl) {
+      this.closeModal();
+    }
+  };
+
+  private syncOpen(): void {
+    if (!this.dialogEl) {
+      return;
+    }
+    const shouldOpen = this.hasAttribute("open");
+    if (shouldOpen && !this.dialogEl.open) {
+      showModalDialog(this.dialogEl);
+      queueMicrotask(() => {
+        const closeBtn = this.shadow.querySelector<HTMLButtonElement>(
+          ".viking-modal-close",
+        );
+        (closeBtn ?? this.dialogEl)?.focus();
+      });
+    } else if (!shouldOpen && this.dialogEl.open) {
+      closeModalDialog(this.dialogEl);
+    }
+  }
+
+  private updateTitle(): void {
+    const title = this.getAttribute("title") ?? "Dialog";
+    const heading = this.shadow.querySelector(".viking-modal-heading");
+    if (heading) {
+      heading.textContent = title;
+    }
+    this.dialogEl?.setAttribute("aria-label", title);
+  }
+
+  private render(): void {
+    const title = this.getAttribute("title") ?? "Dialog";
+
+    this.shadow.innerHTML = `
+      <dialog class="viking-modal-backdrop" aria-label="${escapeHtml(title)}" aria-modal="true">
+        <div class="viking-modal-panel" part="panel" role="document">
+          <header class="viking-modal-header" part="header">
+            <h2 class="viking-modal-heading" part="title">${escapeHtml(title)}</h2>
+            ${this.dismissible ? `<button type="button" class="viking-modal-close" part="close" aria-label="Close dialog">${renderInlineIcon("x", 20)}</button>` : ""}
+          </header>
+          <div class="viking-modal-body" part="body"><slot></slot></div>
+          <footer class="viking-modal-footer" part="footer"><slot name="actions"></slot></footer>
+        </div>
+      </dialog>
+    `;
+
+    this.dialogEl = this.shadow.querySelector("dialog");
+    this.shadow
+      .querySelector(".viking-modal-close")
+      ?.addEventListener("click", () => this.closeModal());
+    this.dialogEl?.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && this.dismissible) {
+        event.preventDefault();
+        this.closeModal();
+      }
+    });
+  }
+}
+
+export const registerVikingModalWc = (): void => {
+  defineCustomElement(VikingModalWc.tag, VikingModalWc);
+  defineCustomElementAlias(VikingModalWc.legacyTag, VikingModalWc);
+  defineCustomElementAlias(VikingModalWc.dialogTag, VikingModalWc);
+};