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

package/src/lib/loading-overlay/loading-overlay.ts

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingSpinner } from "../spinner/spinner";
+
+/**
+ * viking-loading-overlay — blocks interaction with a centered spinner.
+ * Use on cards, panels, or full-page surfaces during async operations.
+ */
+@Component({
+  selector: "viking-loading-overlay",
+  imports: [VikingSpinner],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: "status",
+    "aria-live": "polite",
+    "[attr.aria-label]": "label()",
+    "[class.viking-loading-overlay-full]": "full()",
+  },
+  template: `
+    <div class="viking-loading-overlay-backdrop" aria-hidden="true"></div>
+    <div class="viking-loading-overlay-content">
+      <viking-spinner [size]="spinnerSize()" [label]="label()" />
+      @if (message()) {
+        <p class="viking-loading-overlay-message">{{ message() }}</p>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: inherit;
+        animation: viking-fade-in var(--viking-duration-fast)
+          var(--viking-ease-out);
+      }
+      :host(.viking-loading-overlay-full) {
+        position: fixed;
+        z-index: var(--viking-z-overlay);
+        border-radius: 0;
+      }
+      .viking-loading-overlay-backdrop {
+        position: absolute;
+        inset: 0;
+        background: color-mix(in srgb, var(--viking-bg) 55%, transparent);
+        backdrop-filter: blur(2px);
+        border-radius: inherit;
+      }
+      .viking-loading-overlay-content {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--viking-space-1);
+        padding: var(--viking-space-2);
+      }
+      .viking-loading-overlay-message {
+        margin: 0;
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-sm);
+        color: var(--viking-text-muted);
+        text-align: center;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          animation: none;
+        }
+      }
+    `,
+  ],
+})
+export class VikingLoadingOverlay {
+  readonly label = input<string>("Loading");
+  readonly message = input<string>("");
+  readonly spinnerSize = input<number>(28);
+  readonly full = input<boolean>(false);
+}

package/src/lib/menubar/menubar.ts

@@ -0,0 +1,77 @@
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+
+/**
+ * viking-menubar — horizontal application menu bar.
+ */
+@Component({
+  selector: "viking-menubar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: "menubar",
+    class: "viking-menubar",
+  },
+  template: `<ng-content />`,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--viking-space-1);
+        padding: var(--viking-space-1);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius);
+        background: var(--viking-surface);
+        font-family: var(--viking-font-family);
+      }
+      :host ::ng-deep .viking-menubar-item,
+      :host ::ng-deep button[role="menuitem"] {
+        font-size: var(--viking-font-size-ui);
+        font-weight: 600;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        min-height: var(--viking-control-height-sm);
+        padding: 0 var(--viking-space-2);
+        border: 1px solid transparent;
+        border-radius: var(--viking-radius);
+        background: transparent;
+        color: var(--viking-text);
+        cursor: pointer;
+        transition: var(--viking-transition);
+      }
+      :host ::ng-deep .viking-menubar-item:hover,
+      :host ::ng-deep button[role="menuitem"]:hover {
+        background: var(--viking-accent-soft);
+        color: var(--viking-accent);
+      }
+      :host ::ng-deep .viking-menubar-item:focus-visible,
+      :host ::ng-deep button[role="menuitem"]:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+    `,
+  ],
+})
+export class VikingMenubar {}
+
+/**
+ * viking-menubar-item — menu item trigger for viking-menubar.
+ */
+@Component({
+  selector: "viking-menubar-item",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <button type="button" role="menuitem" class="viking-menubar-item">
+      <ng-content />
+    </button>
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+      }
+    `,
+  ],
+})
+export class VikingMenubarItem {}

