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

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

@@ -0,0 +1,120 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+import { VikingTone } from "../../core/types";
+
+/**
+ * viking-icon-text — icon aligned beside a title and optional description.
+ * Use for status rows (MFA enrolled, connected accounts, subscription state).
+ */
+@Component({
+  selector: "viking-icon-text",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-icon-text",
+    "[class.viking-icon-text--muted]": "tone() === 'muted'",
+  },
+  template: `
+    <span
+      class="viking-icon-text-icon"
+      [class]="'viking-icon-text-icon--' + tone()"
+    >
+      @if (icon()) {
+        <viking-icon [name]="icon()!" [size]="iconSize()" />
+      } @else {
+        <ng-content select="[vikingIconTextIcon]" />
+      }
+    </span>
+    <span class="viking-icon-text-body">
+      <strong class="viking-icon-text-title">{{ title() }}</strong>
+      @if (description()) {
+        <span class="viking-icon-text-desc">{{ description() }}</span>
+      } @else {
+        <ng-content select="[vikingIconTextDesc]" />
+      }
+    </span>
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--viking-space-1-5, 12px);
+        min-width: 0;
+        flex: 1;
+        font-family: var(--viking-font-family);
+      }
+
+      .viking-icon-text-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+        margin-top: 1px;
+        border-radius: var(--viking-radius-sm);
+        background: var(--viking-accent-soft);
+        color: var(--viking-text-muted);
+      }
+
+      .viking-icon-text-icon--success {
+        color: var(--viking-success);
+        background: color-mix(in srgb, var(--viking-success) 14%, transparent);
+      }
+
+      .viking-icon-text-icon--info {
+        color: var(--viking-info);
+        background: color-mix(in srgb, var(--viking-info) 14%, transparent);
+      }
+
+      .viking-icon-text-icon--warning {
+        color: var(--viking-warning);
+        background: color-mix(in srgb, var(--viking-warning) 14%, transparent);
+      }
+
+      .viking-icon-text-icon--danger {
+        color: var(--viking-danger);
+        background: color-mix(in srgb, var(--viking-danger) 14%, transparent);
+      }
+
+      .viking-icon-text-icon--accent {
+        color: var(--viking-accent-strong);
+        background: var(--viking-accent-soft);
+      }
+
+      .viking-icon-text-body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-half, 4px);
+        min-width: 0;
+        padding-top: 1px;
+      }
+
+      .viking-icon-text-title {
+        display: block;
+        font-size: var(--viking-font-size, 16px);
+        font-weight: var(--viking-font-weight-semibold, 600);
+        color: var(--viking-text);
+        line-height: var(--viking-line-height-tight, 1.25);
+      }
+
+      .viking-icon-text-desc {
+        display: block;
+        margin: 0;
+        font-size: var(--viking-font-size-sm, 14px);
+        font-weight: var(--viking-font-weight-regular, 400);
+        color: var(--viking-text-muted);
+        line-height: var(--viking-line-height-relaxed, 1.625);
+      }
+    `,
+  ],
+})
+export class VikingIconText {
+  readonly icon = input<VikingIconName | null>(null);
+  readonly title = input.required<string>();
+  readonly description = input<string>("");
+  readonly tone = input<VikingTone>("muted");
+  readonly iconSize = input<number>(16);
+}

package/src/lib/input/input.ts

