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

package/dist/lib/toggle/toggle.d.ts

@@ -0,0 +1,15 @@
+import { VikingToggleGroup } from "./toggle-group";
+/**
+ * viking-toggle — pressed-state button toggle.
+ */
+export declare class VikingToggle {
+    private readonly group;
+    constructor(group: VikingToggleGroup | null);
+    readonly pressed: import("@angular/core").ModelSignal<boolean>;
+    readonly value: import("@angular/core").InputSignal<string>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly toggled: import("@angular/core").OutputEmitterRef<boolean>;
+    protected isPressed: () => boolean;
+    protected toggle: () => void;
+}

package/dist/lib/tooltip/tooltip.d.ts

@@ -0,0 +1,20 @@
+import { ElementRef, OnDestroy } from "@angular/core";
+/**
+ * vikingTooltip — attribute directive tooltip.
+ * Shows on hover and keyboard focus; positions itself relative to the host.
+ */
+export declare class VikingTooltip implements OnDestroy {
+    private readonly host;
+    private readonly document;
+    constructor(host: ElementRef<HTMLElement>, document: Document);
+    readonly vikingTooltip: import("@angular/core").InputSignal<string>;
+    readonly tooltipPosition: import("@angular/core").InputSignal<"top" | "right" | "bottom" | "left">;
+    readonly tooltipKbd: import("@angular/core").InputSignal<string>;
+    protected readonly tooltipId: string;
+    private element;
+    protected visible: () => boolean;
+    protected show: () => void;
+    private position;
+    protected hide: () => void;
+    ngOnDestroy(): void;
+}

package/dist/lib/typography/heading.d.ts

@@ -0,0 +1,9 @@
+/**
+ * viking-heading — consistent heading sizes.
+ */
+export declare class VikingHeading {
+    readonly size: import("@angular/core").InputSignal<"base" | "sm" | "lg" | "xl">;
+    readonly level: import("@angular/core").InputSignal<2 | 1 | 4 | 3>;
+    protected readonly ariaLevel: import("@angular/core").Signal<2 | 1 | 4 | 3>;
+    protected readonly hostClass: import("@angular/core").Signal<string>;
+}

package/dist/lib/typography/text.d.ts

@@ -0,0 +1,11 @@
+/**
+ * viking-text — body text with semantic variants.
+ */
+export declare class VikingText {
+    readonly variant: import("@angular/core").InputSignal<"strong" | "accent" | "muted" | "default">;
+    readonly inline: import("@angular/core").InputSignal<boolean>;
+    protected readonly hostClass: import("@angular/core").Signal<{
+        [x: string]: boolean;
+        "viking-text-inline": boolean;
+    }>;
+}

package/dist/lib/uptime-bar/uptime-bar.d.ts

@@ -0,0 +1,6 @@
+export type VikingUptimeStatus = "operational" | "partial_outage" | "major_outage" | "no_data";
+/** viking-uptime-bar — timeline bar for uptime history visualizations. */
+export declare class VikingUptimeBar {
+    readonly status: import("@angular/core").InputSignal<VikingUptimeStatus>;
+    readonly title: import("@angular/core").InputSignal<string>;
+}

package/dist/lib/verification-code-field/verification-code-field.d.ts

@@ -0,0 +1,19 @@
+import { VikingControl } from "../core/cva";
+/**
+ * viking-verification-code-field — labeled, centered OTP entry for MFA and phone verification flows.
+ */
+export declare class VikingVerificationCodeField extends VikingControl<string> {
+    readonly length: import("@angular/core").InputSignal<number>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly description: import("@angular/core").InputSignal<string>;
+    readonly error: import("@angular/core").InputSignal<string>;
+    readonly required: import("@angular/core").InputSignal<boolean>;
+    readonly disabled: import("@angular/core").InputSignal<boolean>;
+    readonly completed: import("@angular/core").OutputEmitterRef<string>;
+    protected readonly value: import("@angular/core").WritableSignal<string>;
+    protected readonly labelId: string;
+    protected readonly descriptionId: string;
+    protected readonly errorId: string;
+    writeValue(value: string): void;
+    protected onValueChange: (next: string) => void;
+}

package/dist/lib/whitepaper-cta/whitepaper-cta.d.ts

