@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/dist/web-components.js

@@ -364,6 +364,12 @@ var VIKING_BUTTON_STYLES = `
 }
 
 .viking-btn {
+  --viking-btn-depth-shadow: var(--viking-shadow-sm);
+  --viking-btn-hover-shadow: var(--viking-shadow-hover);
+  --viking-btn-press-shadow:
+    inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
+    var(--viking-shadow-xs);
+
   font-family: inherit;
   font-size: var(--viking-font-size-ui, var(--viking-font-size-sm));
   font-weight: var(--viking-font-weight-semibold);
@@ -372,10 +378,10 @@ var VIKING_BUTTON_STYLES = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--viking-space-1);
+  gap: var(--viking-space-1-5);
   min-height: var(--viking-control-height);
-  padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius-lg);
+  padding: var(--viking-space-half) var(--viking-control-padding-x);
+  border-radius: var(--viking-radius-md);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -390,7 +396,7 @@ var VIKING_BUTTON_STYLES = `
   -webkit-tap-highlight-color: transparent;
   box-sizing: border-box;
   overflow: hidden;
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-depth-shadow);
 }
 
 .viking-btn::before {
@@ -405,7 +411,7 @@ var VIKING_BUTTON_STYLES = `
     transparent
   );
   pointer-events: none;
-  opacity: 0.82;
+  opacity: 0.88;
   transition: var(--viking-transition-interactive);
 }
 
@@ -423,9 +429,13 @@ var VIKING_BUTTON_STYLES = `
   box-shadow: none !important;
 }
 
+.viking-btn[aria-busy='true'] {
+  cursor: wait;
+}
+
 .viking-btn[aria-busy='true']::before,
 .viking-btn[aria-busy='true'] .viking-btn-label {
-  opacity: 0.85;
+  opacity: 0.78;
   transform: translateY(1px);
 }
 
@@ -529,27 +539,26 @@ var VIKING_BUTTON_STYLES = `
   flex-shrink: 0;
   pointer-events: none;
   flex: 0 0 auto;
+  margin-block: calc(var(--viking-space-half) * -1);
 }
 
 .viking-btn-outline {
   background: var(--viking-surface);
   color: var(--viking-text);
   border-color: var(--viking-border-strong);
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-depth-shadow);
 }
 
 .viking-btn-outline:hover:not(:disabled):not([aria-busy='true']) {
-  background: var(--viking-surface-alt);
+  background: color-mix(in srgb, var(--viking-accent) 5%, var(--viking-surface-alt));
   border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border-strong));
-  box-shadow: var(--viking-shadow-md);
+  box-shadow: var(--viking-btn-hover-shadow);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
 .viking-btn-outline:active:not(:disabled):not([aria-busy='true']) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: inset 0 1px 2px
-      color-mix(in srgb, var(--viking-black) 28%, transparent),
-    var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-press-shadow);
   border-color: var(--viking-border-strong);
 }
 
@@ -557,21 +566,21 @@ var VIKING_BUTTON_STYLES = `
   background: var(--viking-accent);
   color: var(--viking-accent-content);
   border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow:
+    var(--viking-btn-depth-shadow),
+    inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 12%, transparent);
 }
 
 .viking-btn-primary:hover:not(:disabled):not([aria-busy='true']) {
   background: var(--viking-accent-hover);
   border-color: var(--viking-accent-hover);
-  box-shadow: var(--viking-shadow-hover);
+  box-shadow: var(--viking-btn-hover-shadow);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
 .viking-btn-primary:active:not(:disabled):not([aria-busy='true']) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: inset 0 1px 2px
-      color-mix(in srgb, var(--viking-black) 28%, transparent),
-    var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-press-shadow);
   border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
 }
 
@@ -579,21 +588,21 @@ var VIKING_BUTTON_STYLES = `
   background: var(--viking-accent-secondary);
   color: var(--viking-accent-secondary-content);
   border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow:
+    var(--viking-btn-depth-shadow),
+    inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 10%, transparent);
 }
 
 .viking-btn-secondary:hover:not(:disabled):not([aria-busy='true']) {
   background: var(--viking-accent-secondary-hover);
   border-color: var(--viking-accent-secondary-hover);
-  box-shadow: var(--viking-shadow-hover);
+  box-shadow: var(--viking-btn-hover-shadow);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
 .viking-btn-secondary:active:not(:disabled):not([aria-busy='true']) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: inset 0 1px 2px
-      color-mix(in srgb, var(--viking-black) 28%, transparent),
-    var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-press-shadow);
   border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
 }
 
@@ -607,13 +616,13 @@ var VIKING_BUTTON_STYLES = `
 .viking-btn-filled:hover:not(:disabled):not([aria-busy='true']) {
   border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border));
   background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface-alt));
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-depth-shadow);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
 .viking-btn-filled:active:not(:disabled):not([aria-busy='true']) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-press-shadow);
   border-color: color-mix(in srgb, var(--viking-accent) 20%, var(--viking-border));
   background: color-mix(in srgb, var(--viking-surface-alt) 84%, var(--viking-accent));
 }
