@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6

package/src/lib/toggle/toggle.ts

@@ -1,101 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Optional,
-  input,
-  model,
-  output,
-} from "@angular/core";
-import { VIKING_TOGGLE_GROUP, VikingToggleGroup } from "./toggle-group";
-
-/**
- * viking-toggle — pressed-state button toggle.
- */
-@Component({
-  selector: "viking-toggle",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <button
-      type="button"
-      class="viking-toggle"
-      [class.viking-pressed]="isPressed()"
-      [attr.aria-pressed]="isPressed()"
-      [disabled]="disabled()"
-      [attr.aria-label]="label() || null"
-      (click)="toggle()"
-    >
-      <ng-content />
-    </button>
-  `,
-  styles: [
-    `
-      :host {
-        display: inline-flex;
-      }
-      .viking-toggle {
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size-ui);
-        font-weight: 700;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: var(--viking-space-1);
-        min-height: var(--viking-control-height-sm);
-        min-width: var(--viking-btn-min-width, 120px);
-        padding: 0 var(--viking-space-2);
-        border: 1px solid var(--viking-border-strong);
-        border-radius: var(--viking-radius);
-        background: var(--viking-surface);
-        color: var(--viking-text);
-        cursor: pointer;
-        transition: var(--viking-transition);
-      }
-      .viking-toggle:hover:not(:disabled) {
-        border-color: var(--viking-accent-strong);
-        background: var(--viking-accent-soft);
-      }
-      .viking-toggle:focus-visible {
-        outline: var(--viking-ring-width) solid var(--viking-ring);
-        outline-offset: var(--viking-ring-offset);
-      }
-      .viking-toggle.viking-pressed {
-        background: var(--viking-accent);
-        border-color: var(--viking-accent);
-        color: var(--viking-accent-content);
-      }
-      .viking-toggle:disabled {
-        opacity: var(--viking-state-disabled-opacity);
-        cursor: not-allowed;
-      }
-    `,
-  ],
-})
-export class VikingToggle {
-  constructor(@Optional() private readonly group: VikingToggleGroup | null) {}
-
-  readonly pressed = model(false);
-  readonly value = input<string>("");
-  readonly disabled = input(false);
-  readonly label = input("");
-
-  readonly toggled = output<boolean>();
-
-  protected isPressed = (): boolean => {
-    if (this.group && this.value()) {
-      return this.group.value() === this.value();
-    }
-    return this.pressed();
-  };
-
-  protected toggle = (): void => {
-    if (this.disabled()) return;
-    if (this.group && this.value()) {
-      this.group.value.set(this.value());
-      this.toggled.emit(true);
-      return;
-    }
-    const next = !this.pressed();
-    this.pressed.set(next);
-    this.toggled.emit(next);
-  };
-}

package/src/lib/tooltip/tooltip.ts

@@ -1,119 +0,0 @@
-import {
-  DOCUMENT,
-  Directive,
-  ElementRef,
-  Inject,
-  OnDestroy,
-  input,
-} from "@angular/core";
-
-let tooltipIdCounter = 0;
-
-/**
- * vikingTooltip — attribute directive tooltip.
- * Shows on hover and keyboard focus; positions itself relative to the host.
- */
-@Directive({
-  selector: "[vikingTooltip]",
-  host: {
-    class: "viking-tooltip-host viking-focus-ring",
-    "(mouseenter)": "show()",
-    "(mouseleave)": "hide()",
-    "(focusin)": "show()",
-    "(focusout)": "hide()",
-    "(keydown.escape)": "hide()",
-    "[attr.aria-describedby]": "visible() ? tooltipId : null",
-  },
-})
-export class VikingTooltip implements OnDestroy {
-  constructor(
-    private readonly host: ElementRef<HTMLElement>,
-    @Inject(DOCUMENT) private readonly document: Document,
-  ) {}
-
-  readonly vikingTooltip = input.required<string>();
-  readonly tooltipPosition = input<"top" | "bottom" | "left" | "right">("top");
-  readonly tooltipKbd = input<string>("");
-
-  protected readonly tooltipId = `viking-tooltip-${++tooltipIdCounter}`;
-
-  private element: HTMLElement | null = null;
-
-  protected visible = (): boolean => this.element !== null;
-
-  protected show = (): void => {
-    if (this.element || !this.vikingTooltip()) {
-      return;
-    }
-    const tip = this.document.createElement("div");
-    tip.id = this.tooltipId;
-    tip.setAttribute("role", "tooltip");
-    tip.className = "viking-tooltip";
-
-    const text = this.document.createElement("span");
-    text.className = "viking-tooltip-text";
-    text.textContent = this.vikingTooltip();
-    tip.appendChild(text);
-
-    if (this.tooltipKbd()) {
-      const kbd = this.document.createElement("kbd");
-      kbd.className = "viking-tooltip-kbd";
-      kbd.textContent = this.tooltipKbd();
-      tip.appendChild(kbd);
-    }
-
-    this.document.body.appendChild(tip);
-    this.position(tip);
-    this.element = tip;
-  };
-
-  private position = (tip: HTMLElement): void => {
-    const anchor = this.host.nativeElement.getBoundingClientRect();
-    const rect = tip.getBoundingClientRect();
-    const gap =
-      parseInt(
-        getComputedStyle(this.document.documentElement).getPropertyValue(
-          "--viking-space-1",
-        ),
-        10,
-      ) || 8;
-    const edge =
-      parseInt(
-        getComputedStyle(this.document.documentElement).getPropertyValue(
-          "--viking-space-1",
-        ),
-        10,
-      ) || 8;
-
-    let left = anchor.left + anchor.width / 2 - rect.width / 2;
-    let top = anchor.top - rect.height - gap;
-
-    switch (this.tooltipPosition()) {
-      case "bottom":
-        top = anchor.bottom + gap;
-        break;
-      case "left":
-        left = anchor.left - rect.width - gap;
-        top = anchor.top + anchor.height / 2 - rect.height / 2;
-        break;
-      case "right":
-        left = anchor.right + gap;
-        top = anchor.top + anchor.height / 2 - rect.height / 2;
-        break;
-      default:
-        break;
-    }
-
-    tip.style.left = `${Math.max(edge, Math.min(left, window.innerWidth - rect.width - edge))}px`;
-    tip.style.top = `${Math.max(edge, top)}px`;
-  };
-
-  protected hide = (): void => {
-    this.element?.remove();
-    this.element = null;
-  };
-
-  ngOnDestroy(): void {
-    this.hide();
-  }
-}

package/src/lib/typography/heading.ts

@@ -1,52 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from "@angular/core";
-
-/**
- * viking-heading — consistent heading sizes.
- */
-@Component({
-  selector: "viking-heading",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    role: "heading",
-    "[attr.aria-level]": "ariaLevel()",
-    "[class]": "hostClass()",
-  },
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: block;
-        font-family: var(--viking-font-family);
-        font-weight: 600;
-        color: var(--viking-text);
-        letter-spacing: var(--header-letter-spacing, -0.02em);
-        font-size: var(--viking-font-size-ui);
-        line-height: 1.25;
-      }
-      :host(.viking-heading-sm) {
-        font-size: var(--viking-font-size-sm);
-      }
-      :host(.viking-heading-lg) {
-        font-size: var(--viking-font-size);
-      }
-      :host(.viking-heading-xl) {
-        font-size: var(--viking-font-size-lg);
-        font-weight: 700;
-      }
-    `,
-  ],
-})
-export class VikingHeading {
-  readonly size = input<"sm" | "base" | "lg" | "xl">("base");
-  readonly level = input<1 | 2 | 3 | 4>(3);
-
-  protected readonly ariaLevel = computed(() => this.level());
-  protected readonly hostClass = computed(
-    () => `viking-heading-${this.size()}`,
-  );
-}