@@ -0,0 +1,15 @@
+import { VikingChartSeries } from "../../core/types";
+/**
+ * viking-whitepaper-cta — Polars-style animated research CTA with bar grid + sparkline.
+ */
+export declare class VikingWhitepaperCta {
+    readonly tag: import("@angular/core").InputSignal<string>;
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly description: import("@angular/core").InputSignal<string>;
+    readonly buttonLabel: import("@angular/core").InputSignal<string>;
+    readonly href: import("@angular/core").InputSignal<string>;
+    readonly external: import("@angular/core").InputSignal<boolean>;
+    protected readonly headingId = "viking-whitepaper-cta-title";
+    protected readonly barHeights: number[];
+    protected readonly sparklineSeries: VikingChartSeries[];
+}

package/dist/lib/wizard/wizard.d.ts

@@ -0,0 +1,13 @@
+export interface VikingWizardStep {
+    id: string;
+    label: string;
+}
+/**
+ * viking-wizard — multi-step modal shell with progress and action slots.
+ */
+export declare class VikingWizard {
+    readonly steps: import("@angular/core").InputSignal<VikingWizardStep[]>;
+    readonly step: import("@angular/core").InputSignal<string>;
+    protected readonly activeStep: import("@angular/core").Signal<VikingWizardStep>;
+    protected readonly progressPercent: import("@angular/core").Signal<number>;
+}

package/dist/public-api.d.ts

