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

package/package.json

@@ -1,38 +1,97 @@
 {
   "name": "@dataengineeringformachinelearning/viking-ui",
-  "version": "1.0.2",
-  "description": "Viking-UI: DEML clinical design system for Angular. THEME.md palette, WCAG 2.1 AA, zero third-party UI runtime deps.",
-  "keywords": [
-    "angular",
-    "ui",
-    "viking-ui",
-    "design-system",
-    "deml",
-    "a11y"
-  ],
-  "license": "UNLICENSED",
+  "version": "3.0.0-alpha.2",
+  "description": "Universal Viking-UI design system for Astro, Angular, and Django.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "private": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/viking-ui.css",
+  "browser": "./dist/viking-ui-elements.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dataengineeringformachinelearning/dataengineeringformachinelearning.git",
+    "directory": "packages/viking-ui"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "peerDependencies": {
-    "@angular/common": "^22.0.0",
-    "@angular/core": "^22.0.0",
-    "@angular/forms": "^22.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
-  "typings": "types/dataengineeringformachinelearning-viking-ui.d.ts",
   "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
     ".": {
-      "types": "./types/dataengineeringformachinelearning-viking-ui.d.ts",
-      "default": "./fesm2022/dataengineeringformachinelearning-viking-ui.mjs"
-    }
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/index.js": "./dist/index.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",
+    "./elements": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/web-components.js",
+      "default": "./dist/web-components.js"
+    },
+    "./elements.js": "./dist/viking-ui-elements.js",
+    "./viking-ui-elements.js": "./dist/viking-ui-elements.js",
+    "./web-components.js": "./dist/web-components.js",
+    "./web-components": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/web-components.js",
+      "default": "./dist/web-components.js"
+    },
+    "./css": "./dist/viking-ui.css",
+    "./css/index.css": "./dist/viking-ui.css",
+    "./css/viking-ui.css": "./dist/viking-ui.css",
+    "./css/design-tokens.css": "./dist/design-tokens.css",
+    "./css/viking-components.css": "./dist/viking-components.css",
+    "./css/deml-components.css": "./dist/deml-components.css",
+    "./css/tokens.css": "./dist/design-tokens.css",
+    "./css/components.css": "./dist/viking-components.css",
+    "./design-tokens.css": "./dist/design-tokens.css",
+    "./tokens.css": "./dist/design-tokens.css",
+    "./tokens": "./dist/viking-tokens.json",
+    "./tokens.json": "./dist/viking-tokens.json",
+    "./viking-tokens.json": "./dist/viking-tokens.json",
+    "./components.css": "./dist/viking-components.css",
+    "./deml-components.css": "./dist/deml-components.css",
+    "./viking-ui.css": "./dist/viking-ui.css",
+    "./package.json": "./package.json"
   },
-  "type": "module"
-}
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && npm run build:css && npm run build:elements",
+    "build:css": "node scripts/build-css.mjs",
+    "build:elements": "node scripts/build-elements.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",
+    "validate": "node ../../scripts/validate_viking_ui_assets.mjs",
+    "test": "node --test test/*.test.mjs",
+    "pack:check": "npm pack --dry-run",
+    "typecheck": "tsc --project tsconfig.json --noEmit"
+  },
+  "sideEffects": [
+    "./dist/viking-ui-elements.js",
+    "./dist/viking-ui.css",
+    "./dist/design-tokens.css",
+    "./dist/viking-components.css",
+    "./dist/deml-components.css",
+    "./src/index.ts"
+  ],
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.7",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/html": "^8.6.12",
+    "esbuild": "^0.28.1",
+    "sass": "^1.101.0",
+    "typescript": "~6.0.3"
+  }
+}

package/src/elements/button/viking-button.ts

