@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.5

package/src/lib/badge/badge.ts

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

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

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

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

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

@@ -1,119 +0,0 @@
-@use 'buttons' as btn;
-
-:host {
-  display: inline-flex;
-  align-items: center;
-}
-
-: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;
-  line-height: 1;
-}
-
-.viking-btn viking-icon,
-.viking-btn .viking-icon,
-.viking-btn [data-viking-icon] {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--viking-icon-size-md);
-  height: var(--viking-icon-size-md);
-  line-height: 1;
-  pointer-events: none;
-}
-
-.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;
-  gap: var(--viking-space-1);
-  line-height: inherit;
-  min-width: 0;
-  justify-content: center;
-  white-space: nowrap;
-}
-
-.viking-btn kbd {
-  margin-top: 0;
-}
-
-.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

@@ -1,98 +0,0 @@
-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);
-    }
-  };
-}