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

package/src/viking-ui.spec.ts

@@ -0,0 +1,416 @@
+import { Component, signal } from "@angular/core";
+import { TestBed, ComponentFixture } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import {
+  VikingAccordion,
+  VikingAccordionItem,
+  VikingBadge,
+  VikingButton,
+  VikingCalendar,
+  VikingChart,
+  VikingCheckbox,
+  VikingFormPanel,
+  VikingFormSection,
+  VikingHeading,
+  VikingIcon,
+  VikingInput,
+  VikingField,
+  VikingPagination,
+  VikingProgress,
+  VikingSelect,
+  VikingSwitch,
+  VikingToastService,
+  VikingSelectOption,
+} from "./public-api";
+
+@Component({
+  imports: [VikingCheckbox, FormsModule],
+  template: `<viking-checkbox [(ngModel)]="accepted">Accept</viking-checkbox>`,
+})
+class CheckboxHost {
+  accepted = false;
+}
+
+@Component({
+  imports: [VikingSelect],
+  template: `<viking-select
+    [options]="options"
+    [value]="value()"
+    (valueChange)="value.set($event)"
+  />`,
+})
+class SelectHost {
+  readonly options: VikingSelectOption[] = [
+    { label: "Alpha", value: "a" },
+    { label: "Beta", value: "b" },
+  ];
+  readonly value = signal<unknown>(null);
+}
+
+describe("viking-ui", () => {
+  const render = async <T>(
+    component: new () => T,
+  ): Promise<ComponentFixture<T>> => {
+    const fixture = TestBed.createComponent(component);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    return fixture;
+  };
+
+  it("renders compact buttons without min-width for form actions", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingButton);
+    fixture.componentRef.setInput("variant", "primary");
+    fixture.componentRef.setInput("compact", true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.classList.contains("viking-compact")).toBe(
+      true,
+    );
+    const wc = fixture.nativeElement.querySelector(
+      "viking-button-wc",
+    ) as HTMLElement;
+    const button = wc?.shadowRoot?.querySelector("button") as HTMLButtonElement;
+    expect(button.classList.contains("viking-btn-primary")).toBe(true);
+  });
+
+  it("renders button variants with accessible focus and disabled semantics", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingButton);
+    fixture.componentRef.setInput("variant", "primary");
+    fixture.componentRef.setInput("disabled", true);
+    fixture.detectChanges();
+    const wc = fixture.nativeElement.querySelector(
+      "viking-button-wc",
+    ) as HTMLElement;
+    const button = wc?.shadowRoot?.querySelector("button") as HTMLButtonElement;
+    expect(button.classList.contains("viking-btn-primary")).toBe(true);
+    expect(button.disabled).toBe(true);
+  });
+
+  it("renders an anchor with rel guard when href and target are set", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingButton);
+    fixture.componentRef.setInput("href", "https://deml.app");
+    fixture.componentRef.setInput("target", "_blank");
+    fixture.detectChanges();
+    const wc = fixture.nativeElement.querySelector(
+      "viking-button-wc",
+    ) as HTMLElement;
+    const anchor = wc?.shadowRoot?.querySelector("a") as HTMLAnchorElement;
+    expect(anchor.getAttribute("rel")).toBe("noopener noreferrer");
+  });
+
+  it("applies tone classes on badges", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingBadge);
+    fixture.componentRef.setInput("tone", "danger");
+    fixture.detectChanges();
+    expect(
+      fixture.nativeElement.classList.contains("viking-badge-danger"),
+    ).toBe(true);
+  });
+
+  it("exposes heading level via aria-level", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingHeading);
+    fixture.componentRef.setInput("level", 2);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.getAttribute("aria-level")).toBe("2");
+  });
+
+  it("integrates checkbox with ngModel (ControlValueAccessor)", async (): Promise<void> => {
+    const fixture = await render(CheckboxHost);
+    const input = fixture.nativeElement.querySelector(
+      "input",
+    ) as HTMLInputElement;
+    input.click();
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(fixture.componentInstance.accepted).toBe(true);
+  });
+
+  it("toggles switch state on change", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingSwitch);
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector(
+      "input",
+    ) as HTMLInputElement;
+    input.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.checked()).toBe(true);
+  });
+
+  it("opens the select listbox and picks an option", async (): Promise<void> => {
+    const fixture = await render(SelectHost);
+    const trigger = fixture.nativeElement.querySelector(
+      ".viking-select-trigger",
+    ) as HTMLButtonElement;
+    trigger.click();
+    fixture.detectChanges();
+    const options = fixture.nativeElement.querySelectorAll(
+      ".viking-select-option",
+    );
+    expect(options.length).toBe(2);
+    (options[1] as HTMLElement).click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.value()).toBe("b");
+  });
+
+  it("windows pagination with ellipses for long ranges", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingPagination);
+    fixture.componentRef.setInput("totalPages", 20);
+    fixture.componentRef.setInput("page", 10);
+    fixture.detectChanges();
+    const text = (fixture.nativeElement as HTMLElement).textContent ?? "";
+    expect(text).toContain("…");
+    expect(text).toContain("10");
+    expect(text).toContain("20");
+  });
+
+  it("clamps progress values into 0-100 and sets aria-valuenow", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingProgress);
+    fixture.componentRef.setInput("value", 140);
+    fixture.detectChanges();
+    const bar = fixture.nativeElement.querySelector(
+      '[role="progressbar"]',
+    ) as HTMLElement;
+    expect(bar.getAttribute("aria-valuenow")).toBe("100");
+  });
+
+  it("renders a 42-day calendar grid and selects a day", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingCalendar);
+    fixture.detectChanges();
+    const days = fixture.nativeElement.querySelectorAll(".viking-calendar-day");
+    expect(days.length).toBe(42);
+    (days[15] as HTMLElement).click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.value()).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+  });
+
+  it("builds SVG paths for every chart series", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingChart);
+    fixture.componentRef.setInput("series", [
+      { name: "p50", data: [1, 2, 3] },
+      { name: "p95", tone: "warning", data: [2, 4, 6] },
+    ]);
+    fixture.detectChanges();
+    const lines = fixture.nativeElement.querySelectorAll(".viking-chart-line");
+    expect(lines.length).toBe(2);
+    expect((lines[0] as SVGPathElement).getAttribute("d")).toContain("M");
+  });
+
+  it("renders grouped and stacked bar rects", async (): Promise<void> => {
+    const grouped = TestBed.createComponent(VikingChart);
+    grouped.componentRef.setInput("kind", "grouped-bar");
+    grouped.componentRef.setInput("series", [
+      { name: "A", tone: "accent", data: [4, 6, 5] },
+      { name: "B", tone: "success", data: [3, 2, 4] },
+    ]);
+    grouped.detectChanges();
+    expect(
+      grouped.nativeElement.querySelectorAll(".viking-chart-bar").length,
+    ).toBe(6);
+
+    const stacked = TestBed.createComponent(VikingChart);
+    stacked.componentRef.setInput("kind", "stacked-bar");
+    stacked.componentRef.setInput("series", [
+      { name: "Online", tone: "accent", data: [4, 3] },
+      { name: "Retail", tone: "success", data: [2, 5] },
+    ]);
+    stacked.detectChanges();
+    expect(
+      stacked.nativeElement.querySelectorAll(".viking-chart-bar").length,
+    ).toBe(4);
+  });
+
+  it("renders a minimum visible height for zero-value bars", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingChart);
+    fixture.componentRef.setInput("kind", "bar");
+    fixture.componentRef.setInput("series", [
+      { name: "Revenue", data: [0, 5, 0] },
+    ]);
+    fixture.componentRef.setInput("barMinHeight", 4);
+    fixture.detectChanges();
+
+    const bars = fixture.nativeElement.querySelectorAll(".viking-chart-bar");
+    expect(bars.length).toBe(3);
+    expect(Number((bars[0] as SVGRectElement).getAttribute("height"))).toBe(4);
+    expect(Number((bars[2] as SVGRectElement).getAttribute("height"))).toBe(4);
+    expect(
+      Number((bars[1] as SVGRectElement).getAttribute("height")),
+    ).toBeGreaterThan(4);
+  });
+
+  it("enforces exclusive accordion mode", async (): Promise<void> => {
+    @Component({
+      imports: [VikingAccordion, VikingAccordionItem],
+      template: `
+        <viking-accordion [exclusive]="true">
+          <viking-accordion-item heading="One">First</viking-accordion-item>
+          <viking-accordion-item heading="Two">Second</viking-accordion-item>
+        </viking-accordion>
+      `,
+    })
+    class AccordionHost {}
+
+    const fixture = await render(AccordionHost);
+    const triggers = fixture.nativeElement.querySelectorAll(
+      ".viking-accordion-trigger",
+    );
+    (triggers[0] as HTMLElement).click();
+    fixture.detectChanges();
+    (triggers[1] as HTMLElement).click();
+    fixture.detectChanges();
+    const expanded = fixture.nativeElement.querySelectorAll(
+      '[aria-expanded="true"]',
+    );
+    expect(expanded.length).toBe(1);
+  });
+
+  it("queues and auto-dismisses toasts via the service", (): void => {
+    const service = TestBed.inject(VikingToastService);
+    const id = service.show({
+      heading: "Saved",
+      text: "All good",
+      tone: "success",
+      duration: 0,
+    });
+    expect(service.toasts().length).toBe(1);
+    service.dismiss(id);
+    expect(service.toasts().length).toBe(0);
+  });
+
+  it("renders outline and filled Drakkar brand icons at 24×24 viewBox", async (): Promise<void> => {
+    const outline = TestBed.createComponent(VikingIcon);
+    outline.componentRef.setInput("name", "drakkar");
+    outline.componentRef.setInput("sizePreset", "lg");
+    outline.detectChanges();
+    const outlineSvg = outline.nativeElement.querySelector(
+      "svg",
+    ) as SVGSVGElement;
+    expect(outlineSvg.getAttribute("viewBox")).toBe("0 0 24 24");
+    expect(outlineSvg.getAttribute("stroke")).toBe("currentColor");
+    expect(
+      outline.nativeElement.classList.contains("viking-icon-outline"),
+    ).toBe(true);
+    expect(
+      outline.nativeElement.classList.contains("viking-icon-brand-drakkar"),
+    ).toBe(true);
+    expect(outline.nativeElement.querySelector("g")?.innerHTML).toContain(
+      "M12 2v3",
+    );
+
+    const filled = TestBed.createComponent(VikingIcon);
+    filled.componentRef.setInput("name", "drakkar");
+    filled.componentRef.setInput("variant", "filled");
+    filled.componentRef.setInput("size", 28);
+    filled.detectChanges();
+    const filledSvg = filled.nativeElement.querySelector(
+      "svg",
+    ) as SVGSVGElement;
+    expect(filledSvg.getAttribute("fill")).toBe("currentColor");
+    expect(filledSvg.getAttribute("fill-rule")).toBe("evenodd");
+    expect(filledSvg.getAttribute("stroke")).toBe("none");
+    expect(filled.nativeElement.classList.contains("viking-icon-filled")).toBe(
+      true,
+    );
+  });
+
+  it("renders outline and filled DEML brand icons at 24×24 viewBox", async (): Promise<void> => {
+    const outline = TestBed.createComponent(VikingIcon);
+    outline.componentRef.setInput("name", "deml");
+    outline.componentRef.setInput("sizePreset", "lg");
+    outline.detectChanges();
+    const outlineSvg = outline.nativeElement.querySelector(
+      "svg",
+    ) as SVGSVGElement;
+    expect(outlineSvg.getAttribute("viewBox")).toBe("0 0 24 24");
+    expect(outlineSvg.getAttribute("stroke")).toBe("currentColor");
+    expect(
+      outline.nativeElement.classList.contains("viking-icon-outline"),
+    ).toBe(true);
+
+    const filled = TestBed.createComponent(VikingIcon);
+    filled.componentRef.setInput("name", "deml");
+    filled.componentRef.setInput("variant", "filled");
+    filled.componentRef.setInput("size", 28);
+    filled.detectChanges();
+    const filledSvg = filled.nativeElement.querySelector(
+      "svg",
+    ) as SVGSVGElement;
+    expect(filledSvg.getAttribute("fill")).toBe("currentColor");
+    expect(filledSvg.getAttribute("fill-rule")).toBe("evenodd");
+    expect(filledSvg.getAttribute("stroke")).toBe("none");
+    expect(filled.nativeElement.classList.contains("viking-icon-filled")).toBe(
+      true,
+    );
+  });
+
+  it("maps size presets to pixel dimensions", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingIcon);
+    fixture.componentRef.setInput("name", "check");
+    fixture.componentRef.setInput("sizePreset", "sm");
+    fixture.detectChanges();
+    const svg = fixture.nativeElement.querySelector("svg") as SVGSVGElement;
+    expect(svg.style.width).toBe("16px");
+    expect(svg.style.height).toBe("16px");
+  });
+
+  it("resolves semantic color tokens to CSS custom properties", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingIcon);
+    fixture.componentRef.setInput("name", "shield");
+    fixture.componentRef.setInput("color", "accent");
+    fixture.detectChanges();
+    expect((fixture.nativeElement as HTMLElement).style.color).toBe(
+      "var(--viking-accent)",
+    );
+  });
+
+  it("renders Lucide-sourced search icon paths", async (): Promise<void> => {
+    const fixture = TestBed.createComponent(VikingIcon);
+    fixture.componentRef.setInput("name", "search");
+    fixture.detectChanges();
+    const svg = fixture.nativeElement.querySelector("svg") as SVGSVGElement;
+    expect(svg.innerHTML).toContain("circle");
+    expect(svg.getAttribute("stroke")).toBe("currentColor");
+  });
+
+  it("renders form section headings and layout classes", async (): Promise<void> => {
+    @Component({
+      imports: [VikingFormSection, VikingField, VikingInput, FormsModule],
+      template: `
+        <viking-form-section heading="Update Email" icon="mail" layout="inline">
+          <viking-field label="Email">
+            <viking-input />
+          </viking-field>
+          <button type="button" vikingFormActions>Save</button>
+        </viking-form-section>
+      `,
+    })
+    class FormSectionHost {}
+
+    const fixture = await render(FormSectionHost);
+    const section = fixture.nativeElement.querySelector(
+      "viking-form-section",
+    ) as HTMLElement;
+    expect(section.classList.contains("viking-form-section-inline")).toBe(true);
+    expect(
+      section.querySelector(".viking-form-section-title")?.textContent,
+    ).toContain("Update Email");
+    expect(section.querySelector("[vikingFormActions]")).toBeTruthy();
+  });
+
+  it("separates stacked form sections inside a panel", async (): Promise<void> => {
+    @Component({
+      imports: [VikingFormPanel, VikingFormSection],
+      template: `
+        <viking-form-panel>
+          <viking-form-section heading="One" layout="stack" />
+          <viking-form-section heading="Two" layout="stack" />
+        </viking-form-panel>
+      `,
+    })
+    class FormPanelHost {}
+
+    const fixture = await render(FormPanelHost);
+    const sections = fixture.nativeElement.querySelectorAll(
+      "viking-form-section",
+    );
+    expect(sections.length).toBe(2);
+  });
+});

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