package/src/lib/metric-card/metric-card.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+
+/** viking-metric-row — responsive grid row for HUD metric cards. */
+@Component({
+  selector: "viking-metric-row",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<div class="viking-metric-row hud-metrics"><ng-content /></div>`,
+})
+export class VikingMetricRow {}
+
+/** viking-metric-card — single KPI tile in a metric row. */
+@Component({
+  selector: "viking-metric-card",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-metric-card metric-card col-span-4 col-span-md-4",
+    "[class.viking-metric-card-warning]": "variant() === 'warning'",
+    "[class.warning]": "variant() === 'warning'",
+    "[class.viking-metric-card-critical]": "variant() === 'critical'",
+    "[class.critical]": "variant() === 'critical'",
+  },
+  template: `
+    <span class="viking-metric-label metric-label">{{ label() }}</span>
+    <span class="viking-metric-value metric-value"
+      ><ng-content />{{ value() }}</span
+    >
+  `,
+})
+export class VikingMetricCard {
+  readonly label = input.required<string>();
+  readonly value = input<string | number>("");
+  readonly variant = input<"default" | "warning" | "critical">("default");
+}

package/src/lib/modal/modal.ts

@@ -0,0 +1,207 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  effect,
+  input,
+  model,
+  viewChild,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-modal — dialog built on the native <dialog> element
+ *. Toggle via the `open` model.
+ */
+@Component({
+  selector: "viking-modal",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <dialog
+      #dialog
+      class="viking-modal"
+      tabindex="-1"
+      [attr.aria-label]="heading() || 'Dialog'"
+      (close)="open.set(false)"
+      (click)="onBackdropClick($event)"
+      (keydown.escape)="dismissible() && open.set(false)"
+    >
+      <div class="viking-modal-surface">
+        <header class="viking-modal-header">
+          @if (heading()) {
+            <h2 class="viking-modal-heading">{{ heading() }}</h2>
+          }
+          @if (dismissible()) {
+            <button
+              type="button"
+              class="viking-modal-close"
+              aria-label="Close dialog"
+              (click)="open.set(false)"
+            >
+              <viking-icon name="x" [size]="20" />
+            </button>
+          }
+        </header>
+        <div class="viking-modal-body"><ng-content /></div>
+        <footer class="viking-modal-footer">
+          <ng-content select="[vikingModalActions]" />
+        </footer>
+      </div>
+    </dialog>
+  `,
+  styles: [
+    `
+      .viking-modal {
+        padding: 0;
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius-lg);
+        background: var(--viking-surface);
+        color: var(--viking-text);
+        box-shadow: var(--viking-shadow-lg);
+        width: min(522px, calc(100vw - var(--viking-space-4)));
+        animation: viking-modal-in var(--viking-duration)
+          var(--viking-ease-default);
+        overflow: hidden;
+      }
+      .viking-modal::backdrop {
+        background: var(--viking-overlay-backdrop);
+        backdrop-filter: blur(8px);
+        animation: viking-backdrop-in var(--viking-duration-fast)
+          var(--viking-ease-default);
+      }
+      .viking-modal-surface {
+        display: flex;
+        flex-direction: column;
+        padding: var(--viking-space-3);
+        gap: var(--viking-space-2);
+        font-family: var(--viking-font-family);
+        position: relative;
+      }
+      .viking-modal-surface::before {
+        content: "";
+        position: absolute;
+        inset: 0 0 auto;
+        height: 1px;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          color-mix(in srgb, var(--viking-metallic-200) 22%, transparent),
+          transparent
+        );
+        pointer-events: none;
+      }
+      .viking-modal-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: var(--viking-space-2);
+        padding-bottom: var(--viking-space-1);
+        border-bottom: 1px solid var(--viking-border-subtle);
+      }
+      .viking-modal-heading {
+        margin: 0;
+        font-size: var(--viking-font-size-md);
+        font-weight: var(--viking-font-weight-bold);
+        letter-spacing: var(--viking-letter-spacing-tight);
+        color: var(--viking-text);
+        line-height: var(--viking-line-height-tight);
+      }
+      .viking-modal-close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--viking-control-height-sm);
+        height: var(--viking-control-height-sm);
+        border: 1px solid transparent;
+        background: transparent;
+        color: var(--viking-text-muted);
+        cursor: pointer;
+        padding: 0;
+        border-radius: var(--viking-radius);
+        transition: var(--viking-transition-interactive);
+        flex-shrink: 0;
+      }
+      .viking-modal-close:hover {
+        color: var(--viking-text);
+        background: var(--viking-accent-soft);
+        border-color: var(--viking-border-subtle);
+      }
+      .viking-modal-close:active {
+        transform: scale(var(--viking-state-active-scale));
+      }
+      .viking-modal-close:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-modal-body {
+        font-size: var(--viking-font-size);
+        line-height: var(--viking-line-height-relaxed);
+        color: var(--viking-text-muted);
+        animation: viking-fade-in var(--viking-duration)
+          var(--viking-ease-default);
+      }
+      .viking-modal-footer {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        align-items: center;
+        gap: var(--viking-space-2);
+        padding-top: var(--viking-space-2);
+        border-top: 1px solid var(--viking-border-subtle);
+      }
+      .viking-modal-footer:empty {
+        display: none;
+      }
+      /* Projected action wrappers keep buttons in a single slot — spread gap inside */
+      :host ::ng-deep .viking-modal-footer [vikingModalActions] {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: flex-end;
+        align-items: center;
+        gap: var(--viking-space-2);
+        width: 100%;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .viking-modal {
+          animation: none;
+        }
+        .viking-modal::backdrop {
+          animation: none;
+        }
+        .viking-modal-body {
+          animation: none;
+        }
+      }
+    `,
+  ],
+})
+export class VikingModal {
+  private readonly dialogRef =
+    viewChild.required<ElementRef<HTMLDialogElement>>("dialog");
+
+  readonly open = model<boolean>(false);
+  readonly heading = input<string>("");
+  readonly dismissible = input<boolean>(true);
+
+  constructor(host: ElementRef<HTMLElement>) {
+    effect(() => {
+      const dialog = this.dialogRef().nativeElement;
+      // showModal is unavailable during SSR; the dialog stays closed there.
+      if (typeof dialog.showModal !== "function") {
+        return;
+      }
+      if (this.open() && host.nativeElement.isConnected && !dialog.open) {
+        dialog.showModal();
+      } else if (!this.open() && dialog.open) {
+        dialog.close();
+      }
+    });
+  }
+
+  protected onBackdropClick = (event: MouseEvent): void => {
+    if (this.dismissible() && event.target === this.dialogRef().nativeElement) {
+      this.open.set(false);
+    }
+  };
+}

