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

package/src/lib/avatar/avatar.ts

@@ -0,0 +1,126 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  signal,
+} from "@angular/core";
+import { VikingTone } from "../../core/types";
+
+/**
+ * viking-avatar — image or initials avatar with optional status indicator
+ *.
+ */
+@Component({
+  selector: "viking-avatar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[style.width.px]": "size()",
+    "[style.height.px]": "size()",
+    "[class.viking-avatar-square]": "square()",
+  },
+  template: `
+    @if (src() && !imageFailed()) {
+      <img [src]="src()" [alt]="name()" (error)="imageFailed.set(true)" />
+    } @else {
+      <span class="viking-avatar-initials">
+        {{ initials() }}
+      </span>
+    }
+    @if (status()) {
+      <span
+        class="viking-avatar-status"
+        [class]="'viking-status-' + status()"
+        role="status"
+      >
+        <span class="viking-visually-hidden">{{ status() }}</span>
+      </span>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-surface-alt);
+        border: 1px solid var(--viking-border);
+        overflow: visible;
+        flex-shrink: 0;
+      }
+      :host(.viking-avatar-square) {
+        border-radius: var(--viking-radius);
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: inherit;
+      }
+      .viking-avatar-initials {
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-ui);
+        font-weight: 600;
+        color: var(--viking-text);
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        user-select: none;
+      }
+      .viking-avatar-status {
+        position: absolute;
+        right: -1px;
+        bottom: -1px;
+        width: 27%;
+        height: 27%;
+        min-width: 9px;
+        min-height: 9px;
+        border-radius: var(--viking-radius-pill);
+        border: 2px solid var(--viking-surface);
+      }
+      .viking-status-success {
+        background: var(--viking-success);
+      }
+      .viking-status-warning {
+        background: var(--viking-warning);
+      }
+      .viking-status-danger {
+        background: var(--viking-danger);
+      }
+      .viking-status-accent {
+        background: var(--viking-accent);
+      }
+      .viking-status-muted {
+        background: var(--viking-text-muted);
+      }
+      .viking-visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+      }
+    `,
+  ],
+})
+export class VikingAvatar {
+  readonly src = input<string | null>(null);
+  readonly name = input<string>("");
+  readonly size = input<number>(45);
+  readonly square = input<boolean>(false);
+  readonly status = input<VikingTone | null>(null);
+
+  protected readonly imageFailed = signal(false);
+
+  protected readonly initials = computed(() => {
+    const parts = this.name().trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0) {
+      return "?";
+    }
+    const first = parts[0].charAt(0);
+    const last = parts.length > 1 ? parts[parts.length - 1].charAt(0) : "";
+    return `${first}${last}`;
+  });
+}

package/src/lib/badge/badge.ts

