@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/src/web/core/types.ts

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

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

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

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

@@ -1,187 +0,0 @@
-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);
-};