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

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);
+}

package/src/lib/button/button.ts

@@ -0,0 +1,98 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  computed,
+  input,
+  output,
+} from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import { VikingIconName } from "../../core/icons";
+import { VikingSize } from "../../core/types";
+import { registerVikingElements } from "../../web/index";
+
+registerVikingElements();
+
+export type VikingButtonVariant =
+  | "outline"
+  | "primary"
+  | "secondary"
+  | "filled"
+  | "danger"
+  | "ghost"
+  | "subtle";
+
+/**
+ * viking-button — thin Angular wrapper around `viking-button-wc`.
+ * Variants: outline (default), primary, filled, danger, ghost, subtle.
+ */
+@Component({
+  selector: "viking-button",
+  imports: [VikingIcon],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[style.pointer-events]": "disabled() ? 'none' : null",
+    "[class.viking-full]": "fullWidth()",
+    "[class.viking-compact]": "compact()",
+  },
+  template: `
+    <viking-button-wc
+      [attr.variant]="variant()"
+      [attr.size]="size() === 'base' ? null : size()"
+      [attr.type]="type()"
+      [attr.disabled]="disabled() || loading() ? '' : null"
+      [attr.aria-busy]="loading() ? 'true' : null"
+      [attr.href]="href()"
+      [attr.target]="target()"
+      [attr.aria-label]="label() || null"
+      [attr.square]="square() ? '' : null"
+      [attr.full-width]="fullWidth() ? '' : null"
+      [attr.compact]="compact() ? '' : null"
+      (viking-press)="onPress($event)"
+    >
+      @if (loading()) {
+        <viking-icon name="loader" [size]="iconSize()" [spin]="true" />
+      } @else if (icon()) {
+        <viking-icon [name]="icon()!" [size]="iconSize()" />
+      }
+      <span class="viking-btn-label"><ng-content /></span>
+      @if (iconTrailing()) {
+        <viking-icon [name]="iconTrailing()!" [size]="iconSize()" />
+      }
+      @if (kbd()) {
+        <kbd class="viking-btn-kbd">{{ kbd() }}</kbd>
+      }
+    </viking-button-wc>
+  `,
+  styleUrl: "./button.scss",
+})
+export class VikingButton {
+  readonly variant = input<VikingButtonVariant>("outline");
+  readonly size = input<VikingSize>("base");
+  readonly type = input<"button" | "submit">("button");
+  readonly icon = input<VikingIconName | null>(null);
+  readonly iconTrailing = input<VikingIconName | null>(null);
+  readonly disabled = input<boolean>(false);
+  readonly loading = input<boolean>(false);
+  readonly square = input<boolean>(false);
+  readonly fullWidth = input<boolean>(false);
+  readonly compact = input<boolean>(false);
+  readonly href = input<string | null>(null);
+  readonly target = input<string | null>(null);
+  readonly kbd = input<string | null>(null);
+  readonly label = input<string>("");
+
+  readonly pressed = output<MouseEvent>();
+
+  protected readonly iconSize = computed(() =>
+    this.size() === "base" ? 22 : 18,
+  );
+
+  protected onPress = (event: Event): void => {
+    const detail = (event as CustomEvent<MouseEvent>).detail;
+    if (detail) {
+      this.pressed.emit(detail);
+    }
+  };
+}