@@ -622,13 +631,15 @@ var VIKING_BUTTON_STYLES = `
   background: var(--viking-danger);
   color: var(--viking-on-danger);
   border-color: color-mix(in srgb, var(--viking-danger) 85%, var(--viking-black));
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow:
+    var(--viking-btn-depth-shadow),
+    inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 10%, transparent);
 }
 
 .viking-btn-danger:hover:not(:disabled):not([aria-busy='true']) {
   background: color-mix(in srgb, var(--viking-danger) 88%, var(--viking-white));
   border-color: color-mix(in srgb, var(--viking-danger) 92%, var(--viking-white));
-  box-shadow: var(--viking-shadow-hover);
+  box-shadow: var(--viking-btn-hover-shadow);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
@@ -636,9 +647,7 @@ var VIKING_BUTTON_STYLES = `
   transform: translateY(0) scale(var(--viking-state-active-scale));
   border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
   background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
-  box-shadow: inset 0 1px 2px
-      color-mix(in srgb, var(--viking-black) 28%, transparent),
-    var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-press-shadow);
 }
 
 .viking-btn-ghost {
@@ -652,6 +661,8 @@ var VIKING_BUTTON_STYLES = `
 .viking-btn-ghost:hover:not(:disabled):not([aria-busy='true']) {
   background: var(--viking-accent-soft);
   color: var(--viking-accent-strong);
+  border-color: var(--viking-border-subtle);
+  transform: translateY(var(--viking-state-hover-lift));
 }
 
 .viking-btn-ghost:active:not(:disabled):not([aria-busy='true']) {
@@ -697,11 +708,12 @@ var VIKING_BUTTON_STYLES = `
 }
 
 .viking-btn-spinner {
-  width: 1.125rem;
-  height: 1.125rem;
+  flex: 0 0 auto;
+  width: var(--viking-icon-size-sm, 18px);
+  height: var(--viking-icon-size-sm, 18px);
   border: 2px solid currentColor;
   border-right-color: transparent;
-  border-radius: 50%;
+  border-radius: var(--viking-radius-pill);
   animation: viking-spin 0.8s linear infinite;
 }
 
@@ -1877,10 +1889,7 @@ var VikingCardWc = class extends HTMLElementBase {
       "viking-card-interactive",
       this.hasAttribute("interactive")
     );
