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

package/src/lib/forms.spec.ts

@@ -0,0 +1,92 @@
+import { Component } from "@angular/core";
+import { TestBed, ComponentFixture } from "@angular/core/testing";
+import { FormsModule } from "@angular/forms";
+import { describe, it, expect } from "vitest";
+import { VikingField } from "./field/field";
+import { VikingInput } from "./input/input";
+import { VikingFormSection } from "./form-section/form-section";
+
+@Component({
+  imports: [VikingField, VikingInput, FormsModule],
+  template: `
+    <viking-field label="Email" [required]="true" [error]="error">
+      <viking-input [(ngModel)]="email" placeholder="you@example.com" />
+    </viking-field>
+  `,
+})
+class FieldInputHost {
+  email = "";
+  error = "";
+}
+
+@Component({
+  imports: [VikingFormSection, VikingField, VikingInput, FormsModule],
+  template: `
+    <viking-form-section heading="Profile" icon="user" layout="stack">
+      <viking-field label="Display name">
+        <viking-input [(ngModel)]="name" />
+      </viking-field>
+    </viking-form-section>
+  `,
+})
+class FormStackHost {
+  name = "";
+}
+
+describe("viking forms", () => {
+  const render = async <T>(
+    component: new () => T,
+  ): Promise<ComponentFixture<T>> => {
+    const fixture = TestBed.createComponent(component);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    return fixture;
+  };
+
+  it("renders required marker and associates label with input", async () => {
+    const fixture = await render(FieldInputHost);
+    const label = fixture.nativeElement.querySelector(".viking-field-label");
+    expect(label?.textContent).toContain("Email");
+    expect(label?.querySelector(".viking-field-required")).toBeTruthy();
+    expect(fixture.nativeElement.querySelector("viking-input-wc")).toBeTruthy();
+  });
+
+  it("shows error alert and invalid host class", async () => {
+    const fixture = await render(FieldInputHost);
+    fixture.componentInstance.error = "Invalid email address";
+    fixture.detectChanges();
+    const field = fixture.nativeElement.querySelector(
+      "viking-field",
+    ) as HTMLElement;
+    expect(field.classList.contains("viking-field-invalid")).toBe(true);
+    const alert = fixture.nativeElement.querySelector(
+      ".viking-field-error",
+    ) as HTMLElement;
+    expect(alert.getAttribute("role")).toBe("alert");
+    expect(alert.textContent).toContain("Invalid email address");
+  });
+
+  it("binds input value via ngModel (ControlValueAccessor)", async () => {
+    const fixture = await render(FieldInputHost);
+    const wc = fixture.nativeElement.querySelector(
+      "viking-input-wc",
+    ) as HTMLElement;
+    const input = wc.shadowRoot?.querySelector("input") as HTMLInputElement;
+    input.value = "ops@deml.app";
+    input.dispatchEvent(new Event("input"));
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(fixture.componentInstance.email).toBe("ops@deml.app");
+  });
+
+  it("renders stacked form section with icon heading", async () => {
+    const fixture = await render(FormStackHost);
+    const section = fixture.nativeElement.querySelector(
+      "viking-form-section",
+    ) as HTMLElement;
+    expect(section.classList.contains("viking-form-section-stack")).toBe(true);
+    expect(
+      section.querySelector(".viking-form-section-title")?.textContent,
+    ).toContain("Profile");
+  });
+});

package/src/lib/gauge-arc/gauge-arc.ts