@@ -0,0 +1,109 @@
+export * from "./core/types";
+export { VIKING_ICON_NAMES, VIKING_ICON_PATHS, VIKING_ICON_SIZE_PRESETS, VIKING_BRAND_ICON_NAMES, VIKING_LUCIDE_ICON_NAMES, MATERIAL_ICON_ALIASES, resolveVikingIcon, resolveVikingIconColor, resolveVikingIconSize, type VikingIconName, vikingIconViewBox, type VikingIconSizePreset, } from "./core/icons";
+export { VIKING_BRAND_ICON_PATHS, VIKING_BRAND_ICON_FILLED_PATHS, VIKING_BRAND_ICON_NAMES_LIST, VIKING_DRAKKAR_ICON_PATHS, VIKING_DRAKKAR_ICON_FILLED_PATHS, VIKING_DRAKKAR_ICON_NAMES_LIST, type VikingBrandIconName, type VikingDrakkarIconName, } from "./core/brand-icons";
+export { type VikingChartCurve, type VikingChartKind, type VikingDonutSegment, type VikingCommandItem, type VikingSelectOption, } from "./core/types";
+export { type VikingSeriesPreset } from "./tokens/series-presets";
+export { VikingControl, provideVikingCva } from "./lib/core/cva";
+export { VikingBadgeWc, VikingButtonWc, VikingCalloutWc, VikingCardWc, VikingInputWc, VikingModalWc, VikingSearchPaletteWc, VikingSelectWc, VikingSuiteSearchPaletteWc, VikingThemeToggleWc, registerVikingBadgeWc, registerVikingButtonWc, registerVikingCalloutWc, registerVikingCardWc, registerVikingInputWc, registerVikingModalWc, registerVikingSearchPaletteWc, registerVikingSelectWc, registerVikingSuiteSearchPaletteWc, registerVikingThemeToggleWc, registerVikingElements, type VikingSearchPaletteItem, type VikingWcTone, } from "./web/index";
+export * from "./lib/site-drakkar/site-drakkar.config";
+export * from "./lib/site-drakkar/suite-search-items";
+export * from "./lib/site-drakkar/site-navbar";
+export * from "./lib/site-drakkar/site-footer";
+export * from "./lib/theme-toggle/theme-toggle";
+export * from "./lib/app-header/app-header";
+export * from "./lib/app-sidebar/app-sidebar";
+export * from "./lib/accordion/accordion";
+export * from "./lib/auth-panel/auth-panel";
+export * from "./lib/autocomplete/autocomplete";
+export * from "./lib/avatar/avatar";
+export * from "./lib/badge/badge";
+export * from "./lib/bar/bar";
+export * from "./lib/brand/brand";
+export * from "./lib/breadcrumbs/breadcrumbs";
+export * from "./lib/button/button";
+export * from "./lib/button/button-group";
+export * from "./lib/calendar/calendar";
+export * from "./lib/callout/callout";
+export * from "./lib/card/card";
+export * from "./lib/card/card-title";
+export * from "./lib/carousel/carousel";
+export * from "./lib/chart/chart";
+export * from "./lib/chart/chart-zoom";
+export * from "./lib/confirm-dialog/confirm-dialog";
+export * from "./lib/confirm-dialog/dialog.service";
+export * from "./lib/chart-card-header/chart-card-header";
+export * from "./lib/icon-heading/icon-heading";
+export * from "./lib/chart-empty-state/chart-empty-state";
+export * from "./lib/chart-panel/chart-panel";
+export * from "./lib/checkbox/checkbox";
+export * from "./lib/color-picker/color-picker";
+export * from "./lib/command/command";
+export * from "./lib/composer/composer";
+export * from "./lib/context/context";
+export * from "./lib/date-picker/date-picker";
+export * from "./lib/dropdown/dropdown";
+export * from "./lib/empty-state/empty-state";
+export * from "./lib/editor/editor";
+export * from "./lib/fab/fab";
+export * from "./lib/field/field";
+export * from "./lib/footer/footer";
+export * from "./lib/form-section/form-section";
+export * from "./lib/file-upload/file-upload";
+export * from "./lib/gauge-arc/gauge-arc";
+export * from "./lib/hud-panel/hud-panel";
+export * from "./lib/icon/icon";
+export * from "./lib/icon-badge/icon-badge";
+export { VikingIconComponent } from "./lib/icon/icon";
+export * from "./lib/icon-text/icon-text";
+export * from "./lib/input/input";
+export * from "./lib/kanban/kanban";
+export * from "./lib/kbd/kbd";
+export * from "./lib/label/label";
+export * from "./lib/loading-overlay/loading-overlay";
+export * from "./lib/metric-card/metric-card";
+export * from "./lib/menubar/menubar";
+export * from "./lib/modal/modal";
+export * from "./lib/native-select/native-select";
+export * from "./lib/navigation-menu/navigation-menu";
+export type { VikingNavItem } from "./lib/navigation-menu/navigation-menu";
+export * from "./lib/navbar/navbar";
+export * from "./lib/otp-input/otp-input";
+export * from "./lib/verification-code-field/verification-code-field";
+export * from "./lib/page-back-link/page-back-link";
+export * from "./lib/page-header/page-header";
+export * from "./lib/pagination/pagination";
+export * from "./lib/pillbox/pillbox";
+export * from "./lib/popover/popover";
+export * from "./lib/profile/profile";
+export * from "./lib/progress/progress";
+export * from "./lib/radio/radio";
+export * from "./lib/ring-gauge/ring-gauge";
+export * from "./lib/search-palette/search-palette";
+export * from "./lib/select/select";
+export * from "./lib/separator/separator";
+export * from "./lib/scroll-area/scroll-area";
+export * from "./lib/sheet/sheet";
+export * from "./lib/sidebar-nav/sidebar-nav";
+export * from "./lib/skeleton/skeleton";
+export * from "./lib/spinner/spinner";
+export * from "./lib/status-metric-row/status-metric-row";
+export * from "./lib/slider/slider";
+export * from "./lib/switch/switch";
+export * from "./lib/table/table";
+export * from "./lib/tabs/tab";
+export * from "./lib/tabs/tab-panel";
+export * from "./lib/tabs/tabs";
+export * from "./lib/textarea/textarea";
+export * from "./lib/toggle/toggle";
+export * from "./lib/toggle/toggle-group";
+export * from "./lib/time-picker/time-picker";
+export * from "./lib/timeline/timeline";
+export * from "./lib/toast/toast";
+export * from "./lib/uptime-bar/uptime-bar";
+export * from "./lib/whitepaper-cta/whitepaper-cta";
+export * from "./lib/wizard/wizard";
+export type { VikingUptimeStatus } from "./lib/uptime-bar/uptime-bar";
+export * from "./lib/tooltip/tooltip";
+export * from "./lib/typography/heading";
+export * from "./lib/typography/text";
+export * from "./lib/suite-search-palette/suite-search-palette";

package/dist/tokens/series-presets.d.ts