@@ -0,0 +1,182 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+import { VikingSize, VikingTone } from "../../core/types";
+
+/**
+ * viking-badge — status pill.
+ * Tones map to THEME.md semantic colors only.
+ */
+@Component({
+  selector: "viking-badge",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { "[class]": "hostClass()" },
+  template: `
+    @if (icon()) {
+      <viking-icon [name]="icon()!" [size]="16" />
+    }
+    <ng-content />
+    @if (removable()) {
+      <button
+        type="button"
+        class="viking-badge-remove"
+        aria-label="Remove"
+        (click)="removed.emit()"
+      >
+        <viking-icon name="x" [size]="14" />
+      </button>
+    }
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--viking-space-half);
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size-xs);
+        font-weight: var(--viking-font-weight-semibold);
+        letter-spacing: var(--viking-letter-spacing-wide);
+        line-height: var(--viking-line-height-snug);
+        padding: var(--viking-space-half) var(--viking-space-1);
+        border-radius: var(--viking-radius-pill);
+        border: 1px solid var(--viking-border);
+        background: var(--viking-surface-alt);
+        color: var(--viking-text);
+        white-space: nowrap;
+        transition: var(--viking-transition-interactive);
+        box-shadow: var(--viking-shadow-xs);
+      }
+      :host(.viking-badge-sm) {
+        padding: 0 var(--viking-space-1);
+        font-size: var(--viking-font-size-2xs);
+      }
+      :host(.viking-badge-accent) {
+        background: var(--viking-accent);
+        border-color: color-mix(
+          in srgb,
+          var(--viking-accent) 80%,
+          var(--viking-black)
+        );
+        color: var(--viking-accent-content);
+        box-shadow: var(--viking-shadow-sm);
+      }
+      :host(.viking-badge-secondary) {
+        background: color-mix(
+          in srgb,
+          var(--viking-accent-secondary) 16%,
+          var(--viking-surface)
+        );
+        border-color: color-mix(
+          in srgb,
+          var(--viking-accent-secondary) 55%,
+          transparent
+        );
+        color: var(--viking-accent-secondary);
+      }
+      :host(.viking-badge-success) {
+        background: color-mix(
+          in srgb,
+          var(--viking-success) 16%,
+          var(--viking-surface)
+        );
+        border-color: color-mix(
+          in srgb,
+          var(--viking-success) 55%,
+          transparent
+        );
+        color: var(--viking-success);
+      }
+      :host(.viking-badge-warning) {
+        background: color-mix(
+          in srgb,
+          var(--viking-warning) 18%,
+          var(--viking-surface)
+        );
+        border-color: color-mix(
+          in srgb,
+          var(--viking-warning) 55%,
+          transparent
+        );
+        color: var(--viking-warning);
+      }
+      :host(.viking-badge-danger) {
+        background: color-mix(
+          in srgb,
+          var(--viking-danger) 14%,
+          var(--viking-surface)
+        );
+        border-color: color-mix(in srgb, var(--viking-danger) 50%, transparent);
+        color: var(--viking-danger-text);
+      }
+      :host(.viking-badge-info) {
+        background: color-mix(
+          in srgb,
+          var(--viking-info) 14%,
+          var(--viking-surface)
+        );
+        border-color: color-mix(in srgb, var(--viking-info) 50%, transparent);
+        color: var(--viking-info);
+      }
+      :host(.viking-badge-muted) {
+        color: var(--viking-text-muted);
+        background: var(--viking-surface);
+        border-color: var(--viking-border-subtle);
+      }
+      .viking-badge-remove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--viking-touch-target-comfort);
+        min-height: var(--viking-touch-target-comfort);
+        border: none;
+        background: transparent;
+        color: currentColor;
+        cursor: pointer;
+        padding: var(--viking-space-half);
+        border-radius: var(--viking-radius-pill);
+        transition: var(--viking-transition-interactive);
+        margin-left: calc(var(--viking-space-half) * -1);
+        position: relative;
+      }
+      .viking-badge-remove::before {
+        content: "";
+        position: absolute;
+        inset: 50%;
+        width: var(--viking-touch-target-min);
+        height: var(--viking-touch-target-min);
+        transform: translate(-50%, -50%);
+      }
+      .viking-badge-remove:hover {
+        background: color-mix(in srgb, currentColor 12%, transparent);
+      }
+      .viking-badge-remove:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+      .viking-badge-remove:active {
+        transform: scale(var(--viking-state-active-scale));
+      }
+    `,
+  ],
+})
+export class VikingBadge {
+  readonly tone = input<VikingTone | "neutral">("neutral");
+  readonly size = input<VikingSize>("base");
+  readonly icon = input<VikingIconName | null>(null);
+  readonly removable = input<boolean>(false);
+
+  readonly removed = output<void>();
+
+  protected readonly hostClass = computed(() => ({
+    [`viking-badge-${this.tone()}`]: this.tone() !== "neutral",
+    "viking-badge-sm": this.size() !== "base",
+  }));
+}

package/src/lib/bar/bar.ts

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+
+/** viking-bar — vertical bar for mock charts and decorative grids. */
+@Component({
+  selector: "viking-bar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: "viking-bar",
+    "[style.--viking-bar-height.%]": "height()",
+  },
+  template: "",
+  styles: [
+    `
+      :host {
+        display: block;
+        flex: 1;
+        height: calc(var(--viking-bar-height, 50) * 1%);
+        background: linear-gradient(
+          180deg,
+          var(--viking-accent),
+          var(--viking-accent-strong, var(--viking-info))
+        );
+        border-radius: 4px 4px 0 0;
+        opacity: 0.85;
+      }
+    `,
+  ],
+})
+export class VikingBar {
+  readonly height = input<number>(50);
+}

package/src/lib/brand/brand.ts

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+
+/**
+ * viking-brand — logo + wordmark lockup.
+ * Project a custom logo (img/svg) or fall back to a monogram tile.
+ */
+@Component({
+  selector: "viking-brand",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [VikingIcon],
+  template: `
+    @if (logoSrc()) {
+      <img
+        class="viking-brand-logo"
+        [src]="logoSrc()"
+        [alt]="name() + ' logo'"
+      />
+    } @else {
+      <viking-icon
+        name="drakkar"
+        [size]="28"
+        color="accent"
+        class="viking-brand-mark-icon"
+      />
+    }
+    <span class="viking-brand-name">{{ name() }}</span>
+    <ng-content />
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        font-family: var(--viking-font-family);
+        color: var(--viking-text);
+        text-decoration: none;
+      }
+      .viking-brand-logo {
+        height: var(--viking-space-3);
+        width: auto;
+      }
+      .viking-brand-mark-icon {
+        color: var(--viking-accent);
+        flex-shrink: 0;
+      }
+      .viking-brand-name {
+        font-weight: 700;
+        font-size: var(--viking-font-size-ui);
+        letter-spacing: var(--header-letter-spacing, -0.02em);
+        white-space: nowrap;
+      }
+    `,
+  ],
+})
+export class VikingBrand {
+  readonly name = input.required<string>();
+  readonly logoSrc = input<string | null>(null);
+}