@@ -0,0 +1,85 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from "@angular/core";
+
+/** viking-gauge-arc — semicircle gauge fill driven by value / max. */
+@Component({
+  selector: "viking-gauge-arc",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-gauge-arc",
+    "aria-hidden": "true",
+    "[class.viking-gauge-arc-amber]": "tone() === 'amber'",
+    "[class.viking-gauge-arc-danger]": "tone() === 'danger'",
+    "[class.viking-gauge-arc-primary]": "tone() === 'primary'",
+  },
+  template: `
+    <svg class="viking-gauge-arc-svg" viewBox="0 0 100 60" fill="none">
+      <path class="viking-gauge-arc-bg" d="M10 50A40 40 0 0 1 90 50" />
+      <path
+        class="viking-gauge-arc-fill"
+        d="M10 50A40 40 0 0 1 90 50"
+        [attr.stroke-dasharray]="strokeDasharray()"
+      />
+    </svg>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+        color: var(--viking-accent);
+      }
+
+      .viking-gauge-arc-svg {
+        width: 100%;
+        height: auto;
+        overflow: visible;
+        shape-rendering: geometricPrecision;
+      }
+
+      .viking-gauge-arc-bg,
+      .viking-gauge-arc-fill {
+        fill: none;
+        stroke-width: 8;
+        stroke-linecap: round;
+      }
+
+      .viking-gauge-arc-bg {
+        stroke: color-mix(in srgb, var(--viking-text-muted) 25%, transparent);
+      }
+
+      .viking-gauge-arc-fill {
+        stroke: currentColor;
+        transition: stroke-dasharray 0.4s var(--viking-ease-default);
+      }
+
+      :host(.viking-gauge-arc-amber) {
+        color: var(--viking-warning);
+      }
+
+      :host(.viking-gauge-arc-danger) {
+        color: var(--viking-danger);
+      }
+
+      :host(.viking-gauge-arc-primary) {
+        color: var(--viking-accent);
+      }
+    `,
+  ],
+})
+export class VikingGaugeArc {
+  readonly value = input.required<number>();
+  readonly max = input<number>(100);
+  readonly circumference = input<number>(125.66);
+  readonly tone = input<"accent" | "amber" | "danger" | "primary">("accent");
+
+  protected readonly strokeDasharray = computed(() => {
+    const pct = Math.max(0, Math.min(1, this.value() / this.max()));
+    const filled = pct * this.circumference();
+    return `${filled} ${this.circumference()}`;
+  });
+}

package/src/lib/hud-panel/hud-panel.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+
+/** viking-hud-panel — bordered dashboard panel with icon header. */
+@Component({
+  selector: "viking-hud-panel",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-hud-panel panel-section",
+  },
+  template: `
+    <div class="viking-hud-panel-header panel-header">
+      @if (icon()) {
+        <viking-icon [name]="icon()!" [size]="20" class="panel-icon" />
+      }
+      <h2 class="viking-hud-panel-title">{{ title() }}</h2>
+      <ng-content select="[vikingHudPanelBadge]" />
+    </div>
+    <ng-content />
+  `,
+})
+export class VikingHudPanel {
+  readonly title = input.required<string>();
+  readonly icon = input<VikingIconName | null>(null);
+}

package/src/lib/icon/icon.ts