@@ -0,0 +1,4 @@
+/** Fixed series palette — keep in sync with viking-tokens.json and THEME.md §8.4 */
+export declare const VIKING_SERIES_PRESETS: readonly ["var(--viking-electric-500)", "var(--viking-crimson-600)", "var(--viking-green-500)", "var(--viking-gold-500)", "var(--viking-crimson-500)", "var(--viking-blue-500)", "var(--viking-charcoal-700)", "var(--viking-metallic-500)"];
+export declare const VIKING_SERIES_DEFAULT: "var(--viking-electric-500)";
+export type VikingSeriesPreset = (typeof VIKING_SERIES_PRESETS)[number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataengineeringformachinelearning/viking-ui",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.4",
   "description": "Universal Viking-UI design system for Astro, Angular, and Django.",
   "license": "Apache-2.0",
   "type": "module",

package/src/assets/drakkar-favicon.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Viking-UI">
+  <rect width="32" height="32" rx="6" fill="#111111"/>
+  <g
+    transform="translate(4, 4)"
+    fill="none"
+    stroke="#0d7377"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <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"/>
+  </g>
+</svg>

package/src/core/brand/deml-lockup.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="4" width="20" height="16" rx="2"/>
+  <path d="M7 17V13M11 17V8M15 17V11"/>
+  <path d="M2 20h20"/>
+</svg>

package/src/core/brand/deml-mark-compact.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="4" y="4" width="16" height="16" rx="3"/>
+  <path d="M9 16V12M12 16V9M15 16V13"/>
+</svg>

package/src/core/brand/deml-mark-filled.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <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-1V4zm2 11h2.5V10H7v5zm4.5-5h2.5v10h-2.5V10zm4.5-3h2.5v13h-2.5V7z"/>
+</svg>

package/src/core/brand/deml-mark-outline.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2"/>
+  <path d="M8 17V13M12 17V8M16 17V11"/>
+</svg>

package/src/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[];

package/src/core/icons.spec.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import {
+  MATERIAL_ICON_ALIASES,
+  VIKING_ICON_PATHS,
+  resolveVikingIcon,
+  resolveVikingIconColor,
+  resolveVikingIconSize,
+  vikingIconViewBox,
+} from "./icons";
+
+describe("icons registry", () => {
+  it("resolves direct icon names case-insensitively", () => {
+    expect(resolveVikingIcon("search")).toBe("search");
+    expect(resolveVikingIcon("Shield")).toBe("shield");
+  });
+
+  it("maps legacy Material icon ligatures to Viking keys", () => {
+    expect(resolveVikingIcon("trending_up")).toBe("trending-up");
+    expect(resolveVikingIcon("verified_user")).toBe("user-shield");
+    expect(MATERIAL_ICON_ALIASES["rocket_launch"]).toBe("rocket");
+  });
+
+  it("falls back to info for unknown names", () => {
+    expect(resolveVikingIcon("does-not-exist")).toBe("info");
+  });
+
+  it("resolves size presets to pixel dimensions", () => {
+    expect(resolveVikingIconSize(undefined, "sm")).toBe(16);
+    expect(resolveVikingIconSize(undefined, "md")).toBe(20);
+    expect(resolveVikingIconSize(undefined, "lg")).toBe(24);
+    expect(resolveVikingIconSize(28, null)).toBe(28);
+    expect(resolveVikingIconSize(undefined, null)).toBe(24);
+  });
+
+  it("maps semantic color tokens to CSS custom properties", () => {
+    expect(resolveVikingIconColor("accent")).toBe("var(--viking-accent)");
+    expect(resolveVikingIconColor("danger")).toBe("var(--viking-danger)");
+    expect(resolveVikingIconColor("inherit")).toBeUndefined();
+    expect(resolveVikingIconColor("var(--custom)")).toBe("var(--custom)");
+  });
+
+  it("uses a consistent 24×24 viewBox for registry icons", () => {
+    expect(vikingIconViewBox("check")).toBe("0 0 24 24");
+    expect(vikingIconViewBox("drakkar")).toBe("0 0 24 24");
+  });
+
+  it("registers core Lucide and brand icons", () => {
+    expect(VIKING_ICON_PATHS["search"]).toBeTruthy();
+    expect(VIKING_ICON_PATHS["drakkar"]).toBeTruthy();
+    expect(VIKING_ICON_PATHS["deml"]).toBeTruthy();
+  });
+});

package/src/core/icons.ts

@@ -0,0 +1,206 @@
+/**
+ * Zero-dependency inline SVG icon registry (24×24 stroke icons).
+ * Lucide paths are synced at build time; DEML brand marks are custom artwork.
+ */
+import { LUCIDE_ICON_PATHS } from "./lucide-paths.generated";
+import {
+  VIKING_BRAND_ICON_FILLED_PATHS,
+  VIKING_BRAND_ICON_PATHS,
+  VIKING_BRAND_ICON_NAMES_LIST,
+  VIKING_DRAKKAR_ICON_FILLED_PATHS,
+  VIKING_DRAKKAR_ICON_PATHS,
+  VIKING_DRAKKAR_ICON_NAMES_LIST,
+} from "./brand-icons";
+import {
+  VIKING_INTEGRATION_ICON_PATHS,
+  VIKING_INTEGRATION_ICON_NAMES_LIST,
+} from "./integration-brand-icons";
+
+export {
+  VIKING_DRAKKAR_ICON_NAMES_LIST,
+  VIKING_BRAND_ICON_NAMES_LIST,
+} from "./brand-icons";
+export {
+  VIKING_INTEGRATION_ICON_NAMES_LIST,
+  type VikingIntegrationIconName,
+} from "./integration-brand-icons";
+
+export type VikingIconName = keyof typeof VIKING_ICON_PATHS;
+
+export type VikingIconSizePreset = "sm" | "md" | "lg";
+
+export type VikingIconVariant = "outline" | "filled";
+
+/** Semantic color tokens resolved to CSS custom properties. */
+export type VikingIconColorToken =
+  | "inherit"
+  | "accent"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "muted"
+  | "text";
+
+/** Pixel sizes for sm / md / lg presets. */
+export const VIKING_ICON_SIZE_PRESETS: Record<VikingIconSizePreset, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+} as const;
+
+/** Custom icons not covered by Lucide (hub topology, ML model tile, OAuth stubs). */
+const VIKING_CUSTOM_ICON_PATHS = {
+  hub: '<circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/>',
+  model:
+    '<rect x="4" y="8" width="16" height="10" rx="2"/><path d="M8 8V6a4 4 0 0 1 8 0v2"/>',
+  google:
+    '<path d="M12 11.2v2.4h6.6c-.3 1.5-1.8 4.4-6.6 4.4-4 0-7.2-3.3-7.2-7.3S8 3.4 12 3.4c2.3 0 3.9 1 4.8 1.8l3.2-3.1C17.5.8 14.9 0 12 0 5.4 0 0 5.4 0 12s5.4 12 12 12c6.9 0 11.5-4.8 11.5-11.6 0-.8-.1-1.4-.2-1.9H12z"/>',
+  apple:
+    '<path d="M16.365 12.14c.02 2.53 2.21 3.38 2.23 3.39-.02.07-.35 1.21-1.16 2.4-.7 1.02-1.43 2.03-2.58 2.05-1.13.02-1.49-.67-2.78-.67-1.29 0-1.69.65-2.75.69-1.11.04-1.95-1.12-2.66-2.13-1.44-2.08-2.54-5.87-1.07-8.43.73-1.27 2.04-2.08 3.46-2.1 1.08-.02 2.1.72 2.78.72.67 0 2.14-.89 3.61-.76.61.03 2.33.25 3.44 1.88-.09.06-2.05 1.2-2.03 3.55M13.75 3.64c.59-.71 1-1.7.89-2.68-.86.03-1.9.57-2.52 1.28-.55.63-1.03 1.65-.9 2.62.95.07 1.92-.49 2.53-1.22"/>',
+} as const;
+
+export const VIKING_ICON_PATHS = {
+  ...LUCIDE_ICON_PATHS,
+  ...VIKING_BRAND_ICON_PATHS,
+  ...VIKING_DRAKKAR_ICON_PATHS,
+  ...VIKING_INTEGRATION_ICON_PATHS,
+  ...VIKING_CUSTOM_ICON_PATHS,
+} as const;
+
+/** Filled-path overrides used when variant="filled" (brand marks, solid shapes). */
+export const VIKING_ICON_FILLED_PATHS: Partial<Record<VikingIconName, string>> =
+  {
+    ...VIKING_BRAND_ICON_FILLED_PATHS,
+    ...VIKING_DRAKKAR_ICON_FILLED_PATHS,
+  };
+
+/** Legacy Material Icons ligature names → Viking icon registry keys. */
+export const MATERIAL_ICON_ALIASES: Record<string, VikingIconName> = {
+  analytics: "deml",
+  security: "shield",
+  link: "link",
+  visibility: "eye",
+  shield: "shield",
+  trending_up: "trending-up",
+  lock: "lock",
+  fingerprint: "fingerprint",
+  gpp_maybe: "shield",
+  verified_user: "user-shield",
+  bolt: "bolt",
+  cloud: "cloud",
+  lan: "network",
+  hub: "hub",
+  speed: "speed",
+  rocket_launch: "rocket",
+  insights: "insights",
+  check: "check",
+  description: "file",
+  vpn_key: "key",
+  policy: "policy",
+  bug_report: "bug",
+  search: "search",
+  chevron_left: "chevron-left",
+  chevron_right: "chevron-right",
+  verified: "check-circle",
+  warning: "alert-triangle",
+  close: "x",
+  account_balance: "building",
+  send: "send",
+  check_circle: "check-circle",
+  play_circle: "play",
+  input: "terminal",
+  model_training: "model",
+  auto_awesome: "sparkle",
+  error_outline: "alert-circle",
+  home: "home",
+  cookie: "cookie",
+  search_off: "search-off",
+  person_add: "user",
+  storage: "aws-redshift",
+  data_object: "aws-redshift",
+  memory: "tensorflow",
+  psychology: "pytorch",
+  dns: "server",
+  login: "log-in",
+};
+
+/** Icons always rendered with fill (play triangle, dot grids). */
+export const VIKING_FILLED_ICON_NAMES = [
+  "play",
+  "dots-horizontal",
+  "dots-vertical",
+  "grip-vertical",
+] as const satisfies readonly VikingIconName[];
+
+/** OAuth / vendor marks rendered with official brand artwork in viking-icon. */
+export const VIKING_BRAND_ICON_NAMES = [
+  "google",
+  "apple",
+  ...VIKING_BRAND_ICON_NAMES_LIST,
+] as const satisfies readonly VikingIconName[];
+
+const VIKING_ICON_COLOR_TOKENS: Record<
+  Exclude<VikingIconColorToken, "inherit">,
+  string
+> = {
+  accent: "var(--viking-accent)",
+  success: "var(--viking-success)",
+  warning: "var(--viking-warning)",
+  danger: "var(--viking-danger)",
+  info: "var(--viking-info)",
+  muted: "var(--viking-text-muted)",
+  text: "var(--viking-text)",
+};
+
+export const vikingIconViewBox = (_name: VikingIconName): string => "0 0 24 24";
+
+/** Resolve pixel size from preset or explicit value. */
+export const resolveVikingIconSize = (
+  size: number | undefined,
+  preset: VikingIconSizePreset | null | undefined,
+): number => {
+  if (preset) {
+    return VIKING_ICON_SIZE_PRESETS[preset];
+  }
+  return size ?? VIKING_ICON_SIZE_PRESETS.lg;
+};
+
+/** Resolve semantic color token or raw CSS value for icon tinting. */
+export const resolveVikingIconColor = (
+  color: VikingIconColorToken | string | undefined,
+): string | undefined => {
+  if (!color || color === "inherit") {
+    return undefined;
+  }
+  if (color in VIKING_ICON_COLOR_TOKENS) {
+    return VIKING_ICON_COLOR_TOKENS[
+      color as Exclude<VikingIconColorToken, "inherit">
+    ];
+  }
+  return color;
+};
+
+const VIKING_ICON_PATH_KEYS = new Set(Object.keys(VIKING_ICON_PATHS));
+
+/** Resolve a Viking or legacy Material icon name to a registry key. */
+export const resolveVikingIcon = (name: string): VikingIconName => {
+  const normalized = name.trim().toLowerCase().replace(/\s+/g, "_");
+  if (VIKING_ICON_PATH_KEYS.has(normalized)) {
+    return normalized as VikingIconName;
+  }
+  const alias = MATERIAL_ICON_ALIASES[normalized];
+  if (alias) {
+    return alias;
+  }
+  return "info";
+};
+
+export const VIKING_ICON_NAMES = Object.keys(
+  VIKING_ICON_PATHS,
+) as VikingIconName[];
+
+/** Lucide-sourced icon names (for docs and showcase grouping). */
+export const VIKING_LUCIDE_ICON_NAMES = Object.keys(
+  LUCIDE_ICON_PATHS,
+) as (keyof typeof LUCIDE_ICON_PATHS)[];