package/src/lib/typography/text.ts

@@ -1,51 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from "@angular/core";
-
-/**
- * viking-text — body text with semantic variants.
- */
-@Component({
-  selector: "viking-text",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { "[class]": "hostClass()" },
-  template: `<ng-content />`,
-  styles: [
-    `
-      :host {
-        display: block;
-        font-family: var(--viking-font-family);
-        font-size: var(--viking-font-size);
-        line-height: 1.65;
-        color: var(--viking-text);
-      }
-      :host(.viking-text-inline) {
-        display: inline;
-      }
-      :host(.viking-text-muted) {
-        color: var(--viking-text-muted);
-      }
-      :host(.viking-text-strong) {
-        font-weight: 600;
-      }
-      :host(.viking-text-accent) {
-        color: var(--viking-accent);
-        font-weight: 500;
-      }
-    `,
-  ],
-})
-export class VikingText {
-  readonly variant = input<"default" | "muted" | "strong" | "accent">(
-    "default",
-  );
-  readonly inline = input<boolean>(false);
-
-  protected readonly hostClass = computed(() => ({
-    [`viking-text-${this.variant()}`]: this.variant() !== "default",
-    "viking-text-inline": this.inline(),
-  }));
-}

package/src/lib/uptime-bar/uptime-bar.ts

@@ -1,55 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from "@angular/core";
-
-export type VikingUptimeStatus =
-  | "operational"
-  | "partial_outage"
-  | "major_outage"
-  | "no_data";
-
-/** viking-uptime-bar — timeline bar for uptime history visualizations. */
-@Component({
-  selector: "viking-uptime-bar",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: "viking-uptime-bar",
-    "[class.viking-uptime-partial]": "status() === 'partial_outage'",
-    "[class.viking-uptime-major]": "status() === 'major_outage'",
-    "[class.viking-uptime-nodata]": "status() === 'no_data'",
-    "[attr.title]": "title()",
-  },
-  template: "",
-  styles: [
-    `
-      :host {
-        display: block;
-        width: 100%;
-        height: 100%;
-        border-radius: var(--viking-radius);
-        background: var(--viking-success);
-      }
-      :host(.viking-uptime-partial) {
-        height: 70%;
-        align-self: flex-end;
-        background: var(--viking-warning);
-      }
-      :host(.viking-uptime-major) {
-        height: 40%;
-        align-self: flex-end;
-        background: var(--viking-danger);
-      }
-      :host(.viking-uptime-nodata) {
-        background: var(--viking-text-muted);
-        opacity: 0.35;
-      }
-    `,
-  ],
-})
-export class VikingUptimeBar {
-  readonly status = input<VikingUptimeStatus>("operational");
-  readonly title = input<string>("");
-}

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

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

@@ -1,130 +0,0 @@
-.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;
-  }
-}