@@ -0,0 +1,284 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from "@angular/core";
+import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import {
+  VIKING_FILLED_ICON_NAMES,
+  VIKING_ICON_FILLED_PATHS,
+  VIKING_ICON_PATHS,
+  resolveVikingIcon,
+  resolveVikingIconColor,
+  resolveVikingIconSize,
+  vikingIconViewBox,
+  VikingIconColorToken,
+  VikingIconName,
+  VikingIconSizePreset,
+  VikingIconVariant,
+  VIKING_DRAKKAR_ICON_NAMES_LIST,
+} from "../../core/icons";
+import {
+  isIntegrationBrandIcon,
+  VIKING_INTEGRATION_BRAND_SVGS,
+  type VikingIntegrationBrandName,
+} from "../../core/integration-brand-icons";
+
+const VIKING_FILLED_ICON_SET = new Set<string>(VIKING_FILLED_ICON_NAMES);
+const VIKING_DRAKKAR_ICON_SET = new Set<string>(VIKING_DRAKKAR_ICON_NAMES_LIST);
+
+/**
+ * viking-icon — themeable inline SVG icon (Lucide-sourced registry + DEML brand marks).
+ * Zero runtime dependencies; paths are inlined at build time from Lucide.
+ *
+ * @example Outline with semantic color
+ * ```html
+ * <viking-icon name="search" sizePreset="md" color="accent" />
+ * ```
+ *
+ * @example Brand mark (outline)
+ * ```html
+ * <viking-icon name="drakkar" [size]="28" color="accent" />
+ * ```
+ */
+@Component({
+  selector: "viking-icon",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[class.viking-icon-spin]": "spin()",
+    "[class.viking-icon-filled]": "isFilled()",
+    "[class.viking-icon-outline]": "!isFilled()",
+    "[class.viking-icon-brand-drakkar]": "isDrakkarBrand()",
+    "[class.viking-icon-sm]": 'sizePreset() === "sm"',
+    "[class.viking-icon-md]": 'sizePreset() === "md"',
+    "[class.viking-icon-lg]":
+      'sizePreset() === "lg" || (!sizePreset() && !size())',
+    "[class.viking-icon-backdrop]": "backdrop()",
+    "[class.viking-icon-backdrop-success]":
+      "backdrop() && backdropTone() === 'success'",
+    "[class.viking-icon-backdrop-warning]":
+      "backdrop() && backdropTone() === 'warning'",
+    "[class.viking-icon-backdrop-danger]":
+      "backdrop() && backdropTone() === 'danger'",
+    "[class.viking-icon-backdrop-info]":
+      "backdrop() && backdropTone() === 'info'",
+    "[style.color]": "resolvedColor()",
+    "aria-hidden": "true",
+  },
+  template: `
+    @if (resolvedName() === "google") {
+      <svg
+        class="viking-icon-svg viking-icon-brand"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 48 48"
+        [style.width.px]="resolvedSize()"
+        [style.height.px]="resolvedSize()"
+        aria-hidden="true"
+      >
+        <path
+          fill="#EA4335"
+          d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+        />
+        <path
+          fill="#4285F4"
+          d="M46.5 24c0-1.55-.15-3.24-.47-4.77H24v9.03h12.75c-.55 2.83-2.13 5.23-4.53 6.82l7.02 5.44C43.35 36.56 46.5 30.82 46.5 24z"
+        />
+        <path
+          fill="#FBBC05"
+          d="M10.54 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24s.92 7.54 2.56 10.78l7.98-6.19z"
+        />
+        <path
+          fill="#34A853"
+          d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.02-5.44c-1.99 1.33-4.51 2.15-7.87 2.15-6.26 0-11.57-4.22-13.46-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+        />
+      </svg>
+    } @else if (resolvedName() === "apple") {
+      <svg
+        class="viking-icon-svg viking-icon-brand"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        [style.width.px]="resolvedSize()"
+        [style.height.px]="resolvedSize()"
+        aria-hidden="true"
+      >
+        <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"
+        />
+      </svg>
+    } @else if (isIntegrationBrand()) {
+      <svg
+        class="viking-icon-svg viking-icon-brand viking-icon-integration-brand"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        [style.width.px]="resolvedSize()"
+        [style.height.px]="resolvedSize()"
+        aria-hidden="true"
+      >
+        <g [innerHTML]="integrationBrandSvg()"></g>
+      </svg>
+    } @else {
+      <svg
+        class="viking-icon-svg"
+        xmlns="http://www.w3.org/2000/svg"
+        [attr.viewBox]="viewBox()"
+        [attr.fill]="isFilled() ? 'currentColor' : 'none'"
+        [attr.fill-rule]="isFilled() ? 'evenodd' : null"
+        [attr.stroke]="isFilled() ? 'none' : 'currentColor'"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        [style.width.px]="resolvedSize()"
+        [style.height.px]="resolvedSize()"
+      >
+        <!-- innerHTML on <g> — binding on <svg> throws NotYetImplemented under SSR (domino). -->
+        <g [innerHTML]="paths()"></g>
+      </svg>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        line-height: 0;
+        color: inherit;
+      }
+
+      :host(.viking-icon-outline) .viking-icon-svg {
+        --viking-icon-stroke-width: 1.75;
+        stroke-width: var(--viking-icon-stroke-width);
+        shape-rendering: geometricPrecision;
+      }
+
+      :host(.viking-icon-outline.viking-icon-brand-drakkar) .viking-icon-svg {
+        --viking-icon-stroke-width: 1.5;
+      }
+
+      :host(.viking-icon-sm) .viking-icon-svg {
+        --viking-icon-stroke-width: 1.5;
+      }
+
+      :host(.viking-icon-lg) .viking-icon-svg {
+        --viking-icon-stroke-width: 1.75;
+      }
+
+      :host(.viking-icon-filled) .viking-icon-svg {
+        stroke: none;
+      }
+
+      :host(.viking-icon-spin) svg {
+        animation: viking-icon-rotate 0.9s linear infinite;
+      }
+
+      :host(.viking-icon-backdrop) {
+        padding: var(--viking-icon-backdrop-padding, var(--viking-space-half));
+        border-radius: var(--viking-radius-lg);
+        background: var(--viking-accent-soft);
+        color: var(--viking-accent-strong);
+        box-shadow: var(--viking-shadow-sm);
+      }
+
+      :host(.viking-icon-backdrop-success) {
+        background: color-mix(in srgb, var(--viking-success) 14%, transparent);
+        color: var(--viking-success);
+      }
+
+      :host(.viking-icon-backdrop-warning) {
+        background: color-mix(in srgb, var(--viking-warning) 14%, transparent);
+        color: var(--viking-warning);
+      }
+
+      :host(.viking-icon-backdrop-danger) {
+        background: color-mix(in srgb, var(--viking-danger) 14%, transparent);
+        color: var(--viking-danger);
+      }
+
+      :host(.viking-icon-backdrop-info) {
+        background: color-mix(in srgb, var(--viking-info) 14%, transparent);
+        color: var(--viking-info);
+      }
+
+      @keyframes viking-icon-rotate {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+  ],
+})
+export class VikingIcon {
+  readonly name = input.required<VikingIconName | string>();
+  /** Explicit pixel size — overridden by sizePreset when set. */
+  readonly size = input<number | undefined>(undefined);
+  /** sm (16px) · md (20px) · lg (24px) */
+  readonly sizePreset = input<VikingIconSizePreset | null>(null);
+  /** outline (stroke) or filled (solid) */
+  readonly variant = input<VikingIconVariant>("outline");
+  /** Semantic token (accent, success, …) or any CSS color value. */
+  readonly color = input<VikingIconColorToken | string | undefined>(undefined);
+  /** Renders icon inside a padded tokenized backdrop (matches viking-icon-badge). */
+  readonly backdrop = input<boolean>(false);
+  readonly backdropTone = input<
+    "default" | "success" | "warning" | "danger" | "info"
+  >("default");
+  readonly spin = input<boolean>(false);
+
+  protected readonly resolvedName = computed(() =>
+    resolveVikingIcon(this.name()),
+  );
+
+  protected readonly resolvedSize = computed(() =>
+    resolveVikingIconSize(this.size(), this.sizePreset()),
+  );
+
+  protected readonly resolvedColor = computed(() =>
+    resolveVikingIconColor(this.color()),
+  );
+
+  protected readonly viewBox = computed(() =>
+    vikingIconViewBox(this.resolvedName()),
+  );
+
+  protected readonly isFilled = computed(() => {
+    const name = this.resolvedName();
+    if (name === "google" || name === "apple" || isIntegrationBrandIcon(name)) {
+      return false;
+    }
+    if (this.variant() === "filled") {
+      return true;
+    }
+    return VIKING_FILLED_ICON_SET.has(name);
+  });
+
+  protected readonly isDrakkarBrand = computed(() =>
+    VIKING_DRAKKAR_ICON_SET.has(this.resolvedName()),
+  );
+
+  protected readonly isIntegrationBrand = computed(() =>
+    isIntegrationBrandIcon(this.resolvedName()),
+  );
+
+  protected readonly integrationBrandSvg = computed<SafeHtml>(() => {
+    const name = this.resolvedName() as VikingIntegrationBrandName;
+    return this.sanitizer.bypassSecurityTrustHtml(
+      VIKING_INTEGRATION_BRAND_SVGS[name] ?? "",
+    );
+  });
+
+  protected readonly paths = computed<SafeHtml>(() => {
+    const name = this.resolvedName();
+    const html =
+      this.isFilled() && VIKING_ICON_FILLED_PATHS[name]
+        ? VIKING_ICON_FILLED_PATHS[name]
+        : (VIKING_ICON_PATHS[name] ?? "");
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  });
+
+  constructor(private readonly sanitizer: DomSanitizer) {}
+}
+
+/** Alias for consumers expecting VikingIconComponent. */
+export { VikingIcon as VikingIconComponent };

package/src/lib/icon-badge/icon-badge.ts

@@ -0,0 +1,87 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import {
+  VikingIconColorToken,
+  VikingIconName,
+  VikingIconSizePreset,
+} from "../../core/icons";
+
+export type VikingIconBadgeTone =
+  | "default"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+
+/**
+ * viking-icon-badge — consistent icon backdrop for empty states, callouts, and metric headers.
+ */
+@Component({
+  selector: "viking-icon-badge",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-icon-badge",
+    "[class.viking-icon-badge-success]": "tone() === 'success'",
+    "[class.viking-icon-badge-warning]": "tone() === 'warning'",
+    "[class.viking-icon-badge-danger]": "tone() === 'danger'",
+    "[class.viking-icon-badge-info]": "tone() === 'info'",
+    "[attr.aria-hidden]": 'decorative() ? "true" : null',
+  },
+  template: `
+    <viking-icon
+      [name]="icon()"
+      [size]="size()"
+      [sizePreset]="sizePreset()"
+      [color]="color()"
+      [variant]="variant()"
+    />
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: var(--viking-icon-badge-size, var(--viking-space-6));
+        height: var(--viking-icon-badge-size, var(--viking-space-6));
+        padding: var(--viking-icon-badge-padding, var(--viking-space-half));
+        box-sizing: border-box;
+        border-radius: var(--viking-radius-lg);
+        background: var(--viking-accent-soft);
+        color: var(--viking-accent-strong);
+        box-shadow: var(--viking-shadow-sm);
+      }
+
+      :host(.viking-icon-badge-success) {
+        background: color-mix(in srgb, var(--viking-success) 14%, transparent);
+        color: var(--viking-success);
+      }
+
+      :host(.viking-icon-badge-warning) {
+        background: color-mix(in srgb, var(--viking-warning) 14%, transparent);
+        color: var(--viking-warning);
+      }
+
+      :host(.viking-icon-badge-danger) {
+        background: color-mix(in srgb, var(--viking-danger) 14%, transparent);
+        color: var(--viking-danger);
+      }
+
+      :host(.viking-icon-badge-info) {
+        background: color-mix(in srgb, var(--viking-info) 14%, transparent);
+        color: var(--viking-info);
+      }
+    `,
+  ],
+})
+export class VikingIconBadge {
+  readonly icon = input.required<VikingIconName>();
+  readonly tone = input<VikingIconBadgeTone>("default");
+  readonly size = input<number | undefined>(28);
+  readonly sizePreset = input<VikingIconSizePreset | null>(null);
+  readonly color = input<VikingIconColorToken | string | undefined>(undefined);
+  readonly variant = input<"outline" | "filled">("outline");
+  readonly decorative = input<boolean>(true);
+}

package/src/lib/icon-heading/icon-heading.spec.ts

@@ -0,0 +1,32 @@
+import { Component } from "@angular/core";
+import { TestBed } from "@angular/core/testing";
+import { VikingIconHeading } from "./icon-heading";
+
+@Component({
+  imports: [VikingIconHeading],
+  template: `<viking-icon-heading icon="shield" headingLevel="h3"
+    >Tenant Isolation</viking-icon-heading
+  >`,
+})
+class HostComponent {}
+
+describe("VikingIconHeading", () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+  });
+
+  it("renders aligned icon and title", () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    const heading = fixture.nativeElement.querySelector(
+      ".viking-icon-heading",
+    ) as HTMLElement;
+    expect(heading).toBeTruthy();
+    expect(heading.querySelector(".viking-icon-heading__icon")).toBeTruthy();
+    expect(
+      heading.querySelector("h3.viking-icon-heading__title")?.textContent,
+    ).toContain("Tenant Isolation");
+  });
+});

package/src/lib/icon-heading/icon-heading.ts

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  input,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+
+/**
+ * viking-icon-heading — icon + title row with shared vertical alignment.
+ * Use in bento cards, integration tiles, and docs panels.
+ */
+@Component({
+  selector: "viking-icon-heading",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [VikingIcon],
+  host: {
+    class: "viking-icon-heading",
+    "[class.viking-icon-heading--lg]": 'size() === "lg"',
+  },
+  template: `
+    <span class="viking-icon-heading__icon" aria-hidden="true">
+      <viking-icon [name]="icon()" [size]="24" color="accent" />
+    </span>
+    @if (headingLevel() === "h2") {
+      <h2 class="viking-icon-heading__title"><ng-content /></h2>
+    } @else {
+      <h3 class="viking-icon-heading__title"><ng-content /></h3>
+    }
+  `,
+})
+export class VikingIconHeading {
+  readonly icon = input.required<VikingIconName>();
+  readonly size = input<"md" | "lg">("md");
+  readonly headingLevel = input<"h2" | "h3">("h3");
+}