@@ -0,0 +1,201 @@
+import {
+  attributeValue,
+  defineVikingElement,
+  HTMLElementBase,
+  readBooleanAttribute,
+} from "../core/dom";
+import { attachStyles, resetStyles } from "../core/styles";
+
+const variants = new Set([
+  "outline",
+  "primary",
+  "secondary",
+  "danger",
+  "ghost",
+]);
+const sizes = new Set(["sm", "md"]);
+
+const styles = `
+${resetStyles}
+
+:host {
+  display: inline-flex;
+}
+
+:host([full-width]) {
+  display: flex;
+  width: 100%;
+}
+
+.control {
+  display: inline-flex;
+  width: auto;
+  min-width: var(--viking-btn-min-width, 120px);
+  min-height: var(--viking-control-height);
+  align-items: center;
+  justify-content: center;
+  gap: var(--viking-space-1);
+  padding: 0 var(--viking-control-padding-x);
+  border: 1px solid var(--viking-border-strong);
+  border-radius: var(--viking-radius);
+  background: var(--viking-surface);
+  color: var(--viking-text);
+  box-shadow: var(--viking-shadow-sm);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--viking-font-size-sm);
+  font-weight: var(--viking-font-weight-semibold);
+  letter-spacing: var(--viking-letter-spacing-wide);
+  line-height: var(--viking-line-height-snug);
+  text-decoration: none;
+  transition: var(--viking-transition-interactive);
+  user-select: none;
+  white-space: nowrap;
+}
+
+:host([full-width]) .control {
+  width: 100%;
+}
+
+.control:hover:not(:disabled):not([aria-busy='true']) {
+  border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border-strong));
+  transform: translateY(var(--viking-state-hover-lift));
+}
+
+.control:focus-visible {
+  outline: var(--viking-ring-width) solid var(--viking-ring);
+  outline-offset: var(--viking-ring-offset);
+}
+
+.control:disabled,
+.control[aria-busy='true'] {
+  cursor: not-allowed;
+  opacity: var(--viking-state-disabled-opacity);
+  transform: none;
+}
+
+.control[data-size='sm'] {
+  min-height: var(--viking-control-height-sm);
+  min-width: auto;
+  padding-inline: var(--viking-space-2);
+}
+
+.control[data-variant='primary'] {
+  border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
+  background: var(--viking-accent);
+  color: var(--viking-accent-content);
+}
+
+.control[data-variant='secondary'] {
+  border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
+  background: var(--viking-accent-secondary);
+  color: var(--viking-accent-secondary-content);
+}
+
+.control[data-variant='danger'] {
+  border-color: color-mix(in srgb, var(--viking-danger) 82%, var(--viking-black));
+  background: var(--viking-danger);
+  color: var(--viking-on-danger);
+}
+
+.control[data-variant='ghost'] {
+  min-width: auto;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+`;
+
+export class VikingButton extends HTMLElementBase {
+  static readonly tagName = "viking-button";
+
+  static get observedAttributes(): string[] {
+    return [
+      "variant",
+      "size",
+      "type",
+      "href",
+      "target",
+      "disabled",
+      "loading",
+      "aria-label",
+    ];
+  }
+
+  private readonly shadowRootRef: ShadowRoot;
+  private control: HTMLAnchorElement | HTMLButtonElement | null = null;
+
+  constructor() {
+    super();
+    this.shadowRootRef = this.attachShadow({ mode: "open" });
+    attachStyles(this.shadowRootRef, styles);
+  }
+
+  connectedCallback(): void {
+    this.render();
+    this.control?.addEventListener("click", this.handleClick);
+  }
+
+  disconnectedCallback(): void {
+    this.control?.removeEventListener("click", this.handleClick);
+  }
+
+  attributeChangedCallback(): void {
+    if (this.isConnected) {
+      this.render();
+    }
+  }
+
+  private readonly handleClick = (event: Event): void => {
+    if (
+      readBooleanAttribute(this, "disabled") ||
+      readBooleanAttribute(this, "loading")
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent("viking-press", {
+        bubbles: true,
+        composed: true,
+        detail: { sourceEvent: event },
+      }),
+    );
+  };
+
+  private render(): void {
+    const href = this.getAttribute("href");
+    const tag = href ? "a" : "button";
+    const variant = attributeValue(this, "variant", "outline", variants);
+    const size = attributeValue(this, "size", "md", sizes);
+    const disabled =
+      readBooleanAttribute(this, "disabled") ||
+      readBooleanAttribute(this, "loading");
+    const label = this.getAttribute("aria-label");
+    const target = this.getAttribute("target");
+
+    this.shadowRootRef.innerHTML = `
+      <${tag}
+        part="control"
+        class="control"
+        data-variant="${variant}"
+        data-size="${size}"
+        ${href ? `href="${href}"` : `type="${this.getAttribute("type") ?? "button"}"`}
+        ${target ? `target="${target}"` : ""}
+        ${target === "_blank" ? 'rel="noopener noreferrer"' : ""}
+        ${disabled ? 'disabled aria-disabled="true"' : ""}
+        ${readBooleanAttribute(this, "loading") ? 'aria-busy="true"' : ""}
+        ${label ? `aria-label="${label}"` : ""}
+      >
+        <slot></slot>
+      </${tag}>
+    `;
+    this.control = this.shadowRootRef.querySelector(tag);
+  }
+}
+
+export const registerVikingButton = (): void => {
+  defineVikingElement(VikingButton.tagName, VikingButton);
+};

