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

package/src/lib/verification-code-field/verification-code-field.ts

@@ -0,0 +1,149 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  signal,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { vikingUid } from "../../core/uid";
+import { VikingOtpInput } from "../otp-input/otp-input";
+
+/**
+ * viking-verification-code-field — labeled, centered OTP entry for MFA and phone verification flows.
+ */
+@Component({
+  selector: "viking-verification-code-field",
+  imports: [VikingOtpInput],
+  providers: [provideVikingCva(VikingVerificationCodeField)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-verification-code-field",
+    "[class.viking-verification-code-field-invalid]": "!!error()",
+  },
+  template: `
+    <fieldset class="viking-verification-code-fieldset">
+      @if (label()) {
+        <legend class="viking-verification-code-label" [id]="labelId">
+          {{ label() }}
+          @if (required()) {
+            <span class="viking-verification-code-required" aria-hidden="true"
+              >*</span
+            >
+          }
+        </legend>
+      }
+      <div class="viking-verification-code-control">
+        <viking-otp-input
+          [length]="length()"
+          [value]="value()"
+          (valueChange)="onValueChange($event)"
+          [disabled]="disabled() || formDisabled()"
+          [label]="label()"
+          [centered]="true"
+          (completed)="completed.emit($event)"
+        />
+      </div>
+    </fieldset>
+    @if (description() && !error()) {
+      <p class="viking-verification-code-description" [id]="descriptionId">
+        {{ description() }}
+      </p>
+    }
+    @if (error()) {
+      <p class="viking-verification-code-error" [id]="errorId" role="alert">
+        {{ error() }}
+      </p>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+        font-family: var(--viking-font-family);
+      }
+
+      :host(.viking-verification-code-field-invalid) {
+        animation: viking-shake var(--viking-duration-slow)
+          var(--viking-ease-default);
+      }
+
+      .viking-verification-code-fieldset {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        min-width: 0;
+        width: 100%;
+      }
+
+      .viking-verification-code-label {
+        display: block;
+        width: 100%;
+        margin-bottom: var(--viking-space-1);
+        padding: 0;
+        font-size: var(--viking-font-size-sm);
+        font-weight: var(--viking-font-weight-semibold);
+        color: var(--viking-text);
+        letter-spacing: var(--viking-letter-spacing-wide);
+        line-height: var(--viking-line-height-tight);
+        text-align: center;
+      }
+
+      .viking-verification-code-required {
+        color: var(--viking-danger);
+        margin-left: 2px;
+      }
+
+      .viking-verification-code-control {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+      }
+
+      .viking-verification-code-description,
+      .viking-verification-code-error {
+        margin: var(--viking-space-1) 0 0;
+        font-size: var(--viking-font-size-sm);
+        line-height: var(--viking-line-height-normal);
+        text-align: center;
+      }
+
+      .viking-verification-code-description {
+        color: var(--viking-text-muted);
+      }
+
+      .viking-verification-code-error {
+        color: var(--viking-danger-text, var(--viking-danger));
+        font-weight: var(--viking-font-weight-semibold);
+      }
+    `,
+  ],
+})
+export class VikingVerificationCodeField extends VikingControl<string> {
+  readonly length = input<number>(6);
+  readonly label = input<string>("Verification Code");
+  readonly description = input<string>("");
+  readonly error = input<string>("");
+  readonly required = input<boolean>(false);
+  readonly disabled = input<boolean>(false);
+
+  readonly completed = output<string>();
+
+  protected readonly value = signal<string>("");
+  protected readonly labelId = vikingUid("viking-verification-code-label");
+  protected readonly descriptionId = vikingUid(
+    "viking-verification-code-description",
+  );
+  protected readonly errorId = vikingUid("viking-verification-code-error");
+
+  writeValue(value: string): void {
+    this.value.set(value ?? "");
+  }
+
+  protected onValueChange = (next: string): void => {
+    this.value.set(next);
+    this.onChange(next);
+    this.onTouched();
+  };
+}

package/src/lib/whitepaper-cta/whitepaper-cta.scss