package/src/lib/breadcrumbs/breadcrumbs.ts

@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+
+export interface VikingBreadcrumb {
+  label: string;
+  href?: string;
+}
+
+/**
+ * viking-breadcrumbs — hierarchy navigation.
+ */
+@Component({
+  selector: "viking-breadcrumbs",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <nav aria-label="Breadcrumb">
+      <ol class="viking-breadcrumbs">
+        @for (item of items(); track item.label; let last = $last) {
+          <li class="viking-breadcrumb">
+            @if (item.href && !last) {
+              <a [href]="item.href">{{ item.label }}</a>
+            } @else {
+              <span [attr.aria-current]="last ? 'page' : null">{{
+                item.label
+              }}</span>
+            }
+            @if (!last) {
+              <viking-icon name="chevron-right" [size]="16" />
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `,
+  styles: [
+    `
+      .viking-breadcrumbs {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--viking-space-1);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        font-family: var(--viking-font-family);
+        font-size: var(--viking-font-size);
+      }
+      .viking-breadcrumb {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--viking-space-1);
+        color: var(--viking-text-muted);
+      }
+      .viking-breadcrumb a {
+        color: var(--viking-text-muted);
+        text-decoration: none;
+        border-bottom: 1px solid transparent;
+        padding: var(--viking-space-half) 0;
+        transition: var(--viking-transition-interactive);
+      }
+      .viking-breadcrumb a:hover {
+        color: var(--viking-accent-strong);
+        border-bottom-color: var(--viking-accent-strong);
+      }
+      .viking-breadcrumb a:focus-visible {
+        color: var(--viking-accent-strong);
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+        border-radius: var(--viking-radius-xs);
+      }
+      .viking-breadcrumb span[aria-current="page"] {
+        color: var(--viking-text);
+        font-weight: var(--viking-font-weight-semibold);
+      }
+    `,
+  ],
+})
+export class VikingBreadcrumbs {
+  readonly items = input.required<VikingBreadcrumb[]>();
+}

package/src/lib/button/button-group.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+
+/**
+ * viking-button-group — fuses buttons with shared borders
+ *.
+ */
+@Component({
+  selector: "viking-button-group",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { role: "group" },
+  template: `<ng-content />`,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        border-radius: var(--viking-radius);
+        box-shadow: var(--viking-shadow-sm);
+        overflow: hidden;
+      }
+      :host ::ng-deep viking-button:not(:first-child) .viking-btn {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        margin-left: -1px;
+      }
+      :host ::ng-deep viking-button:not(:last-child) .viking-btn {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      :host ::ng-deep viking-button .viking-btn {
+        box-shadow: none;
+        min-width: 0;
+      }
+      :host ::ng-deep viking-button .viking-btn:hover,
+      :host ::ng-deep viking-button .viking-btn:focus-visible {
+        z-index: 1;
+      }
+    `,
+  ],
+})
+export class VikingButtonGroup {}

package/src/lib/button/button.scss

@@ -0,0 +1,96 @@
+@use 'buttons' as btn;
+
+:host {
+  display: inline-flex;
+}
+
+:host(.viking-full) {
+  display: flex;
+
+  .viking-btn {
+    @include btn.viking-btn-full;
+  }
+}
+
+:host(.viking-compact) .viking-btn {
+  @include btn.viking-btn-compact;
+}
+
+.viking-btn {
+  @include btn.viking-btn-base;
+}
+
+.viking-sm {
+  @include btn.viking-btn-size-sm;
+}
+
+.viking-xs {
+  @include btn.viking-btn-size-xs;
+}
+
+.viking-square {
+  width: var(--viking-control-height);
+  min-width: var(--viking-control-height);
+  padding: 0;
+
+  &.viking-sm {
+    width: var(--viking-control-height-sm);
+    min-width: var(--viking-control-height-sm);
+  }
+
+  &.viking-xs {
+    width: var(--viking-control-height-xs);
+    min-width: var(--viking-control-height-xs);
+  }
+
+  .viking-btn-label {
+    display: none;
+  }
+}
+
+.viking-outline {
+  @include btn.viking-btn-outline;
+}
+
+.viking-primary {
+  @include btn.viking-btn-primary;
+}
+
+.viking-secondary {
+  @include btn.viking-btn-secondary;
+}
+
+.viking-filled {
+  @include btn.viking-btn-filled;
+}
+
+.viking-danger {
+  @include btn.viking-btn-danger;
+}
+
+.viking-ghost {
+  @include btn.viking-btn-ghost;
+}
+
+.viking-subtle {
+  @include btn.viking-btn-subtle;
+}
+
+.viking-btn-label {
+  display: inline-flex;
+  align-items: center;
+  line-height: inherit;
+}
+
+.viking-btn-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;
+  margin-left: var(--viking-space-half);
+  font-weight: var(--viking-font-weight-medium);
+}