package/src/elements/card/viking-card.ts

@@ -0,0 +1,60 @@
+import { defineVikingElement, HTMLElementBase } from "../core/dom";
+import { attachStyles, resetStyles } from "../core/styles";
+
+const styles = `
+${resetStyles}
+
+:host {
+  display: block;
+}
+
+.card {
+  display: grid;
+  gap: var(--viking-space-2);
+  padding: var(--viking-card-padding);
+  border: 1px solid var(--viking-border);
+  border-radius: var(--viking-radius-lg);
+  background: var(--viking-surface-recipe);
+  color: var(--viking-text);
+  box-shadow: var(--viking-shadow-sm);
+}
+
+:host([compact]) .card {
+  padding: var(--viking-card-padding-compact);
+}
+
+::slotted([slot='header']) {
+  color: var(--viking-text);
+  font-weight: var(--viking-font-weight-semibold);
+}
+
+::slotted([slot='footer']) {
+  color: var(--viking-text-muted);
+}
+`;
+
+export class VikingCard extends HTMLElementBase {
+  static readonly tagName = "viking-card";
+
+  private readonly shadowRootRef: ShadowRoot;
+
+  constructor() {
+    super();
+    this.shadowRootRef = this.attachShadow({ mode: "open" });
+    attachStyles(this.shadowRootRef, styles);
+  }
+
+  connectedCallback(): void {
+    this.shadowRootRef.innerHTML = `
+      <article class="card" part="surface">
+        <slot name="header"></slot>
+        <slot></slot>
+        <slot name="footer"></slot>
+      </article>
+    `;
+  }
+}
+
+export const registerVikingCard = (): void => {
+  defineVikingElement(VikingCard.tagName, VikingCard);
+};

package/src/elements/core/dom.ts

@@ -0,0 +1,33 @@
+export const HTMLElementBase: typeof HTMLElement =
+  typeof HTMLElement === "undefined"
+    ? (class {} as unknown as typeof HTMLElement)
+    : HTMLElement;
+
+export const defineVikingElement = (
+  tagName: string,
+  constructor: CustomElementConstructor,
+): void => {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, constructor);
+  }
+};
+
+export const readBooleanAttribute = (
+  element: HTMLElement,
+  name: string,
+): boolean =>
+  element.hasAttribute(name) && element.getAttribute(name) !== "false";
+
+export const attributeValue = (
+  element: HTMLElement,
+  name: string,
+  fallback: string,
+  allowed?: ReadonlySet<string>,
+): string => {
+  const value = element.getAttribute(name) ?? fallback;
+  return allowed && !allowed.has(value) ? fallback : value;
+};

package/src/elements/core/styles.ts

@@ -0,0 +1,28 @@
+export const resetStyles = `
+:host {
+  box-sizing: border-box;
+  font-family: var(--viking-font-family);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+`;
+
+export const attachStyles = (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);
+};

package/src/elements/modal/viking-modal.ts

