@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/lib/forms.spec.ts

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

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

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

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

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

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

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