@@ -0,0 +1,130 @@
+.viking-whitepaper-cta {
+  position: relative;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: var(--viking-space-4) var(--viking-space-3);
+  border-radius: var(--viking-radius-xl);
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--viking-accent) 22%, transparent);
+  background: color-mix(in srgb, var(--viking-accent) 6%, var(--viking-surface));
+  text-align: center;
+  box-shadow: var(--viking-shadow-sm);
+  transition: var(--viking-transition-colors);
+
+  @media (min-width: 768px) {
+    padding: var(--viking-space-5) var(--viking-space-4);
+  }
+}
+
+.viking-whitepaper-cta-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.viking-whitepaper-polars-grid {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: var(--viking-space-half);
+  padding: 0 var(--viking-space-3);
+  mask-image: linear-gradient(to top, black 30%, transparent 85%);
+}
+
+.viking-bar,
+.viking-whitepaper-polars-bar {
+  display: block;
+  flex: 1;
+  max-width: 28px;
+  height: calc(var(--viking-bar-height, 50) * 1%);
+  background: var(--viking-accent);
+  border-radius: var(--viking-radius-xs) var(--viking-radius-xs) 0 0;
+  opacity: 0.75;
+}
+
+.viking-whitepaper-polars-bar {
+  animation: vikingWhitepaperBarPulse 4s var(--viking-ease-default) infinite;
+
+  @for $i from 1 through 12 {
+    &:nth-child(#{$i}) {
+      animation-delay: #{$i * 0.12}s;
+    }
+  }
+}
+
+@keyframes vikingWhitepaperBarPulse {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scaleY(1);
+  }
+  50% {
+    opacity: 0.75;
+    transform: scaleY(1.06);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .viking-whitepaper-polars-bar {
+    animation: none;
+    opacity: 0.5;
+  }
+}
+
+.viking-whitepaper-sparkline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 40%;
+  opacity: 0.65;
+}
+
+.viking-whitepaper-cta-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--viking-space-1-5);
+}
+
+.viking-whitepaper-tag {
+  font-size: var(--viking-font-size-ui);
+  font-weight: var(--viking-font-weight-bold);
+  letter-spacing: var(--viking-letter-spacing-caps);
+  color: var(--viking-accent);
+  text-transform: uppercase;
+}
+
+.viking-whitepaper-title {
+  font-size: clamp(1.375rem, 3vw, 1.75rem);
+  font-weight: var(--viking-font-weight-bold);
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: var(--viking-letter-spacing-tight);
+  color: var(--viking-text);
+  line-height: var(--viking-line-height-tight);
+}
+
+.viking-whitepaper-description {
+  color: var(--viking-text-muted);
+  margin: 0;
+  max-width: 30rem;
+  line-height: var(--viking-line-height-relaxed);
+  font-size: var(--viking-font-size);
+}
+
+.viking-whitepaper-btn {
+  margin-top: var(--viking-space-1);
+  color: var(--viking-accent-content);
+
+  &:hover,
+  &:focus-visible {
+    color: var(--viking-accent-content);
+    border-bottom-color: transparent;
+  }
+}

package/src/lib/whitepaper-cta/whitepaper-cta.ts

@@ -0,0 +1,78 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingBar } from "../bar/bar";
+import { VikingButton } from "../button/button";
+import { VikingChart } from "../chart/chart";
+import { VikingChartSeries } from "../../core/types";
+
+/**
+ * viking-whitepaper-cta — Polars-style animated research CTA with bar grid + sparkline.
+ */
+@Component({
+  selector: "viking-whitepaper-cta",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [VikingBar, VikingButton, VikingChart],
+  template: `
+    <section class="viking-whitepaper-cta" [attr.aria-labelledby]="headingId">
+      <div class="viking-whitepaper-cta-bg" aria-hidden="true">
+        <div class="viking-whitepaper-polars-grid">
+          @for (bar of barHeights; track $index) {
+            <viking-bar class="viking-whitepaper-polars-bar" [height]="bar" />
+          }
+        </div>
+        <viking-chart
+          kind="sparkline"
+          [series]="sparklineSeries"
+          label="Research activity trend"
+          class="viking-whitepaper-sparkline viking-chart-wide"
+        />
+      </div>
+
+      <div class="viking-whitepaper-cta-content">
+        <span class="viking-whitepaper-tag">{{ tag() }}</span>
+        <h2 [id]="headingId" class="viking-whitepaper-title">{{ title() }}</h2>
+        <p class="viking-whitepaper-description">{{ description() }}</p>
+        <viking-button
+          variant="primary"
+          [href]="href()"
+          [attr.target]="external() ? '_blank' : null"
+          [attr.rel]="external() ? 'noopener noreferrer' : null"
+          icon="file"
+          class="viking-whitepaper-btn"
+        >
+          {{ buttonLabel() }}
+        </viking-button>
+      </div>
+    </section>
+  `,
+  styleUrl: "./whitepaper-cta.scss",
+  styles: [
+    `
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `,
+  ],
+})
+export class VikingWhitepaperCta {
+  readonly tag = input("Research & Architecture");
+  readonly title = input("The Whitepaper");
+  readonly description = input(
+    "Event projection patterns, threat mitigation algorithms, and the architecture powering symmetrical multi-tenant pipelines.",
+  );
+  readonly buttonLabel = input("Read Whitepaper");
+  readonly href = input("/whitepaper");
+  readonly external = input(false);
+
+  protected readonly headingId = "viking-whitepaper-cta-title";
+  protected readonly barHeights = [
+    72, 45, 88, 56, 91, 38, 67, 82, 49, 76, 58, 94,
+  ];
+  protected readonly sparklineSeries: VikingChartSeries[] = [
+    {
+      name: "Research",
+      tone: "accent",
+      data: [12, 18, 15, 22, 28, 24, 32, 35, 30, 38, 42, 45],
+    },
+  ];
+}