-    this.classList.toggle(
-      "viking-card-loading",
-      this.hasAttribute("loading")
-    );
+    this.classList.toggle("viking-card-loading", this.hasAttribute("loading"));
     const title = this.getAttribute("title");
     if (title) {
       this.setAttribute("role", "region");
@@ -2361,6 +2370,7 @@ var VikingSearchPaletteWc = class extends HTMLElementBase {
   }
   connectedCallback() {
     this.render();
+    this.removeAttribute("open");
     this.syncOpen();
     this.bindGlobalShortcut();
     this.dialogEl?.addEventListener("close", this.onClose);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataengineeringformachinelearning/viking-ui",
-  "version": "4.0.3",
+  "version": "4.0.5",
   "description": "Universal Viking-UI design system for Astro, Angular, and Django.",
   "license": "Apache-2.0",
   "type": "module",
@@ -31,10 +31,22 @@
     },
     "./dist/index.js": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
     "./dist/index.d.ts": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
+    "./dist/icons.js": "./dist/icons.js",
+    "./dist/site-drakkar.js": "./dist/site-drakkar.js",
     "./dist/viking-ui.css": "./dist/viking-ui.css",
     "./dist/viking-ui-elements.js": "./dist/viking-ui-elements.js",
     "./dist/web-components.js": "./dist/web-components.js",
     "./dist/widget.js": "./dist/widget.js",
+    "./icons": {
+      "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
+      "import": "./dist/icons.js",
+      "default": "./dist/icons.js"
+    },
+    "./site-drakkar": {
+      "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
+      "import": "./dist/site-drakkar.js",
+      "default": "./dist/site-drakkar.js"
+    },
     "./elements": {
       "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
       "import": "./dist/web-components.js",
@@ -48,6 +60,8 @@
       "import": "./dist/web-components.js",
       "default": "./dist/web-components.js"
     },
+    "./widget": "./dist/widget.js",
+    "./widget.js": "./dist/widget.js",
     "./css": "./dist/viking-ui.css",
     "./css/index.css": "./dist/viking-ui.css",
     "./css/viking-ui.css": "./dist/viking-ui.css",
@@ -61,6 +75,10 @@
     "./tokens": "./dist/viking-tokens.json",
     "./tokens.json": "./dist/viking-tokens.json",
     "./viking-tokens.json": "./dist/viking-tokens.json",
+    "./tokens/tailwind.preset": "./dist/src/tokens/tailwind.preset.js",
+    "./tokens/tailwind.preset.js": "./dist/src/tokens/tailwind.preset.js",
+    "./manifest": "./dist/viking.manifest.json",
+    "./viking.manifest.json": "./dist/viking.manifest.json",
     "./components.css": "./dist/viking-components.css",
     "./deml-components.css": "./dist/deml-components.css",
     "./viking-ui.css": "./dist/viking-ui.css",
@@ -68,8 +86,8 @@
   },
   "files": [
     "dist",
-    "src",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
     "clean": "rm -rf dist",
@@ -80,7 +98,7 @@
     "build:compat": "node scripts/write-compat-entry.mjs",
     "storybook": "npm run build:css && storybook dev --config-dir .storybook --port 6006",
     "build-storybook": "npm run build:css && storybook build --config-dir .storybook --output-dir ./storybook-static",
-    "chromatic": "npm run build-storybook && chromatic --project-token=${CHROMATIC_PROJECT_TOKEN} --exit-zero-on-changes",
+    "chromatic": "npm run build-storybook && chromatic --project-token=${CHROMATIC_PROJECT_TOKEN} --storybook-build-dir ./storybook-static --exit-zero-on-changes",
     "validate": "node ../../scripts/validate_viking_ui_assets.mjs",
     "test": "node --test test/*.test.mjs",
     "pack:check": "npm pack --dry-run",
@@ -93,11 +111,12 @@
   },
   "sideEffects": [
     "./dist/viking-ui-elements.js",
+    "./dist/web-components.js",
+    "./dist/widget.js",
     "./dist/viking-ui.css",
     "./dist/design-tokens.css",
     "./dist/viking-components.css",
-    "./dist/deml-components.css",
-    "./src/index.ts"
+    "./dist/deml-components.css"
   ],
   "devDependencies": {
     "@angular/common": "^22.0.0",
@@ -105,13 +124,16 @@
     "@angular/compiler-cli": "^22.0.0",
     "@angular/core": "^22.0.0",
     "@angular/forms": "^22.0.0",
-    "@chromatic-com/storybook": "^3.2.7",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/builder-vite": "^8.6.18",
     "@storybook/html": "^8.6.12",
+    "@storybook/html-vite": "^8.6.18",
     "esbuild": "^0.28.1",
     "ng-packagr": "^22.0.0",
     "sass": "^1.101.0",
-    "typescript": "~6.0.3"
+    "storybook": "^8.6.18",
+    "typescript": "~6.0.3",
+    "vite": "^6.4.1"
   }
 }

package/dist/scripts/build-web-components.mjs

@@ -1,37 +0,0 @@
-/**
- * Bundles Viking-UI Web Components for framework-agnostic usage.
- * Output: viking-ui-elements.js (IIFE, auto-registers custom elements)
- */
-import { execSync } from "node:child_process";
-import fs from "node:fs";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-
-const dirname = path.dirname(fileURLToPath(import.meta.url));
-const pkgDir = path.join(dirname, "..");
-const rootDir = path.join(pkgDir, "..", "..");
-const docsDir = path.join(rootDir, "viking-ui-docs");
-const outDir = path.join(docsDir, "dist", "static-css");
-const entry = path.join(pkgDir, "src", "web", "index.ts");
-const outFile = path.join(outDir, "viking-ui-elements.js");
-
-const esbuildCandidates = [
-  path.join(rootDir, "frontend", "node_modules", ".bin", "esbuild"),
-  path.join(docsDir, "node_modules", ".bin", "esbuild"),
-];
-const esbuildBin =
-  esbuildCandidates.find((candidate) => fs.existsSync(candidate)) ?? "esbuild";
-
-fs.mkdirSync(outDir, { recursive: true });
-
-execSync(
-  `"${esbuildBin}" "${entry}" --bundle --format=iife --global-name=VikingUI --outfile="${outFile}" --target=es2022 --minify`,
-  { cwd: pkgDir, stdio: "inherit" },
-);
-
-console.log(`Wrote ${outFile}`);
-
-// Mirror to docs public assets
-const publicAssetsDir = path.join(docsDir, "public", "assets");
-fs.mkdirSync(publicAssetsDir, { recursive: true });
-fs.copyFileSync(outFile, path.join(publicAssetsDir, "viking-ui-elements.js"));

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

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

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