package/src/lib/native-select/native-select.ts

@@ -0,0 +1,124 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingSelectOption } from "../../core/types";
+import type { VikingSelectWidth } from "../select/select";
+import { vikingUid } from "../../core/uid";
+
+/**
+ * viking-native-select — styled native <select>.
+ */
+@Component({
+  selector: "viking-native-select",
+  providers: [provideVikingCva(VikingNativeSelect)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[class.viking-native-select-full]": "width() === 'full'",
+    "[class.viking-native-select-half]": "width() === 'half'",
+  },
+  template: `
+    <label
+      class="viking-native-select"
+      [class.viking-disabled]="disabled() || formDisabled()"
+    >
+      @if (label()) {
+        <span class="viking-native-select-label">{{ label() }}</span>
+      }
+      <select
+        class="viking-native-select-control"
+        [id]="selectId"
+        [disabled]="disabled() || formDisabled()"
+        [value]="value() ?? ''"
+        (change)="onSelectChange($event)"
+        (blur)="onTouched()"
+      >
+        @if (placeholder()) {
+          <option value="" disabled [selected]="!value()">
+            {{ placeholder() }}
+          </option>
+        }
+        @for (option of options(); track option.label) {
+          <option [value]="option.value" [disabled]="option.disabled">
+            {{ option.label }}
+          </option>
+        }
+      </select>
+    </label>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        min-width: 0;
+        font-family: var(--viking-font-family);
+      }
+      :host(.viking-native-select-full) {
+        width: 100%;
+      }
+      :host(.viking-native-select-half) {
+        width: 100%;
+        max-width: var(--viking-select-half-max-width, min(100%, 24rem));
+      }
+      .viking-native-select {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-1);
+      }
+      .viking-native-select-label {
+        font-size: var(--viking-font-size-ui);
+        font-weight: 700;
+        color: var(--viking-text);
+      }
+      .viking-native-select-control {
+        width: 100%;
+        min-height: var(--viking-control-height);
+        padding: 0 var(--viking-space-2);
+        font-size: var(--viking-font-size);
+        color: var(--viking-text);
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border-strong);
+        border-radius: var(--viking-radius);
+        cursor: pointer;
+        transition: var(--viking-transition);
+      }
+      .viking-native-select-control:hover:not(:disabled) {
+        border-color: var(--viking-accent-strong);
+      }
+      .viking-native-select-control:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-disabled .viking-native-select-control {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+    `,
+  ],
+})
+export class VikingNativeSelect extends VikingControl<string | number | null> {
+  readonly label = input("");
+  readonly placeholder = input("");
+  readonly options = input<VikingSelectOption[]>([]);
+  readonly disabled = input(false);
+  readonly width = input<VikingSelectWidth>("half");
+
+  readonly value = model<string | number | null>(null);
+
+  protected readonly selectId = vikingUid("viking-native-select");
+
+  writeValue(value: string | number | null): void {
+    this.value.set(value);
+  }
+
+  protected onSelectChange = (event: Event): void => {
+    const raw = (event.target as HTMLSelectElement).value;
+    const match = this.options().find((o) => String(o.value) === raw);
+    const next = (match?.value ?? raw) as string | number;
+    this.value.set(next);
+    this.onChange(next);
+  };
+}