package/src/lib/wizard/wizard.ts

@@ -0,0 +1,80 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from "@angular/core";
+import { VikingProgress } from "../progress/progress";
+
+export interface VikingWizardStep {
+  id: string;
+  label: string;
+}
+
+/**
+ * viking-wizard — multi-step modal shell with progress and action slots.
+ */
+@Component({
+  selector: "viking-wizard",
+  imports: [VikingProgress],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: "viking-wizard" },
+  template: `
+    <viking-progress [value]="progressPercent()" />
+    <p class="viking-wizard-step-label">{{ activeStep().label }}</p>
+    <div class="viking-wizard-body">
+      <ng-content />
+    </div>
+    <footer class="viking-wizard-actions">
+      <ng-content select="[vikingWizardActions]" />
+    </footer>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-2);
+        font-family: var(--viking-font-family);
+      }
+      .viking-wizard-step-label {
+        margin: 0;
+        font-size: var(--viking-font-size-sm);
+        font-weight: var(--viking-font-weight-semibold);
+        color: var(--viking-text-muted);
+        letter-spacing: var(--viking-letter-spacing-wide);
+        text-transform: uppercase;
+      }
+      .viking-wizard-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-2);
+      }
+      .viking-wizard-actions {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        gap: var(--viking-space-1);
+        padding-top: var(--viking-space-2);
+        border-top: 1px solid var(--viking-border);
+      }
+    `,
+  ],
+})
+export class VikingWizard {
+  readonly steps = input<VikingWizardStep[]>([]);
+  readonly step = input<string>("");
+
+  protected readonly activeStep = computed(
+    () =>
+      this.steps().find((item) => item.id === this.step()) ??
+      this.steps()[0] ?? { id: "", label: "" },
+  );
+
+  protected readonly progressPercent = computed(() => {
+    const steps = this.steps();
+    if (steps.length <= 1) return 100;
+    const index = steps.findIndex((item) => item.id === this.step());
+    return Math.round(((index + 1) / steps.length) * 100);
+  });
+}

package/src/public-api.ts

@@ -0,0 +1,172 @@
+/*
+ * @dataengineeringformachinelearning/viking-ui — public API surface.
+ * Viking-UI: DEML premium design system for Angular (THEME.md palette only).
+ */
+
+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";
+
+// Framework-agnostic Web Components + registration
+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";
+
+// Site-drakkar config + services (cross-surface).
+export * from "./lib/site-drakkar/site-drakkar.config";
+export * from "./lib/site-drakkar/suite-search-items";
+
+// Angular components
+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/src/tokens/series-presets.ts

@@ -0,0 +1,15 @@
+/** Fixed series palette — keep in sync with viking-tokens.json and THEME.md §8.4 */
+export const VIKING_SERIES_PRESETS = [
+  "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)",
+] as const;
+
+export const VIKING_SERIES_DEFAULT = VIKING_SERIES_PRESETS[0];
+
+export type VikingSeriesPreset = (typeof VIKING_SERIES_PRESETS)[number];