@@ -0,0 +1,119 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  input,
+  model,
+  output,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+import { VikingSpinner } from "../spinner/spinner";
+import { registerVikingElements } from "../../web/index";
+import type { VikingInputWc } from "../../web/input/viking-input-wc";
+
+registerVikingElements();
+
+/**
+ * viking-input — thin Angular wrapper around `viking-input-wc`.
+ * ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-input",
+  imports: [VikingIcon, VikingSpinner],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [provideVikingCva(VikingInput)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <viking-input-wc
+      [attr.type]="type()"
+      [attr.placeholder]="placeholder()"
+      [attr.value]="value()"
+      [attr.disabled]="isDisabled() ? '' : null"
+      [attr.loading]="loading() ? '' : null"
+      [attr.clearable]="clearable() ? '' : null"
+      [attr.autocomplete]="autocomplete() || null"
+      [attr.aria-label]="label() || placeholder() || 'Text input'"
+      (input)="onWcInput($event)"
+      (blur)="onTouched()"
+      (viking-cleared)="clear()"
+    >
+      @if (icon()) {
+        <viking-icon
+          slot="leading"
+          class="viking-input-icon"
+          [name]="icon()!"
+          [size]="20"
+        />
+      }
+      @if (loading()) {
+        <viking-spinner slot="trailing" [size]="16" label="Loading input" />
+      } @else if (iconTrailing()) {
+        <viking-icon
+          slot="trailing"
+          class="viking-input-icon"
+          [name]="iconTrailing()!"
+          [size]="20"
+        />
+      }
+      @if (kbd()) {
+        <kbd slot="trailing" class="viking-input-kbd">{{ kbd() }}</kbd>
+      }
+    </viking-input-wc>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      .viking-input-icon {
+        color: var(--viking-text-muted);
+      }
+      .viking-input-kbd {
+        font-family: var(--viking-font-family-mono);
+        font-size: var(--viking-font-size-xs);
+        color: var(--viking-text-muted);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius-xs);
+        padding: 0 var(--viking-space-half);
+        line-height: 1.4;
+      }
+    `,
+  ],
+})
+export class VikingInput extends VikingControl<string> {
+  readonly value = model<string>("");
+  readonly type = input<string>("text");
+  readonly placeholder = input<string>("");
+  readonly label = input<string>("");
+  readonly icon = input<VikingIconName | null>(null);
+  readonly iconTrailing = input<VikingIconName | null>(null);
+  readonly kbd = input<string | null>(null);
+  readonly clearable = input<boolean>(false);
+  readonly loading = input<boolean>(false);
+  readonly disabled = input<boolean>(false);
+  readonly autocomplete = input<string>("");
+
+  readonly cleared = output<void>();
+
+  protected isDisabled = (): boolean => this.disabled() || this.formDisabled();
+
+  writeValue(value: string): void {
+    this.value.set(value ?? "");
+  }
+
+  protected onWcInput = (event: Event): void => {
+    const wc = event.currentTarget as VikingInputWc | null;
+    const next = wc?.value ?? this.value();
+    this.value.set(next);
+    this.onChange(next);
+  };
+
+  protected clear = (): void => {
+    this.value.set("");
+    this.onChange("");
+    this.cleared.emit();
+  };
+}

package/src/lib/kanban/kanban.ts

@@ -0,0 +1,211 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  model,
+  output,
+  signal,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingBadge } from "../badge/badge";
+import {
+  VikingKanbanCard,
+  VikingKanbanColumn,
+  VikingKanbanMove,
+} from "../../core/types";
+
+/**
+ * viking-kanban — drag & drop board.
+ * Native HTML5 drag and drop; emits `moved` and updates the `columns` model.
+ */
+@Component({
+  selector: "viking-kanban",
+  imports: [VikingIcon, VikingBadge],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="viking-kanban"
+      role="group"
+      aria-label="Kanban board"
+      tabindex="0"
+    >
+      @for (column of columns(); track column.id) {
+        <section
+          class="viking-kanban-column"
+          [attr.aria-label]="column.title"
+          [class.viking-drop-target]="dropColumnId() === column.id"
+          (dragover)="onDragOver($event, column.id)"
+          (dragleave)="dropColumnId.set(null)"
+          (drop)="onDrop($event, column.id)"
+        >
+          <header class="viking-kanban-header">
+            <span class="viking-kanban-title">{{ column.title }}</span>
+            <viking-badge size="sm">{{ column.cards.length }}</viking-badge>
+          </header>
+          <div class="viking-kanban-cards">
+            @for (card of column.cards; track card.id) {
+              <article
+                class="viking-kanban-card"
+                draggable="true"
+                [class.viking-dragging]="draggingId() === card.id"
+                (dragstart)="onDragStart(card, column.id)"
+                (dragend)="resetDrag()"
+              >
+                <div class="viking-kanban-card-header">
+                  <span class="viking-kanban-card-title">{{ card.title }}</span>
+                  <viking-icon
+                    class="viking-kanban-grip"
+                    name="grip-vertical"
+                    [size]="16"
+                  />
+                </div>
+                @if (card.description) {
+                  <p class="viking-kanban-card-text">{{ card.description }}</p>
+                }
+              </article>
+            }
+          </div>
+        </section>
+      }
+    </div>
+  `,
+  styles: [
+    `
+      .viking-kanban:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-kanban {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: minmax(234px, 1fr);
+        gap: var(--viking-space-2);
+        overflow-x: auto;
+        padding-bottom: var(--viking-space-1);
+        font-family: var(--viking-font-family);
+      }
+      .viking-kanban-column {
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius);
+        padding: var(--viking-space-1);
+        transition: var(--viking-transition);
+      }
+      .viking-drop-target {
+        border-color: var(--viking-accent);
+        background: var(--viking-accent-soft);
+      }
+      .viking-kanban-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--viking-space-1);
+        padding: var(--viking-space-1);
+      }
+      .viking-kanban-title {
+        font-size: var(--viking-font-size);
+        font-weight: 600;
+        color: var(--viking-text);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+      .viking-kanban-cards {
+        display: flex;
+        flex-direction: column;
+        gap: var(--viking-space-1);
+        min-height: var(--viking-space-4);
+      }
+      .viking-kanban-card {
+        background: var(--viking-surface);
+        border: 1px solid var(--viking-border);
+        border-radius: calc(var(--viking-radius) / 1.2);
+        box-shadow: var(--viking-shadow-sm);
+        padding: var(--viking-space-1) var(--viking-space-2);
+        cursor: grab;
+        transition: var(--viking-transition);
+      }
+      .viking-kanban-card:hover {
+        border-color: var(--viking-accent-strong);
+      }
+      .viking-dragging {
+        opacity: 0.45;
+      }
+      .viking-kanban-card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--viking-space-1);
+      }
+      .viking-kanban-card-title {
+        font-size: var(--viking-font-size);
+        font-weight: 600;
+        color: var(--viking-text);
+      }
+      .viking-kanban-grip {
+        color: var(--viking-text-muted);
+      }
+      .viking-kanban-card-text {
+        margin: 3px 0 0;
+        font-size: var(--viking-font-size);
+        color: var(--viking-text-muted);
+        line-height: 1.45;
+      }
+    `,
+  ],
+})
+export class VikingKanban {
+  readonly columns = model<VikingKanbanColumn[]>([]);
+
+  readonly moved = output<VikingKanbanMove>();
+
+  protected readonly draggingId = signal<string | null>(null);
+  protected readonly dropColumnId = signal<string | null>(null);
+
+  private dragSource: { card: VikingKanbanCard; columnId: string } | null =
+    null;
+
+  protected onDragStart = (card: VikingKanbanCard, columnId: string): void => {
+    this.dragSource = { card, columnId };
+    this.draggingId.set(card.id);
+  };
+
+  protected onDragOver = (event: DragEvent, columnId: string): void => {
+    event.preventDefault();
+    this.dropColumnId.set(columnId);
+  };
+
+  protected onDrop = (event: DragEvent, toColumnId: string): void => {
+    event.preventDefault();
+    const source = this.dragSource;
+    this.resetDrag();
+    if (!source || source.columnId === toColumnId) {
+      return;
+    }
+    this.columns.update((columns) =>
+      columns.map((column) => {
+        if (column.id === source.columnId) {
+          return {
+            ...column,
+            cards: column.cards.filter((card) => card.id !== source.card.id),
+          };
+        }
+        if (column.id === toColumnId) {
+          return { ...column, cards: [...column.cards, source.card] };
+        }
+        return column;
+      }),
+    );
+    const target = this.columns().find((column) => column.id === toColumnId);
+    this.moved.emit({
+      cardId: source.card.id,
+      fromColumnId: source.columnId,
+      toColumnId,
+      toIndex: (target?.cards.length ?? 1) - 1,
+    });
+  };
+
+  protected resetDrag = (): void => {
+    this.draggingId.set(null);
+    this.dropColumnId.set(null);
+    this.dragSource = null;
+  };
+}

package/src/lib/kbd/kbd.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+
+/**
+ * viking-kbd — keyboard hint chip.
+ */
+@Component({
+  selector: "viking-kbd",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-content />`,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-ui);
+        font-weight: 600;
+        line-height: 1.2;
+        color: var(--viking-text-muted);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        border-radius: calc(var(--viking-radius) / 2);
+        padding: 2px var(--viking-space-1);
+        min-width: 1.5rem;
+        box-shadow: inset 0 -1px 0
+          color-mix(in srgb, var(--viking-border) 65%, transparent);
+      }
+    `,
+  ],
+})
+export class VikingKbd {}

package/src/lib/label/label.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+
+/**
+ * viking-label — accessible form label.
+ */
+@Component({
+  selector: "viking-label",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <label class="viking-label" [attr.for]="htmlFor() || null">
+      <ng-content />
+      @if (required()) {
+        <span class="viking-label-required" aria-hidden="true">*</span>
+      }
+    </label>
+  `,
+  styles: [
+    `
+      .viking-label {
+        display: inline-flex;
+        align-items: center;
+        gap: calc(var(--viking-space-1) / 4);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-ui);
+        font-weight: 600;
+        color: var(--viking-text);
+        letter-spacing: 0.01em;
+        line-height: 1.3;
+      }
+      .viking-label-required {
+        color: var(--viking-accent);
+      }
+    `,
+  ],
+})
+export class VikingLabel {
+  readonly htmlFor = input<string>("");
+  readonly required = input<boolean>(false);
+}

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 {}