package/src/lib/navbar/navbar.ts

@@ -0,0 +1,124 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+
+/**
+ * viking-navbar — horizontal navigation container.
+ * Compose with viking-navbar-item and any other inline content.
+ */
+@Component({
+  selector: "viking-navbar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { "[attr.aria-label]": "label()" },
+  template: `<nav class="viking-navbar" [attr.aria-label]="label()">
+    <ng-content />
+  </nav>`,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .viking-navbar {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-half);
+        flex-wrap: wrap;
+        padding: var(--viking-space-half);
+        background: color-mix(in srgb, var(--viking-surface) 96%, transparent);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius-lg);
+        box-shadow: var(--viking-shadow-sm);
+      }
+    `,
+  ],
+})
+export class VikingNavbar {
+  readonly label = input<string>("Primary");
+}
+
+/** Navigation link/button inside viking-navbar. */
+@Component({
+  selector: "viking-navbar-item",
+  imports: [VikingIcon, NgTemplateOutlet],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ng-template #content>
+      @if (icon()) {
+        <viking-icon [name]="icon()!" [size]="18" />
+      }
+      <ng-content />
+    </ng-template>
+
+    @if (href()) {
+      <a
+        class="viking-navbar-item"
+        [href]="href()"
+        [class.viking-current]="current()"
+        [attr.aria-current]="current() ? 'page' : null"
+      >
+        <ng-container *ngTemplateOutlet="content" />
+      </a>
+    } @else {
+      <button
+        type="button"
+        class="viking-navbar-item"
+        [class.viking-current]="current()"
+      >
+        <ng-container *ngTemplateOutlet="content" />
+      </button>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+      }
+      .viking-navbar-item {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        border: 1px solid transparent;
+        background: transparent;
+        color: var(--viking-text-muted);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-sm);
+        font-weight: var(--viking-font-weight-medium);
+        padding: var(--viking-space-1) var(--viking-space-1-5);
+        border-radius: var(--viking-radius);
+        text-decoration: none;
+        cursor: pointer;
+        transition: var(--viking-transition-interactive);
+        position: relative;
+      }
+      .viking-navbar-item:hover {
+        color: var(--viking-text);
+        background: var(--viking-accent-soft);
+      }
+      .viking-navbar-item:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-current {
+        color: var(--viking-text);
+        font-weight: var(--viking-font-weight-semibold);
+        background: var(--viking-accent-soft);
+      }
+      .viking-current::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: var(--viking-space-1);
+        right: var(--viking-space-1);
+        height: 2px;
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-accent);
+      }
+    `,
+  ],
+})
+export class VikingNavbarItem {
+  readonly href = input<string | null>(null);
+  readonly icon = input<VikingIconName | null>(null);
+  readonly current = input<boolean>(false);
+}