@@ -0,0 +1,154 @@
+import {
+  defineVikingElement,
+  HTMLElementBase,
+  readBooleanAttribute,
+} from "../core/dom";
+import { attachStyles, resetStyles } from "../core/styles";
+
+const styles = `
+${resetStyles}
+
+:host {
+  display: contents;
+}
+
+dialog {
+  width: min(calc(100vw - (var(--viking-space-2) * 2)), 42rem);
+  padding: 0;
+  border: 1px solid var(--viking-border-strong);
+  border-radius: var(--viking-radius-lg);
+  background: var(--viking-surface-recipe);
+  color: var(--viking-text);
+  box-shadow: var(--viking-shadow-lg);
+}
+
+dialog::backdrop {
+  background: var(--viking-overlay-backdrop);
+}
+
+.modal {
+  display: grid;
+  gap: var(--viking-space-3);
+  padding: var(--viking-card-padding);
+}
+
+.header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--viking-space-2);
+}
+
+.title {
+  margin: 0;
+  color: var(--viking-text);
+  font-size: var(--viking-font-size-lg);
+  line-height: var(--viking-line-height-tight);
+}
+
+.close {
+  display: inline-grid;
+  width: var(--viking-control-height-sm);
+  height: var(--viking-control-height-sm);
+  place-items: center;
+  border: 1px solid var(--viking-border);
+  border-radius: var(--viking-radius);
+  background: var(--viking-surface-alt);
+  color: var(--viking-text);
+  cursor: pointer;
+}
+
+.close:focus-visible {
+  outline: var(--viking-ring-width) solid var(--viking-ring);
+  outline-offset: var(--viking-ring-offset);
+}
+`;
+
+export class VikingModal extends HTMLElementBase {
+  static readonly tagName = "viking-modal";
+
+  static get observedAttributes(): string[] {
+    return ["open", "label"];
+  }
+
+  private readonly shadowRootRef: ShadowRoot;
+  private dialog: HTMLDialogElement | null = null;
+
+  constructor() {
+    super();
+    this.shadowRootRef = this.attachShadow({ mode: "open" });
+    attachStyles(this.shadowRootRef, styles);
+  }
+
+  connectedCallback(): void {
+    this.render();
+  }
+
+  attributeChangedCallback(): void {
+    if (this.isConnected) {
+      this.syncOpenState();
+    }
+  }
+
+  open(): void {
+    this.setAttribute("open", "");
+  }
+
+  close(): void {
+    this.removeAttribute("open");
+  }
+
+  private render(): void {
+    const title = this.getAttribute("label") ?? "Dialog";
+    this.shadowRootRef.innerHTML = `
+      <dialog aria-label="${title}">
+        <section class="modal" part="surface">
+          <header class="header">
+            <h2 class="title"><slot name="title">${title}</slot></h2>
+            <button class="close" type="button" aria-label="Close dialog">x</button>
+          </header>
+          <slot></slot>
+          <slot name="footer"></slot>
+        </section>
+      </dialog>
+    `;
+    this.dialog = this.shadowRootRef.querySelector("dialog");
+    this.shadowRootRef
+      .querySelector(".close")
+      ?.addEventListener("click", () => this.close());
+    this.dialog?.addEventListener("close", () => {
+      if (this.hasAttribute("open")) {
+        this.removeAttribute("open");
+      }
+      this.dispatchEvent(
+        new CustomEvent("viking-close", { bubbles: true, composed: true }),
+      );
+    });
+    this.syncOpenState();
+  }
+
+  private syncOpenState(): void {
+    if (!this.dialog) {
+      return;
+    }
+
+    if (readBooleanAttribute(this, "open")) {
+      if (!this.dialog.open && typeof this.dialog.showModal === "function") {
+        this.dialog.showModal();
+      } else if (!this.dialog.open) {
+        this.dialog.setAttribute("open", "");
+      }
+      return;
+    }
+
+    if (this.dialog.open && typeof this.dialog.close === "function") {
+      this.dialog.close();
+    } else {
+      this.dialog.removeAttribute("open");
+    }
+  }
+}
+
+export const registerVikingModal = (): void => {
+  defineVikingElement(VikingModal.tagName, VikingModal);
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./web/index";

package/src/lib/core/brand-icons.ts

@@ -0,0 +1,62 @@
+/**
+ * DEML branded icon paths — optimized SVG geometry (not sourced from Lucide).
+ * Use via viking-icon name="deml" | "deml-compact" | "deml-lockup".
+ */
+export const VIKING_BRAND_ICON_PATHS = {
+  /** Primary bar-chart mark in rounded frame (outline). */
+  deml: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 17V13M12 17V8M16 17V11"/>',
+  /** Compact monogram for favicons and dense Drakkar shell. */
+  "deml-compact":
+    '<rect x="4" y="4" width="16" height="16" rx="3"/><path d="M9 16V12M12 16V9M15 16V13"/>',
+  /** Lockup mark with baseline accent bar. */
+  "deml-lockup":
+    '<rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 17V13M12 17V8M16 17V11"/><path d="M3 20h18"/>',
+} as const;
+
+/** Drakkar — Viking-UI / site shell brand marks (Lucide ship, build-time inlined). */
+export const VIKING_DRAKKAR_ICON_PATHS = {
+  /** Primary Drakkar longship mark (outline). */
+  drakkar:
+    '<path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>',
+  /** Compact tile for favicons and dense navbar chrome. */
+  "drakkar-compact":
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>',
+  /** Lockup mark with baseline accent bar. */
+  "drakkar-lockup":
+    '<path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M3 21h18"/>',
+} as const;
+
+/** Filled-path overrides for DEML brand marks. */
+export const VIKING_BRAND_ICON_FILLED_PATHS: Partial<
+  Record<keyof typeof VIKING_BRAND_ICON_PATHS, string>
+> = {
+  deml: '<path d="M5 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4zM8 13h2.5v4H8v-4zM12 8h2.5v9H12V8zM16 11h2.5v6H16v-6z"/>',
+  "deml-compact":
+    '<path d="M6 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5zM9 12h1.5v4H9v-4zM12 9h1.5v7H12V9zM15 11h1.5v5H15v-5z"/>',
+  "deml-lockup":
+    '<path d="M4 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4zM8 13h2.5v4H8v-4zM12 8h2.5v9H12V8zM16 11h2.5v6H16v-6z"/><rect x="3" y="19" width="18" height="2" rx="1"/>',
+};
+
+/** Filled-path overrides for Drakkar brand marks. */
+export const VIKING_DRAKKAR_ICON_FILLED_PATHS: Partial<
+  Record<keyof typeof VIKING_DRAKKAR_ICON_PATHS, string>
+> = {
+  drakkar:
+    '<path d="M7 5h10a2 2 0 0 1 2 2v3.5L20.8 14.2l-7.8-3.5a1.8 1.8 0 0 0-1.4 0L3.2 14.2a10.5 10.5 0 0 0 2.6 7.2L5.2 13V7a2 2 0 0 0-2-2z"/><rect x="10.85" y="2" width="2.3" height="12" rx="0.4"/>',
+  "drakkar-compact":
+    '<path d="M3 3h18a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M7.5 12.5 12 9.8l4.5 2.7v2.2c0 .8-.5 1.4-1.2 1.7L12 17.8l-3.3-1.6c-.7-.3-1.2-.9-1.2-1.7v-2.2z"/><rect x="11" y="6" width="2" height="5.5" rx="0.35"/>',
+  "drakkar-lockup":
+    '<path d="M7 5h10a2 2 0 0 1 2 2v3.5L20.8 14.2l-7.8-3.5a1.8 1.8 0 0 0-1.4 0L3.2 14.2a10.5 10.5 0 0 0 2.6 7.2L5.2 13V7a2 2 0 0 0-2-2z"/><rect x="10.85" y="2" width="2.3" height="12" rx="0.4"/><rect x="3" y="20" width="18" height="2" rx="1"/>',
+};
+
+export type VikingBrandIconName = keyof typeof VIKING_BRAND_ICON_PATHS;
+
+export type VikingDrakkarIconName = keyof typeof VIKING_DRAKKAR_ICON_PATHS;
+
+export const VIKING_BRAND_ICON_NAMES_LIST = Object.keys(
+  VIKING_BRAND_ICON_PATHS,
+) as VikingBrandIconName[];
+
+export const VIKING_DRAKKAR_ICON_NAMES_LIST = Object.keys(
+  VIKING_DRAKKAR_ICON_PATHS,
+) as VikingDrakkarIconName[];